NEWS

How to Edit a WordPress Homepage (Easily & Effectively)

Do you want to create a custom homepage for your WordPress site?

By default, WordPress shows your blog posts on the homepage. But you might want your website homepage to show something a bit different such as a landing page that highlights your products, services, etc.

In this article, we’ll show you how to easily edit and customize your WordPress homepage.

What is the WordPress Homepage?

Your WordPress homepage is the “front page” of your website. It’s the first page that shows up when the user visits your domain name. For instance, if you type in www.wpbeginner.com in your browser, the page you land on is our website’s homepage:

The WPBeginner homepage

Why Edit the WordPress Homepage?

If you’ve decided to create a blog, then it makes perfect sense to just show your blog posts on the homepage.

But what if you’re using WordPress to build a small business website or even to run an online store? Then, you’re likely to have products or promotions that you want to highlight on your homepage.

Here’s a business website homepage example, from OptinMonster. It is the best WordPress popup plugin out there. Their site has a great blog, but that isn’t the focus of their homepage. Instead, they’ve got a really clear call to action.

The OptinMonster homepage

Would you like to create a homepage like that? Perhaps you’ve already tried to set a custom page as the homepage in WordPress, but you’re struggling to make it look right.

If that’s the case, then you’re in the right place.

We’re going to take you to step by step through setting up a homepage and customizing it to match your needs. That way, you can make a great first impression and encourage your visitors to take the actions that are most important to your site’s mission.

That might mean buying a digital product from you, signing up to join your membership site, or donating to your fundraising campaign.

We’re going to cover a few different methods that you can use to create your custom WordPress homepage.

You can use these quick links to jump straight to the different parts of the tutorial:

Setting Your Homepage in WordPress

By default, WordPress displays your blog posts on the homepage. However, most business websites and even most blogs use a custom homepage and create a separate blog page to display their blog posts.

Let’s see how to set a separate homepage and blog page in WordPress.

First, you need to create your page by going to Pages » Add New. Title it Home, or whatever you want to call it, and then publish the page.

Creating a blank homepage

Pro Tip: Do you already have visitors to your site? Then you might want to put your site into maintenance mode while you’re setting up your homepage. Alternatively, you could set up a staging site where you can create your homepage.

Now, let’s repeat the process to create a page where you would display your blog posts. Simply go to Pages » Add New and name your new page Blog. After that, you can go ahead and publish the blank page.

Blog page

Once your pages are ready, let’s tell WordPress to start using these pages.

You can do this by going to Settings » Reading page in the WordPress admin area. Next, you need to select ‘A static page’ option under the ‘Your homepage displays’ section. After that, go ahead and select your home and blog pages.

Set your homepage

Don’t forget to click on the ‘Save changes’ button to store your settings.

Tip: Your homepage link is simply your domain name unless you installed WordPress in a subdirectory.

However, your homepage page is still empty. Let’s see some of the ways to easily edit your homepage in WordPress.

Using Your Theme’s Built-In Options to Edit Your Homepage

Some of the best WordPress themes will create a homepage design for you, so you can easily edit it.

You can find these options by visiting the Appearance » Customize page in your WordPress dashboard. This will launch the WordPress theme customizer with a live preview of your theme.

Using WordPress's theme customizer

The Theme Customizer has different options for different themes. Your preview and the available options may look different depending on the theme you are using.

The Hestia theme's default home page in the theme customizer

To edit any part of the homepage, simply click the blue pencil icon next to it. Here, we’re editing the image, text, and button at the top of the homepage.

Editing the top section of the homepage in Hestia

Note: As soon as you make edits, they’ll be shown in the preview of your site. Those changes won’t be live on your site until you publish them.

If you want to remove a section from the homepage, you just need to click the blue eye icon in the top left corner of that section.

You can also remove sections and add them back in using the ‘Frontpage Sections’ tab of the customizer.

Remove a section of the default Hestia homepage

Once you’re happy with your homepage, click the Publish button to make it live.

Click the Publish button in the customizer to make your homepage live

Here’s how our homepage looks, live on the website:

The finished homepage live on the website

Using your theme’s built-in options is the quickest way to set up your homepage. However, some themes may not have many options, or you may not be satisfied with how your homepage looks.

Don’t worry there are plenty of other ways to edit your homepage and give it the look you want.

Using the Block Editor to Edit Your WordPress Homepage

What if you need to create your homepage from scratch? The WordPress block editor is a simple way to do so.

To use the block editor, simply go to the Pages screen and edit the Home page that you created earlier.

Adding a new page in WordPress

Now, you can start creating the content for your page.

Pro Tip: If you’ve not used the block editor much, read through our expert tips on mastering the WordPress content editor. We explain everything clearly using lots of screenshots to show you how it works.

In this part of the tutorial, we’ll be using a few simple blocks to create a basic homepage.

First, we’ll add a welcome message to the page. You can do this by simply clicking on the page to start typing. WordPress will automatically create a paragraph block for you.

Adding text in the block editor

If you want to make the text larger, it’s easy to do that in the block settings on the right-hand side. Just use the ‘Preset size’ dropdown under ‘Text settings’.

You can also change the color of your text below this, in the ‘Color settings’ section.

Changing the text size in the block editor

Next, we’ll add an image to the page. You can do this by clicking the (+) symbol then selecting the Image block. You’ll find it in the Common Blocks section, or you can search for it using the search bar.

Adding an image block to your homepage

You can pick an image from your media library or upload a new one.

Important: Only use images that are in the public domain or CC0-Licensed or ones that you’ve created yourself. You should also optimize your images for the web.

Next, we’ve added another paragraph block, with the text Check out our latest posts here.

We’ve then added a ‘Latest Posts’ block, which we’ve set to show the post excerpt and featured images, as well as the post titles. You can find out more about the Latest Posts block in our tutorial on displaying recent posts in WordPress.

Adding a list of your latest posts to the homepage

You can add as many blocks as you want to your homepage. You may also want to use a “full-width” or “no sidebars” template for your page if your theme has one. You can do this in the Document settings for your page.

We’re using the Astra theme in this example:

Removing the sidebar from the homepage

Once you’re happy with your homepage, click the ‘Publish’ button on the top right of the screen.

Publish your homepage once you're ready

Here’s how our finished homepage looks:

The homepage created with the block editor, live on the site

What if you want to go further with your homepage? One option is to try some of these best blocks plugins for WordPress to add new functionality, such as a contact form, testimonials, reviews, and more.

Another great option is to use a more powerful page builder for WordPress to create something that looks gorgeous and professional.

In the next part of this tutorial, we’ll be covering two different page builders: Beaver Builder and Divi by Elegant Themes.

Using Beaver Builder to Edit Your WordPress Homepage

Beaver Builder is a popular page builder plugin, and it’s a great way to create your homepage.

First, you’ll need to download, install, and activate the Beaver Builder plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Next, you can start editing your homepage. Just go to the Pages menu in WordPress and click to edit the homepage we created earlier.

In the block editor, it’s a good idea to switch to a blank page or no sidebars template under the Document » Page Attributes » Template.

We are using OceanWP for this part of the tutorial. It comes with a ‘Landing Page’ template which creates a blank canvas that you can edit with the page builder.

Change the page template in WordPress

Once you’ve set your page template, you can click the ‘Launch Beaver Builder’ button in the center of the screen to start using Beaver Builder.

Launch Beaver Builder by clicking the button

You’ll be taken into the Beaver Builder editor. The quickest way to design your homepage is by using one of Beaver Builder’s pre-built templates. Click the + icon on the top right, if it’s not already selected, then click the Templates tag.

Choosing from the Beaver Builder templates

We’re going to use this ‘Agency’ template for our site.

Selecting the Beaver Builder 'Agency' template

Note: The templates aren’t available in the lite version of Beaver Builder.

You can edit anything you like about your template. Just click on whatever you want to change. A little window will pop up where you can make edits. Here, we’re editing our homepage’s headline (the large text at the top).

Editing the heading text in Beaver Builder

We’ve now changed the headline of the page, and the text on the button below it:

The changed text in Beaver Builder

If you want to add new elements to your page, you can do that by adding a new module or a whole new row. Content in Beaver Builder is arranged in rows which are split into columns.

To add a row or module, click the + icon at the top of the screen. After that drag and drop your chosen row or module into the place. Here, we’re adding a new 1 column row to our page:

The changed text in Beaver Builder

Once you’ve got a row in place, you can add 1 or more modules to it. We’ve got a 1 column row, so we can only add 1 module. We’re going to use the Heading module by dragging and dropping it into place:

Add a heading module to Beaver Builder

You can change the font and its size by clicking on the Style tab for the module:

Changing the Style settings for a Beaver Builder module

If you want to remove a row or module from your page, then simply bring your mouse cursor over it and click the X that appears towards the left-hand side.

Here, the gray icons let you edit or delete the whole row and the blue icons let you edit or delete an individual module:

Removing a module in Beaver Builder

You can continue adding and changing the rows and modules of your page as much as you want. Once you’re happy with how it looks, click ‘Done’ on the top right.

The Done button in Beaver Builder

You can then choose to save or publish your page.

Save or Publish your page in Beaver Builder

Here’s how our page looks live on our site:

The Beaver Builder homepage live on the site

Using Divi to Edit Your WordPress Homepage

Divi is another popular WordPress page builder plugin. It comes with a WordPress theme and a page builder plugin with dozens of gorgeous templates.

You can use the Divi page builder with any theme. For this tutorial, we’re going to use it with the Divi theme.

First, you’ll need to download, install, and activate the Divi theme from Elegant Themes. This includes the Divi Builder, so you don’t need to install it separately.

Note: You’ll need to enter your username and API key under Divi » Theme Options » Updates in your WordPress dashboard. Otherwise, you won’t be able to access the layout packs.

If you need help installing the plugin, take a look at our step by step guide on how to install a WordPress plugin.

Once you’ve got the Divi theme and page builder up and running, you can set up your homepage. First, go to the Pages menu in your WordPress dashboard and then edit the Homepage we created earlier.

Before you start to edit your homepage, it’s a good idea to switch to the Blank Page template under Document » Page Attributes » Template. That way, your homepage won’t have a sidebar, title, menu, or any other default elements.

Selecting the Blank Page template in the Divi theme

Next, you can click the ‘Use The Divi Builder’ button at the top of the screen.

Click the purple button at the top of the screen to start using the Divi Builder

Now, you’ll need to click the ‘Use Divi Builder’ button in the center of the screen.

Click the Use Divi Builder button in the center of the screen

You may see a prompt at the top of your screen asking if you want to leave the site. Click ‘Leave’ to enter the Divi builder.

The prompt asking if you want to leave your site (click Leave to open the Divi builder)

Next, you’ll see a range of options you can use to create your page. We suggest using a premade layout as the basis for your homepage. This makes it really quick and easy to get your homepage set up.

Choose the premade layout option in Divi

Divi has an impressive range of different layouts to choose from. There are 163 different layout packs, and each of these has several different page layouts including homepages.

You can search through these by typing in a search term, or you can check the boxes to view only layouts that fit certain categories.

Just a few of the layout packs available in Divi

We’re going to use the ‘Travel Blog’ layout pack to create our homepage. First, click on the pack that you want to use:

The Travel Blog layout pack in Divi

Next, you’ll see a description of the layout pack, plus the different page layouts that are available. You’ll probably want to use the Home page or Landing page for your homepage. We’re going to pick the Home option.

Once you’ve chosen your layout, click the ‘Use This Layout’ button.

Choose the layout you want to use in Divi

Divi will automatically import the layout for you. You’ll then see it live on your page, exactly as it’ll appear on your site. To edit any part of it, simply click on it.

Like Beaver Builder, Divi uses a system of rows (split into columns) and modules to create your page. With text modules, you can click on the text and type in whatever you want straight onto the screen.

Here, we’ve changed the header and the text below it:

Editing the header text using Divi

With other modules, you can bring your mouse cursor over them and click the Module Settings icon to edit them. Here, we’re editing one of the number counters:

Changing the settings for a module in the Divi builder

You can delete modules and rows, in the same way, using the trash can icon.

You’ll likely want to use your own images on your homepage. You can change these by editing the module settings.

Note that the image at the top is set as the Background for a Fullwidth Header Module, so you’ll need to change it under Content » Background for that module:

Editing the background image of the Fullwidth Header module

Once you’re happy with the changes you’ve made to your page, you can click ‘Save Draft or ‘Publish’ at the bottom of the screen.

The Save Draft and Publish buttons in Divi

Tip: If you can’t see those buttons, click the purple “…” button to open them up.

This button lets you expand the Divi controls along the bottom of the screen

Here’s how our page looks live on the website:

The finished website homepage

That’s it! You’ve created a great-looking homepage in WordPress and set it up successfully.

We hope this tutorial helped you learn how to edit a WordPress homepage. You might also want to take a look at our guide on the must-have WordPress plugins and our tips on how to improve WordPress SEO.

Read Also:

Source link

Tags

Best IT Helper

Hey there, My Name is Asif From Lahore Pakistan. By Profession I am a Content Executive, WordPress Customize, SEO Optimize, I have Deep Knowledge about my Professional Service and I like to follow Them.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close
Close
%d bloggers like this: