Ultimate Addons for Elementor 文件

Party Propz for Elementor

Party Propz extension will help your website spread the holiday spirit and prepare you for the festive season. You can decorate all of your Elementor widgets, columns, and sections as easy you would decorate your home or office.

This document will show you how to do it.

What Can You Do with Party Propz?

Party Propz is an Elementor extension. Thus, it will work well with Elementor, UAE, and other third-party widgets. You can also add decorations to columns and sections. 

Depending on a holiday, you can choose from a range of premade items: 

Christmas treeReindeerHanukkah candles Hanging decorations Santa capSanta ClausSnowSnowman 

Also, you can add Icons and your own decorations as 「Custom images」.

Once added, you can move the decorative objects vertically and horizontally, rotate them, and adjust their size. As Party Propz are responsive, you can adjust settings for different screens. 

How Can I Add Party Propz?

To decorate your website with Party Propz, please follow these steps:

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

Step 2 – Next, start editing your page or post with Elementor. Click to Edit the Section, Column, or Widget you want to decorate. For our example, we』ll be adding decorations to widgets; 

Step 3 – Choose the 「Advanced」 tab, and scroll down to the 「UAE – Party Propz」 panel. Click to expand it and enable Party Propz;

Step 4 – Choose the 「Image Type」, depending on whether you wish to add 「Image」 or 「Icon」;

Step 5 – Next, you need to select the Image Source or the Icon, depending on the type of image you chose in the previous step. You add an item by selecting 「Image Source」 from the dropdown menu or 「Select Icon」 from the icon library. 

Note

Each Section, Column, or Widget can be decorated with only one Party Propz item.

In our example, we decided to add Images and decorate widgets with some of our premade items;

Step 6 – Now that you added the decoration, it』s time to position it properly. The alignment will flip the item (horizontally) to be left or right-oriented. Horizontal and vertical positions will move the decoration to the exact position where you need it. Also, you can rotate the item and set the Z-Index (setting decoration in front or behind the element);

Step 7 – Optionally, you may 「Enable Image Styling」 to adjust CSS filters or set the Image Opacity.

Step 8 – Click on the 「Update」 button to save changes.

Now your website is ready to amaze your visitors and help them feel festive while browsing the website.

Welcome Music for Elementor

Besides creating visually appealing websites with Ultimate Addons for Elementor, you can now add a new sensation – sound. Create the right atmosphere and engage your visitors on another level by adding background music with the Welcome Music widget.

This document will show you how to add Welcome Music to any page or post on your website.

Let There Be Sound

The Welcome Music widget lets you add music to your Elementor designs from any source. You can choose some of our default (pre-made) music or add your own:

Default options: The widget comes preloaded with audio files to suit your festive needs. It has Jingle Bells, Winter Winds, Winery, and Winter loop built-in. Add from a Link: Use a link to embed your music from any external URLUpload to Media Library: If you have any MP3 files on your computer, just upload them to the WordPress media library and use them. 

Once you choose your music, decide if you want the music to play automatically when your visitors open the post or page.

Also, you can set volume and decide to keep your sound looping or play it just once. Don』t worry, your visitors can pause the music if they want with the front-end Play/Pause button.

How Can I Add Welcome Music?

To add music to your page or post, please follow these steps:

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

Step 2 – Next, start editing your page or post with Elementor. Search for the 「Welcome Music」 widget and add it anywhere; 

Note

Adding the 「Welcome Music」 widget will not affect your design, as the widget is not visible on the front-end.

Step 3 – Click to edit the widget, and scroll to the 「Music」 panel (under the 「Content」 tab). The 「Music Source」 option lets you choose the audio source: Default, Link, or Media Library;

Note

If you』re adding audio from the link, the URL must be a direct link to the actual file.

Step 4 – For our example, we choose the 「Default」 option. Choosing the 「Default」 source will give you the additional option to Select Tune;

Step 5 – Now that you have your music added, enable or disable the Autoplay and Loop options, and set the Volume;

Step 6 – Next, scroll down to the 「Play/Pause Button」 panel. Here, you can decide if you want to display the button or not. Also, you can choose a position, color, size, and icons for the button.

Step 7 – Click on the 「Update」 button to save changes.

That』s all. Your visitors will now be able to enjoy a multisensory experience while browsing your website.

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.

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.

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

Video Widget

UAE』s Video Widget use an innovative optimization technique. It provides a smart way for embedding YouTube, Vimeo videos to your page without sacrificing page speed.

Note – As per the deprecation announcement of the showinfo and rel parameter, there are a few changes in the YouTube API that has affected how this video widget will act.

You cannot put off the video information such as the channel name and video title.You will not be able to disable related videos from being shown.

With this change in the YouTube API, we』ve modified the Suggested Videos option and replaced it with Related videos option that will let you select the source of the videos. You can refer to the article here for more details.

Following are the key features that make the video widget of the Ultimate Addons for Elementor unique.

Loading Time Optimization – Widget embeds the thumbnail image of the YouTube/ Vimeo video instead of the actual video.Custom Thumbnail Image – Set a nice thumbnail image for video with overlay color.Play Button Customizations ( Supports Image, Icon, Hover Effects ) – Set icon or image as a play button with hover animations.

Here is a comparison between page speed – Embedding video with Traditional way vs Embedding video with UAE』s Video Widget.

The widget allows embedding video from YouTube and Vimeo. Before getting started, make sure to enable widget from UAE settings. (?)

Video Options Available with Video Widget –

YouTube VideoVimeo VideoWistia Video

Video Options For YouTube video

Autoplay: Video will play automatically on the page load.Related Videos From: It has two options – Current Video Channel and Any Random Video. Current Video Channel will display related videos from the same YouTube channel. Any Random Video will display random videos on the basis of public favorite videos. Note that suggested videos cannot be turned off completely.Player Control: Choose whether to display controls like play, pause, volume controls, full screen and more.Mute: Allows muting the video.Modest Branding:  Prevent the YouTube logo from displaying in the control bar.Privacy Mode: This prevents YouTube to store the visitor』s information on your website unless they play the video.

Video Options For Vimeo Video

Autoplay: Video will play automatically on the page load.Loop: Choose a video to play continuously in a loop. The video will automatically start again after reaching the end.Intro Title: Displays title of the video.Intro Portrait: Displays the author』s profile image.Intro Byline: Displays the author』s name of the video.Controls Color: Set color for the video player controls. (?)

Video Options for Wistia Video

Link & Thumbnail Text: Unlike the YouTube and Vimeo video type, here you will need to Copy the Link & Thumbnail text from the respective Wistia』s video.Autoplay: Video will play automatically on the page load.Loop: This would let the video to play continuously Reset: This would get back to the beginning of the video displaying the video and thumbnail, make sure if they are set to display on load.Mute: Mutes the volume of the VideoShow Playbar: Displays the progress bar of the video in the bottom Playbar.Enable Double Click on Mobile: This option needs to be enabled if you are unable to see custom thumbnail or overlay color on mobile. Refer to this article for more information.

How to Get a Valid Link 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 this 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.

How to set thumbnail image 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 Content (tab) > Thumbnail & Overlay.

Turn the Custom Thumbnail option ON. Set an Image and adjust the Overlay Color.

How to style Play Button?

The setting can be found under Content (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 HOVER tab.

Set specific play time for video

The widget allows entering –

Start and End time for YouTube videoStart time for Vimeo video

When a user clicks to play the video, it will start playing from the defined start time and will stop at the defined end time.

Note:

1. To embed videos, enter a full link for the video.For example,

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

2. After adding another widget, to edit the Video Widget again, click on the pencil icon in the right upper corner. (?)

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.

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

In this video type, it includes settings for all the video type. The settings includes all the Video Options – Lightbox, Autoplay, Loop, Player Control, etc.

You can have the option to set a Thumbnail and use the other settings for this Video type too.

Video Schema

This widget provides an inbuilt schema option for all video types – YouTube, Vimeo, and Wistia.

Adding schema for your video helps it to rank better in search results. It also allows search engines to display a 「rich snippet.」 A rich snippet is detailed information displayed with your search results like title, description, date, and thumbnail. Just like shown below –

Adding schema manually using code is a tedious task. Ultimate Addons offers ready-made fields to add schema for your video. 

Schema options you see in Video widgets help you to add a VideoObject schema to your video. 

You will find this option under the Content > Video Schema. Just enable the option and fill in the details. 

Here is a list of all required fields – 

Vide titleVideo descriptionVideo thumbnailVideo upload date and time

Note that all fields are mandatory. Missing any of the above fields might generate errors in schema code. So in such a case, you will observe a notice in the editor and the schema will not be generated until you fill all required fields. 

Once you fill in all the required information, the required schema code will be automatically generated and added to the page. 

You can test the schema using Google』s Rich results testing tool or Structure data testing tool. In these tools just enter the page URL or page source code. 

Note:

In case you have used a custom thumbnail for the video, the default thumbnail field under the Video schema section will not be visible.

The custom thumbnail you used under Content > Thumbnail & Overlay > Custom Thumbnail > Select Image, will be used as a video thumbnail for schema instead of the default thumbnail from Video Schema. 

If you choose to set a custom thumbnail but miss to select an image for it, you will observe a notice in the editor.

Introducing Countdown Timer widget

The Countdown Timer widget of Ultimate Addons for Elementor will allow you to add and design beautiful Countdown Timers on your site even if you don』t have the Pro version of Elementor. You will also have the option of creating a Recurring timer among other timers like Fixed, Evergreen Timer using this widget.

Here are key features for the Countdown Timer widget –

The Countdown Timer widget can display Fixed, Evergreen, Recurring Countdown timersChoose the Action after Expiry among Hide, Show Message, Redirect, or NoneCustom Labels fields for Days, Hours, Minutes, Seconds Create custom layouts from Circle, Square, Rounded or None Display Flash Animation to show urgency before your Countdown is about to expireResponsive support for the Timer to display the Countdown in a single column

Below are the settings available for the Countdown Timer widget –

Timer Type

Under the Content Tab, you will see three options –

General

The first option under this field is Type using which you can choose the Type of Timer you want to display on your page. This field also has an option to add the Due Time when your timer will expire.

After Expire

Here you will have the option to choose which action to perform once your timer expires. Based on the Action you will be shown a field below it. For example, if you select the Redirect option you will have the option to enter the URL in the below field. This Redirect URL will redirect the user to the URL provided after the timer expires. Note: These Actions will only work when you are on the front end.

Display Labels

You have the option to display the default labels below your timer or you can add custom Labels or even hide them completely.

Note: UAE gives you the option to translate widget strings with WPML easily. Note that default labels can not be translated as they come embedded in code and they won』t be available with WPML for the translation. While you can translate custom labels added to the timer.

Layout

Under the Layout tab, you will see three options –

Select Style: Using the option under this setting you can select the Style from Square(default), Circle, Rounded, NoneSeparator: This is a toggle field using which you can disable the : separator between the timer digitsFlash Animation: Need to create a sense of urgency? This field will allow you to enable Flash Animation and a Start Animation Before field below it using which you can enter the minutes before which the Flash Animation will start flashing.

Countdown Items

Under Countdown Items section you will see the following important options –

Container Width: This option will allow you to set the width for the Countdown Timer itemsSpacing between items: Need to manage the spacing between the items? This option will help you manage the sameSpacing between digits and labels: To increase the space between digits and labels of the Countdown timer, you can use the slider in this option to increase the same as requiredResponsive Support: Does the Timer digits look a bit too congested? Enabling this option will make your Countdown items in a column on responsive devices

You also have the option here to change the Background Color, Border Style, and Padding of the Countdown Items.

Digits and Labels

These two are different sections and allow the option to add Typography and color for the Labels and Digits of the Countdown Timer fields.

Note: Make a note that the separator color will be inherited by the color of the digits.

How to Set Multiple Column Fields in Contact Form 7 Styler of UAE?

Many times users wish to add multiple form fields in columns. This can be done by using a wrapper class.

The class you』ll be using for this is: 「uael-cf7-col「

You will need to use a parent wrapper with the above class name for every line you wish to insert. You will also need to enclose every Form element within a tag.

For example –

For a 3 column layout:

For a 2 column layout:

Note: You can replace Field 1, Field, Field 2, etc with the field code of Contact Form 7. Such as :

[text* your-name placeholder 「Your Name」]

All this has to be done in the form you create using Contact Form 7. Here is a quick screenshot that will help you understand how you implement the same.

The above screenshot was an example of the backend settings in Contact Form 7. Take a look at the screenshot below to see how it looks.

What Are Presets And How To Use Them?

Ultimate Addons for Elementor offers presets that make designing your UAE widgets quick and beautiful.

You can apply presets just with a click and build stunning web pages saving lots of effort and time.

Take a look at how presets help you to build faster websites.

This document will explain what are presets and how to use them to quickly create great designs. 

What Are Presets?

Presets are ready-to-use templates for UAE widgets, that you can use for speeding up your website building. These templates save you time to adjust multiple settings for each of your widgets.

Presets are a set of different beautiful designs for UAE widgets. You can choose any preset you like, add content and your final nice section will be ready.

For example – here are different presets designs available for the Price Box widget.

Presets are available with UAE version 1.33.0 and above. Currently, presets are available for the following widgets –

Advanced headingDual Color headingInfo BoxPrice BoxPrice ListMulti-ButtonsLogin FormTeam MemberFAQBusiness Hours

With the upcoming updates, UAE will be coming with new presets for more widgets.

How To Use Presets?

You can find Presets in any of the supported widgets, under the 「Content」 tab. Follow these steps:

Step 1 – Click to edit widget. You will notice all designs under the 「Presets」 tab. 

For example – In the Info Box UAE widget, presets will appear as shown below

Step 2 – Select any of the Presets to see the template applied to your widget. To switch back to plain (default) design, please select the 「Default」 option. 

For example – In the Info Box UAE widget, you will observe the following presets designs

Step 3 – From here you are free to modify the widget content, and all settings if needed including the settings applied by Preset selected. 

Step 4 – Update to save changes.

Note: Choosing any preset will reset all style settings for the widget. When you choose any preset, make sure to save the changes.

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.