How to Create a Hero Image Header Section on Your Homepage

[@GregandJennifer]

This was such an incredibly helpful tutorial. I think I spent two hours going through this 20 minute video just because it was so helpful and I was able to make so many awesome tweaks to my website beyond just the hero image. So, so helpful. Many thanks from a Thrive Architect newbie!

[@GetLeverage]

What a great demo! I could not figure out how to use an image as a background and put text (and other things) over it until I found this!! I wasn't trying to use a "Hero" image with my Thrive theme - I just wanted a regular image - but this did the trick. More tools for my wheelhouse! Thank you so much, Hanne!!

[@Thrivethemes]

Hi, happy this did the trick!

[@theericbeaty]

Thanks, Hanne, for all the awesome work you guys to at Thrive Themes. This gradient effect is amazing! So glad you showed us this. I also like your tips about aligning everything properly so that it all shows up nicely on multiple devices.

[@Thrivethemes]

Happy this was helpful!

[@jenniferwang817]

This is brilliant! I love how you went into detail adjusting the image across the three platforms. It's so easy to forget that the majority of visitors (or at least half) will be using mobile to access your website. Thank you!!! Now all I need is a good mugshot, haha.

[@Thrivethemes]

hahahah yeah the right picture is pretty important ;)

[@uoni01]

I was searching the internet (even in the thrive university) for hours to find this video! I was frustrated because i couldn't handle to move text columns like i would and it drives me crazy because no video explained it as good as this one. You should make a copy of this video and rename it to: "Thrive architect - how to move text and column bars easy!" Believe me you will get more clicks on it like this one already has.... Keep up the good work 👍😎

[@Anista09]

And this is way Thrive Themes is world class. Thank you x 1,000,000

[@sfloresyesi]

6:45 You may had wanted to mention "percent" not "pixels". But thanks to this video I am now learning! Thank you very much!

[@Bovorn.S]

Very nice and the steps were clear. Great training video without the slowness.

[@realalexowens]

This tutorial was exactly what I was looking for! Thank you!!

[@leighannkittell8193]

I did it Hanne! Step by step I got there and I am a total beginner.

[@Thrivethemes]

Yey :D That's amazing! So happy to hear Ann

[@BishnuMahali]

Your design tutorials are awesome. Thank you so much. Love them.

[@staceystaris]

I love this tutorial! Thank you, Hanne!! You and Shane are fantastic. :)

[@ICanThrive]

This is one of the most useful video's I have seen from Thrive, thank you!! :)

[@DrKazAstro]

Thanks this is great. I’ve been on thrive for ages and this is just whT I need

[@findpatterns]

Hi Hanne, thanks for the really useful tutorial. I will use this for my about page.

[@World-Wide-Will]

Nice, thanks for this. Always learn a few new things just by the way you navigate TA :)

[@biggestreality]

Very Nice! Thanks for an awesome tutorial! Going to rewatch and practice, Keep up the great work!

[@NicolaCairncross]

Very helpful, thank you!

[@TRIPLEX47]

Great video. Architect seems to be very flexible

[@AlexNewellND]

Fabulous tutorial, thank You!

[@videocentric]

Love your tutorials! Very helpful. :-)

[@TechSaqib]

Great Tutorial

[@takkatuka]

As always great content. Special thanks for the mobile solution Hanne

[@Thrivethemes]

Welcome Gerald

[@ChristerAxelsson1]

Thank you - Hanne rocks!

[@fgl2012]

Absolutely Amazing!

[@deekshith_kr]

Helped a lot. Thank you so much

[@joeglez81]

great value!!!! As usual, greetings O/

[@MichealPrice]

That is an awesome tutorial.

[@drinkmeister]

What an amazing resource from Thrive Themes! Between Hanne and Shane, there's no need to look elsewhere for tutorials on creating conversion focused wordpress themes and landing pages. Im sure my wife thinks Im having an affair because I spend so much time glued to the computer screen. :-)

[@TheRoadToHealthinc]

Thanks great training

[@DonnaWildman5]

This was great information, however, how does on now make this the header?

[@befreiedeinbewusstsein2485]

Thank You Hanne :)

[@AhmedHesham-ll8uw]

Hi, How can I adjust the logo size to fit the header of the Luxe theme? what is the recommended logo size?

[@jeffreywhite4091]

Awesome video

[@michalkocis8934]

this was just f a n t a s t i c! wow ..

[@vinodhrajsubramanian]

Hi Hanne! The video is awesome. Thanks for sharing. I’d love to Which software you use to create the screen grab video.

[@Thrivethemes]

Thanks, I use Camtasia

[@BeYouBold]

WOW. You are going to turn me int a professional yet

[@Thrivethemes]

Thanks Wesley

[@md.al-mamun7669]

hello,after doing it by following your process, I cannot find my menu and logo on the home page. even in footer menue, I cannot see the past elements as like privacy, disclaimer etc. help me plz!

[@susannelyngbye9734]

How do I get a top menu on a blank landingpage like this?

[@weetiong6194]

Hi thanks for the great video. Why can't we just add the round image in the mobile view straightaway instead of doing it on mobile view and then hide it from tablet and desktop?

[@Thrivethemes]

Because of the separation between style and content. In technical terms, HTML is responsible for content and CSS is responsible for style. You cannot have different HTML (content) on different screen sizes. But you can have different CSS (styles) on different screen sizes. Thrive Architect follows this principle of content and style separation as well. Anything you do on the canvas, like adding elements, dragging and dropping, writing text etc. is a content change and applies to all screen sizes. Anything you do in the sidebar is a style change and can be made responsive. So, to create an image that only appears on some screen sizes, you first add that image (content) and then you set the image style to be hidden on some screen sizes.

[@weetiong6194]

If I understood you correctly since image is considered a CSS then I can just add the round hero image into the mobile view, right But your video showed you adding the round hero image in desktop first and then hide it from tablet & desktop. Hope you understand my confusion and clear my doubt once more. Thanks.

[@checkeredflagfilms]

Thanks for this informative clip. I'd like to request a tutorial where you create a Hero Video (resize it to different aspect ratios pls), also placed on a page displaying Our Work. This video would be embedded from a 3rd party hosting service such as Amazon S3. I've heard videos will not play on (website) mobile devices and must be replaced by a still image.

[@merkeprint8653]

Thrive architect looks like elementor, but i must say that allows you to hide elements for differents devices, and the padding looks way better

[@GregWilson713]

Thank you, That was Fantastic... Question. at the end when you went to (inspect) how did you get the bat to change screen size? I use Chrome and when I go to )inspect I get a whole lot of info that means nothing to me.

[@Thrivethemes]

Hi Greg, you click this button: cl.ly/1t3Q0w3U2N45

[@DoomCatcher]

Hey Hanne what do you mean by an image is automatically optimized if you're using a thrive theme. Can you elaborate please do you mean it optimizeses like kraken if the image is uploaded with a thrive theme activated?

[@Thrivethemes]

Hi Adam, this is a theme function. So it works if you have a Thrive Themes THEME active (not just Thrive Architect) you can learn more about it here thrivethemes.com/blazing-fast-images/

[@liquid8818]

Grammarly Extension doesn't work in Thrive Architect.... Please solve this issue ASAP. thanks

[@Thrivethemes]

For technical issues you can open a support ticket so that our tech team can have a look

[@abdullahhubishan3118]

Thank you for This tutorial

[@andrea_de_candia]

choose a font is very hard in Thrive Architect. I loose a lot of time for choosing a font. Why You don't make e preview directly on thrive architect. many page builder and other app have this solution. At the moment we loose a lot of time. Think about it

[@Thrivethemes]

In Thrive Architect, all changes you make are updated on the page instantly. That includes fonts. The only exception to this would be if you are changing the landing page font settings and, for example, edit the H3 style when there is no H3 on the page. If you're having trouble with this in any way, please create a support ticket so our team can help you out.

[@andrea_de_candia]

Hi, the problem is not the changes, is to see instantly the font type. In Divi, optimizepress and many other You see before to insert the type which is caracteristic of that font. In thrive architect I loose a lot of time choosing the font. Why you don't make something like this? www.dropbox.com/s/79qqkb0ics7nlj3/Screenshot%202017-09-23%2010.36.56.png?dl=0 I think that Thrive Themes is an amazing , just little things and become the number 1 about convertion page builder wordpress plugin. Thank You for this incredible tool

[@andrea_de_candia]

What I mean is if I choose a font in thrive architect, and I don't like it, found another one look incredible loosing time. The solution is to make a preview before I insert into the page!

[@BrynDrescher]

can you please redo the upside down homepage tutorial with thrive architect instructions

[@andrea_de_candia]

So many time I insert h3 on the page, I edit the h3 on landing page font settings , but after a little bit the font restart like default. In thrive architect one of my big problem is the images disappear on mobile, completely empty. I know you are working hard .

[@suehay595]

This is no longer valid as the settings in Thrive arch have changed. How do I add a content box over the background image

[@marcomartinezlanzarin1572]

did you get an answer to your question? I'm interested in knowing if this is an issue.

[@DianeDarlingSpeaker]

AWESOME! I'm a newbie to Thrive and have been overwhelmed for months. QUESTION: For the mobile version, you say to "center" the photo on the background section. My version of Thrive Architect doesn't have that option. Thought I was losing my mind so I recorded it. screencast-o-matic.com/watch/cblTDs2987

[@alainpatry]

6:40 should be 50 percent, not pixels

[@Thrivethemes]

Yep that's right Alain. I hate it when that happens, I'm reading px because I'm switching and somehow I mess it up