[Resolved] Valign title or text to the bottom of hero page with full width and transparency

Home Forums Support Valign title or text to the bottom of hero page with full width and transparency

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1305684
    manteniendo

    Hi,

    About this webpage: http://www.manteniendo.com/sobre-mi/

    I want to include the title “Sobre mi” in the Page Hero with some transparency, just like the navigation bar but to the bottom. Now is inserted with your Headline generateblock but I don’t like, I prefer to have it melt with the picture.

    I’ve tried adding padding and margin at a <p> and

    blocks inside the pagehero element but doing that screwed completely how the picture was shown in the pagehero.

    I’m not a wordpress specialist this is just my personale webpage, excuse me if this is easy to do.

    Many thanks

    PD: I suggest you to improve this support forum, searching previous questions isn’t user friendly at all.

    #1305972
    David
    Staff
    Customer Support

    Hi there,

    in your Header Element:

    1. Remove the value from the Bottom Padding and add it to the Top Padding.
    This will push any content to the bottom of the element.
    2. Add your content as a simple Paragraph eg.

    <p>Solo mi</p>

    3. Add this CSS to style your text:

    .page-hero p {
        background-color: rgba(0,0,0,0.8);
        color: #fff;
        font-size: 2em;
        font-weight: 700;
    }
    #1307036
    manteniendo

    Many thanks DAVID that worked!

    I know what was doing wrong, I’m using spanish translation and Bottom is translated Fondo, but Fondo in spanish oftenly is used like Background, now I understand why the pagehero layout was doing weird things.

    Thanks again!

    #1307460
    David
    Staff
    Customer Support

    Glad to hear that – and thanks for pointing out Bottom > Fondo > Background – that may explain a lot of confusion 🙂

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