Ultimate Addons for Elementor 文档

How Hotspot Tour works?

As the name suggests this feature let the user take a tour for all markers. Tour will follow the order in which markers are created. Starting from the first marker, a tooltip will gradually display for other markers after a specified time interval.

Note: Hotspot Tour feature will not work unless Tooltip is enabled. This is because the tour is displayed on the tooltip. It also displays navigation (previous, next) links for the tour.

Below are the available option under Hotspot Tour tab. Initially Enable the Tour.

Repeat Tour: After completing round for all markers user can navigate from last to the first marker if this option is enabled.Autoplay: It will autoplay tour for all markers.Interval between Tooltips (sec) – After this time interval, next tooltip will appear. This defines the time between displaying two tooltips. Launch Tour – When you set tour on autoplay, you can decide when to start it. This option will allow a user to start the tour on the click of a button or when hotspot comes in the viewport. Overlay Button: This will allow starting the tour if in the above option button click is selected. Once button is clicked tour will autoplay unless End Tour option is clicked.

Hotspot Widget

Image hotspot allows highlighting specific sections with markers and pointers. Markers can be put on different sections of the image. Pointers can display information about the markers. UAE』s Hotspot widget allows stunning options to display nice image hotspot. Below are the key features –

Set background image and adjust its opacityDifferent Marker types – Icon, Text, ImageOption to add link to each MarkerGlobal and Individual styling for Markers with Glow EffectDifferent customization options for Tooltip ( Position, Arrow, Animation )Innovative Hotspot tour functionality

background image

Set an image on which you can put markers and highlight the sections. Under Content > Image, set image and its size. Opacity can be managed under Style > Image.

Markers ( Icon, Text, Image )

With Markers, you can pinpoint the specific section on the image and then add a description about it with Tooltip. Under the Markers tab, you can add a number of markers. Each marker has following settings –

General Marker Type: Choose marker type as an icon, text or image.Position: Choose a location for the marker with Horizontal position (%) and Vertical position (%) ContentTooltip Content: TinyMCE editor allows adding content that will display in the Tooltip for each marker. More options are available under Tooltip tab.Marker Link: You can add link to each marker.StyleOverride Global Settings: Global styling can be set under Style > Marker. This global style can be overridden for individual marker.

Tooltip

Tooltip is a small content window that will appear when hover over the marker or click on the marker. Tooltip content can be added for each marker from Markers > Marker name > Content. Tooltip can be customized with following options –

Position: Tooltip position can be set with respect to the marker.Display on: Display tooltip on hover or click of the marker.Arrow: Set content window arrow positionDistance: Set distance between marker and tooltip.Animation Type: Animations will be applied to tooltip content boxAdvanced Settings: Animation DurationMax Height: If the tooltip content is large use this option. Read How Max Height Option Works?Z-Index: In case tooltip is displaying beneath another section increase z-index value.

Hotspot Tour

This is attractive and innovative feature. It allows taking a tour to all markers based on their order. Refer article to see How Hotspot Tour works?

Style for the Marker and Tooltip

All styling options are available under Style Tab.Glow Effect option is present under Style > Marker.

Related Documents –1. Styling a Marker in Hotspot Widget2. Unable to Access the URL assigned to Marker?3. How Max Height Option Works?4. Unable to Click on Markers when Hotspot Tour Option is Enabled?

Styling a Marker in Hotspot Widget

A marker can inherit a global styling or can be customized with individual styling. This can help highlighting a particlular marker.

Global Styling – For the chosen marker type, all styling options will be available under Style tab.

Individual Styling – Style for single marker can be set from Content (tab) > Markers > (Choose a marker) > Style.

Unable to Access the URL assigned to Marker?

Sometimes if you set a link for the maker from Markers > Content and not able to acess it following can be a reason –

If the Tooltip is set to display on click of the marker ( Tooltip > Display on > Click ). A click event will work to display a tooltip box. In this case, if you have set a link for the marker will not work as clicking on the marker will display a tooltip box. Read Unable to Click on Markers when Hotspot Tour Option is Enabled?

How Max Height Option Works?

Max Height option is available under Content (tab) > Tooltip > Advanced Settings. This option manages the height of the tooltip content box.

Tooltip content can be set from Markers > Content. If the content is long, tooltip content box will take up a content length. This might look weird and display out of the viewport. In such cases, the height of the tooltip content can be managed with Max height option. This option will set a height for the content box and will add a vertical scroll bar.

Unable to Click on Markers when Hotspot Tour Option is Enabled?

Hotspot Tour is innovative feature. Read here how this option works.

When Hotspot Tour is enabled, a tooltip will display automatically for all markers starting from the fist marker. Navigation links will be included in the tootip content box and user can navigate with this links

As the tooltip is displayed automatically, links for the markers are disabled.

How to add Sortable and Searchable Table? How to Show Entries Dropdown?

Sometimes it is irritating for a user to search for specific table entry by scrolling table all the way down and up. Table widget provides some cool options that allow a user to sort a table with few clicks and search for a particular section in minimum time.
Table widget provides options to make the table sortable and searchable. Sortable tables are effective as they allow the user to sort the table by clicking on table headings. While searchable tables make searching task super easy for a user. It displays a search box for the table so that user can search exact content from the table.
Table widget also allows controlling the number of entries in a table.
Advance Settings tab in Table widget list these settings-
Sortable Table (?)

Enabling this option will display arrows in all table heading section.
A user can sort table entries on the click of table headings.

Searchable Table (?)

Enabling this option will display a search box above the table.
A user can type the string or content that needs to be searched/filtered.
The row that has matching content will be displayed.

Show Entries Dropdown (?)

This option lets a user control the number of entries to display.
A user can select a number of rows that should display.

You can enhance the design of  Search / Show Entries Box from Style tab. Color, Background, Typography, Border, Width, Padding can be adjusted to match these boxes with your design theme.

How to Design Filterable Image Gallery?

Image Gallery Widget provides the feature to create a filterable gallery. Here are the steps –
Step 1 –  Enable Filterable Image Gallery option.

This option is available only for Grid / Masonry layout.
The setting can be found under Content (tab) > Grid / Masonry > Filterable Image Gallery.
Enabling this option will display all categories created for images. See how to create categories in the next step.
「All」 Tab Label is a label to the main category, where all images in the gallery will be displayed. Edit it if required.

Step 2 – Set categories for Images.

The category names that are set to images will display as Filterable Tabs title.
In above screenshot BRANDING, DESIGN, PHOTOGRAPHY, WEB are categories.
You can directly assign categories to the image.
See how to set categories for images?
For example – If image A has assigned to categories BRANDING and DESIGN. While image B has assigned to categories PHOTOGRAPHY and WEB. Then Filterable Tabs will automatically display all 4 categories. On clicking on any of the tab will display related images.

Step 3 – Customize Filterable Tabs.

Category names will automatically display as Filterable Tabs.
That means if you assign 5 different categories to images, then 5 Filterable Tabs for all those categories will be created.
You can completely customize Filterable Tabs with the settings under Style (tab) >  Filterable Tabs.

Manage Filterable Tabs on Responsive Devices

Under Grid / Masonry / Justified tab, you get an option for Responsive Support. Enabling this option will display all Filterable Tabs as a dropdown on the responsive devices. If you have a number of filterable tabs, enable this option. It will stack all tabs and display them as a drop-down.
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. Set it to Justify to display images under filterable tabs.

Filterable Tabs for Posts Widget

This feature allows displaying all posts categories with Filterable Tabs. Clicking on the tab will display posts assigned to the respective category.
Filterable tabs can be categories or tags. Settings can be found under Content (tab) >  Filterable Tabs.
Note: Filterable Tabs are dependent on the skin and layout selected for posts. It is available only for Classic, Event and Card skins and Grid, Masonry layout.
Enable Show Filters toggle under Filterable Tabs setting. Choose categories or tags from Filter By option.
You can customize filterable tabs completely with colors, typography, and other settings.

Manage Filterable Tabs on Responsive Devices

Under Filterable Tabs section, you get an option for Responsive Support. Enabling this option will display all Filterable Tabs as a dropdown on the responsive devices. If you have a number of filterable tabs, enable this option. It will stack all tabs and display them as a drop-down.

How to Design Filterable Video Gallery?

Video Gallery widget provides the feature to create a filterable gallery. Here are the steps –
Step 1 – Enable Filterable Video Gallery option.

This option is available only for Grid layout.
The setting can be found under Content (tab) > Filterable Tabs.
Enabling this option will display all categories assigned for videos. See how to create categories in the next step.
「All」 Tab Label is a label to the main category, where all videos in the gallery will be displayed. Edit it if required.

Step 2 – Set categories for videos.

The category names that are set to videos will display as Filterable Tabs title.
In the below screenshot Astra, Elementor are categories.
You can directly assign categories to the video. See how to set categories for videos?
For example – If video A has assigned to category Astra. While video B has assigned to category Elementor. Then Filterable Tabs will automatically display all 2 categories along with main 『All』 category. On clicking on any of the tab will display related video.

Step 3 – Customize Filterable Tabs.

Category names will automatically display as Filterable Tabs.
That means if you assign 5 different categories to videos, then 5 Filterable Tabs for all those categories will be created.
You can completely customize Filterable Tabs with the settings under Style (tab) > Filterable Tabs.

You can add Title for Filterable Tab. That will describe more about the filterable tabs and video gallery.
Enable Title for Filterable Tab option and enter a title. You can customize the title under Style ( tab ) >  Title.

Manage Filterable Tabs on Responsive Devices

Under  Filterable Tabs section, you get an option for Responsive Support. Enabling this option will display all  Filterable Tabs as a dropdown on the responsive devices. If you have a number of filterable tabs, enable this option. It will stack all tabs and display them as a drop-down.

Related Documents –
How to Display Specific Video Category Tab as a Default on Page Load?