Author 诗语

How to Display UAE』s Google Maps widget in your Local Language?

The Ultimate Addons for Elementor has a Google Maps widget that allows you to mark multiple locations using multiple markers and clusters.

Have you ever felt the need to display this in your local language? UAE Google Maps widget supports localization and lets you display details such as names of controls, copyright notices, driving directions, and control labels in the language of your choice.

Follow the steps mentioned below to do so

Step 1 – In your WordPress backend, go to Settings -> UAE -> Google Maps Settings

Step 2 – Select the language you are looking for from the list as shown below.

Save Changes!

Note: This language will be applied to all the Google Maps displayed on your website.

You will now see the details mentioned above in the language you just selected!

Marketing Button Widget

This widget allows adding a button with icon, title and an extra line of description. So that you can write a line to make easy for users to take the action.

Key features –

Add title, description, and link to the buttonAdd icon and set its size, position, spacing Customize button completelyText typography and color options

Add title, description and icon

Under Content > General, you can add title, description for the button and add a link.

Choose an icon from the list, manage its position, size, spacing.

Customization for button

Under the Style tab, set size padding, spacing for Button.

Typography and color for the button text can be managed from the Content tab.

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.

How to White Label UAE?

What is White Label Branding?

Many times, developers and agencies prefer hiding the identity of a third party plugin or theme being used on a website they create. White Label Branding helps you rename and present a plugin or a theme as your own. This feature allows you to hide the actual identity of the product and it』s author – by using your own brand name.

The Ultimate Addons for Elementor allows you to white label the plugin and change every detail that will prove that it belongs to you and that you are the whole and sole developer of the website you』ve been working on.

Note: The white label feature only changes the display names and strings of the plugin.

Enabling White label in UAE

In order to enable the while label feature in the Ultimate Addons for Elementor, you will have to go to

Settings -> UAE -> White Label

This is where you can change your Author and Plugin details that are displayed in the WordPress backend.

Settings available for White Label are –

If you wish to hide the white label settings from your clients or anyone who will access the backend, you can do so. You can hide the white label settings by checking the checkbox as shown in the screenshot below.

Note: If you wish to see the white label settings again after hiding them, you can do so by re-activating the plugin. You can also choose to hide white label settings permanently.

Further, you have Admin Area settings that cover some important sections that appear in the WordPress backend.

Admin Area settings

This is where you can manage the following things:

Replace Logo: When enabled, this allows you to replace the logo of UAE with the plugin name you entered.

Display Knowledge Base Box: We』ve added a knowledge base box on the welcome screen of UAE, so that you can access it whenever needed. But, you can hide this by un-checking the box here. In case you wish to add your own knowledge base link, you can do so by inserting the link in the field given below.

Display Support Box: We』ve added a support box on the welcome screen of UAE. You can hide this box by un-checking this option. In case you wish to add your own support center, you can do so by inserting the link in the field given below.

Display Beta Update Box: It allow you to fetch beta versions of UAE on a website. We have a dedicated box that lets you enable automatic beta updates. You can hide this box by un-checking this option.

Editor Area Settings

Display Help links: We』ve added a few reference links that take you to our knowledge base articles through Elementor』s widget editor area. You can hide these links by un-checking this option from the white label settings page.

Want to see where all this will be seen?

The author and plugin details are often seen on a website』s plugin page. Here is a screenshot that shows where you』ll find that the details replaced.

Have you observed the short-form UAE appear under Settings in your WordPress backend? The short name that you entered through the white label settings replaces this. Take a look at the screenshot.

The category name appears with the list of UAE widgets you see in Elementor』s widget panel. This is where you』ll see the Category Name displayed.

Team Member widget

This widget allows adding a team member』s Name, Designation, Description, Image with an option to also link their social profiles. So that you can design a good looking 「Meet the Team Page」 on your website.

Key features –

Display Member』s Name, Designation, and DescriptionDifferent Separator PositionsAdd multiple Social Icons for individual Team MemberShapes for Team ImageImage Positioning and Spacing controlsHover animation for Image and Social Icons

Display Team Member』s Name, Designation, Description, and Image too

Under Content > General, you can add Name, Designation, Description, and also set an Image for the Team member.

Different Separator Positions

Under Content > Separator, you can display or hide the Separator, you will also have the option to set different positions like Below Name, Designation or Description. There will also be an option to set a width, thickness, and even it』s color.

Add multiple Social Icons for individual Team Member

Under Content > Social Icons, you have the option to choose from multiple Social sites from which your Team member might have an account with. You also have the option to hide Social Icons altogether.

Even you can style Social Icons by changing its font size, Padding, Spacing, Color, and even Border Style. These options can be found under the Style > Social Icons.

Shapes for Team Member』s Image

Under Style > Image, there』s an option to set the shapes for the Team Member from Circle, Square and for Rounded option you can set Border Radius as per your requirement.

Image Positioning and spacing controls

Under Style > Image, you will find the option to position the Image of team Member from Top, Left and Right.

Also when you have the Image Position set to Left or Right you will have the option to set the Responsive Support, where you can choose on which device breakpoint your layout will stack.

Hover Animation for Image and Social Icons

Under Style > Image and Style > Social Icons, you will find the option to set Hover Animation, making your Team Member』s Image or Social Icons stand out.

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.

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' );

How to create Google API key in Google Maps Widget of UAE?

Google has recently launched the Google Maps Platform to manage the maps used on your websites.

With this launch, the process to get Google Maps API key has changed.

From June 11, 2018, it is mandatory to enable the billing account with a credit card/bank account details and have a valid API key for all projects.

Here is an article that shows how to enable billing account and get a new API key. Once you generate an API key, make sure to update UAE Google Map Widget with the new API key.

Do I need to pay anything to use a new API key?Not initially! After creating a billing account in the Google Maps Platform, you will gain access to your $200 of free monthly usage. After that, the charges will be applied as per the standard rates decided by the Google Maps Platform.

Here is a great video by Ferdy Korpershoek on this topic

In case needed, below is the step by step instructions –

Step 1 – Follow this link in order to generate your API key. Click the GET STARTED button.Select Maps from the list and click to CONTINUE.

Step 2 – Create a new project or select one from the existing ones. Click Next.

Step 3 – To CREATE BILLING ACCOUNT, select the country. Click Confirm.

Step 4 – Add Customer info.

Step 5 – Choose the Payment method and add payment details. Click Submit and enable billing.

Step 6 – Select website from the Account Overview page.

Step 7 – Choose Maps Javascript API

Step 8 – Enable maps for your website.

Step 9 – Choose APIs credentials.

Step 10 – Select API Key option.

Step 11 –  Copy the generated API key.

Step 12 – Select HTTP referrers for your site.

Step 13 – You can see map usage on your account overview page.

How to add Google Map API key in UAE』s Google Maps widget?

1. From the WordPress dashboard, navigate to Settings -> UAE -> Google Map Settings

2. Paste the Google Maps API key in UAE』s Google Map API key option. Save changes.

Once you are done with the above steps, you are all set to use the Google Maps widget on your website!

Note: These steps are also applicable to the users who have the Google Maps issue on their website, and are getting the following warning in the console: 「Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys「

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.

Unable to see WPForms Styler Widget in UAE?

Please make sure the following things are present on your website –

Step1: You have installed the Ultimate Addons for Elementor version 1.15.0 or higher.

Step 2: You have installed & activated the WP Forms plugin. You can find it in under WordPress Dashboard > Plugins > Installed Plugins

Step 3: WP Forms widget is enabled in UAE Widget settings. You will be able to find this option under Dashboard > Settings > UAE > Widgets