Ultimate Addons for Elementor 文檔

WP CLI Commands

Ultimate Addons for Elementor adds support for some WP-CLI commands.

In case you have not heard of WP-CLI

WP-CLI is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs and much more, without using a web browser.

Activate your license of Ultimate Addons for Elementor using WP-CLI:

wp brainstormforce license activate uael

Deactivate your license of Ultimate Addons for Elementor using WP-CLI:

wp brainstormforce license deactivate uael

Note – In the commands above, don』t forget to replace with your actual purchase key.

Sticky Video

UAE』s Sticky Video feature allows to stick the video on page scroll. Your video will float along the left or right side of the browser window. So, as the reader scrolls the content both the video and your marketing messages will stay in focus.

To make the video sticky, enable the Sticky Video toggle under Content (tab) > Sticky Video setting.

For sticky video feature you get different alignments options for the video, Call to Action Bar and settings to control every part of the sticky video. Below are the key features –

Different alignments for sticky video across the edgesAdd a background for the video and manage its spacing and styleInfo bar to display the description for the videoResponsive supportClose button customizationsDrag sticky video across the window in the frontend

VIDEO SIZE

Specify the width of the Video in px. The video height and width will apply as per the Aspect Ratio set for the video. The aspect ratio for video can change from Content (tab) > Video.For example – If 16:9 ratio is set for video then the sticky video width and height will apply as per the selected ratio.

STICKY ALIGNMENT & SPACING

Sticky Alignment: Manage the position of the sticky video across the edges of the window. Below are the available positions –

Top Left Top Right Bottom Left Bottom Right Center Left Center Right

Spacing from Edges: You can manage the spacing around the video. This spacing will apply from the edges of the screen. Note: Spacing will depend on Sticky Alignment selected. For example – For Top Left alignment, only spacing will apply from the top and left edges of the video.

BACKGROUND SIZE & STYLE

You can add the background to the sticky video. Background size and color option will be available.

MANAGE STICKY VIDEO ON RESPONSIVE DEVICES

Under Sticky Video section, you get an option to Hide the Sticky Video on responsive devices. Here, you can select multiple devices on which you want to hide the sticky video.

CLOSE BUTTON

You can Enable/Disable the close button for the sticky video. Controls to manage the style of the close button are available.

INFO BAR

This option allows adding informative text under the sticky video. Here, you can display the description of the sticky video which provides information about the video currently playing on the page.

You can manage the color, background color, typography and padding to the Info bar. The text field supports the HTML content so, you can apply the custom style to the Info Bar content.

DRAGGABLE SUPPORT

The sticky video can be dragged anywhere on the screen using this feature. You can move the sticky video anywhere within the viewport by clicking and dragging it. The sticky video supports the draggable functionality by default.

Note:  The drag functionality do not work in the backend editor of the Elementor and on Mobile devices.

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.

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.

Posts Widget

UAE』s Posts widget provides stunning options to showcase posts, pages, media, templates etc anywhere on the website. It provides a powerful query builder to select exact posts. It also offers predefined skins, setting that control every part of the post, excerpt and CTA setting, customization options and many more. Below are the key points for Posts widget:

Powerful Query Builder
Stunning Skins
AJAX Pagination
Layouts: Masonry/Carousel/Featured/Grid
Infinite Load
Filterable Posts
Customization Options

Have a look at the demo here. Below is the detailed video for the widget.

Powerful Query Builder

The widget has an inbuilt Query Builder that allows you to filter and show the exact posts. Read How Query Builder Works for Posts Widget?

Stunning Skins

The widget provides prebuild skins for posts. You can choose your favorite skin from the list. Layout option is dependent on the skin selected from Content (tab) > Skin. Different skins display title, image, meta, CTA at a different position.

AJAX Pagination

Allows a page to dynamically renew content without reloading the page within the browser. You can select numbers or infinite scroll for posts pagination. These options are dependent on the skin you select. Setting can be found under Content (tab) >  General > Pagination.

Layouts: Masonry/Carousel/Featured/Grid

Layouts add a cool look to posts. This option is dependent on the skin and available with classic, event, card skins. Layouts are managed on a responsive view by the widget. Setting can be found under Content (tab) >  General > Layout. Read about Layouts for Posts Widget. 

Filterable Posts

This feature allows categorizing posts. It displays all posts categories with Filterable Tabs. Clicking on the tab will display posts assigned to the respective category. Posts will display with a default shuffling animation. Setting can be found under Content (tab) >  General > Show Filters. The option will not be available for if Main Query is selected under  Query >  Query Type. Read about Filterable Tabs for Posts Widget.

Customization Options

Depending on the skin and query builder, customization options for the post title, meta, image, excerpt, CTA are available under Content and Style tab.
Related Documents –

How to Enable Infinite Load Pagination for Posts?
Posts Widget Carousel Does Not Display Correctly?

Info Box Widget

This is a multi purpose widget. It allows adding number of sections in one box. Here is a demo. Below is the detailed video for the widget –

Key features –

Single Widget with Multiple ContentsAllows displaying Image or Icon with different positions, style, hover animationSeparator with StylesAdd CTA in different ways ( Text/ Button/ Complete box )

Single Widget with Multiple Contents

Widget allows adding following sections –

Title Prefix Title DescriptionImage/Icon Separator Call To Action

Image/Icon

Under Image/Icon tab select Image Type. All customization options for image/icon are available under the same tab.

You can set icon/image position, overall alignment , background , color etc.

Call To Action

CTA are important sections. With info box you can set a link with text/button or apply to complete box.

Business Hours Widget

Business Hours allow customers to know your service availability time. Day and time can be added with this widget and can be styled nicely. Take a look at the beautiful demo here. Below is the getting started video for the widget.

Key features for Business Hours widget

String support for Day and Time field Highlight Single DayStriped EffectColor and Typography settings for Date and Time

String support for Day and Time field

You can enter any string in the date and time field. This fields are not restricted to use any certain form for date and time.

Highlight Single Day

Single day can be highlighted with different day and time color. Setting can be found in every day setting under Business Days & Timings tab > Day settings > Style This Day.

Striped Effect

This styling option will highlight odd and even rows with different colors to create striped effect. Option is available under Style (tab) > Day and Time > Striped Effect.

Color and Typography settings for Date and Time

Global colors and typography for date and time can be set under Style (tab) > Day and Time.

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.

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 .

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.