[Resolved] Overlay the header

Home Forums Support Overlay the header

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #938372
    Marcel

    Hello. I tried to find an idea on this forum, but I was lost. I would like to ask if is possible to recreate something similar as here: https://www.screencast.com/t/bzhu446FH or here: https://www.screencast.com/t/NhofNYMMbR8.
    Actually, I want to overlay a part of the header with other elements. Maybe using Gutenberg blocks or how? Please just guide me a little. Thank you!

    #938443
    David
    Staff
    Customer Support

    Hi there,

    so the Mellow site in our library does that:

    https://gpsites.co/mellow/

    It uses some CSS to reposition the page content:

    @media (max-width: 768px) {
        .page-hero + #page {
            margin: -75px 15px 0 15px;
        }
    }
    @media (min-width: 769px) {
        .page-hero + #page {
            margin-top: -100px;
        }
    }

    It works when there is a page hero present on the page – which you can create using the Header Element:

    https://docs.generatepress.com/article/header-element-overview/

    #938490
    Marcel

    Thank you! It works. I suppose the same is applicable for Gutenberg blocks, am I right?

    #938500
    David
    Staff
    Customer Support

    Would require a bit of CSS to make it work.
    For example the set-up used on the Mellow site it uses Customizer > Layout > Separate Containers. So the Customizer > Colors > Content > Background Color applies to the inside-article of each post creating the transparent space between them.

    On a Page the inside-article will be the entire page. So you would need to first off make the Page inside-article transparent:

    .page .inside-article {
        background-color: transparent;
    }

    Then you would need to make the blocks background a different color. Which is tricky with the current blocks available in Core. A current method would be install the Gutenberg Plugin so you have the latest Block Editor. This includes a new Group Block, which has a background color ( and very little else).

    With your content inside the Group Block – select the group block and in the Settings Sidebar > Advanced add an Additional CSS class eg. custom-block and then add this CSS to the Customizer:

    .custom-block {
        padding: 20px;
        box-sizing: border-box;
    }

    You can add whatever styles you want to style the block. If all works well then save your Columns block as a Re-useable block, then you can just add the re-useable block and convert to a regular block whenever you need to repeat it.

    #938679
    Marcel

    David, thank you!

    Two more guides, please:
    1. Do the same rules apply for the Woocommerce product categories pages?
    2. When you refer to the Gutenberg Plugin, there is a specific plugin? Or any Gutenberg plugins that offer blocks customizations?

    #938759
    David
    Staff
    Customer Support

    1. Woocommerce should behave like the blog posts – if not we can assist with some CSS.

    2. This plugin is the official WP plugin ( ignore the reviews ) – any updates or bug fixes to the core WP editor happen here first and then several weeks later they are added to core, so this is always the most up to date:

    https://en-gb.wordpress.org/plugins/gutenberg/

    There are quite a few block plugins that provide customization of there own blocks but i am not taken with any of them, their code is not particularly nice. Tom is currently developing our own plugin that will add a huge level of customization.

    #942211
    Marcel

    I’m just waiting for the plugin you told me. Do you have an ETA? I would prefer to wait and do not buy any other if Tom develops one… Thank you!

    #942213
    Leo
    Staff
    Customer Support

    No ETA yet unfortunately. It’s still in development stage and will take a lot of testing to make sure everything works.

    We will for sure announce it once we are getting close.

    GhostKit, Kadence Blocks and Stackable all have free versions which offer quite a bit of functionalities.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.