How do I activate the cover header?

Hi Kristofer,

First, thanks for letting me know about the broken link. We’ve recently restructured the Rough Pixels website, so there are a few link changes.

However, I believe this is the one you are looking for?

https://www.roughpixels.com/documentation/prologe-tutorials/front-page-header-image/

Best Regards,
Andre

..forgot this part…

For the Call to Action tutorial, the link to that one is in the left side column when you are on that tutorial page I just posted. Look for the “Front Page Call-to-Action” menu link there.

Thanks a lot, Andre!

Just one more question: I’d like to have a non-scrollable, black start page (like in the demo). But to display the cover header I have to create a page (“Start”) and use it as a static start page. But when I do that, I get the headline “Start” and a white page under the cover header image. How can I get rid of the page content, but keep the image + CTA?

Kristofer

You are very welcome.

Regarding the page and title, etc. Is that page available to view? If I understand correctly, do you just want the image and CTA as a splash page with no other element/content?

Sorry, the page is not public, and it curremnly looks different because I tried to solve the problem another way. But yes, I want just the image and CTA as a splash page.

No worries. Anyway, I have a possible solution for you, but it’s not perfect because of how that page is structured. But this might be something you can try by copying and pasting it into the Customizer’s Additional CSS tab:

.home .cover-header.bg-image {
    background-attachment: fixed;
    height: 100vh;
}

A person will still be able to scroll down the page, but when they first arrive on that page (or return to the page), the image and CTA will be full window view, right to the browser bottom edge. This will also happen in the mobile mode too (or should).

If you want to also hide the lower page elements, the title, and any content stuff there, you can also add this to the Additional CSS tab too:

.home #post-inner {
    display: none;
}

The footer will still be seen, though, when scrolling down.

Side Note: The class .home that you see in the code snippets will only apply these styles to the home page.

Thank you, I’ll try that!