[Resolved] Need help configuring Page Hero

Home Forums Support [Resolved] Need help configuring Page Hero

Home Forums Support Need help configuring Page Hero

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1639873
    John

    I’ve started the process of trying to convert my existing site, built in Divi, to GeneratePress. (I want to do this now, before I have too many posts, since I know I’ll need to manually copy and paste all the content.)

    I’m starting with the home page and have hit a roadblock at Step 1. πŸ™‚ On my current site (linked below in the private area), I have a hero image with a slider that displays some text. (This uses Slider Revolution.) I don’t want a slider but I would like to display basically the same thing in non-sliding form: my background image, three lines of text, and some color overlay under the text to make it more visible.

    If you check out the link to my dev site, you’ll see how far I’ve gotten. The whole image is not displaying; it only displays under where I have content. How can I specify that the full image displays? And how can I position my text and overlay so that it’s in the right spot? Thanks.

    #1639975
    John

    This doesn’t seem to be getting a reply, so let me rephrase in case my original question wasn’t GP-specific enough: when using a Header element to display a full-width page hero image, what do I need to do to make the entire image display? Currently, I’m only seeing the top part of the background image.

    #1640000
    Ying
    Staff
    Customer Support

    Hi John,

    You could try this CSS for desktop, adjust the numbers:

    @media (min-width: 769px) {
        .inside-page-hero h1 {
            margin-left: auto;
            width: 50%;
            font-size: 70px;
            line-height: 1.5;
            padding: 80px;
            background-color: rgb(0, 0,0, 0.5); /*replace it with your color*/
        }
    }

    And this for mobile, you could adjust the numbers:

    @media (max-width: 768px) {
        .inside-page-hero h1 {
            margin-left: auto;
            width: 50%;
            font-size: 20px;
            line-height: 1.5;
            background-color: rgb(0, 0,0, 0.5); /*replace it with your color*/
            padding-bottom: 50px;
            padding-left: 20px;
            padding-top: 50px;
        }
    }

    But I do recommend to use block element and Generateblocks instead of hook element if you are not familiar with code. Block element is like the visual version of hook element, paddings colors typography etc. are easier to control in that way.
    https://docs.generatepress.com/article/block-element-overview/

    Let me know πŸ™‚

    #1640020
    John

    That worked great; thank you very much!

    #1642286
    Ying
    Staff
    Customer Support

    No problem John πŸ™‚

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