Before starting to create a Dynamic Template Carousel 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
Name your template
Give your template a name and click the “CREATE TEMPLATE” button
Start your own design
Close the templates library dialog to start your own design.
Choose a demo post
Choose a demo post to build your carousel.
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 carousel item
Drag & drop widgets to design your carousel 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 Dynamic Template Carousel widget
Navigate to the “Unlimited Elements” plugin using the WordPress side menu.
Go to the Dynamic Loops category in the Widget Library.
Hover over the Dynamic Template Carousel widget and click install.
Add Dynamic Template Carousel widget to Elementor page
Create a new Elementor page or edit and existing page.
Search for Dynamic Template Carousel widget.
Drag the “Dynamic Template Carousel” 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 carousel.
Customize the template carousel in the content tab and style tab to create the design you want to achieve.
Items Item Template
Select the item template to dislpay.
Select the item source.
Number of Items
Set the number of items to show in carousel at a time.
Turn on/off the autoplay option.
Autoplay Hover Pause
Autoplay will pause on hover.
Margin Between Items
Set the margin between carousel items.
Show/Hide the navigation arrows.
Show/Hide the pagination dots.
Set the time between two autoplays.
Set the transition time in autoplay.
Turn on or off the loop option.
Set Active Mode on Mobile
Turn on/off the active mode on mobile.
Change On Click
Change the clicked item on item click.
Set the arrow icons of the arrow navigation when turned on.
Choose a icon for Left Arrow
Choose a icon for Right Arrow
Connected Widgets Settings
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
You can connect two item-based widgets and sync them.
Choose the same group for two or more item-based widgets so they can sync together.
Items Post Query Settings
Select the exact posts you want to show on your dynamic template grid.
Choose any of the below options for your post source.
- Current Query Post
- Custom Posts
- Related Posts
- Manual Selection
Choose the type of post you want to display.
Include the posts from different options given below
- Include Sticky Posts
- Get Only Sticky Posts
- 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
Choose specific posts that you would like to exclude from your selection by adding rules.
- Current Posts
- Post Without Featured Image
- Posts with current category
- Posts with current tags
- Avoid Duplicates
- ID's from Dynamic Field
To know more about post query setting, please visit our article on Advanced Post Selection
Dynamic Template Carousel Styling
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement 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.
You can style content padding, background color, border, radius, opacity in normal and active mode.
Nav Arrows Styling
Style the spacing, positioning, background, size, color, etc. of the nav arrows.
Nav Dots Styling
Here, you can style the nav dots size, color, spacing, and alignment.
Items Title Styling
You can style the item title typography, color and can add custom styling.
Here are some live use cases for the Dynamic Template Carousel widget.