Ultimate Addons for Elementor 文档

Unable to see the Font Awesome 5 Icons in UAE』s widgets?

Recently Elementor』s v2.6 introduced a new Icon Library, which includes an update to the Font Awesome 5 Library.

The idea behind this was to migrate to the latest Font Awesome 5 library gaining access to over 1500+ icons, for this you must have clicked on the following Update button from the Elementor』s Popup. Which looked like the following screenshot.

Now after hitting the Update button, you will be redirected to Elementor settings in the backend under Elementor > Tools. Here you will find the Migrate to Font Awesome 5 button, on clicking the same you will see another popup which reminds you that this action is irreversible:

Now, when you click the Continue button, you will be redirected to the page you were previously working on.

Here』s the Elementor』s Article on Migration and the process with the steps they have outlined.

Ideally, you must have already followed the Elementor』s Documentation and migrated the Icons from FA4 to FA5. While some of you might still be facing some issues while viewing the Icons with the UAE』s widgets.

Below are some cases, which we are aware and how they can be resolved –

Case 1: The icons are not working on the site ( a small square is appearing )

Solution – This usually happens when you are still using the Font Awesome 4 Icons in the widgets.

To resolve the same, you will need to enable Load Font Awesome 4 support on your website from Elementor settings.

This option can be found under WordPress Dashboard -> Elementor -> Settings -> Advanced Tab -> Load Font Awesome 4 Support setting

Case 2: What if I do not upgrade to FA5?

Solution – If you don』t migrate to FA5, our Addons』 widgets that use FA4 icons will continue to work, but you wouldn』t be able to edit them.

Tip: Go to Elementor > Settings > Advanced and make sure Load Font Awesome 4 Support is set to Yes so that your Font Awesome 4 icons will still display properly when using Font Awesome 5.

See the full widgets list below.

Note: If you don』t update to FA5, Elementor widgets that use FA4 icons will still continue to work, but you wouldn』t be able to edit them.

List of Ultimate Addons for Elementor Widgets in which you can use the new Icon Library –

Advanced HeadingHotspotImage GalleryInfoboxMarketing ButtonModal PopupMulti Button Off-CanvasPosts Price Box TableTimelineVideo Video Gallery Woo – Add to Cart

Facing Issues with CSV Import?

Sometimes you may face issue while importing CSV file to UAE Table widget. It might be the case that you have a CSV with the invalid format. Especially old CSV files might not work as expected. In such cases, you can re-download the CSV files and try them with the widget. Below are the steps that will show how you can re-download the CSV.

For MAC UsersFor Windows UsersFor Google Sheets users (recommended)

For MAC Users

File that is created with Numbers app can be exported as CSV as shown below:

Step 1 – Open a file with Numbers and click on File -> Export To -> CSV

Step 2 – Set the following options:

2.1 Uncheck 「Include table names「2.2 Set Text Encoding as Unicode(UTF-8)

For Windows Users

If you have a file created with MS Office then below are the steps to export the file as CSV:

Step 1 – From the top bar, click on Data menu.Step 2 – Click on the From Text icon.Step 3 – Go to the location of the file that you want to import. Click on the filename and then click on the Import button. The Text Import Wizard – Step 1 or 3 windows will now appear on the screen.Step 4 – Choose the file type 65001: Unicode (UTF-8) from the drop-down list that appears next to File origin. Click on the Next button.Step 5 – It will display the 『Text Import Wizard – Step 2 or 3』 window. Select the Comma delimiter. Click on the Next button.Step 6 – Select Column data format as general and click on Finish button.

For Google Sheets users

This is the easy and sure way to export CSV files. It works well even with your old files. Just import your old files with Google Sheets from File > Import and download it again. You can create/upload file to Google Sheets and then download them as CSV using following steps –

Click on File -> Download as -> Comma-separated values (.csv, current sheet)

You can even import CSV files to Google Sheets that are now working with the Table Widget, download them again and import to the widget.

After successfully exporting CSV files, upload it with UAE Table widget to create a table. Refer a link here.

How to Display Related Products with Woo-Products Widget?

With UAE version 1.8.4 and above, Woo-Products Widget offers the option to display Related Products. Here is the announcement link for this feature. When you design a template for Single Product page from Elementor Pro, you can display related products with Woo-Products Widget.Related Products will be displayed on the basis of the product category.Below are the steps to design a Single Product template with Elementor Pro and adding a Woo-Products Widget to display related products –Necessary plugins – Elementor, Elementor Pro, Ultimate Addons for ElementorStep 1 – From the dashboard navigate to Elementor > My Templates > Single ProductStep 2 – Click on the Add New and give a name for the templateStep 3 – You can import ready blocks from Elementor or can use widgets to display a single productStep 4 – To display related products, drag and drop Woo-Products widgetStep 5 – In the widget select Query > Source > Related Products.Step 6 – Publish the template by selecting Display Conditions.Now when you will view the Single Product page, you will see the above template design. Related Products will be displayed from the respective product category.For example – If the product – Woo Album #4 has categories Music and Album. Then related products will be displayed from the Music and Album categories on the single product page for Woo Album #4.All the layout and styling options from Woo-Products widget can be applied for related products too. Here is a detailed document for the widget.

How to Display YouTube Subscribe Bar for Video?

Video widget provides an option to display a YouTube Subscribe Bar. When you choose to display a YouTube video, this option will appear under the Content tab.

Below are the options available under YouTube Subscribe Bar tab –

YouTube Channel Name or Channel ID: You need to link the subscribe button with your video channel on YouTube. To connect to a channel you need to enter either its name or ID. Read How to Find YouTube Channel Name and Channel ID?Subscribe to Channel Text: Edit text that displays on the Subscribe Bar.Show Subscribers Count: Choose if you want to display the current subscriber』s count.Text Color, Background Color & Typography: Customize the Subscribe Bar completely with these options.Padding: Manage space around the bar.Stack on: By default text and button on the Subscribe Bar will display inline. On responsive devices, this layout may not look good. Choose this option to stack the text and button on responsive devices.Spacing: Manage spacing between text and button. To manage space on responsive devices click the toggle and set the value.

How to add Custom Width to Table Columns?

UAE provides a multifunctional Table widget that lets you create a table with any number of rows and columns. The table can be used for any purpose as a comparison between products/ sales, displaying schedules, displaying changelogs and many more.

The column width in Table are auto, that means they adapt equal width. But just in case you want to provide your own width to table columns, you can do that with this option.

You need to provide Column Width to the Header Columns. This width will be adopted by all the columns below.

Create Table by Uploading CSV

UAE』s Table widget allows uploading the CSV file to create a table.

CSV (Comma Separated Values) format is a plain text format in which values are separated by commas. You just need to upload it to Table widget and table will form on the basis of CSV file. Below are the steps to upload CSV file –

From the Content (tab) > Table Header > Source select CSV file.Click on the box under Upload a CSV File.Upload your CSV file from the media uploader.Click on Insert Media.A table will form on basis of CSV file.

Note: Uploaded CSV will not be visible in media like images or video. CSV files will not be saved as media. So every time you wish to create a table with CSV file you need to upload a CSV file again. This is because Elementor Framework does not have a facility to upload CSV file type.

You can add a Sortable and Searchable table or show Entries Dropdown with this table as well. Read How to add Sortable and Searchable Table? How to Show Entries Dropdown?You can even style this table with settings available under the Style tab. Read How to Style the Table?

Related Docs –

Facing Issues with CSV Import?

How to Find YouTube Channel Name and Channel ID?

UAE』s video widget allows displaying YouTube Subscribe Bar for video. This bar shows Subscribe to Channel Text and Button at the bottom of the video. You need to link this subscribe button with your video channel on YouTube. Read How to Display YouTube Subscribe Bar for Video?

To connect to a channel you need to enter either its name or ID. This document explains how to get name and ID for the YouTube Channel.

Find YouTube Channel Name

If you have registered your channel name on the YouTube, you can use it to link subscribe button on the video. Below are the detailed steps to get YouTube channel name –

Open the browser and go to www.youtube.comClick on the Sign In button on the upper right corner and fill the details asked (username and password).Once you have signed in with your account, click on the user icon/thumbnail image on the upper right corner.Click on the Creator Studio. VIEW CHANNEL link will appear below your name and beside the user icon/thumbnail image. Click on it.Now observe the URL. The name will appear in the URL as shown in below screenshot.

Find YouTube Channel ID

To find the Channel ID follow the steps below –

Timeline Widget

Timeline is a flexible widget that allows displaying historical events with vertical timeline items. The widget contains various customization options to make your timeline attractive. You can add text, media, icon to the timeline items. You can display posts, pages, media, templates in the timeline. Color and typography options allow designing the timeline to suit your website theme.

Checkout detailed video for the Timeline widget:

Below are the key points for the Timeline Widget –

Powerful Query Builder to display exact posts.Infinite Load Pagination.Ability to add Custom Value in Post』s Date Area.Global and individual – Icon & its styling options.Focused (on scroll) color for connector, icon & item.Hover style for icon & item.Responsive support for alignment of Timeline.Option to add a link for items.

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

1. Powerful Query Builder

It allows choosing exact posts to display. Read How Query Builder Works for Post Timeline?

2. Infinite Load for Pagination

Posts that are selected from the query builder can be set to load automatically in the timeline on the scroll. See How to Enable Infinite Load Pagination for Post Timeline?

3. Ability to add Custom Value in Post』s Date Area

You can change the default date filed of the post to any field value that has Meta Key. Read How to Display Custom Value in Post』s Date Area?

4. Ability to add a media and date with each item

Other than posts you can add content to timeline items are cards. Choose Content Source as Custom. Add new Timeline Items or copy existing one. You can reorder items with simple drag and drop. Each item allows adding following things to the item –

DateHeadingDescription ( text and media )

5. Global and Individual – Icon & its styling options

The widget allows setting the same icon for all items globally or different icon for each individual item. You would need to override global styling options to set icon individually. Read How to Set and Style Particular Item / Icon?

6. Focused (on scroll) color for connector, icon & item.

When you scroll the timeline down, color for the – vertical connector line, icon, icon background can be changed. Color will be changed only when the icon comes in the viewport. It gives a nice elegant look to the timeline and also helps in highlighting the visited timeline item. See How to Set On-Scroll Color for Separator Line and Icon?

7. Hover style for icon & item

Hover colors can be set for the timeline item. Settings can found under the Style tab. Different tabs include hover color options for the item under the HOVER tab.

Items – Hover color for Heading, Text, Item Background.Dates – Date.Connector – Icon and Icon Background.

8. Responsive support for alignment of Timeline

Timeline widget handles the responsive view for the items. See How to Manage Timeline on Responsive View?

How to Set Categories for Images?

Image Gallery Widget provides the feature to create a filterable gallery.

Filterable Gallery allows categorizing images. The category names that are set to images will display as Filterable Tabs title. See How to Design Filterable Image Gallery?

Categories can be assigned to images while adding them to Image Gallery widget. Here are the steps –

Step 1 – Select an image from the media library list.

Step 2 – UAE Categories option will appear in the media information column on the right side. You can add more than one category separated by a comma.

Filters/Actions for Google Maps

Filters available for UAE Google Maps are listed below.

uael_google_map_latitude

Filters the latitude of the marker.
function google_map_latitude( $latitude ) {
// One can manipulate these latitude values.
return $latitude;
}
add_filter( 'uael_google_map_latitude', 'google_map_latitude' );

uael_google_map_longitude

Filters the longitude of the marker.

function google_map_longitude( $longitude) {
// One can manipulate these longitude values.
return $longitude;
}
add_filter( 'uael_google_map_longitude', 'google_map_longitude' );

uael_google_map_title

Filters the title of the marker.

function google_map_title( $title ) {
// One can manipulate these title values.
return $title;
}
add_filter( 'uael_google_map_title', 'google_map_title' );

uael_google_map_description

Filters the description of the marker.

function google_map_description( $description ) {
// One can manipulate these description values.
return $description;
}
add_filter( 'uael_google_map_description', 'google_map_description' );