Peter
Create a Posts Section/Card using Elementor Posts Widget
01
In your Elementor dashboard, from your widgets area add an inner section to an existing page. 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
Select the posts widget, under Content, and 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.
Add Custom Styles to Elementor Heading and Content
02
Select the posts widget and go to Style, 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
Add Elementor Column with a Custom Link
03
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
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
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
Add Custom Link to your Column
04
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
Make Elementor Posts Loop Widget Mobile Responsive
05
To make sure the posts widget is responsive on all devices, go to the Responsive Mode
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
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
Video: Elementor Posts Loop Tutorial
Check out more on this story on the link below.