It would be a good idea to read through the article on how to create a well-designed homepage that will drive more sales. Now we can start editing the homepage once you have an idea of what should be on it.
You can either edit the homepage yourself or use one of our services to do it for you.
To edit the homepage, you first need to hover your mouse over all “pages” located on the left sidebar of the dashboard and then click on “All Pages”.
You will be presented with a list of all the pages located on your website. You have the option to edit, quick edit, trash, view, and duplicate any of the pages.
To edit the homepage, let’s move to the page labeled home and then click on “edit”. Wait for the page to load until you can see the WordPress editor.
To build our pages, we are going to use the Gutenberg editor along with the plugin called Stackable to enhance your page-building experience. Let’s see what we have on the screen.
- The “View pages” arrow is located on the top left of the screen. Click on this arrow, if you want to go back and view all your pages.
- Click on the blue button if you want to see all the blocks that you can insert into the page. There is also a label called patterns where you can select from all the premade sections that we have created for your store. The patterns will make your life so much easier so you do not need to build anything from scratch.
- Under the pen icon, make sure that you have selected the edit functionality under this icon. This icon determines how you will interact with the page.
- If you make a mistake, then you can “undo” the change. If you accidentally undo a change by mistake, then you can “redo” it.
- The Document Overview button will be presented as three horizontal lines that can be toggled. This option will give you an overview of how the page is structured. You will notice that the page is structured as sections and can dragged and moved around or you can open up each one to get to the desired block. You can add blocks within blocks to create the desired layout. You can also click on the three icons to the right to view additional properties.
- To the right hand side, we have the view option where you can change the screen to desktop, tablet, or mobile to see how the page is going to look on other devices. You can also click on “Preview in new tab” to view the page in a new tab.
- You can also click on the “view page” option located next to the desktop icon to see the page in a new tab.
- Next, we have the stackable icon where we can set the global colors and typography for all the content-based pages on the website. Here you can add your brand colors, the font size, and the font family that you want to use.
- Next, we have the settings tab that will allow you to change the settings of the page and the selected block.
- You also have the option to save the page which is important if you want to keep the changes that you made to the page.
Set your global Color Palette and Typography
It is good practice to set the global colors and typography because we want to have consistency throughout the store when it comes to brand colors and font sizes.
Change the global color palette
First, let’s set up our global colors and typography. To do that you need to click on the Stackable icon located at the top right part of the page and then click on the “Global Color Palette” tab to open the settings.
We have already set 4 colors for you which include the primary brand color, light background color, black and white.
In this example, we are going to change the primary brand color to red by clicking on the round color shape. A small panel will open where you have to add the Hex code of the color.
You can also play around by dragging the color bars to the left or right. You can also change the shade of the color.
You can also add additional colors to your palette by clicking on the large plus icon. Remember to keep the “Show Theme Colors”, “Show Default Colors” and “Show Site Editor Custom Colors” settings active.
Next, let’s change the font or typography of your store by clicking on the “Global Typography” tab.
The page builder called Stackable gives us 6 different headings, a subtitle, and body text. Let’s use “Heading 2” as an example by clicking on the pencil button located next to it.
You can change the font family, font size, weight, text transform, line height, and letter spacing. Notice what happens when you change the font size to 200 pixels.
Changing the font size
All the headings that use the “Heading 2” settings will change in size. We are going to scroll down and see how it looks.
You will notice that it is too big, so let’s change it back to 44 pixels. You can also change the size of the headings when on smaller screens.
First, you need to select the desktop icon next to the font size sections and change it to tablet. The screen will also adapt to your display settings. You can now change the font size for the tablet once it is selected.
You can do the same for Mobile by selecting the mobile screen option next to font size. Change the font size to 30 pixels and you will notice how it changes all the heading sizes when the screen goes to mobile view.
The same can be done for all the headings including the subtitle and body text.
Changing the Font Family
We have also set the font family to Sans-serif which is one of the easiest fonts to read and it also looks very good. If you want to change the font, then you need to click on “Font Family” field and select the font that you want.
Changing Block Defaults
We are going to leave these settings just as they are. In the future, we are only going to change the button.
Next, we are going to explain how to edit the homepage content.
Edit Homepage Options
We have created 3 different approaches that you can take to edit the homepage. The first approach is the easiest one where you have to only edit the content on the homepage.
The second approach is a bit more challenging and requires you to add premade sections and patterns to your homepage. You then also need to edit the content of these premade sections.
The third approach is the most challenging and is for when you want to create your own sections or layouts from scratch.
Most people will take the first approach as it is the easiest and it is also the one that we recommend to get your homepage up and running in no time. You can also mix some of the approaches if you want, but we recommend starting with the first one.
You will learn more in the next video
Editing Homepage Content (Difficulty: Beginner Friendly)
We have already created a homepage with all the necessary sections. All you have to do is edit the text and upload your images. We have created the homepage to make your life easier and to make sure your homepage is optimized for sales.
How to hide a section
If you do not need all of the sections then you can simply hide them. We will show you how to do that now.
First, click on the document overview icon located on the top left of the screen and then select the section that you want to hide.
Let’s remove the trust badges section as an example. Click on the section and then make sure that the settings tab is also open under the tab labeled “block”.
Go to the advanced tab and then under “responsive”, you need to enable all of the tabs including Desktop, Tablet, and mobile. This will hide the section if you plan to use it at a later stage.
Edit the hero section
The first section that we need to edit is going to be the hero section at the top of the homepage. You can edit the text of the title, the supporting content under the title, the button, and also the image.
Click on the title and open the settings tab to the right and then click on “Style”.
First, edit the content of the title by adding the text to the content bar. Next, make sure that the H1 heading is selected for the title. The H1 heading is the most important heading and should only be used once on a page to identify it. In this case, we are using it as the title of the hero section.
You can also change the typography and size of the heading if you have not changed it in the global settings. If you change the settings here, then it will only affect this individual heading.
You can also change the text color and add a text shadow if you want to. You can also change the spacing between the heading and all the other blocks around it by going to the “Layout” section and then the “Block size and spacing” tab.
In the spacing section, you can adjust its minimum height, align the content vertically, set a max-content width, and change the paddings and margin. All these settings are also subject to the screen size that you set for it such as Tablet and mobile.
What is the difference between padding and margin?
Padding and margin are both spacing properties in web design, but they serve different purposes. Padding is the space inside an element, between the content and its border. It controls how much breathing room the content has within its own container.
Margin, on the other hand, is the space outside an element, pushing it away from other elements.
While padding affects an element’s internal spacing, margin controls the external spacing between elements on a webpage.
Text below heading
Under the heading, you have the text block that you can use to add supporting content to the heading.
Editing Button
Next, let’s edit the button by clicking on it. You can change the text of the button by clicking on the text and changing it. On the settings tab, you can also change the styles by clicking on the one that you prefer and also its hover effect.
The hover effect will play once you hover your mouse over the button.
You can also add a link to the button. This button was created to link to the shop page. We can add the following part of the link to this field.
/shop/
Add the link and then click on submit. Next, we can change the button colors. Let’s make the button red which is the same as our primary brand color. We are going to keep the text white.
For button size and spacing, we can change the padding to adjust its size. You can also make the button full width to take up the width of its container.
You can also add a border around the button, adjusting the border style, the border width, color, and its radius to give it rounded corners.
You can also add an icon to the button, the icon color, size, and position. You can also change its typography that include the font family and size.
Edit Image
Next, we are going to change the image. You can change it by clicking on the image and then uploading the one that you want to add. In this case, we need a portrait-shaped image. Under style, you can change its aspect ratio, width, and height.
Let’s choose the portrait as its aspect ratio and leave the width and height as default. That is it for the hero section.
Trust Badges
Under the hero section, we have the trust badges. You can edit the text and icon the same way as you did with the hero section.
To add an additional badge, you can open the document overview on the left, and click on the left arrow of the trust badges for it to open. Select any of the inner columns and click on the options icon which is the tree dots to the right.
Click on duplicate to make a copy of the selected badge. You can now edit the content of the badge that you just copied. It is always better to rather make a duplicate of a layout or part of a layout and edit than to edit the content instead of trying to create everything from scratch.
This way the design will also be more consistent.
Categories and Collections
The categories and collections will be beneath the trust badges. This section consists of a shortcode that is already added for you. This shortcode will automatically pull the data from your categories to display the category image and title.
Let’s edit the shortcode.
You can select the categories that you want to display by adding the ID of each category.
You can find the IDs in the category section under products. Hover your mouse over the category that you want to add to see its product ID. The product ID will be displayed at the bottom of the screen within the link of the category.
Once you have the ID, you can then add it to the shortcode under the ids tag. Remember to add a comma and space after the last ID before adding the new one.
You can also arrange the IDs on the category page the same way you want them to be displayed on the homepage.
You can select the number of categories you want to show and also how many columns you want to display.
Featured Products (Hot Sellers, On Sale and New Arrivals)
This section is already created for you and will pull the products under each tab. The “Hot Sellers” tab will display the products that sell the most, the “On Sale” tab will show only products on sale and the “New Arrivals” tab will show the newest products that you uploaded to your store.
You can change the number of products to display and also the number of columns on the screen. As default, we display only 8 products under 4 columns.
Image Background Call To Action
This section can be used to add some information about your shop directing people to click on the shop page. You can hide this section or you can use it.
This section uses an image as a background. Let’s show you how to edit it.
First, click on the section and make sure you selected the columns block labeled as “Image Background” under the document overview.
Then go to the style tab and click on the background panel to open.
Under background image or video, you can upload the image that you want. Make sure to upload an image that is at least 1920 pixels in width. Otherwise, the quality of the image will not be good.
Whenever you add text on top of an image, you need to make sure that there is enough contrast between the color of the text and that of the image. If the contrast is too low, then you will not be able to see the text clearly.
We want the text to stand out by changing the color of the text or adding a background overlay over the image to make the text more visible. Here is how to do it.
Just above the image, you will find a setting where you can change the background color. The background color will depend on the contrast of the image. If the image is very white in color, then we need to change the background to black and vice versa.
To see the effect of the background color over the image, you need to increase the “Background Media Tint Strength” which will change the transparency of the overlay.
Change it enough so that the text is visible without completely masking the image. You would handle the heading, text, and button the same way as you would the previous sections.
The fixed background setting will make the image stick to the background whenever you scroll up or down. These settings can be disabled if needed.
Products On Sale With Countdown
The products on sale with the countdown section is useful if you have products on sale, but you also want to include a countdown timer to add some urgency to the sale.
If you do not have any products on sale yet but you plan to have them in the future, then we would recommend you only hide this section. We explained earlier how to hide a section.
If you do have products on sale then we would highly recommend using this section. This section will already showcase the products that are on sale and you only need to change some of the text, the image, and the countdown timer.
We already explained how to edit images and text, but not yet how to edit the countdown timer.
Let’s begin by clicking on the countdown timer and make sure you have selected the block labeled “countdown”.
When you open the settings tab on the right, you will notice that a calendar will be displayed. You can select the due date button if you do not want the timer to constantly repeat itself with the recurring setting.
Woocommerce allows you to schedule a start and end date for products that are on sale.
Select the time and the date to which the timer will expire and make sure your timezone is also correct. Let’s leave all the other settings for now.
Featured Single Product
This section allows you to pull the data from any selected product in your store and display it on your homepage. Your customer can add this product directly to their cart without having to go to the single product page.
This section avoids additional steps between the product and cart page. We have added a countdown timer that you can use in case of a product that is on sale to trigger urgency. You can delete or hide this section if you do not need or want it.
Here is how to edit it. Click on any part of the block and make sure your document overview is open. Select the block labeled “Single Product” and open its settings.
Open the product tab and search for the product that you want to display in the section. You can also change the styling of each individual element by selecting the block and changing its settings.
The countdown timer works the same as that of the previous section.
Testimonials
If you already have some testimonials for your store, then you can add some of them to your homepage. You can add the testimonial itself along with an image of the customer and the customer’s name.
You can just replace the image and text. Here is also some information on the image settings that we used to make the image a small round shape.
We made the image height and width 75 pixels with a border radius of 90. You also need to make sure the focal point is pointing over the image.
What do you do if you want to add an additional testimonial?
We want to duplicate one of the testimonials so that we do not need to create it from scratch. To do that click on any part of the block but make sure the document overview panel to the left is open.
Once you click on an element you will notice that all the blocks outside the one you selected will open up. Now you will have a better understanding of how everything is laid out.
We want to duplicate the block labeled as “Inner Column” that is located just above the block labeled “Testimonial”.
Click on the settings icon to the right and select “duplicate”. You will notice that a duplicate was created and you are ready to edit the information.
If the testimonial blocks are too cramped and you want to maintain a column count of 3, then you need to select the “Columns” block that contains the inner blocks for the testimonials.
Then go to the right hand sidebar under settings and select layout. Do not change anything under the columns setting, but enable the setting that is labeled “Allow Column Wrapping”.
Now for each testimonial, you can add a column width that is measured as a percentage. Each row will have a total width of 100% so if you want to have 3 columns in a row, then you need to make all the columns 33% each (because 100% / 3 = 33%).
Make sure that each column has a width for it to move to a new row otherwise, they will cramp the first row. You can also change the percentages on the tablet and mobile screen as well.
For mobile, we keep the width of each testimonial at 100% to make it full width. Just is but a taste of how to create your own layouts. We will go into more depth at a later stage.
Editors Pick Section
Let’s say you want to cherrypick or highlight certain products that you want to show to your customers, how would you go about this?
This is where the editor’s picks section comes into play. You can change the number of products to show and also the number of columns.
To add a product to this list, you need to set it as a featured product under all products. You will notice that there is a star icon that you need to toggle to make the product a featured product.
Blog Latest News
The last section that we need to edit is the blog roll section. If you plan to not have a blog, then you can delete this section. This section will display the titles and featured images of the 3 latest blog posts that you have.
Most store owners will stop at the end of this video. You can continue with the tutorial and the rest of the videos if you want to change or add additional patterns or layouts to your homepage.
Adding Different Patterns To Your Homepage (Difficulty: Moderate)
Let’s say you found the tutorial on editing your homepage helpful, but you were not satisfied with some of the layouts of the sections or maybe you want to add additional sections that are currently not on the homepage.
We have added over 40 different patterns that you can add to any page you wish. To see the patterns, you need to go to Store Appearance located on the left sidebar within the dashboard, and then click on “Patterns.”
Wait for the page to load.
You will find a list of all the patterns that we have created for you. We have also organized them into groups so that you can know exactly what the pattern is used for.
Here are some of the groups and their purpose.
Hero Section (Intro)
Under the Hero Section group, you will find all the additional hero sections that are already prebuilt for you. You will find image sliders with text, full-screen background images with text, and trust badges.
Categories List
The categories list group contains layouts that you can use to display all the categories you want on the homepage. This section usually comes after the Hero section. You need to remember to link to the categories.
Some of them use buttons that make it easier to link to your categories. For the one labeled Custom 3, you need to link the inner columns to each category. This layout uses icons instead of buttons. Let’s show you how to link them.
Make sure you select the block labeled “Inner Column” and then open its settings. Go to advanced and then open the link tab. Add the link to the category and then click on the arrow labeled “submit”.
Featured Categories
Under featured categories, we have already added 2 of these sections to your homepage. We have added the featured products and the one that displays hot sellers, on sale, and new arrivals.
You can also add the featured category layout. This layout is used when you want to display some of the products in a specific category. Here is a scenario.
Let’s say Valentine’s Day is around the corner and you want to display the category called “Gifts” on your homepage, then you can do it with this layout. You can also display your most popular category on your homepage this way.
All you have to do when editing the shortcode is to edit the category name, product count and the number of columns you want to display.
Promote Items On Sale
Whenever you have a sale running, you can add any of these layouts to your homepage. Each of these layouts also includes a countdown timer that can be used to add urgency.
We have also included a single-product layout with a countdown timer if you want to show your customers a specific product.
Content Based Categories
We have also added 7 content-based categories that you can choose from. They include “Image with text”, “Rich text”, “Product Features”, “Call to action”, “Testimonials and team”, “FAQ” and “Blog”.
All of the layouts of these categories are there to add supporting content to your store with the hope of improving your conversion rate. You can also add some of the sections of these categories to your about and FAQ page.
How to Add a Layout/Pattern to Your Store
To add a layout to your store, you need to go to the page where you want to add the layout. In this case, we want to add it to the homepage.
Click on the big blue button located at the top left-hand corner and then select “Patterns”. You can also click on the “Explore all patterns” button located at the bottom.
Click on any of the categories and then select the pattern that you want to insert. The pattern will be added to the end of the page.
To move the newly inserted pattern around, you can click on the “document overview” to open the page structure.
Click, hold, and drag the pattern that you inserted into the desired location on the page within the “document overview panel.
Next, we are going to show you how to create your own section from scratch.
Creating a Section From Scratch (Difficulty: Challenging)
So, let’s say you could not find a pattern or layout that matches your style or requirement. The solution to this problem would be to create your own layout or section.
To do that, head over to your homepage click on the blue square button located at the top left, and select the blocks tab. You will notice a list of purple blocks under Stackable which is the page builder that we are going to use.
For each section that we want to create we will always start by inserting a “columns” block which will be like the container of the entire section.
A new section will open where you have to select the number of columns and the proportions inside this block. Let’s select the 3 column layout.
Now that the columns are set, we need to do 3 things first. Go to Document Overview select the new columns block that you added and then go to settings. Scroll down under layout and make sure the block width and content width are both set to “Align Wide”.
Now, the block will take the full width of the content container of the theme.
The second step is to go to style and then enable the background and change the background color to white. This will enable some side padding to your content when the screen is switched to tablet or mobile.
Now that you have set that, you can add elements to the block by starting with the left column. Click on the plus icon to add a new block inside the column.
If you already know which block you want to insert, you can search for it in the search bar by starting with its first letter. You can also click on the browse all button to browse the blocks. Scroll down and click on the block that you want to add.
Let’s start by adding an image block. Remember we only want to choose the purple blocks that are used by Stackable. After the image block is added, you can then select an image from your gallery.
Now, we want to add something below the image that is still inside the columns container. Click on the document overview tab and then click on the arrow next to “columns” to open it up.
Do the same with the first column and click on the settings icon next to the image. You can either add a block before the image with “Add before” or after the image with “Add after”. In this case, we want to select add after before we want to add a block below the image.
You will notice that a paragraph block was automatically added. Click on the small blue square and select the block that you want to add. Let’s add a heading below the image and then add some text to the heading.
Let’s change the heading tag to that of H3. Another way to add a block under a text block is to press “enter” and then add a “/”.
Let’s add a text block and add some dummy text.
To add another block under the text, press enter and then let’s add a button and add some text to the button. You will notice a button group block was added which makes it possible to add buttons next to each other.
Let’s duplicate the button to see how its going to look like.
We can also add a block into the center column. Let’s add an icon block.
To change the icon, make sure you select the icon block and then open its settings. Go to style and then click on “icon”. We are going to add a shirt as an icon by searching for it in the search bar.
Select the shirt and then change the color to red. You will notice that the icon is very small, so let’s increase its size to 100 pixels. As default, the icon will be aligned to the left of its container. Let’s center it by clicking on “Layout” and then select content alignment to center.
Let’s add some spacing to the top. Go to block sizing and spacing and give it a padding of 50 pixels. You will notice that the padding was added to all sides including top, right, bottom, and left.
To only add padding to one side, click on “All sides” and only add a value to the side where you want it.
Let’s change the background of this block to black. What if we wanted this block to be aligned to the center vertically?
To align it to the center, we need to select the inner column in which it is located. Go to layout and change the column alignment to center.
Let’s add some content to the third column. We can start by adding a heading block. Let’s add some content to this block and keep it to the H2 tag.
Next, we want to add some text under the heading. Let’s add some dummy text so that we can have an idea of what it is going to look like.
Let’s rearrange the layout of this section. Click on the columns block and let’s re-arrange the columns containing the heading and text. Try moving that column to the left side. Notice how we changed the order of the columns.
Let’s delete the third column and then duplicate the second one until we have 4 duplicates in total. This will make the design look a little bit better and more consistent. You will notice that everything is very cramped so it would be a good idea if we can do something about the layout.
In order to create several rows, we need to enable “Allow column wrapping”. You will notice that each column is numbered based on its order and also contains a field where you can add a percentage value.
Let’s change the first column to 100% so that it takes up the entire width creating its own row. Notice how all the other blocks are cramped to the left. To fix this, let’s give each of them a percentage value of 25% which adds up to 100% if there are 4 columns.
Let’s see what is going to happen when we change the percentage values to 50%. Notice how the 2 on the right moved to a new row giving us a total of 3 rows for this section. If you can understand this column-wrapping concept, then you can create almost any layout imaginable.
Let’s change it back to 2 rows by making the percentage 25%. Let’s go to tablet screen to see how its going to look like. Notice how the 3 columns are a bit cramped. To fix this let’s change them back to 50% each to move the last to columns to a new row.
Now it looks much better. Let’s go to mobile view.
Notice how each column is set to 100% to take up the full width of the screen. Let’s go back to desktop view.
What if we wanted to change the spacing between each column and row? To set the spacing, select the columns block and then go to settings. Go to the layout tab and then scroll down until you reach the part that says “inner column spacing”.
You will see that the inner column spacing is already set to 12 pixels which in most cases will be enough as it adds some space around each column. Let’s say, you only want to increase the horizontal gap between the columns.
Instead of increasing the inner column spacing from 12 pixels, we can add some space by adding a value to the column gap which will only increase the horizontal space. Let’s add 20 pixels and see how it looks like.
What if you want to add some vertical space between the rows? To do that we can add some pixels to the row gap. Let’s add 100 pixels to see the difference. Notice how the spacing changed. Let’s reset both to change them back to normal.
If you want to change the spacing of only one column, then you need to click on the inner column you want to change and then go to block size and spacing under the layout. Let’s change the second column which is the first column on the second row.
Let’s add 50 pixels to the right padding. As you can see, creating your own layout or section is not that difficult. It does take some basic knowledge from web design or development, but can be done.
Stackable is one of the easiest page builders to work with and we have selected it very carefully. Always remember to double-check the layout when you view it on other devices to make sure it is responsive.
If you are having any issues with building the homepage, then you can reach out to us and we will gladly help. We can also build the homepage for you if you do not want to go through this process.