WordPress 101

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.

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

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

Now it’ll open up the page editor.

Elementor Page Builder

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.

Website structure

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.

Information

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

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

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

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, which leaves some space around the content.

Imported homepage

Click ‘gear’ or settings icon from the bottom-right corner and select page layout as Elementor Full 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

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.

Sohail

Mohd Sohail is a web developer and a Linux sysAdmin. He also loves to write how-to articles, applications reviews and loves to use new Linux distributions.

Published by
Sohail

Recent Posts

Protect Online Privacy

Once you learn top ethical hacking terminologies, it's time to learn how to protect your…

3 days ago

Top 25 Ethical Hacking Terms For Learners

Welcome to our series "Hacking with Kali Linux". Before we move on to advanced topics,…

1 week ago

Ransomware Using Kaseya’s Software Vulnerability Impacted 800-1500 Businesses Internationally

On July 22nd, Kaseya, a US-based IT company was hit with a massive ransomware attack.…

4 weeks ago

LinkedIn’s 700 Million Users Data Is Available On Sale

Facebook's record of database leak has been broken by LinkedIn. Just a few months back…

1 month ago

Top Private & Secure Email Providers [2021]

Some popular companies that come to our mind when it comes to email providers are…

1 month ago

Brave Search Engine Opens For Beta Testing

Search engines are the front page of the Internet. Search engines are where internet users…

1 month ago