Homepage from Scratch: Advanced Visual Design Without Photoshop

Author
Shane Melaugh   167

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!

More...

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!

Shane

by Shane Melaugh  September 26, 2017

167

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?

    Thanks

    • 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.