Archived topic
insert text to header picture
14 replies · Started by Ronja on February 27, 2019
Hello,
I followed this instructions https://docs.generatepress.com/article/header-element-overview/
and tried to insert text to the header picture, but it does not work.
As I want a specific text only for the main page I used the following code:
<h1>header text</h1>
featured background image and Location "Front Page"
Unfortunately the text appears under the header and not on the header.
Hi there,
currently you have a background image set in Customizer > Backgrounds > Header and a lot of padding in the Customizer > Layout > Header. First off you don't need either of these if you are going to use a Header Element.
Can you take a screenshot of your Header Element settings and attach the link it here?
[URL=https://www.bilder-upload.eu/bild-5feb6e-1551280540.png.html][IMG]https://www.bilder-upload.eu/thumb/5feb6e-1551280540.png[/IMG][/URL]
[URL=https://www.bilder-upload.eu/bild-366487-1551280568.png.html][IMG]https://www.bilder-upload.eu/thumb/366487-1551280568.png[/IMG][/URL]
Have you had a look at this article? And watched Tom's video:
https://docs.generatepress.com/article/header-element-overview/
That should explain how to use the Header Element for the effect you want
[URL=https://www.bilder-upload.eu/bild-7d59d2-1551280840.png.html][IMG]https://www.bilder-upload.eu/thumb/7d59d2-1551280840.png[/IMG][/URL]
[URL=https://www.bilder-upload.eu/bild-761b9d-1551280870.png.html][IMG]https://www.bilder-upload.eu/thumb/761b9d-1551280870.png[/IMG][/URL]
[URL=https://www.bilder-upload.eu/bild-00fea3-1551280883.png.html][IMG]https://www.bilder-upload.eu/thumb/00fea3-1551280883.png[/IMG][/URL]
I hope it helps. Part of it is german.
yes I watched it. I followed the instructions, but it did not work.
Can you try using the Custom Image instead of the Featured Image for the background.
I tried. Check it out on my homepage.
Now the text is completely gone and there are two picture halves on the page.
I think I´m giving up now... Have tried it for hours now.
That worked. The text is there, just hard to read as it is in Black, you can change that color in the Header Element to make it more visible.
Then go to the Customzier > Background > Header and remove the image.
Then in Customizer > Layout > Header and reduce the padding to zero.
Thank you so much. I think I got it now.
Awesome :) Looks Great.
Just to note.
If you want to create a header element for your posts or pages then the Featured Image background will work. It just doesn't work on archives like the blog.
ok great. Can I ask just one more question? How can I change the position of the text without changing the position of the picture?
Ask as many as you need :)
So you can use the Horizontal Alignment setting for left / center / right.
You can also adjust the padding. To move the content.
e.g Top Padding 300px / Bottom Padding 50px would put the text 50px from the bottom.
You can do the same for left and right alignment and you can select the mobile icon on padding so you can change it for mobile devices.
This example by Leo shows how you can force content to one side:
https://docs.generatepress.com/article/page-hero-examples/#example-3
I am making progress. Thank you again for your help. :)
You're welcome
