Author 詩語

Justified Image Gallery

With UAE version 1.7.3 and above, Justified option for Image Gallery is available in predefined layouts. This layout arranges images accordingly and displays them in a neat gallery.
Under Content (tab) > Gallery > Layout choose Justified.  Add images to the gallery.
Additional options are available under  Grid / Masonry / Justified tab.

Row Height: All images will be resized and arranged in rows. These rows will have the same height. You can manage the height of rows with this option.
Last Row Layout: Sometimes very few images come to the last row that may not look good. Set this setting to manage last row images. Justify option will cover the entire row while Hide option will hide last row images.

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.

Fancy Heading Widget

This widget allows you to put a beautiful and attractive heading on the page. Have a look at the demo here. Below is the walkthrough video for the widget –

Key features –

Add before, after and fancy text in the headingTwo stunning effects for fancy text – Type and SlideAdditional options for Type effect – Display the fancy text continuously using LoopShow/Hide cursorCustom Cursor textCursor blink effectAdvanced settings such as Typing speed/Back speed Customizations for Slide effect Slide the fancy textChoose to pause on hoverSet animation speed

Add before, after and fancy text in the heading

Add heading under Content () > Heading Text. Add fancy text in the box. Make sure to add new text on the new line.

TYPE Effect

Fancy text will appear with typing effect. Select Type from Content > Effect. Additional options gives more control over this effect.

Slide Effect

Fancy text will appear as a slider.

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.

Gravity Form – Tab Index

Quite often we』ve seen that when a user clicks on the tab key, the cursor moves to the next form field. This happens when Gravity Forms assumes its default tab index values.

When you use multiple forms on one page you might have faced issue while pressing tab key. From last field of first form, when we press tab key we expect cursor to move to first field on next form. But sometimes cursor do not move to correct field.

You can avoid this by changing the tab index values on your forms so that they work as expected.

How to change the tab index value of a Gravity Form?

Open the General settings of the Gravity Form Styler widget (UAEL).

Enable the Keyboard Tab Key Support option

Enter a tab index value in the given field as shown in the screenshot below.

Note: The tab index value should be greater than the total number of fields in your previous form.

For example – If form-1 has 5 fields and its tab index is set to 30. Then tab index for next form, say form-2 should be 30+5= 35. So that when you press tab from last field of form-1, the cursor will move to first field of form-2.

To know more about the Gravity Form tab index, you can refer to the article here.

How to enable Quick View for WooCommerce Products?

A quick view option in the Woo – Products widget shows the product details in a popup. This allows users to take a closer look at the product and its details without moving on to a new page.
This setting can be enabled or disabled from Woo – Products widget options. You can choose to display a quick view on the click of a button or image.  
When you enable a quick view on the image it will show the popup on the click of the image.
While when you enable a quick view on the button, it will add a Quick view badge to the product image and will show a popup on its click. Below is the example for the button option.

More customization options are available under the Style Tab -> Quick View section. (?)

Before After Slider Widget

This is creative widget that allows displaying a before and after version of the image with smooth slider. It gives total control on all parts of the widget. Here is a demo. Below is the walkthrough video –

Key Features –

Image sources can be – Media/Custom URLAdd Custom Labels on imagesHorizontal and Vertical Orientation for imagesFeature to move the slider on hover or clickFully customizable sliderUse multiple sliders on the single page

Adding Image and label

Image can be selected from a media library or can be set with external URL. Along with images, you can add a label that will display on an image.

Label can be styled from Style (tab) > Before/After Label

Orientation (Horizontal/Vertical)

Orientation will set a direction for the slider. Slider can be moved vertically or horizontally over a image. Orientation tab also has options to set overall alignment for the images.

By default a slider needs to be clicked and dragged along the edges of the images. But with Move on Hover option slider can be moved with mouse hover.

Comparison Handle

This tab contains all options to customize the slider handle .

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.

How to Enable Infinite Load Pagination for Posts?

Posts widget provide a unique feature of Infinite Load for posts. Posts that are selected from the query builder can be set to load automatically on the scroll. This is very useful when you display posts dynamically on the page. All posts will load in a predefined posts widget design. You do not need to manually set a number of posts to display on each page.
Read How Query Builder Works for Posts Widget?
The setting can be found under Content (tab) > General > Pagination. You get two options here, Numbers and Infinite. Numbers pagination will display numbers at the bottom of the page, the user will need to click numbers manually to visit next page. While Infinite option will load posts automatically depending on the selected Infinite Load Event. There are two options for Infinite Load Event –
1. Scroll: Posts will load automatically as the user scrolls the page. 
2. Button: 『Load More』 button will appear at the bottom of the posts. When the user clicks on this button next posts will load. Customization options for this button are available under Style (tab) > pagination.
Note:
1. Infinite posts option will display the x number of posts for each load; where x is the value that entered in Post Per Page setting under Content (tab) > General > Posts Per Page.
2. Infinite Pagination option depends on the skin and the layout selected for the posts. This option is available for all skins except News. And available for all layouts except Carousel.

Dual Color Heading Widget

This is a flexible widget that allows creating unique headings. You can set two different text with two different style. Here is a stunning demo for the widget. Below is the getting started video –

Key Features –

Option to add before, after and highlighted text in headingDifferent border and background options Different font and color options Separate background image optionInline/stack layout with responsive support

Styling normal and HIGHLIGHTED heading

The widget offers a number of styling options for dual heading. Options can be found under Style (tab) > Heading Style. More options are available with Advanced toggle. You can use NORMAL and HIGHLIGHT tabs to set style.

Inline/stack layout

Setting can be found under Style (tab) > General > Layout. Heading can be displayed inline or can be stacked. Inline heading can be set to stack on responsive devices.

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?