How to create a partition in a Element Header?

Hi there,

would be easier to use a Block Element - Page Hero - see this doc and the related video:

https://docs.generatepress.com/article/block-element-page-hero/

Hello David!

Thanks a lot! I still don't know how to make them appear one next to the other (not overlapping) and same size. Any recomendations? Thanks again :)

Does the image need to fill half of the screen ? eg. from middle to the edge of the browser

Exactly that. We were triying to fit half of the header with an image half of it with a plain hackground + h2

Not the easiest of layouts - but try this:

1. Add a Container Block.
1.1 Set the background color
1.2 Give it a Background Image that is set to cover and change the position to 50vw center
1.3 Select the Dynamic Data option and set it to Featured Image
1.4 Go to the Advanced > Additional CSS Class(es) and give it a CSS Class of: hero-block

This should give you the color / background image split for desktop.

2. Add a 2 column grid block inside the container block.
2.1 In the left hand column add your Headline for the Dynamic title
2.2 In the right hand column add a GP Dynamic Image Block and set it Featured Image.
2.3 Select the grid container the image is in and in Additional CSS Class(es) add: hide-on-desktop hide-on-tablet

This will give you the basic layout.

Now for some CSS to remove the background image on desktop:

@media(max-width: 768px) {
    .gb-container.hero-block {
        background-image: none !important;
    }
}

So on mobile it should remove the background image, and display the Image added to the right hand column - which by default will be stacked below the first column

Hello David,

Thanks again for your effort. Unfortunatly the image is not appearing now, I don't understand why :( I only can see the h1 with the color background.

Can you share a link to where i can see this?

Sure, thank you: https://www.marineutextil.com/tienda-2/

Any chance i could get a temporary admin login to the site so i can see whats going on - as somethings not as it should be.
you can share those details in the Private Information field.

Yes, i'd really appreciate your help!

Ok - so the Page required a featured image to be added to it which i have done.
I also corrected the positioning and the steps in point 2 above.

You just need to add the CSS i provided here:

https://generatepress.com/forums/topic/how-to-create-a-partition-in-a-element-header/#post-1829957

Thank you very much David for your help :)

Now I am trying to make the mobile version only to appear the text with the plain background but I understand that this is something that I can only do with css, correct?

Now I am trying to make the mobile version only to appear the text with the plain background

in that case, you just need to remove the container with hide-on-desktop and hide-on-tablet classes which contains the image, and add David's CSS:

@media(max-width: 768px) {
    .gb-container.hero-block {
        background-image: none !important;
    }
}

It should be looking like this on mobile:
https://www.screencast.com/t/qXVZvbm7hD5V

Thank you guys, it works now!! :)