Structure & Design WordPress Homepage | WordPress 101

Welcome back to WordPress 101 series. WordPress 101 series aims to teach WordPress CMS to beginners. In this article, we will 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 very efficient, but structuring web pages with Gutenberg may not be as efficient as writing posts.

By default, WordPress sites show the 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.

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 benefit 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.

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.

Now it’ll open up the page editor.

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

To create a website structure, click the ‘+’ icon.

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

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 sets of pre-designed elements such as 404 page, Contact us, Our clients sections, etc. Just click the block or template to import it.

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

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

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

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

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

You can easily customize this page and edit 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 build websites quickly. 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 the demo is imported, user can uninstall the plugin.

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

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