Basic Posts Widget

The Posts widget from Ultimate Addons for Elementor (UAE) is a powerful way to display blog posts or custom post types in a flexible, responsive grid layout. You can choose exactly what shows up (like title, image, excerpt, meta info) and how it’s styled.

In this guide, we’ll walk you through the setup process step by step, while showcasing the key settings you can configure along the way.

Step 1: Add the Posts Widget to Your Page

Let’s start by dragging the widget onto your Elementor canvas.

1. Open the page you want to edit with Elementor.
2. Search for the Posts widget (from UAE).
3. Drag it into the section where you’d like the post grid to appear.

Now the widget is on your page and ready to configure.

Step 2: Set Your Layout in the General Section

Head to the General panel to control the layout basics.

• Posts Per Page — Choose how many posts to display. (e.g., 8)
• Columns — Set how many posts appear per row. (e.g., 4 for desktop)

Tip: Start with 3-4 columns on desktop and adjust for mobile later.

Step 3: Choose Which Posts to Show (Query Section)

The Query section lets you control which posts appear in the widget.

• Order By — Choose what field to sort by (e.g., Title, Date).
• Order — ASC (A-Z) or DESC (Z-A).
• Exclude Current Post — Useful for single post pages to avoid showing the same post twice.

Step 4: Show or Hide the Featured Image

A strong image can make a post more eye-catching.

• Toggle Show Featured Image to YES.
• Choose Image Size — Thumbnail, Medium, Full, etc. (e.g., Medium)

This will pull in the post’s featured image automatically.

Step 5: Display Post Titles

Post titles help users quickly understand what each entry is about.

• Toggle Show Title to YES.
• Choose the HTML Tag (H2, H3, etc.). Use H3 or H4 for better structure inside grids.

Step 6: Add Meta Information

Show helpful details like date and author.

• Enable Show Meta Data.
• Toggle on Show Date and/or Show Author.
• (Optional) Enable Show Comments Count.
• Use Meta Separator to style (e.g., |, •, or /).

Step 7: Control Excerpt Display

Want to show a short snippet of each post? Use the Excerpt settings.

• Enable Show Excerpt.
• Set Excerpt Length (in number of words). e.g., 20

Keep excerpts short and intriguing to increase click-throughs.

Step 8: Add a Call to Action (Read More)

Encourage visitors to explore your content with a “Read More” link.

• Toggle Show Read More to YES.
• Customize the Read More Text (e.g., Read More →, View Post, etc.)

This creates a clickable link to the full post.

From here, feel free to switch to the Style tab to customize fonts, colors, spacing, and hover effects.

Step 9: Customize Design in the Style Tab

Once your content settings are ready, head to the Style tab to adjust spacing, colors, fonts, and more.

Layout

• Column Gap — Space between columns (e.g., 20px)
• Row Gap — Space between rows (e.g., 30px)

Card

• Background Type & Color — Set a background or image.
• Border Type & Radius — Define edges and rounding.
• Box Shadow — Add depth to each post card.
• Padding — Control inner spacing of the card.

Title

• Color / Hover Color — Define normal and hover styles.
• Typography — Font settings.
• Bottom Spacing — Space under the title.

Meta

• Color and Typography
• Bottom Spacing for separation

Excerpt

• Color, Typography, Bottom Spacing
  

Call to Action

• Color / Hover Color
• Typography for link or button

Troubleshooting Tips

• Posts not showing? Double-check your Query settings.
• Excerpts too long? Lower the Excerpt Length.
• Layout looks off? Adjust Columns or check responsive preview.

Need Help?

Still stuck? Contact our support team or browse more tutorials in our Help Center.
Was this guide helpful? We’d love your feedback!