Before starting to create a Dynamic Template Tabs you will need to make sure you have the Unlimited Elements Pro installed and activated on your WordPress website.
Let’s start creating.
Choose a demo post #
Choose a demo post to build your tab.
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 tab 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 Tabs 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 Tabs widget and click install.
Add Dynamic Template Tabs widget to Elementor page #
Create a new Elementor page or edit and existing page.
Search for Dynamic Template Tabs widget.
Drag the “Dynamic Template Tabs” widget into the page from the widgets panel.
You can use this widget to create a post archive template and product archive template.
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 tabs.
Customize the template tabs in the content tab and style tab to create the design you want to achieve.
General Settings #
Select the item template to dislpay.
Select the item source.
Layout Settings #
Select the tabs layout.
It turns tabs into accordion under this resolution.
Connected Widgets Settings #
Use remote control widgets to create advanced creative layouts.
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 tabs.
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
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
Post Pagination and Filtering #
Display the pagination for your post grid
- Using Pagination Widget
When turned on you can use all the post-filter widgets like tab filters, load more and infinite scroll.
- 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 Dynamic Template Tabs in the links bellow:
Dynamic Tabs 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.
Tabs Container Styling #
You can style tabs container radius, padding, border width, color etc.
Tab Bar Styling #
Style the background, padding, alignment, and border of tab bar.
Tab Item Styling #
Here, you can style tab typography, padding, radius, margin, background, color etc.
Tab Item Hover Styling #
You can style the tab hover background, color, and border.
Tab Item Active Styling #
Style the tab active background, color, and border.
Content Styling #
Here, you can style the content background, padding, spacing and radius.
Accordion (Mobile) Styling #
You can style the accordion item background, color, and active background color.
Items Tab Title Styling #
Here, you can style the typography, color, and custom styling for tab titles.
Items Tab Content Styling #
You can style the typography, color, and custom styling for tab contents.
Usage Examples #
Here are some live use cases for the Dynamic Template Tabs widget.