Thursday, December 3, 2020
Home Blogging How to Edit a WordPress Homepage (Easily & Effectively)

How to Edit a WordPress Homepage (Easily & Effectively)

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 completely different reminiscent of a touchdown web page that highlights your merchandise, companies, and so forth.

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 person visits your area title.


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 in case you’re utilizing WordPress to construct a small enterprise web site and even to run an internet retailer? Then, you’re possible 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 greatest WordPress popup plugin on the market. Their web site has a nice weblog, however that isn’t the main focus 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 proper place.

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

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

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

You can use these fast hyperlinks to bounce straight to the completely different components 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 can 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’ choice beneath ‘Your homepage displays’ part. After that, go forward and choose your own home and weblog pages.

Set your homepage

Don’t neglect 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 remains 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 greatest 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 dwell preview of your theme.

Using WordPress's theme customizer

The Theme Customizer has completely different choices for various themes. Your preview and the out there choices could look completely 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 high 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 received’t be dwell 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 high left nook of that part.

You can even 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 joyful together with your homepage, click on the Publish button to make it dwell.

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

Here’s how our homepage appears to be like, dwell on the web site:

The finished homepage live on the website

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

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 in case you want to create your homepage from scratch? The WordPress block editor is a easy method to accomplish that.

To use the block editor, merely go to the Pages display screen 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 our knowledgeable recommendations on mastering the WordPress content material editor. We clarify every little thing clearly utilizing a number of 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 routinely create a paragraph block for you.

Adding text in the block editor

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

You can even 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 are 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 online.

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 concerning 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 might 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 joyful together with your homepage, click on the ‘Publish’ button on the highest proper of the display screen.

Publish your homepage once you're ready

Here’s how our completed homepage appears to be like:

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

What if you’d like to go additional together with your homepage? One choice is to attempt a few of these greatest blocks plugins for WordPress to add new performance, reminiscent of a contact kind, testimonials, evaluations, and extra.

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

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

Using Beaver Builder to Edit Your WordPress Homepage

Beaver Builder is a in style web page builder plugin, and it’s a smart way 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.

You May Also Like : WordPress Custom Fields 101: Tips, Tricks, and Hacks

In the block editor, it’s a good concept to swap 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 that you would be able to 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 screen to begin utilizing Beaver Builder.

Launch Beaver Builder by clicking the button

You’ll be taken into the Beaver Builder editor. The quickest method to design your homepage is by utilizing considered one of 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 out there 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 little bit window will pop up the place you can also make edits. Here, we’re modifying our homepage’s headline (the big textual content on the high).

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 complete new row. Content in Beaver Builder is organized in rows that are cut up into columns.

To add a row or module, click on the + icon on the high of the display screen. 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 are able to 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 measurement 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 convey 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 appears to be like, 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 appears to be like dwell on our web site:

The Beaver Builder homepage live on the site

Using Divi to Edit Your WordPress Homepage

Divi is one other in style WordPress web page builder plugin. It comes with a WordPress theme and a web page builder plugin with dozens of attractive 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 received’t have the option to entry the format 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 operating, 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 swap to the Blank Page template beneath Document » Page Attributes » Template. That method, your homepage received’t have a sidebar, title, menu, or some other 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 high of the display screen.

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

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

You may even see a immediate on the high of your display screen asking if you’d like to depart the positioning. 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 counsel utilizing a premade format as the idea to your homepage. This makes it actually fast and simple to get your homepage arrange.

Choose the premade layout option in Divi

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

You can search by these by typing in a search time period, or you possibly can examine the 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’ format 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 format pack, plus the completely different web page layouts which are out there. You’ll most likely need to use the Home web page or Landing web page to your homepage. We’re going to decide the Home choice.

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

Choose the layout you want to use in Divi

Divi will routinely import the format for you. You’ll then see it dwell 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 (cut 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 screen.

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

Editing the header text using Divi

With different modules, you possibly can convey 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 method utilizing the trash can icon.

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

Note that the picture on the high is about 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 screen.

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 appears to be like dwell 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 should have WordPress plugins and our recommendations on how to enhance WordPress search engine optimization.



Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

LIC Premium Paid Certificate Download For Income Tax Purpose – Online

You should be conscious that it's necessary to provide Premium Paid Certificate for insurance coverage insurance policies to avail Income tax exemption profit underneath...

Leave Encashment Calculation & Tax Implications

Leave Encashment is a course of the place you may get cash for the unused stability leaves. Most of the persons are not conscious...

Rakesh Jhunjhunwala Portfolio Holdings

Rakesh Jhunjhunwala, 60, India’s most profitable fairness investor who made 2.9 Billion {dollars} (290 crores USD) ranging from $100. Rakesh Jhunjhunwala is a clever man with...

Angel Broking Vs Zerodha Broker Comparison : Brokerage, Margin, Charges

I've carried out the comparability between Angel Broking vs Zerodha (a reduction dealer) on this article. If you might be on the lookout for advisory dealer...

Recent Comments