[Resolved] Elements Page Hero

Home Forums Support [Resolved] Elements Page Hero

Home Forums Support Elements Page Hero

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #705933


    I decided to start moving my page headers over to elements.

    I found I couldn’t replicate my home page header the same in elements. It had originally used the shortcode from lightweight grid columns to get it to layout the way I wanted.

    So, I decided just to take the lazy way out and use your third example for heroes in the documentation and change my design slightly to accommodate. It looks ok.

    But, using the CSS for grids has changed the way another hero element looks (my blog page header, which I converted across first a week ago).

    So, how can I get my blog header just to look normal (text centre page)? I’ve tried playing with the CSS and created a CSS style “blog-hero-content” but nothing I’ve tried so far has worked to override the .inside-page-hero settings.

    I guess what I need to do is merge both grid areas for the blog header element?

    I’m not familiar with CSS for grids so I’d be grateful for any help.

    GeneratePress 2.1.4
    GP Premium 1.7.2
    Customer Support

    Hi there,

    Not quite sure what you mean?

    Can you show me exactly what you are trying to achieve?

    The third example is quite specific and will only work if you have a background image that is focused on one side like in the example.

    Let me know 🙂


    So, by that do you mean that you can’t produce any other type of hero element design once you use the third example?

    This is my homepage where I have used it: https://tinadubinsky.com/

    This is a blog page with a different hero element where I don’t want to use the same design: https://tinadubinsky.com/sent-to-coventry/

    With the previous headers, I had a similar design to the homepage but with the picture and text on reverse sides. To achieve this, I used the shortcode from lightweight grid columns. I’m happy with the way the homepage looks now, I don’t want to change the element for this page.

    What I’m trying to achieve now, is to get the blog page back to how it looked with just text centred on the page, no images. Instead of it being to the right. And that’s what I had before I entered the CSS to get the design for the home page header.

    Customer Support

    So sounds like you just need to create a new page hero like Example 1 here and use it for the blog page?

    Or I’m missing something here?


    But the CSS for Example 3 effects it.
    I need help to work out how to reverse the CSS so it doesn’t affect other hero pages.

    In particular this CSS from example 3:

    .inside-page-hero {
    display: -ms-grid;
    display: grid;
    grid-template-areas: “left right”;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;

    Customer Support

    Hi there,

    in the Header Element – you can add a custom class to the Element Classes then you can target them like so: .my-custom-class .inside-page-hero


    Wonderful. Thanks for your help, David.

    Customer Support

    Glad we could be of help

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