Home>Support>Hero Image Settings

Hero Image Settings

Hello SiteOrigin Team,

Please can you give me a sort of Crash course on how I can achieve something similar to the Siteorigin Website. Is the site using a “Full width” or “Boxed” layout?

I tried following the instructions from the video tutorial but cannot get it to cover the top of the whole page

I am using the Vantage theme.

Thank you.

URL: http://edtextain.de/

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, 5 months ago Andrew Misplon Hi, I Work Here

    Hi Mokorr

    Thanks for reaching out.

    To set a row to full width stretched give the following a try:

    1. You’ll need to be using the full width version of Vantage. Layout settings are at Appearance > Theme Settings > Layout.
    2. Edit the row concerned by clicking the wrench icon on the far right then Edit Row.
    3. Click the Layout tab on the right.
    4. Set the Row Layout to Full Width Stretched.
    5. Insert your Hero widget. Add content and a background image as required + whatever else you’d like in there.

    Hope that helps get you started.

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

    It should be ok to stick with the Boxed Layout you’re using. Give the above instructions a try.

  3. 6 years, 5 months ago Mokorr

    Thx Andrew and Thx to the whole Team at SiteOrigin.

    The Boxed Layout looks good to me too, but I would like to put an image above the Menu where I can add some buttons. With Page Builder the Hero image ends up under the Menu (as you see on the site, and I am still having problems getting the buttons right)
    Secondly, I want to make a Parallax layout. Is that possible in the Boxed Layout?
    With the Parallax, I want to be able to add some stuff in between the layout as visitors scroll downwards. Specifically like what you see on this site http://hypercreative.net
    Any further suggestions?

    Thx again and best regards.

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

    Sure :)

    If you’re using the Logo in Menu masthead option then there is no way from within the Vantage options to place content above the menu. If you use the regular masthead layout option there will be a header widget area to use that is positioned to the right of the logo above the menu.

    I’m looking into the button issue in the Hero widget and will report back ASAP.

    With regards to Parallax. I’m unable to load the Hyercreative site at the moment. SiteOrigin has a Parallax widget on the way, it hasn’t been launched yet. I had some success with a Parallax plugin and Page Builder. I wrote about it here:
    Thread: How to add parallax scrolling to a Page Builder row.

  5. 6 years, 5 months ago Mokorr

    Hi Andrew,

    Thx for the response.
    I had already seen, downloaded and tried your suggestion about the Parallax & Page Builder (yesterday to be precise) but I got what you see on my “Test Page” (see my Menu bar).

    I actually do not mind having the first image below the Menu bar, the way it is right now. I just need to add some buttons which will take visitors to, for example, a Subscrption Form/Page and maybe a “Donate” button that can also go somewhere.

    The second image below the flipping page I would like to add something like a Facebook box and some other social things/icons.

    The third bottom image, just above the Footer I would like to put a transparent “Content Form” and still in the same image area (maybe below or above the Contact Form, I will like to add a “Logo Carousel” for logos.

    Maybe there is a short css code somewhere that can sprit the Parallax with a Boxed Layout.

    Best regards
    NB: http://hypecreative.net/

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


    Try editing the row on your test page and changing the Row Layout option from Full Width Stretched to Standard or Full Width.

    When using the Logo in Menu option as you are now you can add extra buttons as menu items via the Appearance > Menus interface. It’s not possible to add Buttons widgets into the header when using this layout option.

    To add a Facebook box or other social icons you’ll need to consider where those are coming from. As part of the SiteOrigin Widgets Bundle plugin you can add our Social Icons widget. Those are just icons. If you want a Facebook wall box you’ll either need to get the code directly from the Facebook interface or use a plugin designed for this purpose.

    To add a contact form you’d need a form plugin Ninja Forms is a good option. Other options are Contact Form 7 and Gravity Forms if you’d like to go premium.

    It’s possible to create a logo carousel using a post category, featured images and our Post Loop widget. It’s a bit complicated though so I’d recommend going with a plugin solution. I’ve seen other SiteOrigin users deploy: https://wordpress.org/plugins/kiwi-logo-carousel/.

    Hope that helps.

  7. 6 years, 5 months ago Mokorr

    Thx Andrew,

    Please how about the button issue in the Hero field you said you where going to check?
    Another thing, how do I put my posts / is there a widget that I can use to arrange my posts in the format that I can control how it shows up on the site?

    Best regards

  8. 6 years, 5 months ago Mokorr

    On the website (http://hypercreative.net) when you scroll down, the menu items simply change to the pages that it belongs to, which is already out on the parallax layout.

    Any pointers on how this can be achieved with what I am working on?

    Best regards

  9. 6 years, 5 months ago Mokorr

    Facebook wall box mostly require the use of or copy the Facebook ID into a widget in a sidebar and on the main site, it presents the box with the activities from the desired Facebook page.

    Can I not do that with a widget from your bundle as well, and put it, with the help of the Page Builder, where I want it?

    Best regards

  10. 6 years, 5 months ago Mokorr

    The Post boxes I presently have are not equal, a few are taller or longer than the others.
    Any way I can have a uniform set of boxes?

    In Page Builder, how can I handle Padding so that I can move a box or reduce the height or width of a box, or actually move the whole box upwards or downwards as may be required?

    Best regards

  11. 6 years, 5 months ago Private Message - Mokorr

    This is a private message.

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

    Thanks for the wait.

    Once you’ve created a button in the Button section you need to go back to the “Content” area and insert the the button shortcode. The shortcode will render the button you’ve created. Here is what the shortcode looks like:


    Your can use the Post Loop widge,t which has a selection of templates, to display your posts. You can also use the SiteOrigin Post Carousel widget which is bundled with the Widgets Bundle plugin.

    Hyper Creative:
    http://hypercreative.net/ is still down for me. http://www.downforeveryoneorjustme.com/http://hypercreative.net/ also seems to think it’s down. Might just be a local area connection issue I’m having.

    The following is, unfortunately, not possible with the Vantage layout:

    when you scroll down, the menu items simply change to the pages that it belongs to, which is already out on the parallax layout.

    A FB plugin might create a widget. In that event you can insert the widget into Page Builder or a regular widget area. If you create the Facebook wall directly on Facebook you could then insert the code using a Text widget in combination with a plugin called Header and Footer Scripts to insert the required script. It’s much easier to use a plugin. We don’t have a plugin for anything other than a Facebook button at the moment so you’ll need to find a third-party one.

    Post Loop:
    To get the images in your post loop grid equal, please, run Regen. Thumbnails:
    It should resolve the problem.

    Page Builder Padding:
    Page Builder has row and widget controls in the right panel when editing a row or widget. Check the Layout tab when editing a row. Rows and widget height conform to the content within. There is no setting for this at the moment. Hopefully more to come in this area soon.

    Thanks for your support. Vantage is still our most customisable theme. We have a few new offerings on the way but at the moment Vantage is our most flexible theme and the closest to your demo site you linked to. Thanks for the offer. No need to donate further. We’ll do our best to help out within our support offering.

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

    Please work off the online forum and not email when reading this reply. I have updated the buttons shortcode as there was an error.

  14. 5 years, 6 months ago Hassan Moukadem

    I am reading this trying to figure out how to make my button clickable with a link on my website useing hero image with no sucess.
    The button appears but its not clickable and even if i try to add the a href from text editor or from the visual.

    i hope anyone can help

  15. 5 years, 6 months ago Greg

    Looking for something to address my own inquiry and came across this. Hassan Moukadem, under the Hero widget frame, 1st add [buttons]
    Below there, you will have the button section to make color choices, text choices, and destination link choice. No need to add any type of additional coding inside of the frame section in order to get the button to work. It is all done in the button section.

  16. 5 years, 3 months ago johnbanks

    Is there a way to ensure that images placed inside the hero widget slider don’t get “chopped off”; like with the “Bound” & “fullwidth” options in the image widget?

  17. 5 years, 3 months ago Safri Syamsudin

    I want to remove the white pages is how, http://prntscr.com/cv16p5

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