Price List is a powerful widget that allows displaying a list of items, products, services etc. along with its title, description, price, discounted price, image. It allows creating attractive Price List for your business with easy options.
See how beautifully Price List can be designed with this widget on our Demo Page.
Related Links –
How to set Hover Colors and Animations for Price List?How to Set Different Image Positions in Price List?Minimum height option in Price List
Sometimes you may need to direct the user to the external link with the click of an image. You might have used this feature on single images on your website. But the Image Gallery widget allows you to set images in the gallery to open a webpage with a click.
Custom Link option with the widget offers this feature. Here are the steps to set custom link –
Step 1 – Set Click Action as a Custom Link.
After clicking on the image in the gallery, the user will be directed to the custom link set with the image.
The setting can be found under Content (tab) > Additional Options > Click Action. Select Custom Link.
Step 2 – Set Custom Link for images.
Links can be added to the images in the gallery.
See how to set a custom link for the image?
Related document –
How to Set Icon on Image Hover?
Woo – Add To Cart Widget allows you to add a WooCommerce Add To Cart button anywhere on the page. It gives you options to add a product to cart on-click with predefined quantity. It navigates the user to cart page.
This button can be used anywhere on the page.
Below are the available options-
Product (?)
– Start typing name of the product that you wish to add to the cart when the user clicks the button. Also, choose the Quantity.
– When a user clicks the button, the selected product will be directly added to the cart.
Button (?)
– Various options to customize the button are available here.
– More options are available under the Style tab.
Note:
1. This widget will be visible only if WooCommerce plugin is installed and activated.
2. If the widget is not visible in the Elementor widget list, then check if it is enabled from UAEL settings. (?)
3. Styling options for every feature are available under the Style tab. (?)
Refer a demo for Woo – Add To Cart Widget here. The information boxes displayed with the button on demo page are designed separately with other widgets.
The General tab in the Woo – Products Widget allows you to select a layout and skin for your WooCommerce products.
Below are the available options
Skin (?)
Choose a Classic or Modern style for the product. Both will display Add to Cart button, Sale Flash, and Quick View option at different positions.
Layout
Query Builder will allow you to choose products to be shown. And with the layout option, one can arrange them well.
Grid (?)
This layout will display products in a 「rows and columns」 structure.
WooCommerce products will display in the Grid layout.
More options like a number of Columns and number of Products Per Page will be available under Grid Options. (?)
Based on the Grid Options, you can set pagination style using the Pagination tab. You can set the Pagination Type and Alignment.
Carousel (?)
This layout will display products in a slider.
More options will be available under Slider Options. (?)
Choose Arrows and/or Dots for navigation. More styling options for navigation are available under the Style tab. (?)
Select Total Product number, Products to Show per slide, Products to Scroll at a time.
Choose slide to Autoplay and to activate an Infinite Loop.
Manage the Transition Speed.
Want to display product or service packages along with price and feature in an attractive way? Want to add more style to suit your design theme? Then Price Box is a perfect widget for you.
Price Box provides prebuilt styling options to nicely showcase heading, pricing, content (features), call to action. It also provides attractive ribbon designs to highlight best deals, discounts, featured packages etc. Normal & Raised format allows focusing the price of the package. Some cool hover animation effects are provided to improve the usability of the Price Box.
See how Price Box can be designed beautifully on Demo Page.
Before getting started with Price Box widget, make sure it is enabled from UAEL settings. (?)
What are different style options for Price Box?
Price Box widget provides 3 different prebuilt style options under the General tab. It displays heading, pricing, content (features), call to action at different positions.
Hover Animation effects for Price Box
To improve the usability, Price Box widget provides 3 different Hover Animation options under the General tab.
Related Links-
Different Ribbon styles for Price BoxBox and Stripped Layouts for content in Price BoxNormal & Raised format for a price.
The Navigation Menu widget of UAE is a gamechanger to help you design every kind of Navigation Menu for a website.
How do we say this? We provide two options which are Dropdown Width and Dropdown Position which can be set for the individual Menu』s Submenu.
Let』s see them in details –
Dropdown Width
First, where to find this option? Make sure you select the Menu Type as Custom under the Content tab.
Now, under the Menu Items, go to the Menu Item. in the same section just below the Link option you will see the Dropdown Width option with multiple options.
They are –
Default CustomEqual to SectionEqual to Container Equal to ColumnEqual to Widget
Note: All these options will work, with the Custom Menu Type and Horizontal Layout only.
Let』s see them in details, and how each of them works –
Default
The default width is set to 220px. If the user wishes to changes the width, he can do so from the Styling options of the Dropdown section under the Style tab,
Custom
The custom options allows adding a custom width to the Dropdown. In this case, you will also see an option of Dropdown position just below the width option in the same section.
Equal to Section
The dropdown size here will be equal to the entire section in which the widget is present.
Equal to Container
Let』s say a section has more than two columns, then the columns reside in one container. So if you select Dropdown width as Equal to section it will be equal to that container.
This is can be used when you have a logo in the left column and needs the dropdown width up to the left of the logo.
Equal to Column
This option will make the width of the section equal to the column in which the widget is present.
Equal to Widget
With this option, the width will be equal to the width of the widget. It will be contained inside the blue outline of the widget container.
Dropdown Position
This setting will ensure the position of the dropdown according to its parent.
It will have three options –
Left – The dropdown will start from the extreme left of the parentCenter -The dropdown will align to the center of its parentRight – The dropdown will start from the extreme right of the parent.
The Countdown Timer widget provides three types of Timers –
Fixed TimerEvergreen TimerRecurring Timer
These timers can be used based on your requirement and the offers being offered on your site.
Let』s see each Type of timer and an example where it can be used.
Fixed Timer
A fixed countdown timer is used to display the amount of time, with respect to years, months, days, etc. This can be used to create a feeling of anticipation. Use this countdown to announce offers or an event on a specific day and display the time left for it to begin.
If you are planning an offer for any of the upcoming events like Black Friday, Cyber Monday, Christmas or New Year, a fixed countdown timer is what you』ll need.
Here are the steps on how to set it up –
Step 1: Select Fixed Timer for the Type of Countdown Timer in the Content > GeneralStep 2: Now, add a Due Date and Time, when you want the timer to expire on the specific Date and Time Note: By default, if you have not set any Timezone for the WordPress site you will see a message which mentions you are setting time in UTC 0. Make sure you set your timezone from the WordPress Backend, this will allow adding time and Date based on your timezone.Step 3: Choose the Action you want to execute after the timer goes off as per the Due Date and Time or expires.Step 4: Style your Timer items from the Style tab under the Layout field, from the Square, Circle, Rounded Styles. Manage the distance between the digits and also between digits and labels. You also have the option to Style your Expiry message using the Typography fields.
Evergreen Timer
An evergreen countdown timer is used to display the amount of time a particular user has to avail the offer. This is a great way to create a feeling of scarcity, urgency, and exclusivity.
Use this countdown to display some special offers to users who have arrived on your website, asking them to avail the offer within the specified time. This countdown timer sets cookies making sure that the offer looks exclusive and scarce.
Step 1: Select Evergreen Timer for the Type of Countdown Timer in the Content > GeneralStep 2: Now, under the same section you will need to add Days, Hours, Minutes. This time will be the same for every user who visits your site. And it will be tracked by storing cookies on his site. So if in case, if an X User sees a timer on visiting page of 30 minutes and visits later after 10 minutes he will see only 20 minutes remaining. But if Y user visits the same page he will see a Countdown Timer of 30 minutes for this page. Which means for every new user a cookie is stored on his site and the countdown is displayed accordingly.Step 3: Choose the Action you want to execute after the timer goes off as per the Due Date and Time or expires.Step 4: Style your Timer items from the Style tab under the Layout field, from the Square, Circle, Rounded Styles. Manage the distance between the digits and also between digits and labels. You also have the option to Style your Expiry message using the Typography fields.
Recurring Timer
A recurring timer is a timer that can be displayed on a specific date and time and after its expiry, it can be displayed after certain intervals of days or even months. This can be used to display an offer just like the Fixed timer but here you would not require to set the timer for that event again in a month, after few days or even a year.
Let』s say you have an event every year which provides huge discounts and offers on your products. For this event, you can set a Recurring Timer which will be triggered every year or after every predefined month. And it also has an option to set until when this Timer will last and chose an action after expiry.
Step 1: Select Recurring Timer for the Type of Countdown Timer in the Content > GeneralStep 2: Now, add a Start Date and Time, when you want the timer to begin on the specific Date and Time Step 3: Below Start Date and Time field, you will find the option to set the Days, Hours, Minutes fields. This option will set an amount of time for which the Timer will display after the timer starts.Step 4: Now the important field i.e. Repeat Timer after (Days) which will make the Countdown Timer recur after the specific daysStep 5: Choose the Action you want to execute after the timer goes off after the Timer expires.Step 6: Style your Timer items from the Style tab under the Layout field, from the Square, Circle, Rounded Styles. Manage the distance between the digits and also between digits and labels. You also have the option to Style your Expiry message using the Typography fields.
Table widget allows adding text, number, HTML, image, icon in the content area.
After adding Table Header, content can be added to Table Content in the table.
Multiple rows and columns can be added to Table Content. See How To Add Rows And Columns to the Table?
After adding columns to Table Content following option will appear for Cell-
CONTENT (?)
Enter a content for the column. Content can be in the form of text, number, HTML or special characters.
For Example- If you want to add button add HTML for a button like
You can link the content easily by entering the URL in given Link field.
ICON / IMAGE (?)
This allows you to add icon from the provided list or image to the content field.
Icon/Image can be added with or without content.
For Example- If you have created a table to compare A and B products. And want to show the logo of both products then you can just use their logo images in the content. It will give a nice look to the table.
Icon/Image style like scale(size), position, spacing etc. can be managed from Icon / Image tab under Style tab.(?)
ADVANCE (?)
This allows merging two or more table cells located in the same row or column into a single cell.
By default value for Column Span and Row Span will be 1. Add the number for column and row that needs to merge.
For Example- If you wish to combine 2 columns to the current cell then add Column Span value 3. It will add 2 columns to the current cell.
Convert this Cell into Table Heading? option will allow setting current cell as a header cell. It will inherit all styles set for Table Header from Style tab. It is useful when one wants to show vertical headers for the table. (?)
Notes:
To change the row and column structure simple drag and drop the cell from left edge with three vertical dots.
To duplicate the cell click the copy icon.
The Modal Popup widget of the Ultimate Addons for Elementor allows you to display a popup based on various actions. In this article we』ll see how to trigger a popup on the click of a WordPress Menu element. You can do this using a custom CSS class.
Here are a few steps you need to follow:
1. Create a new section and add a modal popup inside it. You can design the modal popup as per you requirements.
2. Open Display Settings of the Modal Popup widget. Select the Custom Class option from the dropdown menu.
Add your custom class name in the field as shown below.
3. Now go to your WordPress Dashboard -> Appearance -> Menu
4. Create a Custom Menu element on click of which you wish to trigger a popup.
4. Enable the CSS Classes option under the Screen Option settings
5. Add the respective CSS class name ( the one you entered in step 2 ) under the selected menu element.
Also select the location you wish to display the menu element on. Like we』ve selected Primary Menu in the screenshot below.
6. Trigger the Popup sitewide
By default, this popup is triggered only on a single page. If you wish to trigger this popup on the entire website, and make it work with all your themes, we will use the 『wp_footer『 hook with a PHP function. You can paste the following code into the functions.php file of your theme/child theme.
function ultimate_elementor_modal_popup() {
echo do_shortcode( '[uael-template id="your-saved-section-id"]' );
}
add_action('wp_footer', 'ultimate_elementor_modal_popup');
You just need to replace your-saved-section-id with the ID of your Saved Section that you created in Step 1. For steps to get your saved section ID, you can refer to our article about UAEL saved sections.
This assures that the modal popup you just created, will be displayed on all the pages of your website!
Here are few Frequently Asked Questions for Countdown Timer widget of Ultimate Addons for Elementor –
What is the difference between Fixed, Evergreen timer? What is the difference between Evergreen and Recurring Timer? Which timezone does the timer use?
What is the difference between Fixed, Evergreen timer?
The Fixed timer is used to display a timer until a certain period of time, let』s say you have an offer on the last Friday of this month. So you can select a Fixed Timer which will display a Countdown until that Date and after expiry, it will display the Expiry message or your selected action after expiry.
While for the Evergreen Timer, you can imagine your site or landing page displaying a one-time, exclusive and urgent event for every visitor.
For the sake of explaining the Evergreen Timer. Let』s say if an X User sees a timer on visiting page of 30 minutes and visits later after 10 minutes he will see only 20 minutes remaining. But if Y user visits the same page he will see a Countdown Timer of 30 minutes for this page. Which means for every new user a cookie is stored on his site and the countdown is displayed accordingly.
What is the difference between Evergreen and Recurring Timer and How does The Recurring Timer Works?
As explained above an Evergreen Timer will be unique to every visitor who visits your site.
Now the Recurring timer will be a timer on a site, where we want to display a Countdown Timer every set period of time. Let』s say we have an event every month on 15th, using this timer you will be able to set a Timer which will start on the 15th at 10 AM and last for 9 hours. Here you won』t have to make any changes, just follow the steps mentioned in this article to use Timer on your landing pages right away.
Which timezone does the timer use?
By default, if you have not set any Timezone for the WordPress site you will see a message which mentions you are setting time in UTC 0. Make sure you set your timezone from the WordPress Backend, this will allow adding time and Date based on your timezone.
