Archived topic
Elements Header like on generatepress.com
3 replies · Started by Markus on April 17, 2019
Hi there,
I'm new at GeneratePress and I'm playing around a bit. I wonder how to create a header like the front page on generatepress.com?
When I take a look at the CSS then I can see a parent class called "inside-article" and inside there is the "page-hero" class. I'm not able to do something similar. The only way I can see is to add some custom html code to the Page Hero's content area. But then my header isn't responsive in a way I want.
So my question is: how to build a header with text, buttons and images like on genereatepress.com?
Would you be so kind and share how you did it?
Thanks a lot :-)
Hi there,
The site is built by Tom using Gutenberg and the HTML Block. So is very bespoke. You could create a 2 column grid in your Hero with some HTML and CSS. This would get you started:
HTML:
<div class="hero-grid grid-container">
<div class="hero-column">
<h1>Title</h1>
<div class="inline-row">
<a class="button" href="#">Button 1</a>
<a class="button" href="#">Button 2</a>
</div>
<div class="inline-row">
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>
</div>
<div class="hero-column">
<img src="url">
</div>
</div>CSS:
.hero-grid,
.inline-row {
display: flex;
}
.hero-column {
flex: 1 0 50%;
padding: 2%;
box-sizing: border-box;
}
.inline-row {
padding: 10px 0;
}
.inline-row > a, .inline-row > p {
margin-right: 1em;
}
@media (max-width: 768px) {
.hero-grid {
flex-direction: column-reverse;
}
.inline-row {
flex-direction: column;
}
}Hi David,
Thanks a lot, it works for me :)
glad to be of help.
