Adding text on the Hero Image.

Support Area Forums Finesse Adding text on the Hero Image.

This topic contains 14 replies, has 2 voices, and was last updated by  DenisK 3 years, 5 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
URL to the page in question: http://
  • Author
    Posts
  • #36443

    DenisK
    Participant

    Bill is it possible to move caption text to the right in the Home page hero image. Or is there another or better way to add text to your hero image?

    Please review attached file.

    Thank you.

    #36448

    Bill Robbins
    Moderator

    There is a hero alignment option for each slide as well as a vertical alignment option. Those are located just above the uploader for the background image of the slide.

    Take care,
    Bill

    #36452

    Bill Robbins
    Moderator

    So more than just right aligning the text, you want to limit its width, is that right? In addition to setting the alignment you can set a maximum width for the caption. Add this to the Custom CSS that’s in the Advanced section of the customizer:

    
    .hero-caption {
    	max-width: 50%;
    }
    

    Feel free to adjust the 50% to a value that works for you.

    Take care,
    Bill

    #36462

    DenisK
    Participant

    This is what I end up with. Content stay to the left. Trying to change it so it stays to the right. I changed setting hero alignment but that did not seem to help.

    .hero-caption {
    max-width: 50%;
    }

    this fixed the content overall.

    Thank you )

    #36466

    Bill Robbins
    Moderator

    Looking at this I noticed a few things. The hero is moved out from under the header and there is only one slide. Considering those two things, I would just skip using a hero on this page and use a Page Builder row to make that layout. It’ll be like creating the row below it. The hero caption just wasn’t made for this, but the page builder was made for things like this. I would just go with it.

    You can even create hero sections in a row if you ever want to. In the CSS box that’s in the Attributes section, just set the height of the row to be:

    
    height: 100vh;
    

    and that will make it the full height and width of the browser window (vh stands for viewport height).

    See how that works for you,
    Bill

    #36473

    DenisK
    Participant

    The text does look better using page builder however I cant change the height of the image. I am using a row and if I go right more the image becomes more visible and the content does not look good.

    Will you have an idea how to change height here Bill? If not I will go back to my previous settings and put a text there using something else I guess.

    Thank you.

    Attachments:
    #36475

    Bill Robbins
    Moderator

    Did you set a height on the row? That makes it basically the same as a hero. A hero has a height set and a row doesn’t by default, but you can add one. If it worked with a hero, adding a height should do the trick.

    #36476

    DenisK
    Participant

    I am not sure what goes wrong, but it is not happening for me. I might try another route. I cant make to work like a hero image.

    Thank you much for your help Bill.

    #36477

    DenisK
    Participant

    When can I set a height for that row ? I did it in attribute.

    Thank you

    #36478

    DenisK
    Participant

    As far as it goes for height for me )

    Attachments:
    #36480

    Bill Robbins
    Moderator

    It looks like height was added to the row class box instead of the CSS Styles box. If I look in the source of the home page it has this:

    
    <div class="panel-row-style-height100 height 100 fixed-background panel-row-style"
    

    which makes me think the height was added to the row class instead of the CSS styles box. See if switching that up helps.

    #36481

    Bill Robbins
    Moderator
    This reply has been marked as private.
    #36482

    DenisK
    Participant

    Lol I got it Bill.

    Finally. Thank you again for your fantastic help and support.

    Have a wonderful evening.

    #36483

    Bill Robbins
    Moderator

    Glad that did the trick Denis 🙂

    #36484

    DenisK
    Participant

    I did get finally now it is just a matter getting the text where I want it.

    Thank you again Bill.

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Adding text on the Hero Image.’ is closed to new replies.