Create an Elementor Posts Loop with Custom Column Link

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.

2wblz5GKOa8n6rgclCIHUmoOepkFR0Vdwdx8Q UQQ7O6h0 yJoF0ge4P cfYzb9ft5iKwrximHzh5DFy0QYlu

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)

AIM0slNZZwsPOekNtSJkUVqCth6uhhc5SnJq4WEX2WVmKBBSqptH0ddVLzfvESSvTcCcxP3hLKsO2SASQmGECfsrqtR6c0kisOISIB42emxQnkdXZlzzqb63yQGy 3PqZLS8jeto

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

rjlGXQZGKCK 7PPt7fGkq5LU0YpS3veTUV2XgoBnlXEAUgBLVTO TyjSyu47qRW6LF5ETeD2jbyBen 0c hV7obdbDuK5lLnqzCwMIhmP pOfp9fA J9Ewd3bgjT6FPvQl85 rvM

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)

sUfd0 fJLYq0WA a P jXMakpa06FDY6Age fJF UogLy0LYCNtJXgTAaWdtb9qx1IH oLGJC0N7DhiKbm

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.

 Elementor Posts Loop with Custom Column Link

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.

R4lyBBVwfg dvjR8 UQsmJADdNYmWPMJeDFR7kZ53PwuM6onmkWphBvx9E946d2LRNxGaQcCMyESKzybxWj QOsyEzs yez exJVxEw92yIh OpCTUsfnfGVHbgPHm8vVuGosqlG

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)

D42aDcW5SHVrgLdHwNXFr07sJsyHYG88F9v0 0lb5xa7bfgc6Q

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

qXcPvape fBt AeL3sATB9apb6H60QcFsf 8TMfh0t3npK952 MsDJqnmAcl3Op2fRzkKzjWkFum qfGw3O7fO Uk7Fc2B8

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)

jSk 9QW7e261 bxuKFXQNBBxSCigqENL5CbR6jRmtAn7DalHLR5Ft1XnVLSotD4zewCF0gkXaBwepN0oOVClgRcwynSXjrgm7bCGfR paolHpVgknxawzZNOTranTaV IuIyO2II

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.

FzJQzjQOBbbGxUJ3xnOsuq3XUuUHIKz0Gj V6YphBOH8ltW womVBoKDrR24aDBoG6dhw9sBr6KaIlLghaaMlXmFvbfvs5oB lSZ

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

Fgj0OPBCK qjpnVhQntAXMPLO gjoBIbu9693uGCBqVyt

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

mP61Ky3eNZYP3l8h946bOci3 WKFNineWdzVBVUs2DJTj

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users