Home>Support>Landing Page: Adding widgets over image widget Or displaying full row background?

Landing Page: Adding widgets over image widget Or displaying full row background?

By Sai Suraj Kandukuri, 7 years ago. Last reply by Alex S, 7 years ago.

Hello,

I am working on a landing page for this webpage. Ideally I would use the Image widget, then place text and buttons on top of the image… but since that doesn’t seem possible, I am attempting to create a row with the image (text has been added to the png) as the row background with button widgets on top.

Is there a way to have the row background display the full image (i.e. set row layout to “full width stretched,” but display the entire height of the image)?

Thanks in advance!!

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

  1. 7 years, 1 month ago Sai Suraj Kandukuri

    One thing I tried is using the background image+text and adding 350px padding around the button widget… but I imagine the display will vary wildly based on device. These settings also allow the buttons to scroll rather than being in a fixed place on the image.

  2. 7 years, 24 days ago Alex S
    Hi, I Work Here

    Hi Sai,

    Is there a way to have the row background display the full image (i.e. set row layout to “full width stretched,” but display the entire height of the image)?

    You can do this by opening the row and heading over to the row styles sidebar. Open the Attributes settings group and set the CSS Styles field to:

    min-height: 98vh;

    Then please set your Row Layout to Full width or Full Width Stretched.

    How does that look? You can also do this by using a SiteOrigin Hero Image widget (which is included in the SiteOrigin Widgets Bundle). Once installed, please navigate to WP Admin > Plugins > SiteOrigin Widgets and activate the Hero image.

  3. 7 years, 20 days ago Sai Suraj Kandukuri

    Hi Alex,

    I tried out the Layout widget and it worked as I wanted. However, the image is zoomed in more than I want. I am trying to get the image/text to display like it does on this page, built with Elementor.

    Any suggestions?

    Thanks for your response!
    Suraj

  4. 7 years, 17 days ago Alex S
    Hi, I Work Here

    Hi Suraj,

    For the first row, unfortunately, it’s not possible to have the same effect and have the text be separate to the image itself. In other words, if you re-add the text to the image you can do that but if you don’t, this sadly isn’t possible.

    I would recommend moving the header in the relevant section to a Siteorigin Headline widget and enabling FitText. This will allow for the text to be smaller on devices.

    Regarding the second row. Please open it, and head over to the Widget Styles sidebar and open the Attributes settings group. Add the following CSS to the CSS Styles field:

    background-position: top center !important;
background-size: contain !important;
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