Homepage from Scratch: Advanced Visual Design Without Photoshop

Shane Melaugh   167

Updated on December 22, 2019

Here at Thrive Themes, we like to focus on the essentials. We always favor simplicity, rapid implementation and conversions over fancy or trendy design.

But, that doesn't mean that fancy or trendy design is necessarily a bad thing. A website can be conversion focused and have fancy design. In this tutorial, we're building a complete homepage that exemplifies this.

And despite all the fancy design stuff on this page, you don't need Photoshop to create any of it. Plus, you can download the template for Thrive Architect, as well!


The Homepage Template

Here's a preview of what the entire homepage looks like:

Zoomed out view of the homepage template

Some of the highlights about this template:

  • It's ideally suited for a simple product or service. It can help you highlight a few key factors about your offer or business in a highly appealing way.
  • It emphasizes visuals over copy. That means that if you can show off something about your product or business with images and you don't like copywriting, this is a great template to use.
  • Structurally, the page always goes from benefits to call to action, to more benefits etc.

Get this Template!​​​​

The template shown in this video is available right now, in Thrive Architect. You don't even have to download and upload any files. Instead, just create a new page on your site, open it in Thrive Architect and load a landing page. You'll find a new set called "Bonus: LP From Scratch" which contains this template. We will add future landing pages from our Landing Page From Scratch series into this set as well.

How to Resize & Crop Images

The only elements on this page that aren't directly created in Thrive Architect are the images. We use free images from sites like Pexels and Photopin (and many other sources you can discover here).

The only image editing actions performed are cropping and resizing, which can be done directly in your WordPress media manager. Here's how it's done:

Tutorial Chapters

In constructing this homepage, there are many "mini tutorials" for building the individual components and achieving various effects.

Load a Blank Landing Page

I skipped over this part in the video. If you aren't familiar with the process yet, here's a tutorial showing you how you can load a template using Thrive Architect. One of the available templates is the blank page that I used in this tutorial.

Lay the Groundwork for Your Page

Starts at 01:21

I don't like doing the same work twice. That's why I start with my landing page settings and styles for all my basic headings and fonts I'll be using throughout the page. This doesn't only save time, it also keeps the code on your pages lean.

During this part, I use WhatFont for Chrome to easily find fonts, font sizes and colors on the page I'm inspecting.

Remove Your Theme's Text Margins

Starts at 06:10

Load up a blank landing page and add some text to it. You'll see two things:

  1. The font used is the same one as in the posts and pages of your theme.
  2. There's some spacing after headings and paragraphs.

These two things are related. By default, Thrive Architect will load your theme's font settings on a blank template. This makes it easier to have a consistent design on your site and also avoids loading additional font files when it's not needed.

The downside is that loading the theme's font settings also means that the margins around text elements are taken over from the theme. In cases where you want more detailed control over the spacing around your text, you can override the theme spacing using the trick shown here.

On container elements like Background Sections and Content Boxes, you can reduce or change the space after paragraphs and headings in the advanced typography settings:

Advanced typography settings in a container

Whenever these are set to "auto", they inherit your theme's setting. You can add a custom value or set it to 0, to apply margins directly to individual text blocks.

Build the Top Section With an Image Background & Gradient Overlay

Starts at 07:21

There are a few interesting things going on with the top section on this homepage. In this part of the video, you'll discover why I add a background color layer behind the background image and how to achieve the gradient overlay and slanted bottom edge effects.

If you like this overlay effect, note that we have a separate tutorial about how to use the gradients feature in Thrive Architect, which covers this in more detail.

Use a Content Box as a Container Element

Starts at 09:47

When you think of a content box, you probably envision something like a feature box or highlight box: a colored, styled box with some text inside it.

The content box can also serve a different purpose. In this part of the video, you'll see how an empty, unstyled content box can be used as a container element to enable layouts that would otherwise be difficult to create.

Create a Simple Header Area with an "Overlay" Effect

Starts at 12:57

As you'll see, the fancy looking header on the page is composed of just a few simple elements. Even the logo for this template was created without any picture editing tools and can be changed directly in Thrive Architect.

For the sake of simplicity, I used simple text links in this header (spoiler alert: the current Menu Element is a bit clumsy in Thrive Architect and will soon be replaced with something much better).

In this part, you'll see how to use the "z-index" setting to get control over which elements on your page cover (or get covered by) other, overlapping elements.

Remove the Gap Underneath a Slanted Edge

Starts at 17:24

When using a slanted edge decoration, followed by a section with a color or image background, there will be a "gap" on the page. In this part, you'll see how this gap is closed. The z-index setting makes another appearance, as well.

Build Eye-Catching Feature Boxes & the Call to Action Box

Starts at 18:50

In this part, we cleverly create our basic layout and then re-use it several times over, to reach the desired layout. If you're interested in a more detailed tutorial about the various ways in which you can use the Content Box element in Thrive Architect, check out this post.

Setup for the 2-Colum Feature Layout

Starts at 26:39

On the page, we use an attention-grabbing zig-zag style layout to highlight some main features or benefits. I this part of the video, we lay the groundwork for this with a 2-column layout and some positioning tweaks for the number with a line next to it, that appears above every title.

Create the Super Fancy Image Effect

Starts at 28:48

This is the most interesting part of the page, in terms of visual design. We have an effect here that, using any page builder other than Thrive Architect, you couldn't even begin to create. But where others have to resort to Photoshop or custom designs, we can build everything using Thrive Architect's styling features.

Responsive Design Workflow

Starts at 32:50

Here, you can see the workflow I use to make mobile edits once and the simply duplicate the entire layout. This saves a lot of time. A highlight here is also the use of "reverse column order" to do in an instant what would otherwise take several minutes.

Create a Section With a Static Background Image & Overlapping Effects

Starts at 36:45

This next section is pretty simple, compared to the zig-zag layout from before. Thanks to the "parallax"-like image effect and the overlap of the content box, it looks not less impressive.

Once again, you'll see here how this layout is created in very little time, thanks to clever re-using of elements we've already built on the page.

Social Sharing & Footer Sections

Starts at 39:57

The final sections are very straight-forward. Here, we add some social sharing icons to the page and use a simple "container level" editing technique to make text alignment mobile responsive.

Apply Final Tweaks for a Mobile Friendly Result

Starts at 43:00

Here, you can see the flow for making the page fully mobile friendly in just a few steps. This is an area where Thrive Architect really shines, because all style changes are automatically screen-size specific.

What Do You Want to See Next?

How do you like this type of tutorial? Do you like us to build more sophisticated layouts, even if it makes for a longer video? What kinds of pages and layouts would you like to learn how to create in Thrive Architect?

Let us know in the comments below, so we can deliver more awesome tutorials for you!


by Shane Melaugh  September 26, 2017


Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Enjoyed this article ?

You might also like:

Leave a Comment

  • Wow! I love the template(s). After listening to Active Growth podcast I have startet several homepages (Consulting, Onlinecourses, and some other MVPs) and it is sooooo helpful to get theses templates! You same me tons of hours + I get great feedback from potential customers. Great work!

  • This is great. So much to learn from these longer tutorials. I won’t use all of it, but I’ll use some of it for sure. The heading setups in the main template options is news to me.

  • I consider myself an expert… and yet, every time I watch one of your videos, I learn a new cool trick or a time-saving golden nugget. And thus, you keep me hooked and watching. =)

    Thanks for showing us the little hidden features in the software. It’s really helpful stuff!

  • Thanks Shane – this was an amazing tutorial! I love all of the videos on how to use TA (and previously TCB) for landing pages / home pages. What I’d love to see is how to design & integrate an actual blog so that it retains the same look & feel of the home page (hope that makes sense). Thanks again

    • Thank you for the suggestion, Rob! I’ll keep this in mind for future tutorials. Also, we are working on a new theme and with that, it will be easier to have a consistent style across everything on your site. However, keep in mind that one of the advantages of landing pages is that you don’t have to be tied to your site’s overall design. For a homepage like this, that’s not a factor, but for lead gen landing pages, sales pages etc. it can be really useful to have the option to design and test anything, independently of your theme’s styles.

      • Thank you Shane, I love the new TA and been playing around with it. But, like Rob, I wanted to know how to make it look like the homepage is part of the theme. Last week I did try to create a homepage for a client’s site using TA, it was fun and it looked great. then I had a lot of trouble trying to make the site header (where logo and menu were) to match the rest of the site in terms of placement so nobody would notice. I used a lot of CSS and I could never get it right. I tried both ways: making the theme fit the homepage and making the homepage fit the theme. So I would really love to know how to do it 🙂

      • Thank you for your comment, Lise!

        Specifically for headers, we have a feature planned to let you create, manage and display different headers on your landing pages and website. We’re aware that this isn’t ideal yet, in the current Thrive Architect and we’re eager to deliver a good solution.

  • I don’t know… It can make so good things with TA but to play with margin and padding and … it is so detailed.
    It would be better (and easier) to drag and drop to the right positon.

    • Hello Tamas,

      We are working on making positioning even quicker than it already is. However, this will not be like dragging and dropping something in PowerPoint, for example. Thrive Architect is built as a mobile responsive editor that produces good code and that is incompatible with “free” element positioning. I may make a video explaining this in more detail as well.

  • All I can say is “MIND BLOWN!” Thrive Architect is changing my business already and I have just begun to design pages. I love these longer tutorials Shane, because I not only get to see how things are getting done, I get to hear your thinking and approach to some of the design and layout options. Very, very helpful. Thank you.

    • Thank you for your feedback, Miles! It’s good to know that the longer format is useful for you. I’m always worried about keeping up the information density, as to not waste anyones time.

  • Awesome tutorial Shane. I love everything that is easy to achieve in TA and really appreciate you sharing the more advanced tips of how you make it do even more.
    Simply brilliant and brilliantly simple 🙂

  • Hey Shane, love these step by step vids.
    Mixing up both long and short is great.

    (I notice with WhatFont you had to guess at what the headings actually were as it does not display that info. Give the CSSViewer extension a try, I found it displays that info in the red bar across the top of the window that pops up. It is also quicker so saves time. It does not force the user to click to display a window or click to make it disappear. It displays as you move your mouse over any font. Tap ‘f’ key to freeze a window if you found what you want. Legend is across the bottom of each window. 🙂

  • Great tutorial as always. Quick question; is it possible to use a Content template like as footer, header, etc. and when we update it, it updates all instances on all pages? this will be a GREAT feature and will solve a lot of problems.

  • Great Video! How does TA work with an existing wordpress theme like divi where the homepage is already built out? If we install TA would be able to edit an existing homepage using Thrive Architect? Thanks!

    • Hello Michael,

      Thrive Architect works within the content area of a page and that content area is defined by your theme. However, you can also override the theme and load a landing page template or a blank page, as I have done in this tutorial.

    • That’s why we make these tutorials. I hope they will help you gain those skills and the expertise to build amazing stuff. 🙂

  • Simply great. Just having the dials to turn and levers to pull doesn’t mean much without good thought behind it, know why/when to use them. You (and your team) do a great job of sharing the hows and the whys. Yes… please keep these coming!

  • Thanks Shane, this was great! I really like the longer tutorials as I watch them when I am on the treadmill – looking after the mind and body at the same time 🙂

    It would be great to get a tutorial on designing a WooCommerce product page rather than using the standard template.

    • That sounds like a great combination, Amanda. 🙂

      Thanks for the suggestion about WooCommerce. We haven’t focused much on e-commerce so far, but we’ll get around to that eventually.

  • Hi Shane,
    These tutorials are superb. Please keep them coming.

    One thing I wanted to ask. Is there a way of inserting a menu from the wordpress menus into the page using Thrive Architect?

    The example you showed had a very simple menu without any sub menus etc. For our uses there would typically be 5 main menu items and two or tree would have drop down sub menus with a couple of items in each.

    Could this be added to the page you created?


    • Hello Simon,

      There is a “custom menu” element in Thrive Architect, which you can use to insert a WordPress menu. Styling options are quite limited on this element, right now, so it might not suit your needs exactly. We are working on an overhaul of this menu element, to make it better and more customizable.

  • Well done Shane, thank you very much.
    I love how much you care small details and how much they change final result.
    Very smart way to create underneath boxes under images.

  • I’m only 17 minutes in so far and just had to comment how brilliant this tutorial is. Every time I learn more. The ‘menu’ bar at the top is perfect for my home site – so I’ve just paused the video in order to go get that done. That’s what’s so cool about these tutorials – you can just go do the stuff right there and then. Thank you Shane.

  • Great Lesson Shane.

    I noticed how the 3 boxes are beautifully aligned as they have the same text in them. But in reality the text will be different.

    How do you make sure the boxes remain the same size when the text is different?

    It looks quite awful to have the boxes different sizes!

    • Hello Dan,

      That’s a good point, yes. You can ensure that the boxes retain the same height by styling the column item directly, instead of placing a content box inside the column. The problem with this approach is that you can’t duplicate the column item like I showed in the video.

      For now, there’s no really elegant solution for this. However, we are working on a solution that I hope we can introduce in the near future. 🙂

  • Shane, loved the long-form tutorial. So many design tips and process refinements that put the power of TA in context. These have the potential to boost both design productivity and effectiveness. I now have a new TA go-to tutorial… Definitely keep these coming, please!

  • I was deciding to use beaver builder or yours for the coming new website. Think you have nailed it and help me to make a decision. Would you consider building a service page tutorial too? :))

  • Hello Shane,
    I did not watchthe video yet but i will watch when i find time. I just wated to ask you quick question.

    Do you think to add sticky element to make header sticky in the feature?

    Thank you?

  • Always happy to see a new training video from Thrive. I always learn something new from every one. The longer they are the greater the benefit. Awesome training, can’t wait for the next one!
    Thanks Shane

  • Impressive… I’ll watch this several times gaining learning and gaining confidence as I go. Surely I’ll need far more time, but know I’ll get it right. The longer tutorial allowed for clear explanation while showcasing features otherwise unseen. Thrive Rocks.

  • I love the longer, more in-depth video with the sophisticated layouts! Would love to see more of these. I’m not a professional designer by any means, but at least for me – I have more time than I do money at the moment, so I like being able to play around with adding some advanced elements and designs for my site.

    Also – I’m equally excited to hear that the Menu Element is being revamped. It’s the only element I’ve been struggling with and it’s been figuratively killing me the past couple weeks, especially when dealing with the mobile responsive layout.

    • Thanks for your feedback, Kevin! I know the current menu element can be a bit of a struggle. We’re working hard to make the overhauled one much, much better. 🙂

  • Can we edit H1-H6 and P specifications for the site? (Rather than a landing page used in this example) I’d love to be able to specify a set of ‘defaults’ to be used site wide.

    • We don’t have a site-wide option for this yet. That’s the role of your WordPress theme, really. However, we are working on a set of features that will let you define styles more globally.

  • Thank you for this.

    It’s hard to create a professional looking home page when our design skills suck.

    I’ve started creating my home page and have got something out but it’s far from perfect.

    This will help me a lot when I would upgrade to a better looking one.

    • Thank you for your comment, Kevin! I hope our tutorials can help you build and refine your design skills over time.

  • Wow. That looks like the hallmark of a genius to me. Went through the video twice and learnt so much about the use of variety in design (variety in width, edge decoration and heading line width/weight/color). The overlapping effects are mind-blowing, and I finally understand what absolute position and z-index are. Not sure how I could have learnt those without an in-depth tutorial on building an actual page.

    • Thank you for your comment, Thomas! Some of the layout options in CSS can be rather complicated (like position:absolute). We’ve tried to make them as accessible as possible in Thrive Architect, but we also didn’t want to leave out such layout options just because they’re complicated. I’m glad to know this video was useful for you to learn some of them.

  • Really great tut Shane. Not a fan of long videos, but actually watched this one in full and would like more of them sprinkled in here and there. Dissecting complicated pages makes learning Thrive Architect that much easier.

  • Excellent again, Shane. Longer tutorials are always welcome (as long as they’re not all long – variety and “quick tips” are great too!).

    I’m eagerly awaiting a new Thrive Theme theme as I have an entire site to overhaul and want to build using Thrive from scratch then add custom pages, landing pages etc with TA. Is there an ETA yet on the new themes themselves? (Sorry to keep asking for MORE, LOL!)

    • We have no ETA yet, but we’ve made good progress on the new theme so far. As soon as we have some more news or an idea of a release date, we’ll post about it. 🙂

    • Hello Wil,

      I recommend no larger than 1920x1080px for background images. Even though some screens have higher resolutions than that, I don’t think it’s worth loading huge images (which slows down your site significantly) just for those super high resolution screens.

  • Hello Shane, thanks for creating this video, it helps a lot. I did not even know that such things were possible to create until you show it. So, it helps a great deal for you to create videos like this as it opens our eyes to know that such pages can be done with your plugin. It also helps that you give us these templates as well. In saying that I would like to ask for a favor, can you create a beautiful template like shown in the video for authors, public speakers, and online educators for personal brands that has that high end elegance like in this template. I’m currently trying to create one and I’m not doing so well…lol. I’m trying to see how I can use this template from this video to accomplish that, but because I’m not a designer its challenging to see with my content. I mean, I like to think I’m doing ok for a non-designer, but I don’t have that elegance that I would like to have. Thanks.

      • Shane, I heartily second this idea! As a freelance trainer, it would be awesome to see this made into a template… As Luis has pointed out, being a non-designer, it’s hard to even know where to start! 😉

        For any tutorials/content from Thrive, I *know* it’s going to be awesome — and exceedingly useful — so I don’t mind how long you make them! 🙂

        My request for a new tutorial is for what you have called “epic [long form] content.” I have 4-5 of these planned, but keep hitting a wall when it comes to writing really long-form “articles” [blog content] in Thrive Architect…

        I know how I want it to look, but am finding that I really need to think through the *layout* ahead of time. I’m thinking specifically about pre-planning Background Sections & container elements… It seems Background Sections work somewhat differently in Architect than they did in TCB, so I’m having to unlearn some TCB processes! 😉

        Loving Architect, but suffering some learning pains! LoL!

        Thanks! 🙂

  • Freaking awesome tutorial! Every time I watch one I want to go back and change my site to make it more appealing. All of these videos are making me a much better designer and I’m not even a designer. Keep up the awesome work Shane!

  • I really appreciated seeing how you used Thrive Architect to build this page. As someone brand new to Thrive Themes and a newbie to building a website I would get a lot from you undertaking the same approach while you built a simpler page and slowed the pace down to accommodate the steep learning curve that a person like me has to go through.

    • That’s a fair point, yes. I will see if I can make a more beginner friendly tutorial with a slower pace. I’m also working on a beginner friendly “how to use Thrive Architect” course that I hope will help you get up to speed. 🙂

  • I just wanted to support Luis G’s comment about having tutorials which build websites for specific niches – such as for selling books (fiction and non-fiction), for speakers, coaches,etc – these could be very useful to those in a specific niche. I’m very grateful for having come across Thrive Themes, and look forward to the day when I finally complete my first website. Thank you!

  • Wow. It is really cool.

    Does it have a feature that allows you to use the wordpress menu like a menu element?

    Also, can you make a tutorial on how to put a drop-down menu with wide stretch box?

    Lastly, if you save that landing page as template, is it available for the next or new page for reuse? For the Blog page, i believed it has element that you will just put it in a content box as blog posts?

    • Yes, there’s a “Custom Menu” element, which displays a WordPress menu and switches to a menu icon on small screens. It also supports drop down menus. The only downside is that currently, the customizablity of this element is very limited. We are working on improving that, though.

      You can save any element you like from this page as a content template and this will let you insert it anywhere on your site, including in blog posts.

  • Yet another fab tutorial Shane. For me, I really value the longer walkthroughs as you pack in many elements, and so there’s something for everyone in the audience, irrespective of experience level.

    • Thank you for your feedback, Ryan! I’ll be releasing some more in-depth tutorials in the future. 🙂

  • Shane, wow! What a great tutorial and landing page. Could this be made into an actual theme? I mean it would be the best looking theme by far?

    • Thank you, James! Glad you like this design.

      Let me put it this way: once we release the new theme we’re currently working on, you can absolutely turn this design into an entire theme. 🙂

  • Great Tutorial, Shane. I love the longer tutorials. It’s totally worth the time it takes to watch it.

    In this one in particular, I loved these things:

    *Info on your workflow to set up a page from the beginning efficiently (including responsive set-up from the beginning.
    *Advanced alignment techniques like Z factor and positive and negative margins to create overlaps. (this stuff is great for people like me who are great designers but detest coding!!)
    *All the awesome mobile responsive tips
    *The long format gives an opportunity for someone to learn your decision making and strategy process for why you’d use certain elements in various ways for different purposes. (if that makes sense, lol)

    • Thank you for your feedback, Jaya!

      It’s good to know that you like the long format. More long format tutorials are in the making. 🙂

  • I watched the tutorial in two “sittings,” so each half was exactly as long as I wanted. I also especially appreciate the kind-of-transcript you included, with the timings in it, so that I didn’t have to take extensive handwritten notes of what time-points to jump to in the tutorial later when I’m trying to understand a particular technique in greater depth.
    I’m remembering the “teaser” you gave of TA a few months ago that gave a quick overview of some of the new features – I thought at the time that this looks great, but I bet it takes forever to actually get here. It didn’t take forever at all! Thanks so much.

    • Thank you, Ernie!

      Yeah, it’s not very long to build the page, especially considering that it would be faster without the narration. However, I still want to make many parts of this process faster. I hope we can cut the time down by half or more, still.

  • Hi Shane. This has been so useful to me today, thank-you. One big challenge I’m facing is using Thrive Ovation testimonials – the options for customising display are very limiting, but I’ve worked around some by putting a slider template inside a content box and then changing font etc on the content box. But there are still some elements that I can’t change – mainly the overall height. Any plans to rework the integration of TO with TA? Loving this toolset, recommending it to all my friends and website designer !!

    • Hi Jonathan,

      You’re right that customizability in Thrive Ovation is quite limited. Especially compared to what can be done in Thrive Architect. Over time, as we add more functionality to Thrive Architect, it will also affect other products and add more customizability there.

  • This is great. I’ve used Webflow in the past. They had weekly tutorials where they would go to different sites and recreate them in Webflow. It was an awesome experience watching, learning, and seeing that it was possible to build any site using their software. This video gave me the same experience. If we could get weekly videos like this recreating other homepages around the net, it would build confidence knowing that Thrive Architect can be used to build sites that even the top businesses use.

    • Thank you for your comment! That’s an interesting suggestion. I might try out a weekly video like that to see how it’s received. 🙂

  • Hi Shane,

    Great tutorial. Please do more of these.

    This is a direct topic recommendation: I am using Architec on a non-Thrive theme (DIVI). I am struggling with custom menues to be properly displayed on mobile view (layer isse, menue is below other content), which seems to be a Z-issue. But I don’t understand how it really works.

    It would be great, if you made a tutorial on correctly using cusotm menu on mobile view.

    Furthermore a few more templates for testimonials would be most welcome.



    • Thank you for your feedback, Lars! I don’t like our current custom menu element very much. That’s why we’re working on a total overhaul of it, along with better header/footer features. Coming soonish! 🙂

  • I decided to follow this as a tutorial and took each step as far as the icon and menu bar. Something went awry in my first attempt so I did it again and the same thing happened. I ‘lost’ images and text. This is what I have ended up with. I’m so frustrated and was loving following the steps. Do you have any idea of what could have happened? Here is the link to the page. You might get a quick flash of part of the image and then it disappears. http://www.bizcoach101.com/?page_id=7106&preview=true ……..All I’m left with is a “quick navigation’ bar, that I didn’t put there. ???

    • Hi Joan that seems like a weird bug…
      We can not see that page though. But our support team might be able to help you out.