Home » Tutorials » How To Create A Blog Page With Elementor Widget
For free Elementor user’s, it’s easy to create a blog page with elementor using Master Addons blog widget. You can customize your blog page in various ways. You will get multiple blog variations in some premium WordPress Theme. If you are a pro user of Elementor then there is an element named “posts” widget.
For a professional blogger main blog page structure means a lot. Not only for blogger but also most of the website needs a blog page to publish their updates and news. Blog is the most necessary part of any type of business owner. It helps to reach more audience and explain in detail about your services.
I am going to explain how to create a blog page with elementor pro and using Master Addons free version. First, let me explain about the post’s element from Elementor Pro and then will explain Master Addons. I will show you how to add some specific blog posts or latest blog posts as carousel in the homepage like many professional websites. At the end of this post, you will get a comparison between these two elements.
Note: Two videos are added inside this post. Creating a Blog Page using Elementor Pro and Create a blog page with elementor using Master Addons. Scroll down to check the video and comparison between Post's vs Blog widget.
If you have Elementor Pro installed in your WordPress website, you will see pro elements like the following screenshot. Just drag the “Post’s” element inside your page section.
By default, you will see 3 column style having 6 posts. It’s the default classic skin. There are two more skin available named cards, and full content. You can select min 1 column to max 6 columns and input an unlimited number inside the posts per page option.
Select the proper image position (select none if you don’t want to showcase the featured image), size, ratio for the featured image.
Define the HTML title tag, Excerpt length, Metadata, and Customize Read more text. That’s all you will get inside the layout tab.
Within the content tab, there are two more options available. Query, and Pagination – query helps to select the post type and filter which posts exactly you want to showcase within your blog page. Set which type of pagination you prefer for the blog post page. Three different types of pagination available, Numbers, Previous/Next, and Numbers + Previous/Next.
Now it’s time to check the style system of Post’s Element. Within the style tab, there are four options available Layout, Box, Image, and content. Change columns and Rows gap, Alignment from the layout option. The box option stands for border and padding. Wisely choose the border color and radius for better presentation. From the image option, you can define the border-radius for the featured image and set spacing too. The content is the last option of style. This option will help you to change the typography, color, spacing for title, meta, excerpt, and read more text.
Make sure you have installed Master Addons plugin on your website to work with “Ma Blog” element for creating a blog page. Take a look at the following screenshot and you will see the blog element and download the free version from Master Addons WordPress page.
Just drag the blog element and you will see something like the following shoots. By default the blog layout is classic, Blog type is grid layout, and the number of columns is four.
Blog Style you can create: There is a total of 7 unique variations available for Grid, Card, and List layout. In total, you can create 21 different variations of your blog page except masonry style. You can arrange this layout by playing with Blog layout, Blog type, and Cards Layout. Take a look at the following gif screenshot to get a perfect sense of variation. Check the demo from the following links.
More General Display Options: There are post order system, Column selection, Post format icon, Post meta separator system, Title HTML tag selector, Post type selection, Raw & column spacing, Content alignment, Posts per page, and pagination enable button. Not only change the variation by one click but also you can creatively customize your blog page using all of these options.
Thumbnail Settings: Enable or disable the post’s thumb image and select the perfect image size using size and fit option. You can mention custom height for your featured image too. From thumbnail position, select where you want to place the thumb image in your blog page. The amazing system is hover animation, Color Effect, and Thumbnail shape. Here you will get 26 amazing hover animation effects, 16 color effects, and 5 different shapes.
Enjoy the following gif image. I have applied Hover animation – Hang, Color effect – Flushing, and Thumbnail Shape – Gradient Bordered.
Posts Settings: Control your meta info, excerpt length, Read more text, Show content or Excerpt from this panel. In the following screenshot, I have enabled post title, author avatar, post author name, date, categories, and comment number. Also set 13 as excerpt content length.
Advanced Settings: Exclude specific posts from your blog page. Filter by tag, author and offset post count available inside advanced settings. Some bloggers prefer to open their blog post in a new tab, you can do it from this advanced settings too.
Carousel: Sometimes you may need to use this carousel system for the blog post. Within this blog element, you can enable a carousel, set autoplay, and change navigation system (Dots or Arrows). I have seen a lot of websites where people showcase the latest post inside homepage using a carousel. You can use this system to place your latest update on the homepage. Also, you can filter some specific posts using Advanced settings and place the carousel blog post system anywhere. If you don’t put a featured image in a blog post then it will be empty in the blog post carousel like the following gif image.
[Note: Make sure you have enabled “Load Font Awesome 4 Support” from Elementor Settings. Otherwise, the arrow icon in carousel will not work.]
Style blog page: In style there is nothing complex. Using this style options, change thumb image overlay color, CSS filters. For title and meta you will get color, Typography, and hover color option. When you navigate content option in style you will see text color, content background color, typography, box background color, box shadow, padding, and content margin option. For the pagination, the typography is available at first. Then there is an option to select normal and hover option. Just customize both option’s color, border, padding wisely to get an amazing output.
I have compared the general options which are essential to create a proper blog page for any type of website. For example, variation, thumb style, pagination, carousel. Let’s wrap this up and check the following point. Just hover over each text and you will see details via tooltip.
Now Choice is yours. Do you prefer to go with the pro version of elementor or at first you want to try master addons plugin to test your blog page layout? Of course, my recommendation will be checking the free version first. You will get some other content elements that will help you to create a blog page with elementor properly. Feel free to comment here or contact us if you face any problem while using Master Addons blog element on your website.