Home>Support>Siteorigin Image – Overlaying text on an image

Siteorigin Image – Overlaying text on an image

By Jan, 8 years ago. Last reply by Jan, 8 years ago.

I am not sure about terminology, but I hope you all get the idea with the images.

I am using Siteorigin Image trying to do this.

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

  1. 8 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Jan

    Thanks for reaching out, sorry we weren’t able to reply sooner.

    We don’t currently have a widget that can produce this look out the box. If you insert a SiteOrigin Editor widget you can use the Design tab on the right to set a background image and then add to the widget, but, it isn’t exactly what you’re after. There might be another plugin available that adds a widget like this, I just haven’t used one at this stage.

  2. 8 years, 1 month ago Jan

    text overlay with hero image

    I did this with hero images, but obviously need to do some CSS, and then I might have what I am looking for.

    It would be cool of you guys if you could design a widget with this type of image link in mind, I almost just use siteorigin.

  3. 8 years, 1 month ago Jan

    I have the answer and I will post it here for anybody that needs it in the future.

    To get the grid effect, I created 2x rows, split into 3x columns each (page builder in case you didn’t know)
    In the first column, I put 2x widgets. SiteOrigin Image and Siteorigin Button, in that order.

    Note: You should make sure that the images that you want to, use have the same ratio. You can do this with a calculator and ms paint to resize and/or crop them. I did.

    SiteOrigin Image:

    1. Choose your image
    2. Image size: medium: 300×300
    3. Image allignment: center
    4. Title text: Whatever you want
    5. Title position: hide
    6. Alt text: I left it open
    7. Destination URL: Choose where you want it to go to
    8. And tick full width
    9. Under Widget Design > Design – Choose your border color

    Siteorigin Button:

    1. Enter you Button Text
    2. Choose the same destination URL as you did for your image – You want them to seem like one button at the end of all this
    3. I didn’t fiddle with the icon section but do what you need to do
    4. Width you leave blank
    5. Align: Justify
    6. Button theme: I chose flat, but once again to each his own
    7. I used the hover effect
    8. Rounding: none
    9. Padding: low
    10. Under Widget Design > Attributes – Leave Widget Class open and enter the following css code in the box
      z-index: 100;
position: relative;
bottom: 62px;
opacity: 0.9;
    11. Under Widget Design > Design – Choose your border color

    Now all you need to do for the rest of the columns is to duplicate the widgets, move them to the columns, change the image, change image URL, change button text, change button URL, and tada, you have an awesome looking text over image button.

    Sorry that I was a bit rushed at the end but I am getting hungry.

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