Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Free Timeline in Elementor - Featured Blog
image accordion for elementor
ai-seo

Post Accordion for Elementor (Free & Easy to Use)

The “Post Accordion Widget allows you to display posts in an interactive accordion layout for free on your WordPress Elementor website. Organize your content in a compact and engaging way, making it easy for users to browse through posts. Customize the styling, animations, and layout to match your site’s design seamlessly.

 

Let’s look at each of the options in the “Post Accordion Widget” below.

Elementor Post Accordion Tutorial Video

Add a Free Post Accordion for Elementor

This widget requires Unlimited Elements Free version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Post Accordion”
  3. Hover over the widget in the search results and click install
  4. Add your “Post Accordion” widget to any Elementor Page
Add a Free Post Accordion for Elementor

General Settings for Elementor Post Accordion

General Settings for Elementor Post Accordion
1

First Item Open

It will show the first item open on accordion.

2

Button Text

Type the text to show in the button.

3

Intro Number of Characters

Define the number of characters of post you want to display as intro.

4

Scroll to Head

Select any of the options to turn on the option for different devices.

  • Off
  • Desktop
  • Mobile
  • Desktop+Mobile

Layout Settings for Elementor Post Accordion

Show or hide elements in Post Accordion.

Layout Settings for Elementor Post Accordion
1

Show Image

Show/Hide the image of the post.

2

Show Title

Show/Hide the title of the post.

3

Show Intro

Show/Hide the intro element.

4

Show content

Show/Hide the content of the post.

5

Show Button

Show/Hide the button.

6

Show Date

Show/Hide the date element.

7

Show Icon

Show/Hide the icon.

Icons Settings for Elementor Post Accordion

Icons Settings for Elementor Post Accordion
1

Icon

Choose an icon to display.

2

Icon Active

Choose an icon to display as icon active.

Elementor Post Accordion Posts Query Setting

Select the exact posts you want to show on your Post Accordion.

Elementor Post Accordion Posts Query Setting
1

Posts Source

Choose any of the below options for your post source.

  • Current Query Post
  • Custom Posts
  • Related Posts
  • Manual Selection
2

Post Types

Choose the type of post you want to display.

3

Include By

Include the posts from different options given below

  • Include Sticky Posts
  • Get Only Sticky Posts
  • Author
  • Date
  • Post Parent
  • Post Meta
  • Most Viewed
  • ID's from PHP function
  • ID's from Post Meta
  • ID's from Dynamic Field
4

Include By Terms

Choose specific posts that you would like to include from your selection by adding rules.

  • Include By Terms Relation
  • Include Terms Children
5

Exclude By

Choose specific posts that you would like to exclude from your selection by adding rules.

  • Terms
  • Current Posts
  • Author
  • Post Without Featured Image
  • Posts with current category
  • Posts with current tags
  • Offset
  • Avoid Duplicates
  • ID's from Dynamic Field

To know more about post query setting, please visit our article on Advanced Post Selection

Elementor Post Accordion Post Pagination

Elementor Post Accordion Post Pagination
1

Pagination

Display the pagination for your post grid

  • None
  • Numbers
  • Using Pagination Widget

Elementor Post Accordion Widget Styling

A variety of styling options are provided to control every aspect of the widget’s appearance. Select the colors that match the theme of your site. Make the widget look exactly how you want it to, by customizing the text, buttons, fonts, and layout.

Elementor Post Accordion Widget Styling

Icon Styling in Elementor Post Accordion

Style the icon background, border radius, color, and size.

Icon Styling in Elementor Post Accordion

Heading Styling in Elementor Post Accordion

In this section, style the heading background, border radius, padding, margin, and border.

Heading Styling in Elementor Post Accordion

Heading Text Styling in Elementor Post Accordion

Set the heading text padding, color, and typography.

Heading Text Styling in Elementor Post Accordion

Content Styling in Elementor Post Accordion

Set the content alignment, padding, margin, background, and border.

Content Styling in Elementor Post Accordion

Image Styling in Elementor Post Accordion

Style the image height, radius, and width.

Image Styling in Elementor Post Accordion

Title Styling in Elementor Post Accordion

Set the title color, typography, and spacing.

Title Styling in Elementor Post Accordion

Date Styling in Elementor Post Accordion

Set the color, typography, and spacing of date element.

Date Styling in Elementor Post Accordion

Text Styling in Elementor Post Accordion

Style the text color, typography, and spacing.

Text Styling in Elementor Post Accordion

Button Styling in Elementor Post Accordion

Style the button padding, radius, background, text color, typography, and spacing.

Button Styling in Elementor Post Accordion

Button Text Styling in Elementor Post Accordion

You can style the typography, and color of button text.

Button Text Styling in Elementor Post Accordion

Usage Examples of Elementor Post Accordion

Here are some live use cases for the Post Accordion Widget.

Free Post Accordion for Elementor with a Biography

Free Post Accordion for Elementor with a Biography

Free Post Accordion for Elementor Synced with Post Slider

Free Post Accordion for Elementor Synced with Post Slider

Thank you for using the Post Accordion Widget for Elementor! With its collapsible sections and sleek design, this is the best Post Accordion Widget for Elementor, perfect for organizing and displaying blog posts or articles in a compact, user-friendly way. We hope it enhances your website’s content presentation. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!