WordPress 101

Structure & Design WordPress Homepage | WordPress 101

wordpress homepage setting

Welcome back to WordPress 101 series. WordPress 101 series aims to teach WordPress CMS to beginners. In this article, we are going to learn to better structure and design the website homepage with WordPress.

Homepage is the main page on your WordPress site. If better designed and structured, your website’s homepage can represent the entire website content making it easier for visitors to understand it.

With WordPress, you can create good homepage designs even without buying a premium theme. No doubt, premium themes have a ton of advantages and make everything a lot easier. Premium themes have a pile of widgets and blocks to showcase different types of content beautifully such as images, videos, products, and more.

WordPress Page Builder

Create custom homepage

Gutenberg is the built-in page or post editor in WordPress. Writing blog posts with Gutenberg is a lot efficient but structuring web pages with Gutenberg may not be as efficient as writing posts.

By default, WordPress sites show latest blog posts on the homepage. If you want to set a custom homepage, create a page and save it. After that, go to Appearance > Customize > Homepage Settings and select ‘A static page’.

Select the homepage and click Publish.

Set homepage
Set homepage

Now visit your website and you have a newly created page as the homepage of your website. So this is how to set a custom homepage.

Design Homepage with Elementor

Now it’s time to design your newly created homepage. To easily design a page, we have various page editor plugins. In this article, I will use Elementor.

Elementor is an extremely easy-to-use page editor for WordPress. It is a drag-n-drop based page editor with hundreds of beautiful blocks and page templates. The free version comes with a decent number of free blocks and templates. To take full benefit of Elementor, upgrade to its premium plan where users get access to premium blocks and templates.

First of all, install Elementor from the plugins repository. Search ‘elementor‘ and install Elementor Website Builder and Essential Addons for Elementor.

Install Elementor
Install Elementor

Elementor Website Builder is the main plugin and Essential Addons for Elementor provides access to many free elements.

Now go to Pages > All Pages. Hover over the page you want to edit and click Edit with Elementor.

Edit with Elementor
Edit with Elementor

Now it’ll open up the page editor.

Elementor Page Builder
Elementor Page Builder

As you can see editor is mainly divided into two parts. Right side contains draggable elements and the left side is the page where you can drop elements.

To create website structure, click ‘+’ icon.

wordpress homepage setting
Website structure

Here you can select website’s layout. This option is useful if you want to manually structure your website.

The rest of the options on the left section will let you import pre-designed layouts and elements. You can use Elementor Library, Templately, Exclusive Add-ons, and select from a wide range of stunning website templates and sections.

Click any option and It will open up a menu. From here you can use Blocks, Pages, and you can create and save your custom template to reuse them later on the website.

Blocks are the set of pre-designed elements such as 404 page, Contact us, Our clients sections, and so on. Just click the block or template to import it.

Information

When importing Elementor blocks or templates for the first time, the user will need to create and connect Elementor account with WordPress website. Create a free account on Elementor and follow the setup to connect it with your website.

Elementor blocks
Elementor blocks

From the menu select Pages. Now select the page template you want to import. Remember, with free accounts you can only import free templates.

Select templates
Select templates

Next confirm the import. After this, all existing blocks on your page will be deleted and the template will be imported.

Elementor import confirmation
Elementor import confirmation

The import takes about 30 seconds. Once done, it will show the newly created page. By default, the page width is set to default that leaves some space around the content.

Imported homepage
Imported homepage

Click ‘gear’ or settings icon from the bottom-right corner and select page layout as Elementor Full Width.

Website width
Website width

Now click the update button to save changes. Once updated, visit your website homepage, and voila! The brand new homepage.

Website homepage
Website homepage

Now you can easily customize this page, edit content such as text, images, videos, and colors. Elementor has a huge list of features and covering them all in this article isn’t possible. I may do a separate video on how to use Elementor.

So this was one way of creating a homepage with WordPress. Although, the free version is limited to a handful number of elements, blocks, and templates. The premium plan gives you a ton of elements and templates.

Import Demo

The other way of creating a homepage is by importing it from demos. Most premium themes provide Demos to quickly build websites. If you have purchased a theme, explore theme settings to get options to import demos. Many themes provide a separate plugin to import demos. Once demo is imported, user can uninstall the plugin.

Many websites also provide options to import demos from theme settings.

Importing demo is an easiest and quickest way to create homepage. It is just a few clicks and that’s it.

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.