Today we'll explore what makes a great, conversion-focused homepage, and share some of our professional designs to help you save time and achieve stunning results.
To really bring this to life, we'll also break down some real websites, and how they've created successful homepages that align to their audience, products and business model.
More...
The Goals of Your Homepage
Before we explore how to design a killer homepage, we need to ask an important question.
What are the goals of your homepage?
The answer is important because effective web design doesn't spring up from some visionary, creative genius. Great homepage design supports the needs of your audience, and the goals of your business.
Consider how these needs and goals inform your design choices, based on your industry and business model.
Here's some suggestions that might fit your homepage:
- Provide a way to easily navigate the website
- Showcase your best content
- Establish expectations about your business and brand
- Feature your products or services
- Introduce a primary call-to-action
- Act as a digital shop window to your local business
Because one design doesn't fit everyone, we've created a choice of professional homepage starter templates for 4 major business models.
Designing the Best Homepage for your Business Model
Each website business model has different audience and business needs – you can't expect the same homepage design to work for both a local business and a content publisher.
To help get you started, our Shapeshift WordPress theme comes bundled with a collection of stunning homepage designs, based on the common goals of these 4 business models:
- Service Business
- Local Business (2 variations)
- Personal Brand
- Content Focus
The 5 homepage design templates currently available with Shapeshift.
Each template is 100% customizable using our visual editor – content, layout, colors – you can edit everything to perfectly fit your brand.
Starting your design with one of these homepage templates will save you time and focus. There's no need to reinvent the wheel!
Let's walk through each template together...
Local Businesses Homepage
Purpose
If your brick-and-mortar business welcomes customers to a shop, showroom, office, factory – or anywhere else with a fixed address – then our local business homepage templates will be a huge help.
Shapeshift offers a choice of 2 local business homepage designs.
You can see the difference here:
It comes with fully-customizable visuals, like an eye-catching top section and call-to-action, and featured images to replace with your own.
Our local business templates come loaded with professionally designed testimonials or review elements, pricing tables, case studies, and interactive accordion-style toggles to include details without overwhelming your visitors.
You can improve navigation between these elements by using jump links. These make it easier for your visitors to find the information they're looking for.
Local businesses have the unique opportunity to showcase an interactive map, using a popular platform like Google Maps. That comes as standard with Shapeshift, of course, straight out of the virtual box.
Shapeshift comes with 2 homepage variations for local businesses, but we'll break down just one below to save your mouse wheel!
Design & Page Elements
Service Business Homepage
Purpose
Professional services can be hard to market without a cohesive story or social proof.
That's exactly what our services homepage template excels at!
Whether you offer insurance, legal advice, landscaping, or agency services, it's critical to stand out from the crowd and compete on more than just price.
Testimonials, reviews and case studies can be a powerful influence on undecided customers. They need to see evidence of positive transformations experienced by other, happy clients.
Our services homepage features a fully-customizable contact form to answer enquiries and guide visitors into your sales funnel.
Design & Page Elements
Content Focused Homepage
Purpose
Content is king on the internet. It's the reason people visit your website, again and again.
But the traditional WordPress blogroll system is too short-lived and fleeting – the more you publish, the faster your content falls off the radar!
Our content-focused homepage template fixes this problem by giving you powerful tools to showcase your best articles, videos and audio posts.
Do you want to display the top posts in each category? Easy.
How about the best posts by author? Trivial.
But can you specify individual posts or display a random selection? No problem!
Of course, all good content publishers understand the value of growing a mailing list. That's why this homepage template features multiple places to provide a compelling call-to-action.
Design & Page Elements
Personal Branding Homepage
Purpose
A personal brand homepage focuses on the person – not the product.
Your homepage needs to showcase your story, face, voice and personality, and encourage visitors to know, like and trust you.
Often, customers aren't even buying a product.
They are buying into a story, a personality and promise of transformation.
Read our guide: How to Build Your Perfect Personal Branding Website
Our personal branding homepage template features a visual hero image, social proofing tools like logos and testimonials, quick navigation options to major content hubs, and a customizable post grid to showcase your best blog posts.
Design & Page Elements
Great Homepage Designs Built with Thrive Theme Builder
Shapeshift's homepage designs are stunning out of the box, but they become even better when customized to your exact business and audience needs.
We've collected some real examples of successful businesses that use Shapeshift's homepage template designs to create killer websites.
Homepage - Move with Lara-Lyn
Which homepage design does she use?
Personal Brand Homepage Template
Lara-Lyn uses Thrive Shapeshift's personal branding design for her homepage.
It's perfect if your business model focuses on your face, personality, voice and story.
See a live demo of this homepage template...
Elements used
Lara-Lyn started with the personal branding homepage template, and stripped it right back to the essentials for her business.
It's a short, no-frills homepage with a laser focus on establishing trust and guiding visitors into her marketing funnel.
She's removed the featured resource boxes and the blog post grid, and aggressively focuses on the call-to-action to sign up for her free course.
Lara-Lyn's hero image section is vibrant and friendly – she's even matched her clothes to the brand colors!
It's worth pointing out how much effort Lara-Lyn has put into her choice of homepage images. Great personal branding websites rely on professional, relatable images to connect with their audience, and Lara-Lyn is a perfect example to follow.
Her website really takes advantage of Shapeshift's custom font feature, allowing her to use typography that fits with her brand and personality.
She's adapted the social proof logos to showcase her certifications; a clever idea for anyone offering health or wellness related services.
Showcasing qualifications and credentials using the featured logo strip.
Service Provider Homepage Template
Simply Insurance has adapted Thrive Shapeshift's service provider design for their homepage.
This template focuses on creating a compelling story around your product and guiding visitors to critical content.
See a live demo of this homepage template...
Elements used
Simply Insurance uses their homepage to showcase a wide range of insurance services – from disability to rentals, auto to pets.
Recognizing the need to get visitors to self-identity quickly, they've customized the top hero section to feature eye-catching links to the top insurance products. This is a great use of the above-the-fold space, especially for businesses who don't have a single call-to-action.
Using columns and icons to offer quick links to important content.
Immediately below this, Simply Insurance features the core benefits of their service and a testimonial as social proof.
To further establish their credibility in an industry notorious for its less-than-ethical agents, Simple Insurance proudly features their insurance partners to reassure visitors.
Establishing credibility by association to trusted partners.
Shapeshift's homepage templates give you a great design starting point, and they really shine with a little customization. That's exactly what Simply Insurance has done, by adding sections for each major product, supported by a Table of Contents element that follows as you scroll!
Combining design elements to fully customize our homepage templates.
This isn't a core part of Shapeshift's homepage template, but is easily achievable using Thrive Theme Builder's visual editor (all available when you get Thrive Suite).
In the next section, Simply Insurance features their latest blog posts to promote their most recent content. These posts are dynamically displayed, making sure they automatically update whenever new posts are published.
At the very bottom, Simply Insurance offers a mega footer, providing an alternative navigation for both visitors and search engines to find their deeper content. This includes a contact section, with a helpful click-to-call number.
Contact information including a click-to-call number.
It's hard to make a service like insurance interesting, but Simply Insurance has done a great job in creating a useful and aesthetically pleasing homepage to promote their business.
Homepage - Daniel David Wallace
https://danieldavidwallace.com/
Which homepage design does he use?
Personal Brand Homepage Template
Daniel David Wallace also uses Thrive Shapeshift's personal branding homepage design.
He blends this with a focus on his writing course to promote his services.
See a live demo of this homepage template...
Elements Used
There are thousands of writers offering workshops and courses, so how does Daniel stand out from the crowd? He understands that his most powerful marketing assets are himself and his story.
His homepage features a hero section with a friendly, relatable image. It isn't a studio-quality photograph or a corporate headshot. I'm guessing he took a few selfies on his phone and chose the best one.
But it works because it says "I'm just like you. You can become a writer too!"
The hero section features a clear, compelling headline and call-to-action – clicking the button opens a lightbox opt-in form to join his mailing list.
A low-barrier offer is a great way to grow your email list.
Following this, Daniel explains his personal approach to writing with 3 feature boxes (often called benefit boxes). They help to build interest and set expectations.
3 clear features or benefits is a good number for early on the homepage.
Below this is an interesting element, offering curious visitors the chance to read even more about his approach to writing, via a page he calls his manifesto.
Many visitors will skip right past this (and that's perfectly OK), but this section is a clever way of giving people the opportunity to be further convinced that Daniel's approach has merit.
Full-width sections can looking stunning and break up long homepages.
Next up, Daniel gives some guidance for new visitors. This line is genius!
"If you're new to this site, and want the fastest assistance for the smallest commitment, pick one of these free resources"
I mean, who doesn't want immediate help for little commitment?
What Daniel is really doing is inviting visitors to self-select a path that is relevant to their needs. From here, they enter his mailing list tagged by interest and receive content that is more closely aligned with their personal goals.
A quick start section helps new visitors self-segment and find great content.
Daniel uses Shapeshift's pre-designed resource hub boxes to ask his visitors "What are you interested in?" ... more invitation to self-segment.
Each box links to a category or silo page, packed with resources tailored to the visitor's choice.
Daniel uses resource boxes to encourage visitors to self-segment.
At this point, if the visitor hasn't chosen a path, they need something different to address their concerns or reluctance.
Daniel uses this opportunity to feature some encouraging testimonials – he lets his past clients speak for him. Authors who symbolize the success a visitor might achieve by following his course.
Testimonials are a powerful social proofing tool.
If you've scrolled this far down without taking action, it's obvious you're not interested in Daniel's main services.
Daniel's homepage still has one last chance to encourage you to take action!
It finishes with an unmissable alternative call-to-action section – a free lead magnet with a well-designed cover image.
Of course, it's designed to grow his mailing list in exchange for a free resource. I'll bet it consistently converts too.
Don't be afraid to create BIG call-to-actions with compelling graphics.
LevelUp - Product Support for WordPress
We've created great homepage templates for local, service, content, and personal branding businesses – but there's nothing stopping you from simply choosing the best design regardless of the name.
The service provider template might be a great fit for your local business.
Or your personal brand might look fantastic with a customized content-focused template.
Here's a great example...
LevelUp provides WordPress customer support, but they use our personal branding homepage design.
They decided this starter template ticked most of the boxes they needed in a homepage.
With a little customization, they have a clean, streamlined design that doubles as a sales page. Here's how:
The hero image is replaced with an embedded video.
The hero section call-to-action is replaced with a button to start a free trial.
The resource hub boxes are now featured benefits.
The bio box now features the entire team.
A new, interactive tab section has been added to explain "How it works".
LevelUp.support - A service provider successfully customizing our personal branding homepage template.
Your Turn
You can get instant access to all these Shapeshift homepage design templates — the companion WordPress theme for Thrive Theme Builder — that comes packaged with Thrive Suite.
Choose the homepage that best fits your brand, audience and business model, and customize it to your needs. Change the colors, edit columns, hide entire sections, or add new ones – you have total control over every page element.
Have you already built a homepage with Thrive Theme Builder?
Share your experience in the comments below and share the link for everyone to see!
Super cool templates and blocks, thanks. Any plans for a set of sales pages in this new Shapeshift look too?
Hi Ru,
Thanks for the suggestion. Using the blank page with the page blocks will already allow you to create a sales page from scratch.
You can use the online course sales page recipe as a guide to add the different blocks.
But I’ll add it to our request list to have pre-made sales pages.
Good to know, thanks Hanne!
WOW. Thank you, David, for featuring my site!
Thanks for really putting time into using Shapeshift.
You’ve done a great job and it shows!
I really can’t imagine how I would achieve the level of design for my homepage (and the entire website!), without the Thrive Themes! And the conversion focus? No other theme builders out there can beat Thrive Themes. Definitely worth much more than I pay for. ????????????????????
Thanks for your kind words, Samphy!
This looks so cool. I love Thrive Architect so much, I’ve been considering Thrive Themes and comments too… I’m addicted.
The builder is excellent — it really helps you build a consistent look and feel across a large site.
What an incredibly well written and thorough article.
PS I can’t wait for the same styling options for Thrive Apprentice. Right now there’s a style gap between the visitor-facing side of my site (TTB) and the customer-facing side (TA). If nothing else, I’m counting down the days until I can use custom fonts on my TA pages — which Theme Builder applies so elegantly.
Solid suggestion, Daniel!
Hi David, this article is brilliant. I am still building my site, and I find it extremely useful as a “quick reminder” although I follow Shane’s videos, lessons and podcasts.
Well done
Thanks Pablo. Good luck with you site, remember to come and share it when you’re ready!
This is truly a fantastic, well-written article. Will these be updated to Thrive Architect? Or is development going to stop on Architect?
Hi Crysti,
We’re continuing developing Thrive Architect on full speed (as you can see from our product updates) but the Shapeshift theme is specific to Thrive Theme Builder.
Hallo
you would have to do more tutorial about the new themes
Hi Gashi,
What would you like to learn?
We already have a bunch of tutorials and courses available, here are some of the most popular ones:
– Build a conversion focused website from scratch
– Build a coaching website
– How to set up specific category pages
– How to create blog templates
– How to create a mega menu
– How to create 404 pages
We completed the website of my wife a few weeks ago. We used a mix of Thrive Architect and Theme Builder options. She is a beautician and we built each page of her main services as a landing page. We are already experiencing a steady increase of conversions from our regular ads, around 20%. We just started the waxing season. So, for us a website that convert is a matter of fact. Great tools. Well done Thrive Themes! We are looking forward to get new features and use the builder more extensively.
That’s amazing! So happy to hear that.
what about local business templates like for pest control , painters, electricians plumbers ETC
These are really service providers limited to a local area – they’re not local businesses with a shopfront.
In these cases, I’d recommend using the service provider homepage template, or customizing one of the local templates to remove any address information. Either option should work fine.
Cool post but now that you have added woocommerce to thrive theme builder when will you add shop homepages?
Also need shop headers.
Keep up the great work.
Hi Adam,
In the templates, you already have 9 different shop homepage templates to choose from.
As for the headers, we have the double headers which are ideal for shop purpose but we’re working on specific shop headers too.
Can you please add some new pages/templates/blocks etc that are related to Pets. Pet Rescues/Pet Stores/Animal Sanctuaries etc. Thanks.
Our templates and blocks are designed to be easily customizable to fit your niche. Just choose one with the right layout and replace the images/content.
Is there a specific element you want to see?
It’s great to see someone working in your niche. I have a rescue cat and he’s amazing!
Taking a look to buy the thrive comments. It looks good. HOWEVER, the comments don’t have a timestamp, I couldn’t know when the comments are made or if this thread is alive. I think posting the time is super essential. Is there any options for it to show?
I am an author and like Daniel David Wallace’s design. Can you tell where in ThriveThemeBuilder that I can find the “styled content boxes” that DDW uses to describe the features of Character First Writing? I have looked through all of the different styled content boxes but can seem to find the one that he is using.
Hi Bruce. Daniel has added a pre-designed Block element.
Add a Block to your homepage and filter the designed by “List Content” – you’ll find it there.
Thanks David. I’ll give it a try!
Hi Bruce! The element is under “List Content,” as David says. Here’s a screenshot https://dsc.cloud/e5661e/how-to-find-the-product-blocks
PS I found that the Theme Builder auto-generated a fairly muted palette of colours from the initial blue I picked out. For a business site, this probably make sense, but it looks odd in a creative field: so I manually added a bold yellow to the mix — that’s the accent I used in this block and in a lot of the buttons. You may want to do something similar for your author site.
I added a comment before and it was never posted.
I hope you don’t only allow comments that are praising your work.
This is constructive criticism. It’s an issue that i have found that needs to be addressed.
After working with your products i think i may have found the problem. but im not a coder so i don’t know how to fix it.
please take this seriously as i have been a member from the beginning.
the issue
when i go to websites in this article and my own the header image is blurry.
when you go to another page of the site the header is not blurry.
i put up a header and tried the content box size and the google dev tools size and got the same issue.
But it only occurs when putting an image in the header.
if i put the same image as an image on the page it looks great.
so i believe the image is being stretched to the header content box size and thats why it becomes blurry
Hi there,
This seems to be a problem with the size of your image and the size it gets displayed.
Could you please create a ticket on our support forum? That way, our support agents will have a look at your site and help you out!