Home>Blog>Add Hero Images to Your WordPress Site

Add Hero Images to Your WordPress Site

Huge, complex slider plugins are great when you want to add a huge, complex slider to your WordPress site. The problem is, that’s a lot to learn when all you want to do is add a nice simple hero image to your site.

We’re making things a lot easier with the Hero Image widget, that’s part of the latest release of the SiteOrigin Widgets Bundle. All you need to do is enter your content and add a few buttons and you’re good to go. Simplicity is what it’s all about

In this video, I’ll go over how to add a Hero Image widget to your site using Page Builder.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  1. 8 years, 8 months ago Edmund Dantes Hanilton

    Greg,

    This is so awesome. Hero Images are all the rage now. Your plugin is timely and perfect with the Call-To-Action button and headlines.

    Thanks very much for making this and for the SiteOrigin Widgets Bundle and all you do to help us make our WordPress rock!

    I wish you were here in USA so you could speak at my event Chicago Blog Week 2015 August 3-5!

    Dante

    • 8 years, 8 months ago Greg Priday
      Hi, I Work Here

      That’s the great thing about the widgets bundle, it allows us to build timely widgets like this one without adding any bloat to people’s WordPress installs. I’ll admit, we were a little behind on the hero images with this widget, but hopefully we’ll be able to jump on trends a little faster in the future – and even do a little trend setting of our own ;)

      I’ll drop you an email – there’s actually a good chance I’ll be able to make it to Chicago around then. I’ll be in the area.

  2. 8 years, 8 months ago Jason Yeaman

    Excellent work, Team Site Origin.

    I appreciate all you do for the community. Great tools, excellent UI.

    • 8 years, 8 months ago Greg Priday
      Hi, I Work Here

      Thanks Jason – we’re lucky to have a very awesome community to serve!

  3. 8 years, 8 months ago Shade Odeinde

    Hello Gregg!

    Thanks again for another GREAT addition to the widgets bundle! Thanks again for all the tools you provide us with.

    (P.S. you should be on camera more often! :-)

    • 8 years, 8 months ago Greg Priday
      Hi, I Work Here

      It’s an absolute pleasure Shade – it’ll be great if you all can get some good use out of these little additions.

      PS: You’re too kind :)

  4. 8 years, 8 months ago Max Pen

    Hey Greg,

    Awesome widget, didn’t know this is the new thing now. First time I’ve actually heard about it. Were can I read up on this trend?

    Also by providing all on this website for free how do you make a living from that? How is that viable?

    I’m just curious about that. I would understand if you prefer not to answer that question.

    Your one of the most awesome wordpress developers I know.

    • 8 years, 8 months ago Greg Priday
      Hi, I Work Here

      Hi Max – thanks for all the awesome feedback! Yeah, monetizing free products has been a challenge, but with the small dedicated team that we have here at SiteOrigin, we’ve been able to make it work.

  5. 8 years, 8 months ago Mike Singleton

    I like the Hero Image widget but if I put in a paragraph of text using the text editor the text goes all the way to the right hand side of the image with no margin. I can increase the indent on the left with the editor, but is there a way to increase the right hand margin?

    • 8 years, 8 months ago Greg Priday
      Hi, I Work Here

      You’re right Mike, there should be an adjustable left and right. I assumed that people would generally be using centred text. I’ll get on this for the next update.

  6. 8 years, 8 months ago Branike

    Greg super!
    Great work. Thank you. I wish you much success.
    Branislav.

  7. 8 years, 8 months ago Gordon Brownlee

    Excellent video and addition to Site Origin

  8. 8 years, 8 months ago Al

    Great addition! Keep up the good work guys!

  9. 8 years, 8 months ago Dave LeBlanc

    Well done, guys. You have been cranking out some superp product lately.

    At this rate Matt Mullenwig will be buying you out soon

  10. 8 years, 8 months ago R.M. Almeida

    Wow! Greg knocked this tutorial video out of the park! Awesome!

  11. 8 years, 8 months ago R.M. Almeida

    I am starting to use SiteOrigin a lot on my site, now. I expect to use it more. Greg, keep those tip videos coming! Great job!

  12. 8 years, 8 months ago Myo Win

    I’m trying to do something like this (http://nimb.ws/R8Xb4x) with Site Origin hero images feature. Can I achieve this?

  13. 8 years, 7 months ago Bill Byrd

    Having a problem with getting height.

    • 8 years, 7 months ago Dave LeBlanc

      Bill,

      This may help, the Spacer plugin. https://wordpress.org/plugins/spacer/

      I’ve found it useful for tweaking height.

      • 8 years, 7 months ago Bill Byrd - Titus 2 Partnership

        Sorry. Problem is with height of background image.

  14. 8 years, 7 months ago Dave LeBlanc

    Then try the spacer. If I understand the problem correctly, you need to add height to make the the background image show up. You can do that with text or you can do that with the spacer plugin. You will have to tweak the the amount of height required to get the height correct.

    Assuming you are using, say, an image of 500px in height, set the spacer to 500px. That should make the whole image appear.

  15. 8 years, 7 months ago Bill Byrd

    Got it. Thanks. 

    Sent from Outlook

    _____________________________

  16. 8 years, 7 months ago Afeef Ajmal

    Excellent work man, i love your plugins, you’re epic plugins makes me want to move to word-press which i’ll surely.

  17. 8 years, 6 months ago sarah

    Hi Greg,

    this is great! So helpful. Been looking for something like this for ages!

    Just wondered if i can align the font left, trying to find where abouts i can do this but struggling to see the option. Or do i have to add some css for this myself? Also is there a browser where this plugin is best to work as i get a strange overlay with the accordion style formating so the boxes when they open tend to over lay each other meaning you can’t see the options.

    Thanks!

    Sarah

  18. 8 years, 6 months ago Philip Barrington

    thankyou

  19. 8 years, 6 months ago Karen

    Hi Greg,

    this widget is great, thanks!
    But I have a small problem: I want to place 8 buttons in the centre of the big photo, but each button should be in one row…Also the buttons should have distance between each other. How can I do this? (at the moment they are all sticking together and I can not place them exactly).

    Thanks so much :-)
    Karen

  20. 8 years, 6 months ago Dave M

    Hey Greg,

    I only found SiteOrigin by chance yesterday. I wasn’t even looking for anything like this and I’m blown away by what it can do! You’ve come up with a really amazing tool and in a model that I am always advocating to my friends (if you build it, they will come!) :)

    I’ll keep experimenting, and playing, but it would be good to see SiteOrigin expand into a complete themed package where PageBuilder becomes site builder. Because what you have for a page now, really, is whole site worthy (then again, I’m now supposing you could design a page or post template the way you’d like and use that throughout the site? No idea, I’m still learning).

    Keep it up, let me learn some more and I’ll be glad to sign up to a premium support model of a tool that really let me evaluate it for all it’s strengths and weaknesses. Something you don’t get to do with paid or lite versions :)

    Cheers. Dave

  21. 8 years, 6 months ago Chook

    Freakish work you guys are doing! Loving it ;)
    Surly after a day of hard coding you guys would like a beer… or a coffee while in the zone.
    .. but I don’t see a Donate button anywhere (hint)

  22. 8 years, 5 months ago Kelly

    I’m having trouble because my hero image does not seem to resize to fit different devices. Can you help? Thanks!!! :)

  23. 8 years, 5 months ago Kelly Baxter

    Thank you so much for your quick response!!  I have already seen this video and unfortunately it did not answer my question.  I've had to manually resize my image to make it fit on the laptop computer, but when I view it on my phone or my table it does not look right.  Can you help with that?

  24. 8 years, 5 months ago Gustavo da Silva

    Amazing!

  25. 8 years, 4 months ago Marek Kurek

    Support it for polylang!

  26. 8 years, 3 months ago Tim Fraser

    This is great but I cannot get the height of my images to show correctly. I have spent hours and changed every setting numerous times… here is a url to show what I mean http://webseventy.co.uk/about-us/ please please help. Thank you

  27. 8 years, 3 months ago Dave LeBlanc

    Hi Tim.

    Issue is easily fixed. You need add some height to make the image show up. Easiest thing to do is to get the spacer plugin here:
    https://wordpress.org/plugins/spacer/ This will add the height you need to make the image show up. Works with a simple little shortcode controlled on the editor's dashboard when installed. Very simple.

  28. 8 years, 3 months ago Carolina

    Hello, i´ve been learning to use the site builder, and i wanted to use the hero image, on the home page, instead of the slider, but i dont know if that is possible, and the other question i have is that i did everything step by step in the video tutorial, but when i see at the page with the hero image it doesnt show the page with the image in the complete page, maybe im doing something wrong, could you help me? thank u!

    Carolina

  29. 8 years, 3 months ago Carolina

    it looks like any regular page width but i wonder why?
    can u help me?

  30. 8 years, 3 months ago Bill Byrd

    I tried using hero and found using google drawing works better for me.

  31. 8 years, 2 months ago mark

    thanks for your hard work, great plugin.
    if i want to use slider, can use this plugin?
    thx

  32. 8 years, 2 months ago Paul Coughlin

    Wow – only just recently found SiteOrigin – the builder and the widgets. I was a little miffed at first – after having bought builders in the past – when this seems to be one of the best I’ve seen – and free. Greg – SiteOrigin’s coding is brilliant (I know you know) – now to get this out to my clients! Thanks so much for creating this.
    Paul.

  33. 8 years, 1 month ago Asar

    The hero image isn’t responsive :/

  34. 8 years, 1 month ago Vera Schafer

    Thank you for making my job easier!

  35. 8 years, 1 month ago Khaled Omer

    The addition of your Hero Image widget is awesome!
    I thank you and the whole SiteOrigin team for the continuous contribution to the community.

  36. 8 years, 25 days ago lisa

    Would love some information about the size of the image eg pixels. The one you uploaded was 800+ what would be the best width to create images for these hero spots. ciao lisa

  37. 8 years, 5 days ago Niall Conroy

    hey that was a great tutorial. I couldn’t figure out where to click to add media. Now I can do it by clicking in the frame.

    Is there a way to edit the text font when your adding headlines in this widget?
    Or is that something to be done elsewhere? Its all new to me so slowly getting the hang of it.
    Niall

  38. 7 years, 11 months ago Anne Hutchins

    I’ve been using (my favorite) Vantage Premium and PageBuilder for over a year and this is the first time I’ve used the Hero Image in SiteOrigin Widgets. This is a great feature! (BTW, my clients prefer working with PageBuilder over Visual Composer. They like the clean, uncluttered look — less intimidating.) Anyway, thanks for creating so many useful products and providing great support, too!

  39. 7 years, 11 months ago Tina

    I am using the Sport template on Page builder. When using this template, the SiteOrigin Hero doesn’t work. It does not show the features for me to add a frame when I click to edit the picture. I tried your technique from your video, but it doesn’t give me the full image all the way across the entire screen as it does in this template. Can you please help me? Thanks.

    • 7 years, 8 months ago Anne Hutchins

      To make the image stretch across the page you’ll have to edit the row by going to Layout > Row Layout — choose Full Width Stretch.

      • 6 years, 10 months ago Sheila

        Realizing that this post is from quite some time ago, I’m wondering what the new fix is for this. These options aren’t available in “layout”. My hero image is not automatically resizing like it should and I’ve tried everything I can think of to get it to stretch across the page.

  40. 7 years, 10 months ago KayBee

    Hey…is it possible to have a full width hero image on all of my article sites with a sidebar??? The hero image should above the whole article/ whole content – below the image the page layout with content – left and sidebar – right starts

    thanks

  41. 7 years, 8 months ago Niket Agrawal

    This just made my day !! Thank you team Siteorigin !!

  42. 7 years, 6 months ago Rajnish Kumar

    It’s really cool for me!!!!!!!!!!!

    thank a lot

  43. 7 years, 6 months ago Uko A. Inyang

    Hi Greg,

    How can I add banner images of my products on my website using the Sydney Themes Plugin?

  44. 7 years, 5 months ago dani

    Sorry, I cannot change the image of Image Hero widget. In side of the element I go to “Design” on “Background image”, then I set a image upload in media stuff but the image does not appear. Any ideas? Also I cannot change the default image if I choose a prebuilt layout.

  45. 7 years, 5 months ago Safri Syamsudin

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

  46. 7 years, 3 months ago Frank

    Liked the Hero Image with the Video background. until I changed the sixe of my screen and realized it was not responsive. :-(
    Any plans on fixing that in the future?
    Thanks
    Frank

  47. 7 years, 3 months ago Ana

    Hello thank you for this information video! I am trying to figure out if I can add a hero image and make it functional with a responsive header, as in this example>> https://livetheadventure.club . I have the cheerup theme, and would like to make my homepage like this! Please let me know if this is possible if you have a minute! Thank you!

  48. 7 years, 3 months ago Bilal Haidar

    Hello,
    I am trying to use the technique above with the Vantage theme. I am failing to show the entire image I have, it is being cropped somehow. Plus, I want to make the image stretch all over the width of the page. Can you help pls? I have a public url here: http://hitcontinue.thefilingbox.com/

    Thanks,
    Bilal

  49. 7 years, 1 month ago David Crawford

    Hi…I have a 3 column page and I would like the two outer columns to remain fixed as I was going to a image and button with icon to link to other pages in the site. The centre column is with text and is the only one I want move when scrolling. Is this something that I can do?? …thank you in advance…David

  50. 7 years, 1 month ago ecole de voile de charlotte

    Hi site origine team,
    Tanks for all your amasing work! I am asker as Azar, Ana, frank and other had asked, how it’s possible to make the hero responsive like in this http://ecoledevoiledecharlotte.com/

    If you can help you will be my super hero!
    Charlotte

  51. 7 years, 1 month ago aunoralurra

    Hi Greg,
    I’m trying to set a hero image with the suggested plugins but I’m not able to see the full frame.
    Sorry I’m new to all this so I might be missing something obvious

  52. 7 years, 1 month ago Gordon Brownlee

    Hi Anne
    Thanks for this

  53. 7 years, 1 month ago Quan Phan

    Handsome man and thank for this video

  54. 7 years, 16 days ago Mike

    Hi,
    Awesome and powerful tool.

    In your video the text in the editor is black but the text in actual page is white. How did you do that?

    I know i can change the text color to white in the editor and it shows on the page as white, but then the text is difficult to edit.

    Cheers,
    Mike

    • 7 years, 16 days ago Mike

      Never Mind… I figured it out. (Dang.. .rookie mistake)

  55. 7 years, 11 days ago DorcasW

    How do I add my photograph to my site?
    That is important to me. And I believe my personal image should be on my site , in my profile and otherwise.

  56. 7 years, 10 days ago styves

    Hello (I’m from FRANCE)
    I use “IMAGE HERO” since not long
    I have a problem :
    Whatever the choice (Right – Left – Center)
    The BUTTON is always on “left”

    Do you have an answer please ?

    Thank you

  57. 7 years, 5 days ago Jon Loveless

    Your videos are very well done, helpful and fun to watch. Thanks.

  58. 7 years, 4 days ago Paul

    I’m having trouble because my hero image does not seem to resize to fit different devices. Can you help? Thanks!!! :)

    Don’t know if this has been replied to yet, my images are large and look great on the website but when I go to the mobile platform the width gets cut and the height remains the same, which makes it look like rubbish : /
    If the mobile platform kept the same dimensions and fit to the screen that would be perfect!

    Thank you for any help!!

  59. 6 years, 11 months ago Todd St.Germain

    Hi. Love your stuff.

    Quick questions:

    When creating a hero page with multiple buttons, they appear crowded on mobile devices. I don’t see any padding adjustment between buttons. Is there a fix for this?

    Image won’t go fullscreen. I’ve played with all adjustments but the container seems to be stuck showing boxed image around all the widgets in the SiteOrigin WIdgets Bundle. Am I missing something?

    Thank you :)

    • 6 years, 11 months ago Todd St. Germain

      FULL SCREEN ISSUE RESOLVED. Easy

      Still need help on space between button. Better yet text between buttons.

      Thanks

  60. 6 years, 11 months ago cj andris

    thanks for this tutorial! it was very helpful except one tiny issue….i followed everything you said step by step but when i go to generate the hero image, it only displays a very small portion of the top of the image. what gives?! so frustrated and really needing help!

  61. 6 years, 10 months ago TecCrowd

    Hi Greg,This is so awesome. Excellent work, I just watched this excellent video. Now I can Apply. Thanks for sharing.

  62. 6 years, 9 months ago Saeed Ahmadi

    Thanks for your beautiful Themes and your Service, it is very helpful for everybody….

  63. 6 years, 7 months ago RaviRaj Langhnoja

    hi greg,

    thanks for your solutions for hero elements but in my website it’s not working. i have added as per your video in my website please help me to fix it.

  64. 6 years, 7 months ago Kristy

    Do hero shots have to be on a home page? I don’t have enough stuff to put on a home page to warrant a home page. My “home” is sent to a link right now and my blog shows latest posts. Can I add a hero image to that page instead of creating a whole entire home page?

  65. 6 years, 5 months ago kelli

    HI, congrats with your video trutorials, very helpful.
    Seems to be a bug with using this Hero widget in Sydney theme. When I click on the design and layout section for button editing – nothing happens.
    Also, is there a way to make the slider fit stretched on mobile screens ie remove the background white space on the left and right sides? The row is already set to full stretched.
    Thanks

  66. 6 years, 2 months ago csmith155

    Is it possible to have the hero widget load a random videos on refresh/revisit?
    To clarify – I would like one of a few uploaded videos to load as the hero background video each time the site is visited.

    Thank you for your hard work and creating great WordPress theme, plugins, and widgets!

  67. 4 years, 23 days ago Jenrose

    Well, I started to do this and when I follow the directions, I get to the point of “Add media” and the button is just… not there.

    • 4 years, 23 days ago Andrew Misplon
      Hi, I Work Here

      Hi Jenrose

      Have you clicked on the Frame heading in the Hero widget to open the Frame to begin editing it?

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More