How to Build a Fitness Landing Page from Scratch (+ New Templates!)
Want to see how you can build a modern, sleek and beautiful homepage for a fitness website? In this video, you can watch me build just such a homepage, step by step, using Thrive Architect for WordPress.
If you didn't wake up this morning thinking "I want to see someone build a girly fitness homepage", you should still check this out. This tutorial will show you how to build beautiful layouts for any purpose and you'll discover the best shortcuts and time-saving tricks along the way.
Plus, we've released a whole new set of landing pages, all following this same design style, perfectly suited for a feminine fitness or lifestyle brand.
Meet the Homepage
Here's what the entire landing page layout looks like, once it's finished:
This is a page that can be used to advertise a specific offer such as an ebook or an online course, but it can also serve as a general homepage, from which visitors can explore your site and get to know your brand.
The page heavily makes use of images and colors. We've built the page in such a way that it's easy as possible for you to replace these images with your own and keep a consistent style, without needing to use Photoshop or any other photo editing tools.
How to Get this Template (+ More)
In the video, you get to watch over my shoulder as I build this entire page, literally starting from a completely blank page in a default WordPress theme. I also do a lot of "thinking out loud" and I especially emphasize steps I take to build the page efficiently and save time as I'm doing it.
One thing you'll notice is that I practically never do the same thing twice. Instead, I plan ahead and use duplication and other features to my advantage.
Here's an overview of the different chapters in the video, for your reference:
Make Use of Keyboard Shortcuts
Before we get into the first part of the landing page build, let me share one of my favorite time saving tips with you. If you watch the video, you'll see that I always transform text elements without clicking on anything.
Thrive Architect supports all the basic keyboard shortcuts that you're used to from a word processing app like Microsoft Word or Google Docs. The main ones I use all the time are:
- Ctrl + C - copy
- Ctrl + V - paste
- Ctrl + B - bold text
- Ctrl + I - italic or emphasized text
- Ctrl + U - underline text
- Ctrl + K - add hyperlink to selected text
- Ctrl + S - save your work in Thrive Architect
If you're a Mac user, first of all I offer my condolences and secondly, you can substitute the "Cmd" key for the "Ctrl" one to make all these same shortcuts work.
It may seem like a small thing, but if you aren't already using keyboard shortcuts, start using them now! It doesn't take long to get the hang of them and they will save you countless clicks over time. Once you keyboard shortcut, you never go back.
Also: Don't Click on Scroll Bars!
This is somewhat related to keyboard shortcuts: scroll bars are incredibly inefficient and I'm convinced they're not meant to be clicked on. Ever.
I'm always shocked to see that there are people who click-and-drag scroll bars to move through a page. If you want to use anything with a screen efficiently, you should never do this.
What to do instead? If you have a mouse, use the scroll wheel on the mouse. If your mouse doesn't have a scroll wheel, throw it in the trash (or gift it to an enemy, if you don't want to be wasteful) and get a proper mouse. And if you're using a touchpad, use the two-finger scroll gesture.
Set Up Your Blank Template
Starts at 00:35
Once the template is loaded, I plan in advance and set up my fonts and a few other details before I actually start building out my content. I use the landing page font setup to do this. Note that you can always return to this step later if you change your mind about font choices, so don't sweat it if you don't know all the details of your font setup yet.
Create Your Default Background Section (for White Space)
Starts at 04:23
An important detail in my preparation work is that I create a "default" background section for myself, which includes top and bottom padding. I duplicate this section multiple times and use it for almost everything on the page.
As a result of this, my design ends up having consistent white space, which is a subtle but important factor in making it visually pleasing.
Build an Awesome "Split Layout" Title Section
Starts at 04:54
One of the things I love about Thrive Architect (especially compared to other page builders) is that it doesn't constrain you at all. You aren't limited to specific rows or blocks, you can nest columns and boxes within each other until the cows come home and you can create overlapping and layered elements to your heart's content.
For our title section, we make use of this. We use a column layout as our basis, so we can have a nice "vertical split" effect. And then we can use nested content boxes to keep everything tidy and nicely aligned. Note that the outside-in editing principle is very important here.
Apply the "Any Brand Color" Image Trick
Starts at 08:40
On the main image in the split layout, we see the first application of a certain image editing trick we use throughout the page. In fact, it's a combination of several tricks:
- We use a container (like a content box, background section or column item) and add a background image to it, instead of inserting an image element. This allows us to "crop" the image in Thrive Architect.
- We make use of background layers: in Thrive Architect, you can add multiple layers of background images, colors, gradients and patterns and freely arrange them, to create all kinds of end results.
- In this case, we're using a background image with a semi-transparent, gradient overlay.
- We use a black and white background image and overlay it with our brand colors. As a result, everything on the page perfectly matches our brand style and will continue to do so as long as the background images used are monochromatic.
The images and the brand colors end up being independent of each other. Here's an example of how you can change the brand colors:
And here, we've replaced the background image and changed the gradient color as well:
As you can see, you can change the theme and mood of the page very quickly, without ever needing to leave Thrive Architect or reach for a photo editing tool. And if you follow this handy guide, you can make sure that your gradients don't end up looking tacky or weird when you've changed the colors.
The Universally Useful "Put it in a Box" Trick
Starts at 12:05
If there's ever a layout you want to achieve and it somehow doesn't seem to work, my recommendation is that you start putting things in content boxes. More often than not, this will fix whatever the issue was (and in this part of the video, you'll see a perfect example of this).
A Geeky Note About this Quirk
I want to point out here that this isn't an odd quirk in Thrive Architect that we ought to fix. Thrive Architect creates your pages using HTML and CSS, the design languages of the web. And there are some quirks in CSS that we can't work around. For example, the "float" feature doesn't work inside a flexbox container (also known as a column). But if you put a content box inside that flexbox container, float works just fine again.
Why? I'm sure there's some reason, but it's beyond my understanding of CSS. All I know is: putting things in content boxes is the first solution I reach for, when a layout change doesn't work the way I expect it to.
Also note that this only concerns advanced users who build complex layouts from scratch. If you typically craft your blog posts in Thrive Architect and work from our pre-designed landing pages, you'll never have to worry about details like this. :)
Build the Classic "3 Benefits" Layout
Starts at 15:15
If you look for it, you'll find this everywhere: a 3 column layout with icons or images, a small heading and a short text description. Each column highlights a benefit or unique selling point of whatever the page is advertising.
It's such a common layout because it works. It's a great way to communicate quickly what you're about and help visitors decide whether they want to keep reading or not. In the video, you'll see how I build this section as quickly as possible by planning ahead, using the "duplicate" feature and, you guessed it, putting things in content boxes.
Make it Mobile Friendly as You Go
Starts at 20:13
Because I rely on duplicating sections and elements so much, it's an important part of my workflow that I make things mobile friendly section-by-section. In this part of the video, you'll see how I make what we built so far mobile friendly in as few moves as possible and what kinds of things I pay attention to, for mobile optimization.
Build Brand-Colored, Decorated Images
Starts at 22:49
For this next section, the main emphasis is on the images. This is the "Instagram" part of the page, where we use colors, images and moods to convey a feeling to our visitors, along with the words used on the page.
We are using the same image trick as we did in the title section, for this. In addition, we're using a content box and the "pattern" feature to add an interesting visual twist to the images. And of course, we're building the whole section and making everything mobile-perfect in just a couple of extra steps.
Create the "Pattern Interrupt" Testimonial/Author Section
Starts at 33:45
This next section stands out from the rest of the page. It's darker, bolder and uses a different layout than what we've encountered before.
That's on purpose. We call this a pattern interrupt. Design consistency is one of the most important things for a professional, well-made looking page. But too much consistency and repetition can lull your visitors to sleep (or more realistically, to inattention). That's why we insert something that catches you off guard, in this section.
Make Use of Nested Content Boxes
Starts at 36:22
In the Testimonial/Author section, we create this nice image layout with an overlap effect:
To accomplish this, I use a construction of 3 content boxes: one parent content box and 2 further content boxes inside it.
Content boxes are probably the most flexible and universally applicable element in Thrive Architect. If you want to take your page building to the next level, get familiar with content boxes! And don't shy away from stacking them, either. Remember: in Thrive Architect, you can nest as many elements as you want.
Here, we use the outer content box to create a clean, unbroken drop shadow around the author box. The 2 inner boxes form the two sections (author image and colored background with name and role).
Add 3 Fancy Link Cards
Starts at 42:23
The next section can be used to link to 3 feature pages, product pages, blog posts... anything you like, really. Think of this as 3 fancy links. Instead of just having some text links that people will likely ignore, we're building a nice layout and presenting each link as a "card" with a title and some text. That way, we can entice people to make a choice and click through on one of these important links.
Make the Cards Clickable
Starts at 47:10
There are 2 important components to these link cards we're building:
- They have to be clickable (that is, the whole card should be clickable, not just a line of text or button inside it).
- It should be clear that they're clickable. We do this by adding a hover effect.
In this part of the tutorial, you'll see how to take care of both of these points. And you'll see how advanced our hover effect feature is, which allows you to add hover styles to the card as well as to elements inside the card.
Add a Final Call to Action
Starts at 50:00
At the bottom of the page, we add a final call to action section. While this section looks really awesome, we're actually being quite lazy about how we build it. It's mostly a copy of our title section.
In this way, you get to see how flexible that title section design is, because with just a couple of clicks and one change to the mobile responsiveness, the transformation is complete.
What's Your Favorite Part?
What's your favorite new trick you've learnt from this tutorial? And how do you like this new landing page set? Let me know by leaving a comment below!
P.S.: the only part I skipped in the tutorial was building the ecover graphic in the title section. And in case you're wondering: yes, that graphic is fully editable in Thrive Architect. I will publish a separate tutorial showing how that was done, soon.