Create a Pro Looking Hero Image Header

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:

Pat Flynn

Marie Forleo


Ramit Sethi


Amy Porterfield

Chris Ducker

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 (8.46 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.39 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? (13.20 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?

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she's not busy discussing high-level funnel design over cocktails with the equally geeky, you'll find her discovering a place for the first time

  • Angelito says:

    Wow, very awesome! Thanks

    • Hanne says:

      Thanks Angelito, glad you liked it!

  • Brandon S says:

    This is incredible! Exactly what we are looking to do on our website. Thanks so much Hanne

    • Hanne says:

      Happy to hear Brandon!

  • Gary E says:

    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.

    • Hanne says:

      I agree Gary, it’s really nice to be able to design for different devices.

  • Helmut says:

    Great, thank you

    • Hanne says:

      You’re welcome Helmut

  • Quentin P says:

    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 :)

  • Jesus Perez says:

    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.

  • 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

    • Hanne says:

      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.

  • Igor O says:

    Nice. Thank you!

  • jeff r says:

    Great tutorial, thanks

  • Kendrick says:

    Once again, tremendous tutorial. You do a great job of showing useful strategies for making professional layouts. Keep ’em coming! :)

  • Julian says:

    Fantastic, Hanne. So helpful. Really loving the features of Thrive Architect and the customisation it allows. Keep up the excellent work.

    • Hanne says:

      Happy to hear Julian and we’ll keep them coming.

  • Eric Davis says:

    Thank you for the wonderful, detailed tutorial!

  • Pascal says:

    HI Hanne,

    Thanks for all informations and example.

    • Hanne says:

      You’re welcome Pascal

  • David C says:

    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.

    • Hanne says:

      Yes not a small project ;-) But totally worth it! Happy you like it.

  • Juan Z says:

    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.

  • Tony says:

    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!

    • Hanne says:

      My lips are sealed ;-)

  • Another great tutorial, Hanne. You guys keep raising the bar! Your team rocks.

  • Lewis E says:

    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?

  • Chik Q says:

    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!

    • Hanne says:

      Hi Chick, agreed. Understanding the implications of different alignement options will help you build good layouts for sure.

  • Christoph says:

    To me the best Thrive video ever – Hartelijk bedankt Hanne!

    • Hanne says:

      Graag gedaan Christoph!

  • Ricky says:

    Another “Wow, I’m glad I’m with Hanne and Thrive Themes moment.”

  • Jessica G says:

    that was very helpfully!!!!

    • Hanne says:

      Thanks Jessica, happy to hear that!

  • I was waiting for THIS!!!!

    • Hanne says:

      Great to hear Matthias

  • Len R says:

    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.

    • Hanne says:

      Hi Len, thanks for your comment.

  • Johan says:

    Again you showed why ThriveThemes ans Thrive Architect are the best!!!!!

  • Thomas says:

    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!

    • Hanne says:

      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!

  • dana says:

    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!

    • Hanne says:

      Hi Dana, glad I can help you level up :)

  • Mark W says:

    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!

  • Andy says:

    This is an awesome tutorial Hanne… thanks!

  • Alex says:

    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.

    • Hanne says:

      Hi Alex,

      That’s not yet possible for the moment.

  • Adrian Iacob says:

    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!

    • Hanne says:

      Hi Adrian,

      I think we have a “background video” tutorial coming up soon.

      • Adrian Iacob says:

        This is fantastic! Thank you, thank you, thank you, Hanne! <3

  • Can one use the image created on another WordPress theme?

    • Hanne says:

      Hi Alex,

      Not sure I understand your question. The overlay would not show on a website without Thrive Architect.

  • Jason says:

    Brilliant breakdown. I can’t wait to play with this on my new home page! Thanks.

    • Hanne says:

      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

    • Hanne says:

      Glad this is helpful for you Luis

  • Hilary E says:

    These videos are SO helpful. Thank you!

    • Hanne says:

      That’s music to my ears Hilary :)

  • cybertrickz says:

    wow , i was waiting for this

  • Oob says:

    Terrific Hanne! You nailed it, featuring many of TA’s fantastic new features. Just great!

  • David says:

    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!

  • stephane says:

    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

  • Nancy M says:

    Wow! Thrive did it again – great presentation and content- you guys rock!

  • Bodine B says:

    One of the VERY BEST tutorials for ARCHITECT yet!
    This helped me so much.
    Thank you, Hanne!

  • charmanduh says:

    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.

    • Shane Melaugh says:

      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

  • Gina says:

    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

    • Hanne says:

      Glad this helped you Gina

  • David says:

    Great, and a true educaton!

  • Katja H says:

    Love it! Pure awesomeness. This is what I’ve been wanting to do. Thank you! :)

  • Dino Mapa says:

    Just awed! Much thanks for this!

  • Joan B says:

    Thanks so much Hanne for this great tutorial. I love finding out all the new and different ways I can use TA.

  • Drew says:

    Great video! Thanks so much for explaining this!

    • Hanne says:

      You’re very welcome Drew

  • Marcelo says:

    Muy Buen Video, muchas gracias y a la espera del proximo.

    • Hanne says:

      You’re welcome Marcelo

  • Ramesh says:

    Great detailed tutorial, thank you for sharing, Hanne

    • Hanne says:

      Happy you like it Ramesh

  • Rob says:

    Awesome! Many lessons within this video.

  • Bart R. W says:

    Thankyou so much! This is the layout and design I’ve been working on for two months! The architect improved my chances of it working correctly—now I know what NOT to attempt.

    • Hanne says:

      Glad this will help you create the layout you’re looking for Bart

  • Rob Russo says:

    Excellent tutorial… And perfect timing. I was just doing this very thing on my own site and couldn’t fine tune it how I wanted. Your video explains it perfectly. Thank you!

    • Hanne says:

      You’re welcome Rob. Glad to know this was right in time for you!

  • Teena Evert says:

    I am not able to place a heading or text/paragraph over the image. It will only let me place it above or below. Can you help?

    • Hanne says:

      Not sure how I can explain it better than in the video Teena :(

      Make sure to use a background section and to add the image as a background image (so NOT using an image element).

      If you followed the exact steps I go through in the video and it’s still not working, please open a support ticket so that our people can have a look.

  • A great new wrinkle to creating a great homepage. What’s the best way to get a good picture?

    • Hanne says:

      A professional photo shoot goes a long way :)
      If you’re looking for a similar layout with a stock image (like in the video) I suggest having a look at Pixabay . On that site you’ll find free stock images for all uses.

  • Dean says:

    Hey Hanne! I’d love to be able to use typekit/typography.com fonts easily in TA – right now, I’m not using Architect much as I use them heavily in my sites.

    I’ve seen comments about it elsewhere, but I was wondering, is it on the roadmap? :)

    • Hanne says:

      Hi Dean,
      It is something we’re talking about but it is not the highest priority as for right now (so I can not give you an ETA)

  • Phil says:

    Awesome tutorial, Hanne. Thank you.

    The overall package of Thrive (fast loading times, ease of use, responsiveness and all these amazing tuts) made me switch all my websites from Divi to Thrive.

    You really rock! \m/

    • Hanne says:

      Glad to hear Phil!

      • Jaya says:

        Divi, booooooo….. Thrive is so far ahead. I can’t stand when I work on an already existing Divi site. :/

  • I use these “Videos” in lieu of less than helpful support to learn and correct my pages. Thank you and keep them coming please!

  • Joop L says:

    Hello Hanne, very nice instructions about how to make a stunning header. Thanks for that. At the moment I use for my blog about books the Minus theme. Is it possible to use the method you explain in the video to make a nice header in Minus.

    • Hanne says:

      Hi Joop,
      Headers are part of the theme. Unfortunately you can not use Thrive Architect to edit your header section.
      You can however for certain pages, such as your homepage, create a custom header with Thrive Architect when you start from a landing page. This header will only be used on the homepage in that case.

  • Rob says:

    Hanne! This is among the best videos I’ve seen you guys make. Sorry Shane ;-) Please keep them coming…they are incredibly helpful and make the software so much more useful.

  • Ryan S says:

    Love it Hanne. Great tutorial, thanks!

  • These tutorials are very helpful. Thank you Hannes!

    • Hanne says:

      You’re welcome Felix

  • Rox says:

    This is wonderful Hanne, thank you! Question: since this is a Landing Page you recommend, the navigation menu disappears at the top?

    • Hanne says:

      Hi Roxanne,

      Yes it does. But if you have a theme that allows you a blank page template (like all Thrive Themes themes do) you can actually start from there and keep you menu on top :)

  • Elizabeth R says:

    Awesome Hanne,
    I will be working on my entire website.

    • Hanne says:

      Great to hear Elizabeth

  • Robert Lang says:

    Outstanding! I now see why you invented Thrive Architect from Thrive Content Builder. Takeaway: While designing pages, TA automatically writes the responsive CSS code for you, instead of having to write it yourself.

    After this video, I am now seriously considering using Thrive Themes as our parent website layout. We currently use Advada. But knowing all Thrive Theme Products, it now appears you have a better method of saving time in design costs. A key component we consider.

    • Hanne says:

      Thanks Robert!

    • Jaya says:

      Robert, I’m loving Impreza theme with Thrive Architect and all the other Thrive plugins.

  • Julia Harris says:

    Fantastic, thanks so much for this, its exactly what I needed

    • Hanne says:

      Thanks Julia, happy to hear :)

  • John Aberle says:

    As always before, Hanna, you have given really useful information with this Hero Header. I would never have thought to try something like this until seeing how easy it is in Thrive Architect. Now I just need to get a professional photograph.

    • Hanne says:

      Happy to hear this tutorial allows you to try something new, John!

  • barry5 says:

    Great stuff…. when i try to build a page, the max width and alignment functions do not show up in the “Layout and Position” section

    • Hanne says:

      Hi barry,
      If you’re looking for the max width for a background section then it is in the first menu (the background section menu)

  • lyn says:

    Great tutorial. A question: Is it best to start with a theme or not? I have Pressive but am finding it very hard to adapt it to what I want. Architect is great.

    • Hanne says:

      Hi Lyn,
      WordPress themes (such as Pressive) and Thrive Architect serve a different purpose.
      Your theme will decide about the layout of your blog overview pages, blog layout, header, footer, etc.
      Thrive Architect is made to edit your content within those pages.
      Even though you can use Thrive Architect to build landing pages (and thus overwrite the theme settings), this is not ideal if you’re having a big site.
      If you’re having a rather small site with only a few pages, you could make them all landing pages and strickly use Thrive Architect, but if you have a blog you’ll need a theme to make it all work.

  • Great video.
    I applied it. But when I want to take the last few steps for the mobile view and tablet view nothing happens. Removing the image and gradeniet removes nothing. Also, I can not customize the context box. What now.

    • Shane Melaugh says:

      Hello Jolanda,

      I can’t tell what the issue might be just from your description. Please submit a support ticket here and add your website details, so that our team can investigate and help you out.

  • Richard P says:

    Hanne,

    Just when I was starting to think about needing my own hero page, you came along and put together this awesome video.

    You guys continually amaze me with your work and you’re one of the few companies that I’ve bought products from and still read every email you send.

    Two things I hope you can help with, the first you can probably answer in a quick reply, the second maybe put in the back of your mind.

    1. Can you provide a quick table for background image sizes per screen size? I’m going to be taking professional photos and while I don’t think I need the 5k x 5k pixel photos (because they will be overkill) I’d like to know the preferred dimensions for desktop/tablet/mobile to still provide a photo that is sharp for that screen size.

    2. I so appreciate all your answers to the comments. It just endears me more to you guys personally, most companies don’t take the time. I end up reading through all the comments to glean more nuggets and am usually not let down. For example, in these comments you referred to the 8 Tips for mobile. It so happens that this particular post is under the category “Increase your conversions”, which no one would have ever guessed is “mobile” (although it’s certainly related). I’d like to recommend you guys to create several other categories, like “Good Website Design,” and “Everything Mobile”, etc, and differentiate your posts along those lines as well. One other thought in this vein, how about a “entire website from scratch” series where you start with TA and a theme (say pressive or storied) and show how to setup the home page, landing pages, blog, etc. This way a complete noob would have a full walkthrough soup-to-nuts on setting up a site. I’m sure you guys already have so much content you have the series already done, just putting it concisely in one place would be helpful to your audience. (imagine an email “just starting? go here…” to all your buyers)

    At any rate, I so appreciate everything you guys do.

    Your friend,

    Richard

    • Shane Melaugh says:

      Hello Richard,

      Thank you for your message!

      1) My general recommendation is to keep images at 1920×1080 if they are meant to cover an entire background area as in this case. Of course, there are screens with greater resolutions than this, but file size increases dramatically with increased dimensions and I think it’s just not worth loading a huge image for the few visitors who will be seeing your site on a 4K screen. We are working on a techincal solution for image scaling, by the way. The goal is that you can load large images and your site automatically scales them to each appropriate screen size.

      Until we have this, I recommend 1920×1080 or smaller. And you can use the same image for each device size. It’s ultimately better for performance if you load just one image and let the browser scale it down on smaller devices.

      2) You’re absolutely right about our categories. The current category structure was set 2 years and hundreds of posts ago and it’s in need of an update. We’ll be revamping it soon. :)

      • Richard P says:

        Shane my friend, so sorry it’s taken me so long to respond to your reply.

        1 – I can’t wait. You guys are great, I love everything you do and I know you’ll ace this one. (can I replace things like wp smush? what about css/html minify/compress – that would be another great tool to bundle so a second plugin isn’t needed and doesn’t end up messing up the page – I know css/html is a different thing from the image tool)

        2 – thank you sir!

        as always, I’m a great fan (and user) of your work. Can’t wait to see what you do next!

        :^D

  • Bob Bro says:

    You folks are really geniuses. Thrive Architect really hits it out of the ballpark. The more I learn the more I am amazed. The desktop / tablet / mobile view feature is really inspired. Thanks so much!

    • Shane Melaugh says:

      Thank you very much, Bob!

  • Cebuan says:

    Hanne, not sure how best to reach you with a big advice ask!
    Can you suggest new Templates for Affiliate Marketing with the New Thrive Architect in mind!

    I am not sure how to locate these, where I could find best templates, landing pages etc.
    I have RISE and am a full Membership

    • Hanne says:

      Hi Cebuan,

      If you’re a full member, have a look at the “members only goodies” you can find them in the membership area (there is a link in the sidebar).
      In there you’ll find content templates we made especially with affiliate marketers in mind.
      You can also check out the “review” set of landing pages which you can find in the templates cloud.

  • Jaya says:

    Badass tutorial! I was designing pages at an agency using primarily visual composer. Now I’m so happy to go back to Thrive and the revamped TCB Architect. This kind of task used to drive me crazy with VC. Now it is super easy thanks to all the options and parameters at the touch of my fingers in Architect. Yay~

    • Hanne says:

      You made my day Jaya :D

  • Calvin says:

    Hanne,
    This was exactly the tutorial I needed. Thank you for putting together such straightforward videos that walk through these steps so clearly. I was having problems with the way the text was showing up in mobile and you’ve helped me get it right.

  • David C says:

    Excellent tutorial. Thank you! :)

  • Sally P says:

    Great video Hanne! How do I put this image onto the header of each page without recreating it from scratch each time?

    • Hanne says:

      Hi Sally,

      This type of layout is not something I would use as a header on each page. This is typically a good layout for a homepage. But on other pages you probably want to use the above the fold section for content rather than a big image.
      That being said, this is in the content area so if you want this on all of the pages, you would have to save it as a content template and then add it manually to the pages.

  • Amy W says:

    This was SO useful. Thank you very much.

  • Derek W says:

    Having purchased Thrive sometime ago I presumed that would be it, no follow ups just the normal support one gets. How wrong I was, with your tutorials I feel as though I’m becoming a professional after years of struggling. Thank you Hanne!

    • Hanne says:

      That comment made my day! Thanks Derek

  • lyn says:

    I use Pressive theme.. tried to follow it step by step… create a new page with blank template.. followed along .. 3 x over 2 days and still cant get it to work properly.. the desktop is ok, the tablet is ok but the mobile one I just cannot fathom why it isnt working. Is having Pressive as the underlying theme the problem?

    • Hanne says:

      Hi Lyn,

      No it shouldn’t… What’s not working?

  • Kenneth says:

    You’re skipping so fast over sections that I can’t figure it out Hanne. How do you lay in the text element??

    • Hanne says:

      Hi Kenneth,

      I dragged a text element and dropped it in the right spot (in the content box).

  • Scott B says:

    This is exactly the information I was looking for and needing. Wow. Just plain wow! Thank you!

  • Fuad says:

    Excellent content as always Hanne.

    I am having an issue with the mobile view editing though. For some reason background images don’t get deleted as it did in your video aligning content boxes with text and adjusting their widths also does nothing.

    Is this a caching issue?

    • Hanne says:

      It might yes, make sure to do a hard refresh (CRTL+F5) and if the problem persists you can ask technical help on our support forum.

  • Katja H says:

    What are the colors (deep red/purple/dark blue) on the optin bar underneath the image? I can’t seem to use color picker for it.

  • Melk says:

    Thank you for the tips.

  • Kristi says:

    Great tutorial!

    • Hanne says:

      Happy you like it Kristi :)

  • Michael K says:

    Hanne, your tutorials are always excellent!

  • Soumya Roy says:

    After long years of digital marketing practices, now I am planning to build community around me and to create a strong brand. Without any doubt a positive image plays a major role in this regard. I am thankful to you because your content gave me an idea of how to create a positive looking attractive image which may help me branding it. Thanks for the share.

    • Hanne says:

      Glad to hear this will help you Roy!

  • Luis Garcia says:

    Hey Hanne, thanks for this video, pretty cool to know that this is possible with Thrive Architect. But……..I just have to ask, I don’t see any of these hero templates on the backend for us to upload on our site using Thrive Architect. So, I’m asking, can you please put these examples on the backend so that we can upload these hero templates using our plugin Thrive Architect? That would be awesome as it would make the process easier. Thanks.

  • Jerry says:

    Thanks Hanne, I’m about to re-design my home page after watching this. Excellent tutorial as well as the tool used to create it.

  • Harvey S says:

    Once again “Team Thrive” validates the Agency option. I cant wait to reveal this new layout for some of MY personal clients!

    Thanks for making us look great, knowlegable and professional to our clients with the constant updates training, plug-ins and relevant content! ????

  • Professorjohn says:

    First the way Thrive Architect works is a blow-away. If you theres not a creative bone in your body you can get results. Thanks so much for you guy’s Guru Gold mine of good stuff.

    Two questions..pic rendering. Have been unsuccessful rescaling my professional pic in thrive architect like your demo hero image

    .in the video I cant seem to get my hero image to size correctly in the back ground and content box.. my face and forehead take up the entire page..I’ve edited the image in architect but it still doesn’t look like your demo.

    also in the mobile view you said you prepared the smaller image as well ..how did you render the head shot so it would be the right size to fit mobile view?

    do you have tutorial for after the landing page design..I’m doing a 3 column segmentation, would you do a quiz or do a list building popup..?

    • Hanne says:

      Hi John,

      The way the picture will render on your site will depend a lot of the size of the image. For the background image make sure to use an image that’s at least 1920 wide and select “full width” in the media library the moment you import the picture on your site.

      Then in the settings in Thrive Architect, put the image to stretch and play around with the anchor points.

      For the mobile image, I created an image that’s probably around 250 x 250 px so that I can make it in a nice round image. This can be done in any photo tool.

      For segmentation, it really depends what you want to do. If you have 3 very specific categories you can just have buttons ans different opt-in forms. If you need to ask questions in order to segment your list you can use a quiz.

      I think you’ll find the https://thrivethemes.com/create-upside-down-homepage/upside down homepage tutorial very helpful

  • Tina says:

    Hey Hanne, thank you for this. I have two problems. The first one is my content box. I want it to fit the screen size, so the box is really on the left side of the screen. I can’t get it there. My second problem is the font. Many of the google fonts doesn’t look like they should. Now i tried it with your dancing font. In the editing mode of thrive architect everything looks fine. When i save this site an look at the end the font looks horrible and not like it should. Do you know a solution for my problems? Actually i can only use late and play fair display :(

    • Hanne says:

      Hi Tina,

      This seems like a conflict on your site. Can you please open a ticket on the support forum so that someone can help you out.

  • Benny+Brogan says:

    Perfect teaching / presentation thanks.
    I’m building a new website right now, therefore I was interested.
    My old website is an html site built with Mobirise.

    • Hanne says:

      Good luck building the new site!

  • Dana L says:

    Love this video! I had done a similar process to come up with my homepage – but after watching this – I made some tweaks – and it’s so much cleaner & cleared. Then today, I was chatting with support at my hosting company about my site danalavoielac.com and the first thing the support tech said was “by the way the site’s conception is really nice” WOO HOO thank you:) I feel so good about my homepage now.. you guys (and thrive architect of course) are the best:)

    • Hanne says:

      Yey! So happy to hear that Dana!

  • >

    Join Thrive University (it's FREE!)