Homepage from Scratch: Advanced Visual Design Without Photoshop

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:

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.

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:

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!