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

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 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. Right side contains draggable elements and the left side is the page where you can drop elements.

To create website structure, click ‘+’ icon.

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

Rest of options on the left section will let you import pre-designed layouts and elements. You can use Elementor Library, Templately, Exclusive Addons, 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.

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, all existing blocks on your page will be deleted 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 that 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.

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 homepage with WordPress. Although, free version is limited to a handful number of elements, blocks, and templates. 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.

The post Structure & Design WordPress Homepage | WordPress 101 appeared first on Linux Tutorials, FOSS Reviews, Security News.

Source: Linux Tutorials, FOSS Reviews, Security News