Ultimate Addons for Elementor 文档

Introducing Table of Contents Widget for Elementor

Did you notice Table of Contents on long pages or posts providing insight into the contents of the document when you visit a website? Have of thought about adding the same on your website?

With version 1.19.0 of UAE, we now provide the Table of Contents widget. Using this widget from now on, you will be adding a table of contents to your website with ease and convenience.

Here』s the screenshot of how it would look –

Let』s add the same to your website in quick easy steps just like any other Elementor widgets.

Search for the Table of Contents widget and drag and drop it on the Elementor editor.

Now, by default, either you will see a default message asking you to enter a heading on the page below

You will be able to see the H2 headings in the table of contents based on the contents on the page where you have dropped the widget.

You can display different levels of headings based on the h1 to h6 heading tags.

We will see them in detail, but before that let』s take a look at the Key Features of the widget –

Fully Customizable Table Heading and ContentsCollapsible Button to Hide Table』s ContentsList icon style – Bullet / Numbers / None Exclude Specific HeadingSmooth Scroll and Scroll to Top

Fully Customizable Table Heading and Contents

Every section of the widget has been made customizable so that you can give it a feel of your website. That means you will be able to customize the Heading of the Table, Contents. Background, Border, Width, Alignment, Collapsible button, responsiveness, and color.

Collapsible Button to Hide Table』s Contents

Have you ever noticed a lengthy table of contents and you want to skip directly to skip to the content of the post or page? We have taken care of the same, the option is enabled by default and displays a down arrow. This collapsible button is located at the top-right corner of the table of contents.

You just need to style the same as per your requirement. Also, you can replace the icon with text, and separate text for Hide and Show.

List icon style – Bullet / Numbers / None

The list of contents can be styled using some basic icon styles like – Bullets, Numbers, or none.

This will make sure the contents are easy to read at a glance. And while you have hierarchical headings like one heading with an h3 tag and the rest under it has h4 tags, then it will display the list of h4 tags in a hierarchical structure.

Here』s an example of the same –

Exclude Specific Headings

There could be some cases, where you might need to exclude a specific heading of your post or page from the Table of Contents. Let』s say you are displaying related posts on the Post page using a Posts widget.

Here we might need to exclude the headings from the Posts widget, you will simply need to add the following class to the Posts widget under Advanced > Advanced Section > CSS Classes – uae-toc-hide-heading

That』s it! Now the posts widgets』 headings won』t be displayed in the Table of Contents widget.

View the following doc to know all the cases on How to Exclude Specific Headings from Table of Contents?

Smooth Scroll and Scroll to Top

We have taken care of scroll animation so that when a user clicks on a table』s content you will be taken to the respective section smoothly.

You will also be able to control the delay animation while it scrolls to the section you have clicked on.

And Scroll to Top is a button you can enable and clicking on the button would take you back to the Table of Contents.

With Smooth Scroll and Scroll to Top, we have seen all the features of the Table of Contents widget. And there』s nothing stopping you to add a well-designed index to your website』s long pages or posts!

Go ahead and update to the latest version 1.19.0 of UAE for Table of Contents widget and add a customized table of contents to the required pages and posts of your websites!

Google reCAPTCHA v3 in User Registration Form for Elementor

reCAPTCHA is widely used and one of the most popular ways to prevent your website from spamming and abuse by preventing bots from being able to create users or while logging in.

Here for the User Registration widget, if you choose to use reCAPTCHA to protect your website.

You will need to add reCAPTCHA keys, you first need to get the reCAPTCHA keys from the Google website. We have provided integration with only the latest reCAPTCHA i.e. reCAPTCHA v3.

As the latest version is known to be easy on humans, and hard on the bots. Thereby, reducing user friction while the onboarding process.

reCAPTCHA v3

Step 1: Visit the Google reCAPTCHA site and select reCAPTCHA v3.

Step 2: Add a Label to identify this instance.

Step 3: Add a domain, e.g. www.your-site-url.com

Step 4: Enter an admin email address or add a new one

Step 5: Accept the Terms of Service and Submit.

Step 6: On Submission, you will be redirected to the next page, from their copy both the Site Key and the Secret Key.

Step 7: Enter these keys in the Settings > UAE > User Registration Form Settings > reCAPTCHA options and click Save Changes. (There』s another field to change the Score Threshold if desired. If you notice bots manage to get around the reCAPTCHA, increase the score ).

Step 8: Add a New Page and Edit With Elementor

Step 9: Drag and drop the User Registration Form Widget

Step 10: Go to User Registration Form > Content > Form Fields and click on Add Item

Step 11: Under Type choose reCAPTCHA v3

Step 12: Choose whether to place the reCAPTCHA badge to the right (bottom of the page), left (bottom of the page), or inline.

Step 13: Click Save

As per the Badge Position set, you will now see the reCAPTCHA badge. Refer to the image shown below for inline reCAPTCHA position.

Similarly, you can see a reCAPTCHA badge on the bottom-left and bottom-right corner of the page when the respective Badge Position for reCAPTCHA is set.

We also have another Anti-Spam protection tool called Honeypot using this you can fight the spammers. You just need to enable the Honeypot field and your form has doubled the protection to fight the spammers.

Honeypot field in User Registration Form for Elementor

In UAE』s version 1.18.0, we introduce the User Registration Form widget for Elementor having the Honeypot field to fight spammers.

Here we provide a Honeypot field, which is a better way than to fight pesky spammers rather than using reCAPTCHA.

Table of Contents

What is Honeypot?Advantages of using Honeypot?How to Setup Honeypot in User Registration Form widget?Example: How to Create Smarter Honeypot with UAE?

What is Honeypot?

Honeypot field helps you fight spammers, by adding a hidden field only visible to spambots. This field helps admin identify whether the user is a spambot and not a user.

When a spambot fills in honeypot field, the form is rejected as spam. Thereby, the spambot will get stuck and won』t be able to submit the form.

Therefore, Honeypot is a great alternative as it will not bother users to go through maths and Image problems to register on your website. And the valid users will be able to register with ease and convenience.

Advantages of using Honeypot?

Prevents spambots from attackingHelp understand future attack preventionHelps focus on the malicious users making the investigation easierOne-click setup

How to Setup Honeypot in User Registration Form widget?

To set up the Honeypot field in the User Registration Form widget you need to create a page and Edit with Elementor.

After that, you will just need to drag and drop the widget in the Elementor editor.

Next, in the Content tab > Form Fields add a Form Field and select the Type as Honeypot.

That』s all, now update the page and your User Registration Form is now protected from the Spammers.

Example: How to Create Smarter Honeypot with UAE?

Using the User Registration Form, you can create smarter registration form having multiple Honeypot Form Fields.

This ensures, that even the smartest spambot will not be able to get access to your website.

All you need to do is place the honeypot fields in the random order in your formAdd multiple Honeypot fields so that it has higher chances of stopping spambots

You are now ready to create a spam-free registration form using the User Registration Form widget and Anti-Spam Protection features provided. We also provide Google reCAPTCHA support to our widget.

Business Reviews Widget

This widget will help to display Google Places and Yelp reviews with Elementor. Google and Yelp reviews can be shown separately or you can mix it up. Further, you can completely customize the review box to suit your website design.

Here are key features for powerful Business Reviews widget –

Supports Google Places& Yelp Reviews Prebuilt Skins – Box (default) / Card / Bubble Grid & Carousel Layout for review boxes Display Reviewer Info – Image and Name Filter reviews by – Rating/ Review Date Star rating style – Default / CustomReview box style and spacing controls

Select your business and display reviews

To display Google Places and/or Yelp reviews you would need to add ID for your business. It will help widget to connect to your business and fetch reviews. Under General > Review Source, choose if you wish to display Google and/or Yelp reviews.

For Google reviews –

Get the Google Place API key. See how to get this. Search your business on Google Maps and get the Google Place ID. See how to get Google Place ID. Note: Maximum 5 Google reviews can be displayed (Content > Layout > Reviews to Show). Read why?

For Yelp reviews –

Get the Yelp API Key. See how this can be done. Now copy the Yelp Business ID and add it to the widget. See how to get this. Note: Maximum 3 Yelp reviews can be displayed (Content > Layout > Reviews to Show). Read why?

Prebuilt Skins and Layouts

Widget offers ready-made clean layouts and styles for reviews.

Skin ( Content > General > Skin ): This arranges review meta information like date, ratings, reviewer image, name, etc. in different positions. So that you can display review as card, bubble or default box. Grid & Carousel Layout ( Content > Layout > Select Layout ): This will set all reviews in the grid or carousel (slider) layout. Layout tab also offers a setting for a number of Reviews to Show. Select the number of Google (maximum 5) and Yelp (maximum 3) reviews to display.

Review Details

Different tabs offer settings to manage review as follows –

FiltersFilter reviews by – date or rating Minimum Rating – Choose to display reviews above a particular star rating. For example, choosing 3 stars will display reviews with 3 stars and above.Rating – Choose to display star ratingsStar Icon Style – Choose to display a default star style or customize it. Review Text – This gives control over the text of the review. You can choose the Text Length for review.

Reviewer Information

You can hide/display information of the people who wrote a review for your business. Under Content > Reviewer Info, select to hide/display name and image (profile picture) of the reviewer.

Inbuild Schema Type

Note: After the recent Google Review schema changes ( applicable from 16th September 2019 ), we are deprecating the Schema Support from UAE』s version 1.18.0.

Previously, we used to support Place, Organization and Service Schema. But after this update Places and Service are not valid items under the AggregateRating as per the new rules of the Google Review snippet.

While Organization is the valid Item under the AggregateRating but in this case, the name field is required to be added under the Organization schema type.

As per the new rule in Google schema, all the self-serving reviews embedded by the 3rd party widget are not going to display review rich results anymore for the organization schema.

Schema Support with Business Reviews Widget

Business Reviews widget offers Reviews Schema support. Enabling this setting adds review fields in the schema of the web page. So whenever a user searches for a relevant place, organization or service, Google considers this input while showing the results. Eventually, positive reviews can help your website climbing up in the search results.

How does it work?

With the widget, you can display Google (maximum 5) and Yelp (maximum 3) reviews on the site.Enabling review schema support will add this number of reviews in the schema markup. It will add fields – ratingValue and reviewCount in the selected type of schema i.e organization, place or service. For Example – If you opted to display 3 Google reviews on the page ( maximum 5 reviews can be displayed ). The widget will add reviewCount as 3 and aggregate ratingValue to schema field as shown in the following screenshot.

IMPORTANT NOTE: If you are using LocalBusiness schema, we strongly recommend NOT to enable Reviews Schema support. According to the Google guidelines, if review snippet is for a local business 1. Ratings must be sourced directly from users. 2. Sites must collect ratings information directly from users and not from other sites.

Source – Review snippet

The widget have options to add review properties in 3 types of schema –

PlaceOrganizationService

In each type of schema, widget adds the following properties –

aggregateRatingratingValuereviewCount

How to choose Schema Type?

Out of 3 schema types ( Place, Organization, Service ) choose schema related to your business.

In case you are showing a place like a bridge, road, lake, etc. choose Place schema.If you are a service based company select Service schema.If you are running a firm or company choose Organization schema

How to test schema added to page?

After enabling the schema with widget test your web page URL with Google – Structured Data Testing Tool In the right column you will see a tab for the schema you choose. Clicking on it will show review properties for aggregateRating.

Frequently Asked Questions about User Registration Forms

We have listed down a few Frequently Asked Questions which you might have while using the User Registration Forms –

1. How Do I Enable/Disable User Registration?

The option to enable and disable the User Registration in WordPress is found under the WordPress Dashboard > Settings > General > Membership > Anyone can register

Note: Make sure this setting is enabled while you are using the User Registration Form widget.

2. How Do I Manage a New User Role on WordPress after Registration?

Managing or assigning a User a pre-defined User Role upon registration can be done from the WordPress Dashboard > Settings > General > New User Default Role

Note: Make sure you select respective User Role based on your website』s User Requirement, while you are using the User Registration widget.

3. How Do I Manage Users on WordPress after Registration?

After the Users are registered successfully on your website, and you would like to update the User Role for few users. To do so you will need to visit the WordPress Dashboard > Users > All Users

From here you can edit the User and update his user role as per your requirement.

Filters/Actions for Video Widget

Filters available for Video are listed below.

HELPS MODIFY the offset value.

add_filter( 'uael_sticky_video_viewport', function( $viewport ) { //Modify the offset here return $viewport;}, 10, 2 );

Note: $viewport – The offset value to stick the video.

HELPS MODIFY THE VIDEO URL.

add_filter( 'uael_video_url_filter', function( $url, $id ) { //Modify the url here return $url;}, 10, 2 );

Note: $url – Parameter to be modified in the video URL.

HELPS set a default channel id

add_filter( 'uael_video_default_channel_id', function( $channel_id, $settings ) {
//Set the channel ID here
return $channel_id;
}, 10, 2 );

UAE Saved Sections

The Ultimate Addons for Elementor allows you to save sections with UAE widgets that can be used later. This feature of the Ultimate Addons works with Free Elementor as well as Elementor Pro.

In this article, we』ll see where you』ll find these saved sections and how you』ll get their section ID.

Where Will I Find a UAE Saved Section?

You』ll find the saved sections under

Elementor -> My Templates -> Sections

How Can I Get the Section ID?

Edit the section you wish to get the section ID for (Refer to the above screenshot). You』ll find the section ID in the URL as shown in the screenshot below.

In the above screenshot, we see that the section ID is 664.

Advanced Heading Widget

Headings play an important role on a website. The more attractive your heading looks, the more attention you』ll be grabbing on to it.

The Ultimate Addons for Elementor provides stunning options with the Advanced Heading widget. You can customize your headings, add a sub-heading, use separators, add background, etc.

In this article, we』ll see some important features of this advanced Elementor widget.

Key features of the Advanced Heading:

Add heading, sub-heading, and linkSeparator StylesComplete CustomizationResponsive Support

Using an Advanced Heading on Page

Like all the other widgets of Elementor, the Advanced Heading widget can simply be dragged and dropped in the position you want it to appear. You can then proceed with the various settings that allow you to add text in the heading, sub-heading, add a link, add seperators and more. Let us take a look at each settings tab of the Advanced Heading widget.

Adding Content to the Advanced Heading

This tab in the Advanced Heading settings allows you to manage the content that will be seen as a part of your heading. The General section here allows you to add text for the heading, a link if needed and the description that will appear. If you just want the heading, you can skip the link and description here.

The Separator section allows you to decide what kind of a separator you wish to add in teh widget. You can leave it empty, or add a single line or a line with an icon, image or text. This section also gives you some basic styling options for the line such as the style, color, thickness and width.

In case you are using an image of an icon along with the line, this section will let you control the size, position, and padding of that too!

Styling the Advanced Heading

This is where you can manage the overall styling of the widget. The Style section allows you to control the alignment. The Icon/Image Styling section lets you manage colors and hover effects for your images and icons. While the Typography section lets you control the typography for the entire widget.

Advanced Settings and Styling for Advanced Heading

This tab allows you to do some additional advanced settings for the widget. You can manage the margin, padding, add entry animations or any CSS class or ID you wish to apply.

You can set a background for the Advanced Heading widget and manage various properties like the background type, color, size, position, hover effects, etc. After the Background section, we have the borders through which you can add a border to the entire widget are. You can select the border style, colors, size, radius, etc.

You then have the responsive section that allows you to decide whether you wish to show the heading on all the three devices; viz. desktop, tablet, and mobile. You can choose to hide or show it on any individual device as well.

Finally, if you wish to add your own custom CSS code, you have a section for that too. This feature is available only for those using Elementor Pro.