- This topic has 7 replies, 2 voices, and was last updated 4 years, 11 months ago by
Tom.
-
AuthorPosts
-
March 8, 2016 at 3:37 pm #177890
Cristina
Hi Tom
I would like to have a header with a small text with a button (for a lead magnet), like in this website,but for every post and page (not only for the homepage, like it is in the example), but I don’t know where I can edit it. I tried using the Hooks Add-on, in “After Header Content”, but it makes the background image bigger while the text appears above and in the center.
I would like to know how can I put the text and the button like in that website that uses GP, on the left side of the image, and how can I avoid the background image to get bigger.
PS. I have GP Premium
March 8, 2016 at 8:46 pm #177913Tom
Lead DeveloperLead DeveloperHi there,
You’re right that you’ll want to use GP Hooks. However you’ll want the “After Header” hook.
To get your content to look like that, you’ll need some custom HTML and CSS.
For example:
<div class="main-feature-area"> <div class="grid-container grid-parent"> <div class="grid-50"> Your left side column HTML in here </div> <div class="grid-50"> Your right side column HTML in here </div> </div> </div>
Then you would add your background image to the area using CSS:
.main-feature-area { background-image: url('URL TO YOUR BACKGROUND IMAGE'); background-repeat: no-repeat; background-size: cover; }
Depending on the size and aspect ratios of your image and feature area, the whole image might not show – this is unfortunately just the way background images work in HTML.
Hopefully this is enough to get you going π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 9, 2016 at 5:22 am #177986Cristina
Thank you very much Tom! π
March 9, 2016 at 12:19 pm #178069Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 9, 2016 at 5:24 pm #178129Cristina
One more question… it could be possible to change the background image of the header for mobile phones? Using the @media in the Style CSS or something like that?
March 9, 2016 at 10:03 pm #178151Tom
Lead DeveloperLead DeveloperYou can do something like this:
@media (max-width: 768px) { .site-header { background-image: url('URL TO YOUR IMAGE'); } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 10, 2016 at 12:30 pm #178329Cristina
Thank you so so much! π
March 10, 2016 at 4:11 pm #178370Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.