I'm sure you've seen them around... Those professional looking header sections with a big "hero" image and a title text on top.
All the pros are using this layout on their website.
But somehow, when you try this on your own homepage, it never looks quite as professional.
Let me show you step by step how to create these gorgeous looking header sections and how to make them look good on desktop AND on mobile.
More...
The Hero Image Header Section
If you're having a personal brand, you are the most important element of your business.
Having a hero image header section on your homepage will allow to establish that personal connection you're looking for.
Here are a few examples:
The Keys to Making this Work
1. A Professional Picture
I'm probably stating the obvious here, but if you want the first impression to be a good one, you'll need a high quality image.
Your holiday picture or a selfie will instantly discredit your brand.
2. Photo "Manipulation" For Readability (7:30 min)
Your image needs to be suitable for a text overlay. This might be a white background or you might need to add an overlay on (part) of the picture to allow the text to stand out.
The big advantage of Thrive Architect is that you can accomplish this overlay from within the plugin! No need for photo editing software.
3. Right or Left aligned Text Elements (4:55 min)
There are many different options to align a text on one or the other side of your image but each option has different outcomes on mobile.
Understanding what really happens will avoid some serious hair-pulling later on especially with mobile responsiveness.
4. What Happens on Mobile? (12:18 min)
One of the most difficult parts to get right is the mobile look of this type of headers.
There are different solutions:
1. Replace the image with a plain background
This approach has two big advantages. First of all, you don't have to worry about readability and on top of that your site will load faster which is always an advantage when thinking about the mobile experience.
In the tutorial we take it one step further and we actually use a solid colored background but without loosing the "personal branding touch".
2. Adapt the overlay for readability
Instead of replacing the image, you could adapt the overlay so that the text is readable no matter where the text is on the image. This allows you to keep the "personal branding" aspect without having to worry about different mobile screen sizes.
3. Tweak the Layout
This is the most difficult option and I don't really recommend trying this... You will never be able to check on all different devices and might run into readability problems at some point.
Now It's Your Turn
How do you like this layout? Are you going to use it on your site? Any other layouts you would like us to build? Make sure to check out our guide on how to create a personal branding website with Thrive Suite, too.
Wow, very awesome! Thanks
Thanks Angelito, glad you liked it!
This is incredible! Exactly what we are looking to do on our website. Thanks so much Hanne
Happy to hear Brandon!
Great explainer video Hanne. Getting the design right across multiple screen sizes has always been a pain but this is a game changer – especially the editing view for each screen.
I agree Gary, it’s really nice to be able to design for different devices.
Great, thank you
You’re welcome Helmut
Brilliant Hanne. I use the ‘Inspect’ option all the time and I never noticed the option to view as Mobile! Totally unexpected bit of learning there. But now I’m off to create my new online celebrity status 🙂
Good luck Quentin 🙂
Hanne your are my Hero in content creation style, your details selection, colours and images show up a lot. Very smart solution for tablet and mobile view and gradient use. Thanks.
Thanks Jesus
Hi Hanne,
I am really annoyed with you :/
Yesterday I made up my mind that I am not going to purchase Thrive Architect for my new blog. And now, after watching this video, I have to change my decision.
I must say I am really impressed with Thrive Architect. Also, you explained everything in the best possible way.
Btw can you tell me the name of the software you used to make this video?
Anyways, keep up the good work and have a great weekend.
Cheers,
Sandipan
I would say I’m sorry, but well… not really 😉
I used Camtasia and normal reflex camera and then our video editor made it look pretty with the bubble effect.
Nice. Thank you!
Welcome Igor
Great tutorial, thanks
Thanks Jeff
Once again, tremendous tutorial. You do a great job of showing useful strategies for making professional layouts. Keep ’em coming! 🙂
Will do Kendrick
Fantastic, Hanne. So helpful. Really loving the features of Thrive Architect and the customisation it allows. Keep up the excellent work.
Happy to hear Julian and we’ll keep them coming.
Thank you for the wonderful, detailed tutorial!
Thanks Eric
HI Hanne,
Thanks for all informations and example.
You’re welcome Pascal
Brilliant. I’m floored by the amount of work that went into Thrive Architect. Thanks for doing a great job explaining HOW to achieve these design effects.
Yes not a small project 😉 But totally worth it! Happy you like it.
I love it , how you explain eveything. I learn so much with this kind of post . EVERY WEEK I expect your post salivating like Paulov’s dog waiting for his flesh.
Thanks Juan
OMG this was such a fantastic tutorial, Hanne! It’s probably my favorite one so far (don’t tell Shane lol). Great job – thank you so much!
Thrive products rock!
My lips are sealed 😉
Another great tutorial, Hanne. You guys keep raising the bar! Your team rocks.
Thanks Esta
Excellent! Thanks Hanne. One thing I missed was how you get the different sizes to show up using ‘inspect element’. Can you explain how to find that function?
Hi Lewis,
Here you go: https://cl.ly/1t3Q0w3U2N45
Fantastic tutorial. I love how Thrive Architect has so much control over the various elements regardless of the screen size. The content box alignment recommendation was also super helpful. Keep these coming, Hanne!
Hi Chick, agreed. Understanding the implications of different alignement options will help you build good layouts for sure.
To me the best Thrive video ever – Hartelijk bedankt Hanne!
Graag gedaan Christoph!
Another “Wow, I’m glad I’m with Hanne and Thrive Themes moment.”
Thanks Ricky
that was very helpfully!!!!
Thanks Jessica, happy to hear that!
I was waiting for THIS!!!!
Great to hear Matthias
Thank you for these “how to” videos. It would have taken me a very long time to figure this out on my own. These videos allow me to build pages like a pro using Thrive products. Extremely valuable information. You guys rock.
Hi Len, thanks for your comment.
Again you showed why ThriveThemes ans Thrive Architect are the best!!!!!
Thanks Johan
Absolutely wonderful. One thing I’ve learnt is that left and right paddings/margins is generally better left untouched, but top and bottom paddings/margins are generally more mobile-friendly. I love the trick with the additional gradient markers, definitely more elegant than the multi-column approach which leads to all kinds of hair-pulling dilemma!
Hi Thomas,
Yes you got that right for the margins and paddings 🙂
And definitely columns for this would be a no-no and a big mess on smaller screens!
holy crap – amazing – i had this hero idea cobbled together and i was so happy with it (compared to what i had before – and for DIY) but now can’t WAIT to edit and refine – thank you!!
Is there a basic architect tutorial – couple of times you went very fast like “now we can preview and go back to inspect..) made me feel like i missed on along the way:)
Thanks again!
Hi Dana, glad I can help you level up 🙂
Hi Hanne, love your presenting style – so clear and easy to follow. Brilliant tutorial and covering a really important feature. Architect is showing how far ahead it is getting!
Thanks Mark!
This is an awesome tutorial Hanne… thanks!
Thanks Andrew
Is there a way to import a new font into Thrive Architect? One that isn’t in Google Fonts but I have the file for on my computer? Thanks for your awesome tutorials.
Hi Alex,
That’s not yet possible for the moment.
Hi, Hanne!
Thanks for this instuctive tutorial! Would you mind if I ask to make someone similar for videobackground because I tried few times but seem i make something wrong and video not appear?
Thank you!
Hi Adrian,
I think we have a “background video” tutorial coming up soon.
This is fantastic! Thank you, thank you, thank you, Hanne! <3
Can one use the image created on another WordPress theme?
Hi Alex,
Not sure I understand your question. The overlay would not show on a website without Thrive Architect.
Brilliant breakdown. I can’t wait to play with this on my new home page! Thanks.
Let us know how it goes Jay
Fantastic tutorial as always. I´ve been looking for this kind of explanation for long and now I think I have the best I could have found.
I´m not as skillful as you are with web design and the Thrive Theme tools, but I´ll definitively try my best to accomplish exactly what I need.
Thank you so much Hanne.
Luis
Glad this is helpful for you Luis
These videos are SO helpful. Thank you!
That’s music to my ears Hilary 🙂
wow , i was waiting for this
Happy to deliver Jim
Terrific Hanne! You nailed it, featuring many of TA’s fantastic new features. Just great!
Thanks Oob
Absolutely thrilled to see this tutorial. Thrive Architect must be the best bit of kit to be seen in the web-building arena for many years!
I’m sure that you will keep up the good work to keep us inspired!
Thanks David
Great value hanne ! One question :
How could you do that from Pressive ? (Because Homepage is not a scratch landing page and we have to create that from Title Section Content.)
Thanx Hanne
Hi Stephane,
Instead of starting from a blank landing page, pick a “full width” page template (in the wordpress editor), hide title and breadcrumbs and so on in the theme options of the page (https://cl.ly/1O3s010z0t3b) and when you add your background section with Thrive Architect you’ll see the toggle “stretch to fit screen width” (https://thrivethemes.com/tkb_item/how-to-use-the-background-section-element/)
This will allow you to keep the header of your theme and to create this layout.
Wow! Thrive did it again – great presentation and content- you guys rock!
Thanks Nancy
One of the VERY BEST tutorials for ARCHITECT yet!
This helped me so much.
Thank you, Hanne!
Happy to hear Bodine!
I’m having a ton of issues and I think it has to do with me being computer illiterate, but here goes: why is it that when I align the text to the right on desktop and then attempt to align it center on mobile, it also aligns center for desktop view? I thought they were independent.
Hello,
If you want to change alignments for different device sizes, make sure to make the change on the element that contains the text, not “inline” in the text. Inline changes are not mobile responsive. You can learn more about this here: 8 Tips to Make Your Content Fully Mobile Friendly
I hadn’t thought of doing this (ah, I’m such a newbie! But what a great, professional idea! It will instantly add creditably to my website and make it look like I know what I’m doing. Thank you so much for the wonderful tips. I’m forever in your debt. WOW, just WOW, what a difference this will make
Glad this helped you Gina
Great, and a true educaton!