Get Qi Theme with 150 superbly designed WordPress demos

Get Qi Theme
Qi Theme
Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Change and Customize Your WordPress Homepage

How to Change and Customize Your WordPress Homepage

WordPress being nothing if not versatile, it is no wonder that options to tweak, change, customize and otherwise modify a WordPress website abound. This central tenet holds true for your homepage, too: with WordPress, you can change your homepage easily.

However, to borrow from the font of wisdom that is Jurassic Park, before you start changing things up, you better have a think about whether you should. In this article, we will be talking you through the ways of changing your WordPress homepage to better fit your style and desired functionalities. Before we do that, though, we’d like to take some time to expand on what a WordPress homepage is and why you might or might not want to change it.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

What is Your WordPress Homepage and Why Change It

The homepage is where your visitors end up after navigating to your domain name. By default, a WordPress home page will most times display your latest posts. This is a consequence of WordPress’s start as a blogging platform, and the solution by and large works for a blog. It is also known as a dynamic homepage, since it automatically displays newest posts without the need for a manual update.

But perhaps you want to showcase something different, such as your contact information or other important information, a manifesto or a mission statement, or create an arresting landing page for your latest product, or something else entirely. If you don’t feel like putting your posts front and center, you should redesign your homepage and display your posts somewhere more appropriate.

From a design point of view, the homepage is typically the entry point of your website and its central hub. It serves to set the mood and to offer paths to your content, if not the content itself. If your theme’s homepage doesn’t quite do it for what you’re trying to achieve, you should look into making modifications.

How to Set a Static Homepage in WordPress

You don’t need anything apart from the basic WordPress functionalities to create a static homepage instead of a dynamic one. However, we suggest you put your website in maintenance mode when making major alterations such as this. For this demonstration, we will be using our free Qi Theme, but the basic steps should work for all themes.

Sometimes a theme will come with a predefined homepage. You may want to use it, or to change it for another page. Or, you may want to create a new homepage altogether. To create a page, select Pages/Add New from your WordPress dashboard.

Pages Add New

Give it a title and click Publish. We have named ours Static Homepage, but you can name yours whatever you like.

Title and Publish

Do the same for a blog page. We have named ours New Blog Posts.

Once you have both pages in place, you need to set them up so your WordPress framework knows which is which. To do that, navigate to Settings/Reading from your WordPress dashboard.

Settings Reading

To display your blog posts on a page other than your home page, select A static page from the Your homepage displays section at the top. Then, in the drop-down menus below, select the page you have created for your Homepage (in our case, it is Static Homepage) and for your Posts page (we have selected New Blog Posts). Click Save Changes when done.

Set Static Pages

And, just like that, you have created and set up a static page for your homepage. We will show you how to customize it in the subsequent sections.

How to Edit Your Homepage Using the Theme Customizer

The theme customizer is a set of tools used to edit WordPress websites in a user-friendly way. It comes with your WordPress installation, and has many functions. Covering all of the functions of the theme customizer is well beyond the scope of this article, but we will go over the very basics of what you can do with your homepage. Note that this will vary depending on your theme.

To access the theme customizer, navigate to Appearance/Customize from your WordPress dashboard.

Appearance Customize

Your page will now appear as it would to a visitor in the preview section, which takes up most of the screen. All changes will only take effect once you click the Publish button.

Editable areas of the page are marked with a blue pencil icon. There may be other editable areas which are empty or inactive. In the menu of the customizer on the left hand-side you can access your website’s functionalities.

To keep this short, we will draw your attention to the Menus section just to point out that this is where you can set up where your menus appear. The navigation menu is a very important part of any website, so we can’t address the creation of a navigation menu in this article, but we will say that this is where you can set it up for display. The number and location of the menu areas on your website is theme-specific, too, but most themes, like the one we’re using, will display a menu at the top of the page – at least for desktop devices.

The second important section of your customizer is the Widgets section. This is where you can distribute the widgets you need on your homepage. Again, the number and position of your widget areas is dependent on the theme you are using.

Customizer

For example, say we wanted to add a widget to the left side of our footer, which is currently empty. We will find the area in the widget menu (Footer Top Area – Column 1), and click on it.

Footer Column

From here we can add a block to our widget. We will click on the plus sign and select an Image block for this area.

Add Image Block

We will then choose an image from our media library to populate it – the logo for our Qi Theme.

Image Added

This way, you can locate and edit all the widget areas on your homepage.

How to Edit Your Homepage Using Gutenberg

WordPress’s default editor, Gutenberg, allows you more flexibility than the theme customizer. In order to use the Gutenberg block editor to edit a page, simply select the page you wish to edit from the Pages/All Pages section of your WordPress dashboard.

Pages All Pages

From here, you can simply edit a page as you would any other page or post. Of course, your theme will likely come with the basic layout (or template) of the home page, or, indeed several. You can select among those from the Template menu in the Page tab of the right hand-side bar. Advanced users may also choose to create their own page template and implement it.

Page Template Gutenberg

In the case of our Qi Theme, you can find a lot of layout settings in the menu below. These vary from theme to theme, and some themes don’t even have these settings at all, and pages need to be constructed from scratch.

The page we are working on has numerous settings distributed among various tabs, some of which are the same as the customizer settings, while others are specific to the theme. We can’t go into the details here, but a detailed overview of the Qi Theme is available, as well as a multitude of video tutorials.

Qode Settings

You can also add blocks as you would when creating a post in Gutenberg: simply click on the plus icon and select a block. We will go with a Quote block here.

Add Quote Block

We will fill out the quote block fields with a quote we like, and the quote will appear on our page. Since the page has a header, and since this is the first block up, it ought to appear right below the header.

Fill Quote

And this is what it looks like in the preview!

Gutenberg Preview

And if you want to remove a block, all you need to do is click on the ellipsis menu (···) which appears when you hover over a block, and select Remove Block from it.

Remove Block

There are blocks for text in various forms, columns, images and other media, as well as interactive features from accordions to buttons to tabs – if you include some of the free and/or premium addons. Combine them with your theme options for best results: pick the functionalities you need and the aesthetic features which fit your brand and your style the best.

How to Edit Your Homepage Using Elementor

If you prefer Elementor, the premier visual editor for WordPress, you probably already know you can edit your homepage, as well as any other page, using it, while previewing your work in real time.

We will be using our own Qi Addons For Elementor plugin to supplement the already great range of options Elementor’s free version comes with. With Qi Addons, you get 60 brand new beautifully designed widgets for absolutely free – all you need is the latest version of Elementor, and Qi Addons will work with the free version, too.

In order to edit your homepage with Elementor, you first need to have installed and activated Elementor (and, optionally, though we highly recommend it, Qi Addons). Open the page as you normally would, and click the Edit with Elementor button.

Edit With Elementor

If your theme comes with page templates, you can activate them by clicking on the folder icon.

Folder Icon

Your Elementor library contains ready-made solutions for a number of layouts and functions, which you can choose from the Blocks and Pages templates – and our Qi Theme offers a whopping 100 complete website layouts, images and all, for free. If you have created and saved a template earlier, you can choose one from the My Templates tab. Further on the right hand-side we find the Import, Sync, and Save buttons. We like this basic layout, so we won’t be changing it.

Elementor Templates

Now, say you want a two-column structure immediately below your header, with a video to the right and some Qi Addons-powered highlighted text, explaining what your video is about, to the left. The first thing you need to do is split up your active space into two columns. There are many ways to create columns in WordPress, and, in Elementor, you can do it easily by using the Inner Section widget.

Inner Section Elementor

This creates a structure of two columns of equal width. To change that, we will select the structure section in the Layout tab of the section, and pick a different column ratio. We will go with 33, 66 to leave as much room for the video as possible.

Layout Structure

To add a video, you need a video element. You can simply drag it from the left-hand side menu.

Drag Video

We have populated it with one of the tutorial videos on our YouTube channel simply by pasting the link into the Link field. There are several video options below which we won’t be going into, as they are pretty much self-explanatory and would take a lot of space in this tutorial.

Video Link Added

Finally, we will add our highlighted text. To start, simply find the widget and drag it to the smaller section.

Drag Highlighted Text

We have entered some text to replace the placeholder, and styled it to fit the space best. This took us about two minutes in real time, but, examining the widget’s many options in detail is beyond the scope of this article – we have a whole tutorial for the highlighted text widget. With some little effort, you have an eye-catching feature for your home page.

Style Highlighted Text

Of course, there is no shortage of useful and interesting Elementor features which you can use to their best effect with the editor’s WYSIWYG interface – especially if you supplement it with the Qi Addons widget.

How to Edit Your Homepage Using the Classic Editor

Finally, you may prefer the Classic Editor. You can use it to edit your homepage old school style. To do that, you need to install and activate the Classic Editor plugin.

Once you have done that, simply access the page from the All Pages section of your WordPress dashboard.

All Pages

The Classic editor was designed to accommodate HTML-savvy users, so we don’t recommend it for the general, coding-unsavvy population. However, some features are easy enough to use. To start with, we will populate our homepage with some placeholder text, as a homepage is typically not a bad place for an About text. You can find the text formatting tools in the header of the editor.

Classic Editor Text

Now, say you want to add some media to your homepage. Using the Add Media button, you can easily add media from your media library. To add media not hosted on your website, the easiest thing to do is to simply paste the URL into the body of the page and hit enter and let WordPress do it for you.

Having clicked on the Add Media button, all you need to do is select an image from your media library, add attributes such as image alt text, caption, and others, if needed, and click the Insert into page button.

Insert Into Page

You can adjust the style and display settings for the image in the on-hover menu.

Adjust Image

This is what the changes we made to the homepage look like in the preview.

Classic Editor Preview

If you are a tech-savvy user, you can switch to the Text view of the classic editor in order to leverage your HTML knowledge to full capacity. Remaining in the Visual tab, you get a better impression on what things will look like. If you choose to use the Classic editor, we strongly suggest you bone up on your HTML.

In Conclusion

As you can see, possibilities abound. With WordPress, anyone can make a website, and there are literally countless possibilities to choose from. Changing and customizing your WordPress homepage alone is virtually impossible to cover in totality, with its myriad choices of editors, features, widgets and styles. We do, however, feel we’ve given you a good head start.

Post your comment

Comments0