Before starting to create a Loop Accordion you will need to make sure you have the Unlimited Elements Pro installed and activated on your WordPress website.
Let’s start creating.
Create an Elementor template #
It requires Elementor Pro installed and activated on your WordPress website.
Go to Templates -> Theme Builder -> Single Post -> Click the “Add New” button on the top
Choose a demo post #
Choose a demo post to build your grid.
Click on the settings icon on the bottom -> Click “Preview Settings” -> Choose a content type and post
Don’t forget to click the “APPLY & PREVIEW” button when you are done.
Design your grid item #
Drag & drop widgets to design your grid item using the Elementor editor.
Once you are done click the “PUBLISH” or “UPDATE” button & exit to the WP dashboard.
You can use the following dynamic single post widgets to create your dynamic template.
- Post Title
- Post Excerpt
- Post Content
- Featured Image
- Author Box
- Post Comments
- Post Info
You can use advance custom field(ACF) to showcase dynamic contents.
Install the Loop Accordion widget #
Navigate to the “Unlimited Elements” plugin using the WordPress side menu.
Go to the Loop Builder category in the Widget Library.
Hover over the Loop Accordion widget and click install.
Add the Loop Accordion widget to Elementor page #
Create a new Elementor page or edit and existing page.
Search for the Loop Accordion widget.
Drag the “Loop Accordion” widget into the page from the widgets panel.
You can use this widget to create a post archive template and product archive template.
Choose your template #
In general settings choose the template that you have created previously to use as a loop item.
Show posts using Items Posts Query #
Navigate to the “Item Posts Query” section in the editor sidebar.
You can now choose different settings to output the templates you want to show on the page inside of your dynamic template accordion.
Customize the template accordion in the content tab and style tab to create the design you want to achieve.
General Settings #
Items Item Template
Select the item template to dislpay.
Item Source
Select the item source.
- Posts
- Products
First Item Open
First item of accordion will display in open state.
Accordion Settings #
Icon
Choose an icon for accordion.
Icon Active
Choose an icon for active accordion.
Item Gap
Set the gap between items.
Items Post Query Settings #
Select the exact posts you want to show on your dynamic template accordion.
Posts Source
Choose any of the below options for your post source.
- Current Query Post
- Custom Posts
- Related Posts
- Manual Selection
Post Types
Choose the type of post you want to display.
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
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
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
Post Pagination and Ajax Setting #
Pagination
Display the pagination for your post grid
- None
- Numbers
- Using Pagination Widget
Enable Post Filtering
When turned on you can use all the post-filter widgets like tab filters, load more and infinite scroll.
Filters Behaviour
- Ajax
- Ajax and URL change - Will change the URL each time the filter changes and add the possibility to use browser back navigation.
Learn more about the diffrent Ajax filters that can work with the Post Grid in the links bellow:
Loop Accordion Styling #
You can customize every aspect of the widget’s design through different styling options. Choose colors that match the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Icon Styling #
You can style icon background color, size, radius, etc.
Heading Styling #
Style the heading background, color, radius, padding, margin, and border.
Heading Text Styling #
In this section, style the heading title padding, color, and typography.
Item Styling #
You can style the padding, background, border, shadow, and radius of the accordion items.
Content Styling #
Style the content padding, margin, border, background, and radius in this section
Usage Examples #
Here are some live use cases for the Dynamic Template Accordion widget.
