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.

More...

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)

If you own Thrive Architect, you can use this template on your WordPress website, right away. You can find it in our landing page cloud, where it is in a landing page set called "FitBrand". Along with the homepage, you also get several other pages you can use to build a lead generation funnel.

Tutorial Chapters

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

As usual, I start with a normal WordPress page and then load the "Styled Blank" landing page template. I also remove the theme CSS completely, to keep the page as lean as possible.

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:

  1. They have to be clickable (that is, the whole card should be clickable, not just a line of text or button inside it).
  2. 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!

Shane

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.

Author: Shane Melaugh

Shane Melaugh is a co-founder and the CEO of Thrive Themes. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

  • Danielius G says:

    Hey! I would disagree about clicking on scroll bars. I find that clicking it and moving is way faster, if you just want to gloss over the article first and find out what’s it about or just to get to comment section faster :’P

    (P.S. But hey! Awesome template! I really love the colors of this one!)

    • Shane Melaugh says:

      You know, now that I stop and think about it, I’ve been spoiled by the flywheel technology thingy in Logitec mice. If you’re ratcheting away at a scroll wheel a few lines at a time, that’s a sad state of affairs indeed. I think for both scroll wheels and the scroll gesture on a touchpad, it’s imperative that you can “flick” the scrolling to move it at high speed. If the page only moves while your fingers are moving, that’s bad hardware/software.

      • Danielius G says:

        Oh, I need such mice! :)

      • Suzanne S says:

        Shane,

        Which mouse do you use? I have one with a scroll wheel but I’m not sure about the “flicking” feature.

      • Shane Melaugh says:

        I use a logitech MX master. I believe all of the higher-end logitech mice have this “flywheel” feature. I highly recommend it. :)

      • Robert says:

        I love the Logitech flywheel! Zoom through pages at a time with one flick!

  • Stephen Prior says:

    Nice!

    Any new update on the theme?

  • Carl says:

    Awesome content. Thanks for putting that together. Learned a LOT.

    One question, since there is no such thing as “hover” on mobile, what happens with the ‘box shadow’ in the blog section on a real phone as opposed to how the editor show it?

    • Shane Melaugh says:

      Hi Carl,

      On phones, there just won’t be a box shadow. This is one of the reasons we shouldn’t rely solely on hover effects to communicate that something is clickable. In the case of these “cards” on the page, the icon in the bottom right is there to indicate that you can get more by tapping on it, even when no hover effect is visible.

  • Linda B says:

    Love this, thank you! It’s so easy and beautifully done. If you want to add additional pages and a top menu, it would work even though you’ve called this a landing page? I build multi-page sites and wondering if I can load a “landing page” template and build out from there… Also, I am a yearly member for a few years now but my Architect doesn’t show this FitBrand content or the “blank styled page” you reference here (only one blank landing pg in my set). Do I need to upgrade somewhere or ??

    • Shane Melaugh says:

      Hello Linda,

      You can build out multi-page mini sites using just Thrive Architect. There’s a case study here, where I did just that.

      Regarding the missing templates, please open a thread in our support forum about that. If you have the latest version of Thrive Architect installed, you should definitely see all those templates.

  • Andy says:

    This is awesome, Shane. However, the biggest challenge we face is having a matching blog section to the home page. When creating a blog page or post on the same site, you cannot edit the header and footer sections to match the bespoke created home page. Hopefully you will have a solution for this soon.

    • Shane Melaugh says:

      We’re working on that problem.

  • rishin says:

    Not even three minutes in and I’m learning new things. Great job again.
    I can honestly say that Thrive Themes is the only blog that I check daily because of how helpful the content is.

    • Shane Melaugh says:

      That’s great to hear! Thank you, Rishin.

  • Content boxes… this solves the mystery of some things now working or aligning properly on my old pages. Thank you for the video!

    • Shane Melaugh says:

      Yes! Content boxes for everything. :D

  • Stephane N says:

    Thank you Shane, awesome tutorial. Learned a lot of great information, tricks and how to use content boxes, lol.
    I am so happy to use Thrive Architect.
    Thank again.

    • Shane Melaugh says:

      Thank you for your feedback, Stephane! I hope to convert everyone into an avid content box user. :D

  • Edson says:

    That’s a amazing content!
    Love the video :)

    • Shane Melaugh says:

      Thank you, Edson!

  • Bert says:

    Nice work Shane! Being able to save gradients would be a nice additional feature, since you often have to reuse them on different elements. And sometimes it can be a bit tricky to add content in a content box with no margins or paddings (I often have to set the minimum height of the box to some value first and only then can I drop content inside of it). Thanks for the tutorial!

    • Shane Melaugh says:

      Yes, I agree it would nice to save and apply gradients. I’ve thought about this a lot. It’s very tricky, unfortunately. In fact, the entire color picker is a surprisingly challenging thing to design. Anyway, if we can make it happen in some practical way, we will.

  • Christopher B says:

    Magnificent. As always I learn something new.

  • Javier says:

    Amazing content. I enjoyed a lot the way that you explain the concepts. I will buy this plugin soon. So interesting. Thank you for this quality post.

    • Shane Melaugh says:

      Thank you, Javier!

    • Megan says:

      Javier… all of the Thrive posts are like this. Meaning – they are always full of amazing content. Always something new to learn. You won’t be disappointed when you buy!!! Love you Thrive Team ;-)

      • Shane Melaugh says:

        Thank you very much for your endorsement, Megan!

  • Jeff Klein says:

    Hi Shane. Thank you for this post. It was great watching you use Thrive Architect to build out a site and listening to your methodology. I really appreciate your sharing and products. Keep them coming.

    • Shane Melaugh says:

      Thank you for your comment, Jeff! I’m happy to know you found this useful.

  • Gaëtan N says:

    It was very interesting! When I saw the video time at first (about one hour), I said to myself like “OMG, too long!”, but… it wasn’t.
    I learned a lot, even after using the architect for weeks now.
    Thank you, Shane!

    • Shane Melaugh says:

      Nice! I’m glad you gave the video a chance, despite the length. :)

  • blbpublishing says:

    I always learn when I watch your tutorials. Thank you. You did mention in the beginning that you would include a tutorial on how you created the ‘get set to sweat’ image thing. Have you created that tutorial or is there someplace else I can go to see how this is done?

    • Shane Melaugh says:

      That one isn’t done yet. It’s coming soon!

  • Chris says:

    How do you secure a digital download page with Thrive Themes? Do you have any videos on this topic?

    • Shane Melaugh says:

      Hi Chris,

      You can check out this Thrive University course (if you’re a member), to see our recommended setup. As you’ll see, for free courses and downloads, we don’t recommend securing the download page. It’s basically not worth the hassle. For paid products, check part 1 and part 2 here, to learn about some good options.

  • Bob C says:

    Unfortunately, I don’t have your talent or your time so Architect is overkill for me.

    • Shane Melaugh says:

      That’s what templates are for. No one has to build anything from scratch in Thrive Architect. You can load a template, change some lines of text and you’re good to go.

  • Hi Shane! Thanks for this tutorial! Just what I needed since I run a gym myself and was struggeling to build a nice website with pressive. This looks very nice. When using this as a homepage. What do you suggest to use for the other pages on the website? The same layout with less items or one of the other fitness templates in order to stay consistent?
    And is it possible to show different testimonials in the used example? So that they switch every x second to another one?

    Thanks again for this! I think I have something to do this weekend ;)

    • Shane Melaugh says:

      Thanks for your comment!

      We don’t have a way to switch or show animated testimonials at this time, sorry. Regarding other pages, it depends on how large your site is. If your site is just a couple of pages, you can easily create is using a few landing pages and switch out the content. If it’s a larger site, you should use a theme and use the theme’s pages for the rest of the site. That makes things easier to manage, generally.

      • Marjolein Bakker says:

        Thanks Shane! You use very nice and playful icons in this tutorial. Where did you find these? Any tips for nice sites maybe?

      • Hanne says:

        Hi Marjolein,
        Not sure which one Shane used here but check out The Noun Project. A lot of icons there!

  • JS Ritter says:

    Thanks Shane for another excellent over-the-shoulder page build… Will you please create a build tutorial regarding > the Curved Page Sections (background sections) as displayed in Stephanie’s blog post covering the Antsle Landing Page Remake (high-ticket-sales-pages) utilizing Thrive Architect? I like how the page sections flow from one to the next with the slightly curved look instead of the normal block or straight line divisions between page sections… Thanks in advance!

  • Howard Primer says:

    I enjoy the educational support provided by Thrive Themes, particularly with posts of this kind. I find that my Thrive Architect experience does not match the one in some of your videos, like this one. For instance, when I select Page Setup it does not provide me with the same menu that was shown. Is there some reason why my Thrive Architect experience should be different?

    • Shane Melaugh says:

      No, there aren’t multiple versions or tiers of Thrive Architect, so you should see all of the same options. However, note that all the landing page related options are only available when editing a page. If you’re editing a post, you can’t load landing page templates.

      If you’re editing a page and not seeing the same options, please create a support ticket about this issue.

  • NOAH P says:

    So fast, so beautiful, I love these tutorials because I learn to do things with better precision. Shane, I want to learn how to make those images like the one Get Set To Sweat….How about either some free images or teach us how to make a few different ones….Thank you

    • Shane Melaugh says:

      Thanks for your comment! A tutorial on how to make that cover image is coming soon!

  • NOAH P says:

    One question. If I change fonts during build then I go back into landing page settings and try to change to different fonts will it work? Doesn’t seem to

    • Shane Melaugh says:

      Hello Noah,

      Styling rules always go from the more general to the more specific, with specific rules overriding general ones.

      The page level font settings are the most general settings available on a landing page. Any font change you make to a specific text element on the page itself is a more specific rule- It overrides the page-level font settings and is no longer affected by them.

  • Ulf Z says:

    It’s really nice to see, what kind of effacts i can do with Thrive Architect. I have to think about more how i can use this things.

    Nice Job and this in less a hour.

  • David Leger says:

    I like how you broke this article down and matched it with the video by adding the timestamps. Seems simple, yet, I don’t see it often.

  • >

    Join Thrive University (it's FREE!)