How To Change Your WordPress Page Layout And Design In 5 Steps
This Article Is Part Of Our "Build Your Own Website" Series.
If You Would Like To Learn How To Build Your Website From Scratch Then Check Out This Link.
Whether you are building a small business website, an online store, or a personal blog, it’s really important that you use a WordPress theme that allows you to easily customize the look and feel of your WordPress pages! Luckily, by using WordPress and the Blocksy theme, it really is easy to customize your page layout and design with just a few clicks!
In this short tutorial, I’m going to show you how to quickly and easily change the page layout for all the pages on your website. I’ll also show you how to change the page layout and design for individual pages.
Let’s jump right in!
How To Edit The Page Layout Using The Blocksy Theme
If you have been following along with my tutorials you will know that we have been using the Blocksy theme to build a website from scratch. The Blocksy theme is awesome because its free version has so many amazing options that rival even paid themes!
If you would like to give the Blocksy theme a try then check out this article where I show you how to install it and select a starter website to give you a jump start on your website design: Step-By-Step Guide To Installing The Blocksy WordPress Theme: Beginners Tutorial
Step 1 – Open The WordPress Theme Customizer
To open the theme customizer, you will need to log into the WordPress admin panel where you should choose “Appearance” > “Customize“.
Step 2 – Select A Page From The Customizer Preview Window
When the theme customizer opens, scroll down toward the bottom of the page where you will find the legal pages that we created in the last tutorial. Click on one of the pages to open it in the customizer preview window.
Related: The WordPress Customizer: A Quick Overview For Beginners
Step 3 – Select The Pages Menu
When your page opens, you will need to select the Pages menu item on the left-hand side of the page.
Sign up for our newsletter and get our free website-building checklist! Easily keep track of your progress and make sure you’ve covered all the important steps as you build your own website.
Step 4 – Customize The Page Title
When the “Pages” dashboard opens you will see that there are quite a few options there that allow you to change your layout. And most of these are very similar to the post layout options.
Let’s work through each page layout option!
The “Page Title” dashboard has two tabs – General and Design.
The General tab allows you to change the page layout while the Design tab allows you to change the fonts and colors of your page title, excerpt, and breadcrumbs along with a couple of other design options.
In the “General” tab, your first option is to choose the page title layout. You have two options:
Type 1 – Type 1 gives you a classic layout that is clean and modern. You can add a featured image to this layout if you would like to.
Type 2 – Type 2 encases your title in a box where you will be able to use a background image or color to make your title stand out. If you choose Type 2 you will have a few more customization options.
In the “Elements” section, you will be able to choose which title elements are visible or hidden. You will also be able to change the order in which the elements are displayed.
For an overview of how the element section works, check out my full tutorial about how to edit the layout and design of WordPress posts.
Here you can decide whether you would like your title aligned to the left, center, or right of the page.
You can also choose how you would like the title to be displayed on tablet and mobile.
If you are using the Type 2 title design you will have a vertical alignment option. With this option, you can choose whether you would like your title displayed at the top, middle, or bottom of the title box.
Container Background Image
If you are using the Type 2 title design, you will be able to choose whether you would like a background image displayed. You will be able to choose between displaying:
- Your featured image.
- A custom image that you can upload from the media library.
- No image.
Here you can set your image size so that your images fit and are dislayed perfectly.
A parallax effect is created when the background image scrolls slower than the foreground content. Here you can choose whether you would like to enable this effect and also which devices it should be active on.
Container Min Height
You can use this slider to set the height for your title box container.
Step 5 – Customize The Page Layout & Structure
There are a couple of customization options in this section that you can choose from.
These options will change depending on whether you have chosen to use the Type 1 or Type 2 title layouts or whether you would like to use a featured image.
In the “Page Structure” section, you have four layout options to choose from:
- Narrow width
- Normal width
- Left sidebar
- Right sidebar
Content Area Style and Vertical Spacing
The next two options allow you to set the area style and spacing for desktop, tablet, and mobile.
The “Featured Image” option is used if you select the Type 1 title layout and would like to include a featured image on the page.
Clicking on the featured image option will open up a dashboard where you will be able to choose the image size and width. You will also be able to decide if you would like the image displayed above or below the page title.
The “Share Box” option allows you to choose whether you would like to include a social sharing box on your page. If you click on the share box option it will open up a dashboard where you will be able to customize the social share options.
The “Page Elements” option only has one option – Comments. If you would like website visitors to add comments to your pages then you can select this option.
How To Customize The Page Layout For Individual Pages
There might be times when you would like your page layout to change for a specific page. For example, you might want your “Services” page to have a featured image but your “Terms and Conditions” page to just have a page title with no image.
You can easily do this directly from the Gutenberg editor.
Open up a page from the WordPress admin dashboard by clicking “Pages” > “All Pages“. Select and click on a page you would like to edit.
When the page opens, click on the Blocksy Settings button.
From the Blocksy setting dashboard you will be able to choose an individual page layout (narrow width, normal width, left sidebar, and right sidebar) as well as whether you would like to disable the following page elements:
- Featured Image
- Share Box
In the “Design” tab you will also be able to change the page background color.
WordPress and the Blocksy theme make it really easy to customize your page layouts. And with all the amazing options available in the free Blocksy theme option, getting the perfect page design doesn’t have to break the bank!