Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Widgets
  8. Naive List

Naive List

How to use Naive List Widget of Sky Addons for Elementor

Naive List is a conversion-friendly blog post list widget for Elementor that displays your posts in a clean grid of 1 to 4 columns, each card finishing with a customizable Read More button. Posts come from the built-in Query builder with image, category, title, excerpt, author, and date — plus an optional video play button with lightbox and classic numbered pagination. The Naive List widget for Elementor is a great fit for blog pages, resource hubs, and article archives. This documentation will guide you through the process of using the Naive List Widget to present your posts on your website.

Features:

  1. Three Layouts: Choose Default, Layout 1, or Layout 2 for the post card arrangement.
  2. Responsive Grid: 1 to 4 columns with separate row and column gaps per device.
  3. Read More Button: A customizable button with text, icon, and icon position on every card.
  4. Query Builder: Filter by post type, terms, authors, and order, with a posts-per-page limit.
  5. Video Lightbox: Posts with a video link show a play button that opens the video in a lightbox.
  6. Pagination: Optional numbered pagination so visitors can page through all posts.
  7. Full Styling: Dedicated style sections for the item, image, title, text, category, meta, Read More button, pagination, and play button.

Insert Naive List Widget

  1. Open Elementor Editor. In the Elementor panel, search for “Naive List” under Sky Addons.
  2. Drag and Drop the Widget to the desired location on your page / editor.

Configure Layout

  1. Select Layout: Pick Default, Layout 1, or Layout 2 to change the post card arrangement.
  2. Columns: Display posts in 1–4 grid columns, set per device.
  3. Row Gap / Column Gap: Control the spacing between cards, responsive per device.
  4. Image Size: Choose the thumbnail size used for featured images.
  5. Alignment: Align card content left, center, right, or justified.

Build the Query

The Query section decides which posts appear in the list. Select the source post type, include or exclude terms and authors, set the order, and limit results with Posts Per Page. The list updates automatically as you publish new content.

Configure Additional Options

  1. Show Title: Toggle post titles and choose the Title HTML Tag.
  2. Show Image: Toggle the featured image.
  3. Show Category: Toggle the post category badge.
  4. Show Author: Toggle the author name.
  5. Show Text: Toggle the excerpt, cap it with Text Limit (0 shows the full text), and clean it with Strip ShortCode.
  6. Show Date: Toggle the post date with the standard date format options.
  7. Show Video: Show a play button on posts that have a video link, enabling the Video Settings section (lightbox autoplay, mute, aspect ratio, animation, or open as file).
  8. Show Pagination: Add numbered pagination below the list so visitors can browse older posts.
  9. Show Read More: Toggle the Read More button on each card.

Read More Button

When Show Read More is on, the Read More section lets you set the Button Text (dynamic-tag ready), pick an Icon, place it Before or After the text, and adjust the Icon Spacing. The button links each card to its full post.

Style Your List

Customize every element of the post cards to match your design aesthetics — colors, typography, spacing, and hover effects for a list that fits seamlessly into your site.

  1. Naive List:
    Item padding, border, border radius, and Normal/Hover tabs with background, box shadow, and hover border color.
  2. Image:
    Width, height, padding, border, border radius, and CSS filters for the featured image.
  3. Title:
    Spacing plus the full title styling — color with hover, typography, and text shadow.
  4. Text:
    Color, typography, and spacing for the excerpt.
  5. Category:
    Spacing, space between badges, and the full category badge styling.
  6. Meta:
    Spacing, space-between, color, and typography for the author/date row.
  7. Read More:
    Full button styling — colors, background, border, padding, and hover state.
  8. Pagination:
    Full styling for the numbered pagination links.
  9. Play Button:
    Full styling for the video play button.

Save and Preview

  1. Once you’ve customized and styled your list, click “Publish” or “Update” to save your changes.
  2. Preview the page to ensure the widget looks and functions as desired.

Best Practices

  1. Consistency: Maintain a consistent style with the rest of your website for a cohesive look.
  2. Clear Call to Action: Keep the Read More button text short and visually distinct from the card.
  3. Accessibility: Keep title tags semantic (one H1 per page) and excerpt text legible.
  4. Testing: Check column counts and gaps across devices and screen sizes for a responsive design.

Troubleshooting

  1. No Posts Showing: Verify the Query section returns published posts (check post type, terms, and Posts Per Page).
  2. Pagination Not Working: Pagination relies on the page’s paged query variable — it works on regular pages and archives, but avoid combining multiple paginated widgets on one page.
  3. Read More Button Missing: Make sure Show Read More is enabled in the Additional section and the Button Text is not empty.

Frequently Asked Questions

How do I display blog posts in a grid with a Read More button in Elementor?

Use the Naive List widget. Configure the Query for your posts, set 1–4 Columns, and enable Show Read More — every card gets a button linking to the full article.

How do I customize the Read More button in the Naive List?

Open the Read More section to change the Button Text, add an Icon before or after the text, and tune the Icon Spacing. The Read More style section handles colors, background, border, and hover.

How do I add pagination to the Naive List widget?

Enable Show Pagination in the Additional section. Numbered page links appear below the grid, and the Pagination style section controls their colors, spacing, and active state.

What is the difference between Naive List and Naive Carousel?

Both share the query builder, post elements, and Read More button. Naive List renders a static grid with optional numbered pagination; Naive Carousel slides the same cards in a Swiper carousel with autoplay, arrows, and bullets.

Can the Naive List play videos from posts?

Yes. Turn on Show Video, and posts with a video link in their Sky Addons video link field show a play button that opens the video in a lightbox, configurable in Video Settings.

Related Documentation

Conclusion

The Naive List Widget by Sky Addons for Elementor combines a tidy post grid with a clear call to action on every card. Utilize its query builder, layouts, pagination, and Read More button to guide readers into your content. For further assistance, consult the Sky Addons support team or community forums. Enjoy listing your posts!

How can we help?