Overlaying body into featured image

[Norman]

I am currently using “Artisan” from the Site library.

1)
I’m not sure if I want to use the hero for posts, though. I think the h1’s aren’t readable enough with most featured images.

Instead, I’m trying to create something more like this: https://ibb.co/fCdhBhh
So, basically a standard blogpost with sidebar, but the headline + post info overlays the featured image/hero.

Is there a way to achieve this with generate press? Or can I modify the hero so it looks like this?

2)
Also, when I am using the hero on a page, it does weird things with the logo in the headline.

The menu is set to “alignment right” and “float right” in the customization menu. But as soon as I publish it, it looks like “below header” – but only if I use the hero element. How do I fix this?

[David]

Hi there,

1. It will require some CSS. If you begin by creating the Header Element to just display the featured image and link me to a post where i can see it, then i can look at the CSS required to create the overlap.

2. Edit the Header Element and on the Site Header tab check the Navigation Location is set to Default.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Norman]

Ah..that totally fixed the problem with the header. thank you!

That would be an example: https://themunichguide.de/day-trips/best-day-trips-from-munich-germany/

[David]

Hmm… one concern is that the Post title length will effect the post height and making the overlap be non-uniform.
may be simpler if we leave the post meta and title in the header element and style that to make it look like it is overlapping.

So edit your Header Element and add:

<div class="hero-content">
    {{post_date}} by {{post_author}}
    <h1>{{post_title}}</h1>
</div>

Then add this CSS:

.page-hero {
    position: relative;
}
.post-hero {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    background-color: #fff;
}

You can set the Title and meta colors using the Header Element controls.

Then we cant take a look at making it line up.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts