Latest Tech and Tips

How to Edit a WordPress Homepage (Easily & Effectively)

8

Do you need to create a customized homepage to your WordPress web site?

By default, WordPress reveals your weblog posts on the homepage. But you may want your web site homepage to present one thing a bit totally different similar to a touchdown web page that highlights your merchandise, companies, and so on.

In this text, we’ll present you ways to simply edit and customise your WordPress homepage.

Editing the WordPress homepage

What is the WordPress Homepage?

Your WordPress homepage is the “front page” of your web site. It’s the primary web page that reveals up when consumer visits your area title. For occasion, for those who sort in www.wpbeginner.com in your browser, the web page you land on is our web site’s homepage:

The WPBeginner homepage

Why Edit the WordPress Homepage?

If you’ve determined to create a weblog, then it makes excellent sense to simply present your weblog posts on the homepage.

But what for those who’re utilizing WordPress to construct a small enterprise web site and even to run an internet retailer? Then, you’re seemingly to have merchandise or promotions that you really want to spotlight in your homepage.

Here’s a enterprise web site homepage instance, from OptinMonster. It is the very best WordPress popup plugin on the market. Their web site has a nice weblog, however that isn’t the main target of their homepage. Instead, they’ve acquired a actually clear name to motion.

The OptinMonster homepage

Would you want to create a homepage like that? Perhaps you’ve already tried to set a customized web page because the homepage in WordPress, however you’re struggling to make it look proper.

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

We’re going to take you step-by-step by means of organising a homepage and customizing it to match your wants. That approach, you may make a nice first impression and encourage your guests to take the actions which can be most necessary to your web site’s mission.

That would possibly imply shopping for a digital product from you, signing up to be part of your membership web site, or donating to your fundraising marketing campaign.

We’re going to cowl a few totally different strategies that you should utilize to create your customized WordPress homepage.

You can use these fast hyperlinks to bounce straight to the totally different elements of the tutorial:

  • Setting Your Homepage in WordPress
  • Using Your Theme’s Built-In Options to Edit Your Homepage
  • Using the Block Editor to Edit Your WordPress Homepage
  • Using Beaver Builder to Edit Your WordPress Homepage
  • Using Divi to Edit Your WordPress Homepage

Setting Your Homepage in WordPress

By default, WordPress shows your weblog posts on the homepage. However, most enterprise web sites and even most blogs use a customized homepage and create a separate weblog web page to show their weblog posts.

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

First, you want to create your web page by going to Pages » Add New. Title it Home, or no matter you need to name it, after which publish the web page.

Creating a blank homepage

Pro Tip: Do you have already got guests to your web site? Then you may want to put your web site into upkeep mode when you’re organising your homepage. Alternatively, you may arrange a staging web site the place you possibly can create your homepage.

Now, let’s repeat the method to create a web page the place you’d show your weblog posts. Simply go to Pages » Add New and title your new web page Blog. After that, you possibly can go forward and publish the clean web page.

Blog page

Once your pages are prepared, let’s inform WordPress to begin utilizing these pages.

You can do that by going to Settings » Reading web page in WordPress admin space. Next, you want to choose ‘A static page’ possibility beneath ‘Your homepage displays’ part. After that, go forward and choose your house and weblog pages.

Set your homepage

Don’t overlook to click on on the ‘Save changes’ button to retailer your settings.

Tip: Your homepage hyperlink is just your area title, except you put in WordPress in a subdirectory.

However, your homepage web page continues to be empty. Let’s see a few of the methods to simply edit your homepage in WordPress.

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

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

You can discover these choices by visiting Appearance » Customize web page in your WordPress dashboard. This will launch the WordPress theme customizer with a reside preview of your theme.

Using WordPress's theme customizer

The Theme Customizer has totally different choices for various themes. Your preview and the obtainable choices could look totally different relying on the theme you might be utilizing.

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

To edit any a part of the homepage, merely click on the blue pencil icon subsequent to it. Here, we’re modifying the picture, textual content, and button on the prime of the homepage.

Editing the top section of the homepage in Hestia

Note: As quickly as you make edits, they’ll be proven within the preview of your web site. Those modifications gained’t be reside in your web site till you publish them.

If you need to take away a part from the homepage, you simply want to click on the blue eye icon within the prime left nook of that part.

You may also take away sections and add them again in utilizing the ‘Frontpage Sections’ tab of the customizer.

Remove a section of the default Hestia homepage

Once you’re pleased together with your homepage, click on the Publish button to make it reside.

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

Here’s how our homepage seems, reside on the web site:

The finished homepage live on the website

Using your theme’s built-in choices is the quickest approach to arrange your homepage. However, some themes could not have many choices, otherwise you will not be glad with how your homepage seems.

Don’t fear there are many different methods to edit your homepage and provides it the look you need.

Using the Block Editor to Edit Your WordPress Homepage

What for those who want to create your homepage from scratch? The WordPress block editor is a easy approach to achieve this.

To use the block editor, merely go to the Pages display and edit the Home web page that you just created earlier.

Adding a new page in WordPress

Now, you can begin creating the content material to your web page.

Pro Tip: If you’ve not used the block editor a lot, learn by means of our skilled tips about mastering the WordPress content material editor. We clarify all the pieces clearly utilizing numerous screenshots to present you the way it works.

In this a part of the tutorial, we’ll be utilizing a few easy blocks to create a fundamental homepage.

First, we’ll add a welcome message to the web page. You can do that by merely clicking on the web page to begin typing. WordPress will robotically create a paragraph block for you.

Adding text in the block editor

If you need to make the textual content bigger, it’s simple to try this within the block settings on the appropriate hand aspect. Just use the ‘Preset size’ dropdown beneath ‘Text settings’.

You may also change the colour of your textual content beneath this, within the ‘Color settings’ part.

Changing the text size in the block editor

Next, we’ll add a picture to the web page. You can do that by clicking the (+) image then deciding on the Image block. You’ll discover it within the Common Blocks part, or you possibly can seek for it utilizing the search bar.

Adding an image block to your homepage

You can decide a picture out of your media library or add a new one.

Important: Only use photos which can be within the public area or CC0-Licensed, or ones that you just’ve created your self. You also needs to optimize your photos for the net.

Next, we’ve added one other paragraph block, with the textual content Check out our newest posts right here.

We’ve then added a ‘Latest Posts’ block, which we’ve set to present the publish excerpt and featured photos, in addition to the publish titles. You can discover out extra in regards to the Latest Posts block in our tutorial on displaying current posts in WordPress.

Adding a list of your latest posts to the homepage

You can add as many blocks as you need to your homepage. You can also need to use a “full-width” or “no sidebars” template to your web page, in case your theme has one. You can do that within the Document settings to your web page.

We’re utilizing the Astra theme on this instance:

Removing the sidebar from the homepage

Once you’re pleased together with your homepage, click on the ‘Publish’ button on the highest proper of the display.

Publish your homepage once you're ready

Here’s how our completed homepage seems:

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

What in order for you to go additional together with your homepage? One possibility is to attempt a few of these finest blocks plugins for WordPress to add new performance, similar to a contact type, testimonials, evaluations, and extra.

Another nice possibility is to use a extra highly effective web page builder for WordPress to create one thing that appears beautiful {and professional}.

In the subsequent a part of this tutorial, we’ll be protecting two totally different web page builders: Beaver Builder and Divi by Elegant Themes.

Using Beaver Builder to Edit Your WordPress Homepage

Beaver Builder is a widespread web page builder plugin, and it’s a wonderful means to create your homepage.

First, you’ll want to obtain, set up, and activate the Beaver Builder plugin. For extra particulars, see our step-by-step information on how to set up a WordPress plugin.

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

In the block editor, it’s a good concept to change to a clean web page or no sidebars template beneath Document » Page Attributes » Template.

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

Change the page template in WordPress

Once you’ve set your web page template, you possibly can click on the ‘Launch Beaver Builder’ button within the middle of the display to begin utilizing Beaver Builder.

Launch Beaver Builder by clicking the button

You’ll be taken into the Beaver Builder editor. The quickest approach to design your homepage is through the use of one among Beaver Builder’s pre-built templates. Click the + icon on the highest proper, if it’s not already chosen, then click on the Templates tag.

Choosing from the Beaver Builder templates

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

Selecting the Beaver Builder 'Agency' template

Note: The templates aren’t obtainable within the lite model of Beaver Builder.

You can edit something you want about your template. Just click on on no matter you need to change. A bit of window will pop up the place you may make edits. Here, we’re modifying our homepage’s headline (the massive textual content on the prime).

Editing the heading text in Beaver Builder

We’ve now modified the headline of the web page, and the textual content on the button beneath it:

The changed text in Beaver Builder

If you need to add new components to your web page, you are able to do that by including a new module or a entire new row. Content in Beaver Builder is organized in rows that are break up into columns.

To add a row or module, click on the + icon on the prime of the display. After that drag and drop your chosen row or module into the place. Here, we’re including a new 1 column row to our web page:

The changed text in Beaver Builder

Once you’ve acquired a row in place, you possibly can add 1 or extra modules to it. We’ve acquired a 1 column row, so we will solely 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 dimension by clicking on the Style tab for the module:

Changing the Style settings for a Beaver Builder module

If you need to take away a row or module out of your web page, then merely carry your mouse cursor over it and click on the X that seems in the direction of the left-hand aspect.

Here, the grey icons allow you to edit or delete the entire row and the blue icons allow you to edit or delete a person module:

Removing a module in Beaver Builder

You can proceed including and altering the rows and modules of your web page as a lot as you need. Once you’re pleased with the way it seems, click on ‘Done’ on the highest proper.

The Done button in Beaver Builder

You can then select to save or publish your web page.

Save or Publish your page in Beaver Builder

Here’s how our web page seems reside on our web site:

The Beaver Builder homepage live on the site

Using Divi to Edit Your WordPress Homepage

Divi is one other widespread WordPress web page builder plugin. It comes with a WordPress theme and a web page builder plugin with dozens of beautiful templates.

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

First, you’ll want to obtain, set up, and activate the Divi theme from Elegant Themes. This consists of the Divi builder, so that you don’t want to set up it individually.

Note: You’ll want to enter your username and API key beneath Divi » Theme Options » Updates in your WordPress dashboard. Otherwise, you gained’t have the option to entry the structure packs.

If you need assistance putting in the plugin, take a take a look at our step-by-step information on how to set up a WordPress plugin.

Once you’ve acquired the Divi theme and web page builder up and working, you possibly can arrange your homepage. First, go to the Pages menu in your WordPress dashboard after which edit the Homepage we created earlier.

Before you begin edit your homepage, it’s a good concept to change to the Blank Page template beneath Document » Page Attributes » Template. That approach, your homepage gained’t have a sidebar, title, menu, or another default components.

Selecting the Blank Page template in the Divi theme

Next, you possibly can click on the ‘Use The Divi Builder’ button on the prime of the display.

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

Now, you’ll want to click on the ‘Use Divi Builder’ button within the middle of the display.

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

You may even see a immediate on the prime of your display asking in order for you to go away the location. 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 vary of choices you should utilize to create your web page. We recommend utilizing a premade structure as the idea to your homepage. This makes it actually fast and straightforward to get your homepage arrange.

Choose the premade layout option in Divi

Divi has a powerful vary of various layouts to select from. There are 163 totally different structure packs, and every of those has a number of totally different web page layouts together with homepages.

You can search by means of these by typing in a search time period, or you possibly can verify the packing containers to view solely layouts that match sure classes.

Just a few of the layout packs available in Divi

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

The Travel Blog layout pack in Divi

Next, you’ll see a description of the structure pack, plus the totally different web page layouts which can be obtainable. You’ll in all probability need to use the Home web page or Landing web page to your homepage. We’re going to decide the Home possibility.

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

Choose the layout you want to use in Divi

Divi will robotically import the structure for you. You’ll then see it reside in your web page, precisely because it’ll seem in your web site. To edit any a part of it, merely click on on it.

Like Beaver Builder, Divi makes use of a system of rows (break up into columns) and modules to create your web page. With textual content modules, you possibly can click on on the textual content and sort in no matter you need straight onto the display.

Here, we’ve modified the header and the textual content beneath it:

Editing the header text using Divi

With different modules, you possibly can carry your mouse cursor over them and click on the Module Settings icon to edit them. Here, we’re modifying one of many quantity counters:

Changing the settings for a module in the Divi builder

You can delete modules and rows in the identical approach utilizing the trash can icon.

You’ll seemingly need to use your individual photos in your homepage. You can change these by modifying the module settings.

Note that the picture on the prime is ready because the Background for a Fullwidth Header Module, so that you’ll want to change it beneath Content » Background for that module:

Editing the background image of the Fullwidth Header module

Once you’re pleased with the modifications you’ve made to your web page, you possibly can click on ‘Save Draft or ‘Publish’ on the backside of the display.

The Save Draft and Publish buttons in Divi

Tip: If you possibly can’t see these buttons, click on 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 web page seems reside on the web site:

The finished website homepage

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

We hope this tutorial helped you find out how to edit a WordPress homepage. You may additionally need to take a take a look at our information on the will need to have WordPress plugins and our tips about how to enhance WordPress website positioning.

If you favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Facebook.