Home>Support>Anchoring Text on Hero Images?

Anchoring Text on Hero Images?

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi,

Is there a way to anchor the text to the bottom of the hero image? I want the text to be on the bottom of the image instead of the top, but right now it seems that I can only start the text lower on the image. Is there a way for it to vertical align to the bottom of the page?

Thanks,
Jane Ann

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Jane

    You could set the Height to say 500 and the Extra Top Padding to say 400, that’ll push your text to the bottom. I tested this now and it worked. Give it a try :)

  2. 6 years, 3 months ago jchien

    Hi Andrew,

    I tried this, but the problem is that when the window sizes down the text falls off the image and the buttons cannot be seen. Also I don’t want the text to run into the picture so I’d rather it be closer to the bottom.

  3. 6 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Jane

    Do you have a public URL where we can take a look at what’s going on?

  4. 6 years, 3 months ago jchien

    I do not right now. The site I’m working on is still in development.

  5. 6 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Sure, no problem. Here is an example: https://demo.siteorigin.com/corp/hero-padding/.

    Here is an export of the page if you’d like to test it out: https://siteorigin.com/wp-content/uploads/2019/04/hero-padding.json.zip. Unzip the file, the JSON file can then be imported via Page Builder > Layouts > Import/Export. Hope that helps.

  6. 6 years, 3 months ago jchien

    Hi Andrew,

    What happens if you have a sentence under Heading One. Can you put this in smaller font under Heading One:
    “Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    [Button]”

  7. 6 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    https://demo.siteorigin.com/corp/hero-padding/

    As more content is added, less top padding should be set. That works on my iPhone 10 screen too.

    There isn’t a setting for the button top margin. To get those items closer together you could use Custom CSS to change the button top margin. The SiteOrigin CSS visual editor could help with that if you wanted to change that padding and don’t normally work with CSS.

    You could also shift over to a plugin like Smart Slider 3.

  8. 6 years, 3 months ago jchien

    Ok thank you.

  9. 6 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    For sure :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More