[Support request] Elementor Hero to GeneratePress

[Atmostfear]

Hello there,

We are in the slow process of removing Elementor from our site, and we have decided to begin with the hero sections, however, we do like the way ours are currently styled.

Main Page Hero Example (Elementor): Careers

There is a shape divider on top and bottom of the Hero, as well as an overlay.

On a regular page our Hero displays like this (GeneratePress): WordPress Developer

What we want to do, is to have that Hero (GeneratePress) the same top/bottom shape divider, as well as overlay.

Any help with this would be greatly appreciated.

[Ying]

Hi there,

Try to use a block element instead of the header element, and I would recommend using Geneareteblocks as the block editor to create the layout.
https://wordpress.org/plugins/generateblocks/

You’ll be able to add Gradients/ overlay to the containers without using CSS, for example, you’ll need 5 container blocks:
1. Container with gradients.
2. Container with background image (0.7 opacity), #000000 as background color.
3. Container with gradients.
4. Container > Grid
5. Container with gradients.

Generateblocks documentation: https://docs.generateblocks.com/
Generateblocks tutorio videos: https://www.youtube.com/generateblocks

Hope that’s helpful.

[Atmostfear]

Hello Ying,

We would prefer the HTML/CSS method, as WP Job Manager does not support Gutenberg Blocks.

Thank you.

[Leo]

We cannot provide a full custom HTML and CSS solution here unfortunately.

It’s too bad that WP Job Manager does not support Gutenberg blocks.

In this case, my recommendation would be to build the page hero using the method Ying suggested on a test page, then you can inspect the HTML and CSS using the browser developer tool and try to replicate it that way.

Or else you can try search keywords like “shape dividers HTML and CSS” on Google. There should be lots of resources on this as it’s not theme-specific.

Hope this helps.

[Author]

Posts