Well-structured blog homepage improves navigation and encourages customers to browse through your blog longer. You should display popular categories, list featured posts, and share upcoming events there while keeping it organized and appealing. 

We receive a lot of requests from our customers about how to create the same page as our demo blog homepage. So, we decided to teach you how to build a neatly organized custom homepage for a blog with the help of the Blog Extra templates. 

To create custom blog homepage:

  1. Got to Stores > Configuration > Magefan Extensions > Blog > Blog Index Page and set the Display Mode to Blank.

Blog Index Page Display Mode

Note: your blog homepage will go blank literally. So you might need to leave this step for later if you have an active blog and don't want only the sidebar to be displayed.


2. Go to Content > Elements > Blocks and Add New Block. Enable it, give it a Title, Identifier, and select what Store View to enable it on.

3. Click on the Widgets icons to start adding blog widgets.

Magento Blog Widgets

  • Select Magefan Recent Post Widget as the Widget Type and set a Title that will be displayed on a storefront.
  • Enable the
  • Set the Number of Posts you want to display in this widget.

Magento 2 Blog Widget

  • Filter Posts by Category, Tag, or Author to display only particular blog posts in this widget.
  • Set a Range of Posts Publish Date From and To to display articles from a particular time.
  • Choose the Custom Template for this widget and Save it.

Magento 2 Blog Widget Settings

Continue adding the same widgets with different templates and posts to create a variety of content and design on the blog homepage.

Blog Homepage Widgets

Once you save the CMS block it's time to get it displayed on your blog index page.

4. Navigate to Content > Elements > Widgets and Add New Widget.

Magento 2 Widget Options

5. Fill out general widget options and move on to the Layout Updates.

Set a widget to be displayed on a Specified Page, which is a Blog Homepage,  and define a page container — Main Content Area.

Blog Homepage Layout Updates

6. Choose the CMS block you've just created in the Widget Options.

Blog Homepage Widget

After you save a widget clean caches and check the results on the blog homepage.

Note: if you haven't enabled the Blank Mode for the blog homepage before, don't forget to jump back to the blog configurations section.

Magento Blog Homepage

These are just 2 templates we applied for the Magento blog homepage. There are 22+ of them in the Blog Extra edition. So you can customize your blog index page as much as you like and use different widgets and templates.

Besides you can use different templates for every listing page like category, tag, author, or search. 

Still, that's not it. If you decide to go with the Extra edition you should know about other benefits of Blog Extra.