Building your website's homepage
In Chapter 4, you'll discover everything you need to build a wow-worthy website homepage, plus a tutorial of how to set one up in Podia.
It’s the moment you’ve been waiting for! Let’s build a beautiful website that represents you, your passions, and your business—starting with your homepage.
So far, you have:
Chosen your domain name (and purchased it from a registrar if necessary)
Selected your website-building tool
Mapped out your website structure
Assembled your brand assets like colors, fonts, and logos
Outlined some preliminary website copy while considering your target audience and keyword research
Found or made images
You can use whichever website builder tool you like, but I’ll be using Podia for this demonstration since it’s easy, fast, and free.
( Sign up for a free account here and we can build our websites together!)
Do a quick stretch, grab yourself another cup of coffee, and clear out any distracting tabs you’ve got open.
Let’s do this!
Creating your website
When you create a new Podia account, you’ll first be asked what you want to do. Select “Launch a website”.
You’ll be taken to a dashboard where you can watch onboarding videos, review your settings, and set up your site.
Click on the circle with your initials on it in the top right corner. In the drop-down menu, select “Settings”.
Head to the “Domain” tab to choose your free Podia.com domain. This is also where you can connect a custom domain if you’ve got one.
Next, return to your main dashboard and click the “Set up website” button under the video of Ben.
Podia will walk you through some basic setup steps. You can choose to begin with a blank slate if you want to build your pages from scratch, or you can click “Full website” to use a starter template.
Next, you’ll add your brand information. Upload your logo, select your language, and add your primary brand color.
Then add your bio information. This will generate a reusable block that you can place anywhere you like on your website.
Click “Show me my site”.
If you picked “Full website” during the “Choose a place to start” phase, your website will automatically be populated with sections and pages. You can change each section by clicking on it and using the left-hand editing options.
If you picked “Blank site” during the earlier setup stage, you’ll be taken to a page that looks like this.
Let’s use a blank site for this demonstration, but know that the starter template is available to you if you’d like to use it.
In the top toolbar, you’ll see tabs for colors and fonts. Click into colors if you’d like to change the default colors on your site, and click into fonts to change the font used for your headings and body text. You can also adjust the spacing, size, and line height.
A few quick tips before you start building the homepage of your free Podia website:
Podia is a “point-and-click” website builder with pre-built sections. On the free plan, you can add a bio, email form, text block, image block, grid, list of links, FAQs, testimonials, and categories.
To add a new block to your page, hover under the header or most recent block and click the plus sign. Select the block you want to add from the left-hand sidebar.
Each block allows you to edit the content (words, links, and images) and design (layout, colors, and styles). The content and design tabs are located at the top of the left-hand sidebar.
You can change the order of your sections by hovering over the section and clicking the up and down arrows in the top right-hand corner. You can delete a section by clicking the trash can.
To edit the URL (web address) of each page, click the gear icon beside the page name in the left toolbar. Page URLs should be short and descriptive. You can also add a search description and preview image.
How to build your website’s homepage (8 elements to include)
A well-thought-out homepage can mean more engagement, email signups, and sales. From the top, here are all the elements your homepage should include.
#1 Hero section with your main offer or value proposition
The first section is usually referred to as a featured banner or hero section. You can use this space to provide a high-level look at your business as a whole or promote your most important product or service.
In this section, it’s a good idea to include:
An eye-catching picture or video
A heading with big letters that are easy to read
A description that explains what your business (or product) does
A call to action that inspires the visitor to take action
Take a look at this example by Emily Mills from Sketch Academy . Visitors know right away that her business will teach them to sketchnote, even if they can’t draw. There’s a picture that shows what sketchnoting is and a bright button they can click to learn more.
BUILD TOGETHER
For Your Best Road Trip, I’ll make a hero section with a brand overview since I’m planning to highlight my products in the next section.
On the homepage, I’ll click the gray plus sign under the header and add a new “Text” section.
Next, I’ll add a headline for my business and a descriptive sentence or two. I’ll also add a button to highlight my call to action (CTA).
(Not sure what to say? Revisit your website copy document from Chapter 3 for ideas.)
I want to make this section pop, so I’m going to add an image background that’s related to my brand. I can either upload an image I found during Chapter 3, or I can use Podia’s integration with Unsplash to grab free-use stock images directly within the website builder.
Click on the “Design” tab under the title of the section. Here you can change the way your content looks and set a background image. To get the following layout, I centered my content and used the “Dark theme” style under “Appearance”. I added a background image with about 30% opacity so the white text would show up clearly.
This video shows how I built my hero section step by step.
#2 Featured products or services
Don’t make potential customers hunt for your products. Give them easy access to your main offers right under your hero image at the top of the page.
BUILD TOGETHER
I have two products I want customers to find easily – my road trip planning service and my free packing download. I’m going to make a grid section to put both of these products front and center.
In Podia, add a Grid block under your hero section.
Under the “Content” tab, you can edit your text. Scroll down to the “Items” section to edit the individual items within the grid and delete any grid sections you’re not using. You can also add an image for each grid item if you like.
Under the “Design” section, I made the images full width with a 16:9 aspect ratio and medium-rounded corners. Then I centered my content into two side-by-side columns.
#3 Selling sections
While the main offer or value proposition is great for customers who are ready to buy, other customers might need more of a nudge. Selling sections address specific pain points experienced by your audience and explain how you can solve them.
The heading of your selling sections can repeat a common question or concern. Then the body text demonstrates how your product addresses those questions and concerns. An image can be a nice touch to tie everything together and an action button gives those who become convinced an easy way to opt in.
Here’s how Ben from Podia created a selling section on his Song Study website .
You can get away with having a few of these on your homepage.
BUILD TOGETHER
I used a “Text” section to create my first selling section. Under the “Content” tab, I added a title and body text, and I used bullet points and bold fonts to break up the sentences into skimmable bites.
Then in the “Design” tab, I changed the background color to a soft blue to make it stand out from the featured products section above.
#4 Testimonials
During the planning stages, you gathered a handful of customer testimonials to display on your website.
If your website builder has a specific testimonial block, great! If not, you can create a similar look by making a grid with 2-3 columns and adding text and images manually.
This article has some helpful tips for ways to display testimonials.
BUILD TOGETHER
I have two testimonials I’d like to feature, so I added a “Testimonials” section underneath my blue text section. I added my two quotes under the “Content” tab and tweaked the layout under the “Design” tab.
#5 About or bio section
Your About or bio section is a great tool for building trust and demonstrating your deep understanding of the problem your brand solves.
Use your About section to briefly tell your story and experience in your niche. No need to write a novel here—you can go more in-depth on your About page. Describe your experience and why you decided to spend time and effort creating a solution for others.
BUILD TOGETHER
Podia includes a “Bio” block that will automatically pull the profile picture and description you added during the website setup phase. If you’re using a different website builder, an image + text block works well for your About section.
I used Podia’s “Bio” block and customized my body text a bit to be more personable. Once again, I made some text bold so that it draws the eye.
I wanted this section to pop against the testimonial section above, so I made the background yellow in the “Design” tab.
#6 Work credits or awards
If you've worked with brands your visitors would recognize, won awards that have some kind of digital display version, or collaborated directly with others in your industry display those names, logos, or badges proudly.
It may feel a little like name-dropping, but most of your visitors want to trust you and feel like they're in good hands. So drop those names.
BUILD TOGETHER
This section requires a bit of creativity and a handy graphic design tool called Canva. Canva is great for creating website graphics, and they also have a free plan.
Open up a fresh project in Canva. I used the “blog banner” project type and the sizing worked well. Add the logos for different places you’ve been featured. Often, you can reach out to the publication or entity directly to get official assets.
I used white logos so they all look uniform.
Once you’ve got your logos arranged the way you like, export the Canva image as a PNG file with a transparent background.
(Transparent backgrounds are a Canva Pro feature, so if you’re using the free version, you can download your image with a solid color background and use an image background eraser tool to get the same effect.)
To add the image to your Podia site, use the Image block and upload your PNG file. In the “Design” tab, change the layout to centered with the media on the bottom. If you’re using white logos, choose “Dark theme” under appearance. You can also add a background image with slight opacity turned on.
#7 Additional products or offers
Your homepage is the most valuable space on your website, so don’t be shy about sharing your other products and offers. If you have lots of items available, consider adding a button linking to your storefront or directory page where prospective customers can see everything laid out.
Taylor Tieman, Esq. from Legalmiga Library arranges her additional offers by type, and it’s much easier to navigate than listing dozens of individual products.
BUILD TOGETHER
I only have two products, but I’d also like to draw attention to a free resource page I plan to make on my site. To create an additional products section, I used a three-grid block and added a colorful cover image (made in Canva), title, and short description for each item I’m showcasing.
I also added a button that takes the visitor to the corresponding sales pages and resource pages. (Don’t worry, we’ll make these pages together in Chapter 6!)
#8 Email sign up
Building an email list is an important way to connect with your audience. Don’t forget to add an email sign-up form to the bottom of your website, or better yet, include a CTA for your free lead magnet!
Since your email list is included with Podia, there’s an email form block available by default. If you prefer to use a third-party email service provider, you can integrate it into your main Podia settings tab.
BUILD TOGETHER
Create a new section and add the “Email form” block. Podia will automatically generate an email opt-in box for you that connects subscribers to your Podia email list.
In the “Content” tab, you can change the heading, body, and button text to tell visitors what they can expect from your newsletter.
I want to spice up my email form a bit, so I’ll add a decorative image that I made in Canva. To create this image, I found a template for a graphic that looked like a stack of polaroid pictures. I changed out the pictures so they’re relevant to my brand, and I downloaded the image with a transparent background.
Then I added the image to the “Image” field of my email sign-up form.
I want the image to be beside the text so I’m heading to the “Design” tab where I’ll arrange the layout so the image and text are side by side.
I also want this section to stand out from the section above it, so I’m adding a background picture. Once I found an image I liked, I set the color to “Dark theme” and adjusted the overlay so the white text was easy to read.
Bringing all 8 homepage elements together
Here’s a final look at all the sections that make up my homepage.
Hero (Text block)
Featured products (Grid block)
Selling section (Text block)
Testimonials (Testimonials block)
About me (Bio block)
As seen in (Image block)
Explore my work (Grid block)
Email opt-in (Email form block)
Now it’s your turn! Get your information out there, even if it isn’t perfect. You can always come back and make adjustments as the rest of your site takes form. Images can be changed, text can be modified, and you can always add more to your homepage as your business grows.
Speaking of the rest of your site, it’s time to put together your first product and sales page.