Author 詩語

Getting Started with Ultimate Addons for Elementor

Ultimate Addons for Elementor is an addon that extends the features of your favorite page builder, Elementor. UAEL offers various creative widgets that allow you to build stunning websites in minutes.

Let us take a quick tour through the plugin

1. To begin with: Let』s Install the PluginInstalling the plugin is a matter of minutes! You can install the Ultimate Addons for Elementor like any other plugin on your WordPress website. Purchase the plugin from our store, download it and install it through the plugins page. You can refer to the document here to know more.

Note: If you have purchased Astra Essential Bundle or Growth Bundle, you can directly download the plugin from the store. You would not need to purchase it separately.

2. Let us now activate the license…License activation is an important step so that you do not miss out on the privileges you deserve after buying a licensed copy of our plugin. In order to register your copy and activate the license of Ultimate Addons for Elementor, you will have to follow a couple of easy steps. You can refer to the document here to know more.

3. Building your First Page with UAEL…The Ultimate Addons for Elementor is built to suit and match the interface and environment that Elementor has. Therefore, you can simply drag and drop widgets seen under ULTIMATE ADDONS, and proceed with the settings.

Now, that you』ve succeeded in building a page, go on and build an entire website; Yes, in minutes! ?

Few other things we think you should know:

UAEL offers White Label SettingsThe Ultimate Addons for Elementor lets you set some Global settings that can be applied to a particular module throughout the site. To know more about the global settings, you can refer to the article here.

You can disable unwanted widgetsWe understand the pain of piling up everything, although you might use only a few. Therefore, we let you disable the widgets you do not wish to use on a site. This, in turn, reduces the server requests. You can enable these widgets again when required. To know more about enabling/disabling widgets, you can refer to the article here.

You can use UAEL with Elementor (free version) as well as with Elementor Pro.

Finally, we take pride in offering world-class support.

Go ahead and create your website. May it be as awesome as you are! ?

Video Gallery Widget

Video Gallery Widget allows showcasing YouTube, Vimeo & Wistia videos with an innovative optimization technique. With this widget, you can add a number of videos to the page without sacrificing page speed.

Below are the key points for the Video Gallery Widget –

Loading Time OptimizationFilterable Video GalleryGrid / Carousel LayoutEasy Video Sorting & OrderingDifferent Styles for Play ButtonAbility to Play Videos in Lightbox or InlineCustom Thumbnail and Thumbnail overlay effectsAbility to Add and Style the Video Caption

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

To add a video to the gallery, select Video Type and enter a valid URL. Below is the example for valid and invalid URLs.

For YouTube video –✔ Valid link: https://www.youtube.com/watch?v=aqz-KE-bpKQ&t=3s✖ Invalid link: https://youtu.be/aqz-KE-bpKQ

For Vimeo video –✔ Valid Link: https://vimeo.com/274860274✖ Invalid Link: https://vimeo.com/channels/staffpicks/274860274

For Wistia Video –

To get the Wistia video』s link you will need to go to your Wistia video, right-click on it and choose the last option of 「Copy Link and Thumbnail」. Now copy the same and paste it in the Link & Thumbnail field.

Note: If you change the thumbnail or link from the respective Wistia』s video, make sure you paste the Link & Thumbnail text in this field again here.

Loading Time Optimization

This widget uses the same optimization technique that is introduced for Video Widget. Widget embeds the thumbnail image of the YouTube/ Vimeo video instead of the actual video. This  See how this technique works?

Filterable Video Gallery

This feature allows categorizing videos. It displays all video categories with Filterable Tabs. Clicking on the tab will display video assigned to the respective category. Videos will display with a default shuffling animation. Read how to design a filterable video gallery? You can display specific category tab as a default on page load.

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.

Grid / Carousel Layout

Display all videos on a page with Grid layout or display them in a nice slider with Carousel. Choose the best layout to make your gallery look stunning.

Easy Video Sorting & Ordering

After adding videos to the list you can reorder them with simple drag and drop. Videos can be sort by categories with Filterable Video Gallery option.

Different Styles for Play Button

The setting can be found under Style (tab) > Play Button. 

Play Button can be set as Image or Icon.

For Image 

Choose an appropriate image from the Media Libary.Hover Animation option adds a cool look to the play button.

For Icon 

Select an icon from the drop downYou can set a normal and hover color, text shadow for the icon.Hover Animation option is available under the HOVER tab.

Ability to Play Videos in Lightbox or Inline

The inline option will play video in the video layout itself. While the lightbox option will play video in a nice popup.

Custom Thumbnail for Video

You can set a nice thumbnail image for the video that will display before playing a video.

The setting can be found under Gallery > Edit the Video > Custom Thumbnail 

Turn the Custom Thumbnail option ON and set an Image.

Adjust the Overlay Color. See How to Set Overlay Color on the Video Thumbnail on Mouse Hover?

Ability to Add and Style the Video Caption

A caption will add short descriptive worlds about a video. You can display them on video hover. See How to add and style the video Caption?

Self Hosted Video Option

From the Ultimate Addons for Elementor v1.29.1 we introduce this option. Which lets you display the videos right from your Media Library or external sources with just a few clicks.

Key Features –

Newly added option for self-hosted video type –

External URL: Insert an external URL of the videoChoose File: If there』s no External video link of the video you can select an existing video file from the Media Library.Select Image: It will act as a thumbnail image that will be displayed on the Video Gallery

You will simply need to select the Video Type as Self Hosted from the Previous options of Video Type like Wistia, YouTube, Vimeo.

Also, you have the option to set the Caption for the Video, display a Thumbnail Image, and add Categories to this Video type too.

Schema Support

With UAE version 1.35.1 we added the Schema Support option to the Video Gallery widget. To activate this option, you need to edit the Video Gallery widget:

Step 1 – Click on the Content tab and expand the Gallery section;

Step 2 – Enable the 「Schema Support」 option.

Add Schema To Video

Now you can add schema to your videos:

Step 1 – Start editing your page or post with Elementor, and add the Video Gallery widget (drag and drop);

Step 2 – Next, click on existing videos to edit them, or add a new one. Here, on the top of the video editing area, you』ll notice tabs. Click on Schema tab;

Step 3 – Now, add schema to your video. You need to add Title, Description, Thumbnail, and Upload Date & Time. Keep in mind that all of these fields are mandatory. If any field in the schema section is left empty, the schema will not be generated;

Step 4 – You can repeat steps 2 and 3 for any video in the gallery. Once you』re done, save your changes (Publish / Update button).

Thumbnail

It』s important to mention that thumbnails for your videos can be added also via the General tab. This option is used to add a thumbnail to your video in general. Contrary, the schema thumbnail is only used as schema data.

While editing the video, under the General tab you can find the 「Custom Thumbnail」 option.

You can enable the 「Custom Thumbnail」 option and add the thumbnail for the video. In this case, the Custom Thumbnail will be used as a video thumbnail for the schema too. 

In other words, the Custom Thumbnail, if added, will replace the schema Thumbnail. Furthermore, if Custom Thumbnail is enabled but the image is not added, the schema will not be generated.

Testing Video Gallery Schema

Further, you might want to test the schema you added to your Video Gallery. Thus, you can use Google』s Rich results test and Schema Markup Validator tool.

You can access any of the above-mentioned tools. Once there, you need to add the URL or source code of the page or post where you added the Video Gallery widget and schema. To illustrate, we will test the demo video gallery using the Rich Results tool:

Step 1 – Visit Rich results test site;

Step 2 – First you need to choose how you want to test your page. You can select the URL method and add your page URL:

Alternatively, you can select to test it using a code:

The following steps are almost identical. Thus, in our example, we decided to test our page using a URL. Click 「Test Code」 to start testing;

Step 3 – Once the analysis is ready, you』ll see the report of all detected items containing schema (i.e. structured data). Since we want to check Video Gallery Schema, we』ll click on the 「Videos」 section;

Step 4 – Next, browse through your files list, and click on any of your videos.

This will show you the schema you added using UAE Schema Support.

Filter/Actions for Video Gallery Widget

Filters

Filters available for Video gallery widget are listed below.

Helps to pass extra parameter to the slick library carousel layout.

add_filter( 'uael_video_gallery_slick_options' , function( $param ) {
// Pass slick library parameter here
return $param;
});

FAQs: Woo – Checkout Widget

Woo – Checkout widget offers you easy options to customize the default checkout page and make it more beautiful and profitable.

Here are few common questions that you might face while using this widget.

Can I use any page to add UAE Woo – Checkout widget? You can only use page that is assigned as a checkout page in WooCommerece settings. To do this, create a page and then visit WooCommerce > Settings > Advanced Tab > Page setup > Checkout page and select your page.

Why shipping address fields are not displayed on the checkout page?To display the shipping address on the checkout page you need to enable it from WooCommerce settings. From your WordPress dashboard go to WooCommerce > Settings > Shipping > Shipping Zones > Add a shipping zone and set a shipping method. Now go to Shipping options > shipping destination > Select option according to your choice.

Colors and other stylings set from the widget are not reflecting on the checkout form? If the page you are working on is not assigned as a checkout page from WooCommerece settings you might face this situation. To avoid such a case set your page as a checkout page in the WooCommerece settings. You will find settings under WooCommerce > Settings > Advanced Tab > Page setup > Checkout page.

How to build a custom checkout page for WooCommerce?UAE Woo – Checkout widget offers you easy options to customize the default checkout page. You can use manage the layout, login, coupon section, and style the page to suit your website look.

How to create a multistep checkout page using for WooCommerce?UAE Woo – Checkout widget offers a multistep layout for the checkout page. It divides all checkout fields into 4 steps – login, billing, shipping, and payment. This reduces the length of the checkout form and enhances the user experience. You can enable multistep just with a click and even style it with advanced options.

How to hide the Shipping step from the multi-step form?You can use the following filter code to hide the Shipping step from Multi-step form.add_filter( 『uael_multistep_checkout_hide_shipping_step』, 『__return_true』 );The above code needs to be added to your currently active Themes Functions.php

How to Import Starter Templates and Section Blocks Directly From Elementor Editor? (Know Elementor Popup)

Starter Templates plugin offers beautiful ready-made full-website templates to save your designing time. It also comes with single-page templates. You can import them from the dashboard under Appearance > Starter Templates.

But do you know that you can import single page templates directly from Elementor editor. In addition, you can also have a stunning range of readymade section blocks.

The option that allows you to import page and section blocks right inside Elementor editor is called – Elementor Popup in Starter Templates.

Let』s see how you can use the Elementor popup option to import templates –

Where Can I Find the Option?

In the Elementor editor, you will observe a Starter Templates icon as shown below.

Clicking on the Starter Templates icon will open templates and blocks library.

What Does It Offer?

Page templates – You will get single-page templates designed with beautiful sections. This can be suitable as your about page, the home page, contact page, and so on. These templates are the same as what you see under Appearance > Starter Templates – for Elementor page builder.

Section Blocks – You also get a number of blocks (single section) designed for various categories like about, team, testimonials, CTA, FAQ, services, etc. They are available in two color modes – dark and light.

You will also observe a search option to spot the required template/block.

How Can I Use It?

Choose your favorite template or a block. You will get two options while importing it –

1. Import Template/Block – Choosing this option will directly import the template on your page.

2. Save Template/Block – Clicking this button will save the selected template/block as a saved template/section in the Elementor library. You can find it in the dashboard under (Elementor) Templates > Saved Templates.

Importing 『Premium』 Page Template

Starter Templates is a free plugin. But we also offer a premium version of it.

In case while browsing a templates list you see a 『Premium』 tag, it means it is available with the premium version of the plugin.

Premium Starter Templates plugin is available with Essential Bundle and Growth Bundle. If you already own one of these bundles you can get the zip file and a license key from your store account and activate it on the website to access premium templates.

How to Display Share Count for Facebook with Social Share Widget?

Below are the Steps to create the Facebook Graph API for using it on Social Share widget – 

Firstly, visit the Facebook Developers page and log in if you aren』t logged into Facebook. Make sure you are not logged in using your Business Account.

Next, visit the following Explorer link.

Step 1: Visit My Apps > Create App > Build Connected Experiences > add App Display name e.g. UAE Social Share [Enter other optional data below] > Click on Create AppStep 2: Hover over the Tools menu item on the Topbar > Click on Graph API explorer. Step 3: Now see at the right sidebar, under the Facebook App > Select your App Name – UAE Social ShareStep 4: Now, just under the last option => Click on User or Page Dropdown which has Get Token > Select – Get User Access token. A Popup will be open > Continue as 『Daniel』 (Your Facebook Name) > Add necessary Permissions > Token will be generated on the Access Token field on Top.Step 5: Paste the copied token under the UAE > Settings > Social Share > Facebook API

Particle Backgrounds For Elementor

With Ultimate Addons for Elementor, you get an option to set an attractive particle background in Elementor. Particle Backgrounds create attractive visual effects to increase user engagement.

Key Features –

Inbuilt Style Options – Polygon / NASA / Snow / Snowflakes / Christmas / HalloweenParticle Layout and customization controls – Color, Direction, Size, Speed, etc. Hover Effect for Interactive Background Custom/Personalized particle background style (No Coding Required)

Where to find the setting?

UAE – Particle Backgrounds is available with all existing Elementor background options like row, column, widget background. To set the particle background for a row, edit the row, go to the Style tab. Below the Background tab, you will find a UAE – Particle Backgrounds tab.

Below are the available options with UAE – Particle Backgrounds :

Inbuilt Style Options

Some default styles are available for particle backgrounds. You can choose any prebuild style or can design your own custom style. The custom styling feature is explained later in this article.

Particle Layout and customization controls

The selected background style can be completely customized. You can set more specific settings from Advanced Settings. Available settings are –

Color OpacityFlow DirectionNumber of ParticlesParticle SizeMove Speed etc.

Hover Effect for Interactive Background

Enabling this effect will generate an interactive effect on mouse hover as shown below. To enable this effect go to Advanced Settings > Enable Hover Effect. Note that hover effects can be viewed in the frontend only.

Custom/Personalized particles background style

Apart from the default particles style, you can design your own style with different shapes, sizes, density, etc. Here is the detailed document that shows how to add a custom style.

Installing and Importing Starter Templates

Creating a site right from scratch can be a pain. You need to come up with an idea, design, content, images, and a lot more. This takes a long long time. However, with the popular Astra theme and Elementor, you can save a lot of time by importing Starter Templates.

Starter Templates are predesigned websites, pages, or blocks that can be imported and adjusted to your needs. Take a look at the beautiful Starter Templates library of ready-to-import designs for Astra and Elementor. Here, you will find hundreds of designs both Free and Premium. Templates marked with the 「Premium」 badge are available only with Growth or Essential Bundle. All other templates are free and can be used without limitations.

How Does It Work?

With Starter Templates, you can import the whole website that comes with all needed plugins and dummy content. From there, just add your content instead of the dummy content, and you』re done. Naturally, if you wish, you can use these designs as a starting point and modify them as you wish.

Also, you can import only an individual page (or pages) from any template or import blocks where you need them. This will drastically shorten the time you need to build your websites or develop design concepts.

Let』s see how you can do this:

Step 1 – To start using Starter Templates, you』ll need to install the Starter Templates plugin. Depending on your needs, there are two plugins available:

Starter Templates (free) plugin – this plugin is used to access all free templates. It』s free and available for download from the WordPress repository. Premium Starter Templates – If you need access to 「Premium」 templates, you will need this plugin. As mentioned, it comes with Growth or the Essential Bundle. It will be available for download on your Store account (Account > Download).

Step 2: Install and activate the plugin of your choice. To do this, navigate to Dashboard > Plugins > Add New. Search the repository for 「Starter Templates」 or upload the 「Premium Starter Templates」 .zip file you downloaded from the store. Keep in mind that you can have only one of the Starter Templates plugins active. If you activated the 「Premium Starter Templates」 plugin, you will be asked to activate your license before using it. You can find a key in the Store under Account > Licenses;

Step 3: Once activated, you』ll find a new menu under Dashboard > Appearance > Starter Templates;

Step 4: Here, you will find all available templates as shown in the image below. At the top, you will see a search bar with additional filtering options. You can search this way or just scroll down and browse the templates library.

Note: With the Growth Bundle you will have access to all Premium templates (for all page builders). In the case of the Essential Bundle with UAE option, you will have access to the Premium templates for Elementor, but not for the Beaver Builder.Step 5: Click on a template you wish to use. On a template page, you can select any available page within the template and scroll up and down, or click a 「Preview」 button to see the live demo site. 

Step 6: Click on the 「Import Complete Site」 button to import the whole website template. If you need to import just one or a few pages, you can import pages individually by clicking the 「Import 「PAGE-NAME」 Template」 button.

When you import the whole website, Starter Templates will do the following:

Add all template PagesAdd all template PostsAdd template MenusInstall and activate all Required PluginsAdd Settings for Required PluginsAdd Customizer SettingsAdd Media files like images, etc.

If you』re installing only a single page, Starter Templates will only import:

Add a template PageMedia files like images, etc.

In this case, if the imported page might look different as the theme settings on your website might be different from the Starter Template the page originated from.

Some Notes:

Though not required, it is a good idea to import a site on a fresh WordPress installation. If you would like to reset your current WordPress installation to make it like a fresh, brand new website, you may use a plugin like this.Though we try to use free and non-copyrighted images in all of the ready Astra Sites, we cannot take the legal responsibility for the images used as the conditions can change with time. We recommend you to replace the images after importing.Some of the images would be commercial and if you like to use them, you may purchase them independently. We include a 「Credits」 page with links to all sources in all Starter Templates.

Social Share Widget

The Ultimate Addons for Elementor introduces the Social Share widget in v1.30.0 and above. This will now enable you to share your page or post on different social media with just a click of a button. Combined with lots of options, let』s take a closer look.

Key Features –

Easily share the page/post across different social media platformsChoose styles for the Social Share buttons from Icon & Text, Icon, or Text Display Total share count of Facebook, Twitter, Pinterest, Reddit, Buffer, Telegram, Tumblr, and others.Display Social Proof as Fake Share Count with display type Icon & TextSelect from different default Skin Options from – Gradient, Flat, Framed, Minimal, and BoxedDisplay a Floating share buttonAdd Animation to buttons

How to Add Social Share buttons on Elementor Page?

Step 1: First, search the panel for the 「Social Share」 widget, in the Elementor Editor, and drag & drop the widget onto the page.

Step 2: In the Content tab, choose the social networks you want to display on your pages/posts. You can also select among other options like

Step 3: To display the share counter, enable the 『Share Count』 setting.

Step 4: If you want to change the style of the buttons, go to the Style tab of the Social Share widget, where you can set the space between buttons, the button size, typography and more.

Let』s see the settings in brief and how to make better use of it —

Social Share Options

The first section of the Social Share widget allows you to select the Social Networks on which your posts can be shared with.

Under each Social Icon you can select another Social Network if required or also have an option to add an Custom Label.

Other options in the section provide better visual changes to the location, Icon Position, Skin Type, etc.

Style: This option provides option to display the Social Share with Icon & Text, or simply just display the Icon or Text.

Icon Position: Select from the Before or After position of your Icon besides the Text.

Skin: Choose from pre-defined options like Gradient, Flat, Framed, Minimal, and Boxed.

Shape: Options like Square, Rounded or Circle for quick styling

Position: This option will help make your Social Share buttons be displayed Inline or Float.On enabling this option you will notice some additional options to align the Floating buttons to the Left/Right, Vertical/Horizontal Position.

Alignment: This provides the Left/Right/Center options for the default Inline Position.

Target URL: You can also set the Target URL for the Icon to reach the Current Page/Custom URL.

Share Count

This section allows enabling the Social Count for your posts.

Show Fake Count: This option allows enabling the Fake Count values. You can set a default value, or even set the limit after which it is hidden and the Original count is displayed.

Fetch Share Count From: Based on the Social Networks on which has more shares you can select the same to display the total count.

Style: This option displays an Share Icon/Text based on the selection and can be styled using the Size, Icon Color, etc.

Styling

The Style tab of the Social Share widget provides the spacing options for Columns Gap/Rows Gap/Button Size/Button Height/Icon Size/Typography and Color.

Frequently Asked Questions

How to display share count for Facebook?

Read more here.

What are the Social Media for which share count can be Fetched?

FB, Pinterest, Twitter, Reddit, Tumblr, VK, OK, Buffer.

What is the Fake Count?

Enter the fake count and fake count limit. Once the original count reaches this limit the fake count will be hidden. Only the original count will be shown after this limit reaches. Until then it shows the addition of fake count and fake count limit.

How to Resolve Pinterest』s 「Something went wrong」 error?

Are you getting following error? —

You will need to simply add a featured image to the post/page from the Featured Image section.

Email Share Button showing blank screen?

Please note that if you are using a webmail service such as Yahoo! Mail or Gmail it will not open these services to share it as an e-mail.

The email share button is designed to send e-mail using the installed e-mail client, such as Outlook and Thunderbird.

UAE Shape Dividers

Ultimate Addons for Elementor (UAE) are adding new attractive shape dividers to Elementor. You can find UAE dividers in the 「Shape Dividers」 list in section settings.

This document will show you what new dividers you will have at your disposal and how to use them.

How To Use UAE Elementor Shape Dividers?

Shape Dividers are graphic shapes that divide sections while providing unique and unusual effects. You can add a divider on the top or the bottom of the section.

Next to the default Elementor Shape Dividers, you will get some special ones with UAE:

Top Shape Divider: Christmas lightsBottom Shape Divider: Christmas trees, Halloween shapes

To add these dividers, just follow these simple steps:

Step 1 – To activate the UAE Shape Dividers extension, please navigate to Dashboard > Settings > UAE and scroll down to find 「Shape Dividers」 in the list. Click on 「Activate」 to add the UAE dividers to your Elementor Shape Dividers.

Step 2 – Next, start editing your page or post with Elementor. Click to Edit the Section for which you want to add a divider; 

Step 3 – Choose the 「Style」 tab, and scroll down to the 「Shape Divider」 panel. Click to expand it;

Step 4 – Select if you want to add a top or bottom shape divider, and then choose the divider 「Type」. In our example here, we added a top divider and chose 「Christmas lights」:

Step 5 – When you select your divider, you can add color, set width, and height, as well as flip it:

Step 6 – Optionally, if you have a widget overlapping the divider, you can enable the 「Bring to Front」 option. This will bring the divider in front of the overlapping elements.