Archived topic
Header element
9 replies · Started by Sofie on December 9, 2020
Hi,
I have created a header element on my test page, using te steps on https://docs.generatepress.com/article/header-element-overview. I refer to the site https://www.capeach.eu/conversatieklas-frans. Don't focus on the rest of the page, I was trying different things out ;-)
I have played with the padding, to have my image correctly displayed on desktop and mobile. However, I wonder if there is an optimal format for this header image, because I had to put 200 px for padding top and bottom on desktop, which is rather a lot.
The text is on the image itself. Is this ok or would you recommend something else?
Thank you very much for your reply. I have searched on the forum for a solution, but didn't find any (not for this question). Do not hesitate to refer me to other pages if they do exist.
Kind regards and have a nice evening,
Sofie from Belgium
Hey Sofie,
Before we get to the header element question, can I ask if you are just starting to build your site?
I've noticed that you are using Sections + Lightweight Grid Columns which is a really outdated method to achieve your current layout.
Can I make a suggestion of using the Gutenberg editor and GenerateBlocks?
You will be able to achieve the exact same layout as you have right now but in a more modern way:
https://wordpress.org/plugins/generateblocks/
Then you wouldn't need to use a header element at all. It would just be a container block (from GB) with a background image and a headline block in it.
This is how Target was built:
https://gpsites.co/target/
You can see that the top section looks like a header element, but it's actually just using GenerateBlocks.
Let me know if you need more info :)
Hi Leo,
thanks for the suggestion. The site already consists of +/- 10 pages, not that much, but not totally new neither. If I use the Gutenberg editor and GenerateBlocks, do I have to rebuild everything? And are they free? I already have GP premium.
The Target site looks good, however I want the header image smaller. We offer services, so the images are less important. Is that possible?
Thanks in advance for your reply!
Kind regards,
Sofie
If I use the Gutenberg editor and GenerateBlocks, do I have to rebuild everything?
Unfortunately yes - I wish you started a topic earlier :(
And are they free?
Gutenberg is the default WordPress editor and GenerateBlocks is a free plugin. GB will have a paid version but you won't need it at all to build your current layout.
If you still want to stick with your current method, then I would actually recommend separating the image and the content, and just follow this instruction here:
https://docs.generatepress.com/article/page-hero-examples/#example-1
You would just need to use a background image instead of a solid background color as in the example.
If you recommend it, I will probably follow your advise :-)
However a practical question. The site is already online. What's the best way now to change everything?
Best to start a staging site - many hosting services offers this for free.
Then you can rebuild and tweak everything in the staging site, then publish it to replace your live site once it's ready :)
Thanks a lot, Leo. Your help is very useful.
Greetz
If you are going to rebuild, then try to build this section with the headline blocks from GB with icons instead of using pictures:
https://www.screencast.com/t/giyc4FcUjj
It would be better for the search result/SEO as Google cannot read pictures ;)
Great, I will dive into it tomorrow. It's already 10 PM here in Belgium.
Thanks a lot! And perhaps I will have to get back in touch ;-)
We will be here :)
