[Resolved] Overlaying body into featured image

Home Forums Support Overlaying body into featured image

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1125369
    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?

    #1125552
    David
    Staff
    Customer Support

    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.

    #1127168
    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/

    #1127624
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.