Fullpage cover image with no scrolling (only for the Home page)

  • Hi there,

    I would like to use the Chaplin theme (by @anlino) for my site and am wondering if there is a way to only have full page featured image on the Home/Landing page without the scroll down text/option or any page contents (just for the landing page though; the other pages should be as per normal).

    In this way, when visitors land on the home page, they can only see the full page background image with menu options up top, some text in the middle, and social media/footer options down below, but all contained within the featured image and screen.

    Can someone please help.

    • This topic was modified 4 years, 2 months ago by droyed.
    • This topic was modified 4 years, 2 months ago by droyed.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @droyed,

    It’s possible, if you set the front page to a page with the Cover Template, but you’d have to hide the elements in the hero section with custom CSS.

    — Anders

    Thread Starter droyed

    (@droyed)

    Many thanks!

    Is there a way to only do this for the home page, leaving the other pages untouched?

    Theme Author Anders Norén

    (@anlino)

    @droyed No problem! Sure, if you prefix all of the CSS selectors with .home, it’ll only target the front page elements.

    Thread Starter droyed

    (@droyed)

    Hi @anlino,

    Could you please suggest how can I simply put a Cover image on a page and make it fill/fit the screen regardless of the device?

    I have not been able to figure this out ??

    • This reply was modified 3 years, 8 months ago by droyed.
    Theme Author Anders Norén

    (@anlino)

    Hi @droyed,

    I believe a screen height setting is coming to the Cover block in future versions of WordPress. For now, you can add this CSS:

    .wp-block-cover { min-height: 100vh !important; }

    To force all cover blocks to always have screen height. If you only want it on some cover blocks, you can add a additional CSS class to the cover blocks you want to be full height (select the block and click the “Advanced” tab in the right toolbar) and target that class instead.

    — Anders

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Fullpage cover image with no scrolling (only for the Home page)’ is closed to new replies.