Wordpress Avada Theme blog post section design tips with eSports demo.

Currently, I am working on a website that is built with WordPress Avada Theme. I want to design the blog post section as news on the homepage and I like the Avada theme eSports demo blog post design section on the home page. See the image bellow-

Each one is a blog section with a single post from a specific category with a post title, publish date & post category. The top 2 blog sections are displaying posts with featured images & the rest of the blog sections are displaying posts without featured images. In this section, there are a total of 6 posts are displaying from different categories. 

Now the topic is how to do this? It seems like a normal blog section with 6 posts but actually, each post is a blog section that displaying only one specific post of a category in ascending order so the very first one of that category is display all time.

See the image below I open it with Avada theme page builder and each section displaying the blog option when I bring the mouse on them. That means each one is an individual blog section.

First, you have to take a nested column in the fusion page builder. See the image bellow-

1. You have to add 2 columns in the nested column

 

2. After adding 2 columns you have to add a blog element of fusion builder like the image bellow-

3. Then you will get some options to display your blog post see the image bellow-

Here you will get the following options to customize your blog section.

Blog layout- I choose a grid layout

Number of Columns- means how many columns you need to display your post. In my case, I need to display one post in one column that's why I select one column.

Posts Per Page- how many posts you want to display from your blog posts. I need to display one post from a specific category.

Categories- Which category post you want to display.

Order By- Date

Order- Ascending(to display the very first post of category) or Descending(to display the latest post of a category) 

Show Thumbnail- display the featured image of the post, I set the first two blog options to "Yes" and for the rest of the post "No".

Pagination Type- I set no pagination.

and many more settings to customize your blog posts display.

After that, I got the final design where you will found a border around each blog post, which is basically a border around the column with padding of 5px. 

You will get these options. See the image below.

Scroll down to get more options.

You can checkout the video on youtube for a better understanding.

I hope, this will help you guys too.😀😀😀😀😀😀