This tutorial will demonstrate how to customize your Elementor posts loop widget. The Elementor posts loop enables you to showcase your Elementor posts in your hero sections or on your Elementor archives. 

You’ll also learn how to make a column clickable by adding a custom column link to it in Elementor.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Elementor Posts Loop Tutorial

Create a Posts Section/Card using Elementor Posts Widget

In your Elementor dashboard, from your widgets area add an inner section to an existing page (00:29). Your inner section will have 2 columns.

Select the first column of the inner section and in the Edit Column area on the left, go to Layout, > Column Width, give it 72%, and give the second column 28%.

Back to your widgets area, look for the Elementor Posts Widget, drag it to your first column (00:47)

Select the posts widget, under Content, change Skin to cards. Under Columns enter 2, and Posts Per Page; 2.

On the Show Image option choose Yes, under Meta Data remove all the items. 

Disable the Badge Taxonomy and Avatar options. Press the Update button and then preview (01:24).

To Read: How to Overlap Sections in Elementor

Add Custom Styles to Elementor Heading and Content

Select the posts widget and go to Style, under Layout set the Column Gap to 15. 

Under the Card option, set the Background to yellow. 

Enable the Box Shadow option, and leave the Hover Effect as a gradient.

Under the Content option, for the Title, change the Color to white, for Typography, choose a heading font you want to use.

Down on the Read More option, change the Color to white, for Typography, give it a content font of your choice.

On the Excerpt, change Color to white, and under Typography give it the content font. 

Change the Excerpt Length to 15; so that the preview is not crowded. After this styling, update and preview (02:26)

To Read: How to Add Custom Fonts in Elementor and Generating Font Pairs

Add Elementor Column with a Custom Link

Select the second column, go to Style, and for Background, choose an image and insert it. Select the image and on the Size option set it to cover. 

In your Widgets area, drag a text editor widget and an icon widget to your column.

Select the column and under Layout, set Vertical Align to the middle.

Select the icon widget, under Content browse to the icons library, and insert an arrow. Select the arrow and under Style change its color to white, and on the Hover option set the arrow to yellow.

Select the text editor widget next, under Content type in “See More”. Under Style set the Text Color to white, and for Typography set it to content text font of your choice. Set the Alignment option to center.

With your column selected, go to Style, under Background Overlay, add a Background Type of white color, increase the Opacity to 0.74. 

Select the icon in the column, set its Primary Color under Normal to yellow, and under Hover set it to a more transparent yellow. Save and preview (03:01)

To make the posts columns in alignment, select the posts widget and go to Advanced, under Padding unlink the value/remove the padding. Then select the last column and do the same.

Back to the first column (the column with the posts widget), select it and go to Advanced, under Margin add 15 pixels on the right. Click the Publish button and then preview (03:24)

To make the content in the second column more visible, you can give it some more customization.

Select the column, under Style, change the Background Overlay color to yellow/orange and Opacity to 0.65. Go to the Blend Mode option and set it to Multiply; this makes the widgets more visible (03:59).

Also Read: How to Link WordPress Menu Items to Elementor Sections

Add Custom Link to your Column

You can add a column link to your column to make it clickable so that when your visitors click anywhere on your column, they can be redirected to any page or blog archive page where they can read more.

Still with your column selected, go to Layout, under Column Link, you can add a link to any page of your choice on your website (04:19)

Note: For your column to be clickable, you need an additional plugin, that is; the Make Column Clickable Elementor plugin. To get this,

Go to your dashboard, under Plugins click Add New, search for Make Column Clickable Elementor then install and activate it.

To Read: How PX, EM, REM, %, VW, VH Work In Elementor

Make Elementor Posts Loop Widget Mobile Responsive

 To make sure the posts widget is responsive on all devices, go to the Responsive Mode (04:34).

On the Tablet device;

Select the posts widget and go to Style > Content, under Typography reduce the title size to 25 pixels, and change the Line Height as well to 1.2 EM.

Under the Excerpt option, under Typography, reduce the Size to 15 pixels (04:55).

On the Mobile device;

Select the posts widget and go to Style > Layout, set Rows Gap to 15.

Select the last column, go to Advanced > Margin, change it to 15 pixels on Top (05:20).

To Read: Elementor Landing Page – A Step by Step Guide

In Closing

That’s how you can customize your Elementor posts loop widget and make elementor clickable columns on your website as well.

For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.