Ultimate Addons for Elementor 文檔

FAQs for Countdown Timer Widget!

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.

Types of Timers in Countdown Timer widget

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.

How to set Grid and Carousel layout for WooCommerce products?

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.

Price List Widget

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

Image Gallery Widget

UAE』s Image Gallery widget lets you create an attractive gallery with some advanced features.

It supports default WordPress Gallery. You can use WordPress Gallery features like uploading an image with simple drag-drop, selecting multiple images and re-ordering them.

You can take a look at our demo to see how the widget displays image gallery beautifully – Demo Page.

Before getting started, make sure to enable widget from UAE settings. (?)

Some Rich features of the Widget are –

Filterable Image Gallery

This feature allows categorizing images. It displays all image categories with Filterable Tabs. Clicking on the tab will display images assigned to the respective category. Images will display with a default shuffling animation. Read how to design filterable image gallery?

Image effects like Instagram

Now, use filters like Instagram on your website』s image gallery. Filters can be applied to the original image, and also as a hover effect. You can also manage image overlay color. The setting is available under Style (tab) > Thumbnail >  Image Effect

Grid / Masonry/ Justified / Carousel Layout

Choose the best layout to make your gallery look stunning.

Grid: This layout will display products in 「rows and columns」 structure.Masonry: This layout adjusts the images in columns according to size. Hence reduces the size of the image gallery on the web page.Justified: Set all images in the same row at the same height. It fills all spaces between the rows. Read more about this layout in the article here.Carousel: Images will display in a nice slider.

Different Carousel settings give total control of the slider.

Scale effect for normal and hover image

You can now use the Scale effect that resizes (enlarges) the image on hover. This setting  is available under Style (tab) > Thumbnail >  Scale.

Show Image Caption

It allows you to add a trendy caption for the image to make it more descriptive. Enable the option from Content (tab) >  Additional Options > Show Caption. See how to add a caption for the image?You can completely customize the image caption by applying a background color, text color, padding, vertical alignment, and typography. This setting is available under Style (tab) >  Caption

Caption Below Image of Lightbox

With the update of UAE v1.17.0, you will now be able to add a caption below the Lightbox Image. Also, you will be set Color, Typography, and also manage the Caption bottom spacing respective to the Image.

You can find this option from Content (tab) > Lightbox > Show Caption Below Image. See how to add a caption for the image?

Advanced Lightbox Actions

Under the Lightbox section, you will find another option which provides the following option – Zoom, Social Share, Slideshow, Full Screen, Download, Gallery

This would allow Images with the above-mentioned options in the lightbox, allowing users to Share, play the Images on Slideshow, view the Images on Full Screen, or even Download them. You will find these actions in the top right corner of the Lightbox.

Below is the screenshot where you will find this option –

Add a custom link to the image

Now it』s easy to link the image with a custom URL. The setting is available under Content (tab) >  Additional Options > Click Action. See How to open a webpage on the click of an image?

Ability to open a lightbox on the click of the image

You can choose to display the image in a lightbox when the user clicks on it within the gallery. This gives a closer view of the image. This setting  is available under Content (tab) >  Additional Options > Click Action.

Totally Responsive Gallery

Manage view of the gallery on responsive devices easily with toggle.

Note: If you have enabled a Filterable Gallery for justified layout, and not able to see images under filterable tabs. Then check if Last Row Layout option for justified image gallery is set to hide. Change it to Justify to display images under filterable tabs.

Related Documents –

How to Set Icon on Image Hover?

How to Display Specific Category Tab as a Default on Page Load?

How to Exclude WooCommerce Products with Woo-Products Widget?

Many times, you would want to display all the products. But, at the same time, you might want to exclude some particular products. You can do this using the Woo – Products Widget.
The Query Builder of the Woo – Products Widget allows you to either display All Products or filter them as per your requirements. You can exclude particular products from a particular list using options listed under Query tab.
Below are the available options-

Exclude Product

Start typing the product name and select it manually to exclude from the product list.
For Example- If available products are X, Y, and Z. Selecting All Products option will display X, Y, Z products. But if you wish to exclude Y product then type Y in the text box.
It will exclude the Y product from the list and will display only X and Z.

Exclude Current Product

If you wish to exclude currently displaying product from all product list to avoid a duplicate appearance, use this option. Set the toggle to exclude current product.
For Example- If available products are X, Y, Z and they come under same category A. If products from category A set to display on all single product page. Then while viewing X product, all products including X will be displayed at the bottom of the page. To avoid the duplicate appearance of X opt to Exclude the Current Product so that only Y and Z will be displayed on X product page. Similarly, Y will be excluded from its single product page and X, Z will be displayed.

How to add Table Header with Table Widget?

What is Table Header?
A row that appears at the top of the table giving a title to columns beneath is Table Header. It is defined with the

tag.
Multiple rows and columns can be added to Table Header. See How To Add Rows And Columns to the Table?
After adding columns to Table Header following option will appear for Cell–

CONTENT (?)

Enter a heading/title for the column beneath.
For Example- If you want to create a table to compare A and B gadgets, then type A in one column and B in another column.

ICON / IMAGE (?)

This allows you to add icon from the provided list or image to the header field.
Icon/Image can be added with or without content.
For Example- If you want to create a table to compare A and B products, then you can just use their logo images in the header. 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.
Color and Background Color can be applied to each column separately to create a nice look for headers.

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.

Refer Table Widget document here.

How to add Table Content with Table Widget?

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 Click Me
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.

Price Box Widget

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.

How to Open a Webpage with the Click of an Image?

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?