Ultimate Addons for Elementor 文檔

Table Widget

UAEL 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 such as a comparison between products/ sales, displaying schedules, displaying changelogs and many more.
Table widget allows creating searchable and sortable tables that are easy to read. It also enables the entries drop-down for longer tables that are difficult to refer to.
You can create beautiful tables with advanced styling and features. Refer to Demo Page.
To enable Table widget visit UAEL settings. (?)
Important links:
How To Add Rows And Columns to the Table?
How to add Table Header with Table Widget?
How to add Table Content with Table Widget?
How to add Sortable and Searchable Table? How to Show Entries Dropdown?
How to Merge Columns and Rows in Table?
How to Style the Table?

Table on Responsive Devices 

From UAEL version 1.8.0, table responsive option is deprecated. Earlier to this version Table widget has the responsive option that used to stack the Table Headers and Content.
In practical use, this layout of the table was not working as intended. The header and its columns ratio were displayed in an incorrect way. So, we decided the deprecate the same option.
Now, by default, the table is responsive with a horizontal scrollbar to the table. You can navigate the table with the scroll.

How To Add Rows And Columns to the Table?

UAEL 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.
Table widget allows creating searchable and sortable tables that are easy to read. It also enables the entries drop-down for longer tables that are difficult to refer to.
You can create beautiful tables with advanced styling and features. Refer to Demo Page.
To enable Table widget visit UAEL settings. (?)

Adding rows and columns to Table Header/Content.

 

How to add a row to the Table?

ADD ITEM under Table Header/Content tab. It will add a Cell box.
Edit newly added Cell. Choose Action -> Start New Row. It will add a new empty row to the table.
The added row will not be visible unless columns are added to it.

How to add columns to the Table?

ADD ITEM under Table Header/Content tab. It will add a Cell box.
Edit newly added Cell. Choose Action -> Add New Cell. It will add a new empty column to the above row.
Add a text to the column and you can see it appearing in the table.
Add as many columns you want with ADD ITEM button. The number of the newly added cell will be equal to the number of columns.
 ADD ITEM button will add cells horizontally.

After adding columns if you wish to add a new row follow steps given above for How to add a row to the Table?
Related links:
Table Widget
How To Add Rows And Columns to the Table?
How to add Table Header with Table Widget?
How to add Table Content with Table Widget?
How to add Sortable and Searchable Table? How to Show Entries Dropdown?
How to Merge Columns and Rows in Table?

How to Create a User Registration Form using Elementor?

Looking to create a User Registration Form using Elementor?

Well, we have the easiest solution for you. User Registration Form widget of Ultimate Addons for Elementor allows creating such forms easily and conveniently.

Let』s see how you can create a User Registration Form for your website in three simple steps –

Note: Make sure you have the Membership option enabled under the WordPress General Settings under Dashboard -> Settings -> General -> Membership. This would allow any user to register on your website.

Now, let』s see the steps –

Step 1: Create a User Registration Form Using the Widget

To create a User Registration Form, make sure you have the UAE plugin updated to version 1.18.0 and the module is activated.

Next, create or add a New Page and edit the page where you want to add the User Registration Form.

Now, drag and drop the widget, and you will see the default Form Fields.

You can either remove or add other fields like Username, First Name, and Last Name.

On individual form fields, you have the option to manage the required and Column Width.

Other than that, you will be able to manage the Input Size, display or hide the Label of the fields or the Required Mark.

Step 2: Configure Your Form Settings

To configure, visit the General Settings section, here you will be able to do the following –

New User RoleChoose After Registration Actions

Let』s see them in detail –

New User Role

Let』s say you have a Membership site, and you require the user registering on your website to have a default User Role as Subscriber.

So here you can set a default User Role, this role will be set for the user when he/she registers on your website.

To know more about all the User Roles the WordPress provides, refer to the following article.

Choose After Registration Actions

We provide the following Actions which can be performed after the User registers using the User Registration Form widget –

Redirect after RegisterHide after Register Auto LoginSend Email

Let』s see them in detail –

Redirect after Register: Using this option you can redirect the user after successful registration to a Thank You page or a login page. You can paste the required Page URL in the URL field under this option.

Hide after Register: Sometimes you might require hiding the user registration form after the user has successfully registered. This option will hide the registration form and display the Successful message and provide a link to visit the login page to login to the respective website. This option will be found under the General Settings section in the Content tab of the widget.

Auto Login: This option will allow the user to login to your website automatically. The user will not require to login after registration as he will be directly logged into the website after the successful registration.

Send Email: This option will send an email to the User with a message that he/she has been successfully registered to your website. You can customize the email content under the Email section.

You can also use this feature and use a single Email Form field to register a user. Refer to this article for more details about the same.

Further, you can Style the user registration form from the Style tab of the widget, you can refer to this article to help you Style and understand the options for the form styling.

This completes the creation and configuration process for the User Registration Form widget. Now the form is ready to be used on the Live Website.

Step 3: Add the User Registration Form to Your Website

Just like any other Elementor widgets, you can directly drag and drop to add this widget. Or you can save the section containing the widget and fetch the Saved Section in the required Registration page.

Refer this gif on how you can add the same –

Here are a few more ways as mentioned in this article to help add this or any other widget in the Elementor editor.

Example: User Registration Form on a WooCommerce Page

Let』s say for example we want to create a custom WooCommerce – My Account Page. Let』s name the page as Custom Account Page –

Now, click on the Edit with Elementor button, and you will be taken to the Elementor editor.

Using the above-mentioned steps we can create a similar registration form and Save the same which we will be using on the Custom Account Page.

You can style and design or modify the form completely as per your requirement.

Lastly, to set the page as My Account Page visit the WordPress Dashboard and under – WooCommerce > Settings > Advanced > Page Setup > My Account Page select the My Account Page as – Custom Account Page

This would display the page containing UAE』s User Registration Form widget on the WooCommerce Account page.

Conclusion:

There you go, you are now ready to register users using the User Registration Form widget of UAE! You can create a stylish registration form for your website using Elementor and UAE.

Go ahead and visit your Elementor editor to create a stylish user registration form for your new users.

How to Exclude Specific Headings from Table of Contents Widget?

You might have come across a case or find it difficult to exclude certain headings from the table of contents on your website? We have made it possible or simplify to exclude specific headings in the Table of Contents widget of UAE.

Let』s see few cases and how we can overcome this in our Table of Contents widget.

Case 1: Hide Headings from the Single Post Page

If you have a Single Post page, where you are displaying related posts below the post content using Posts widget. The Table of Contents widget will consider the headings of the related posts in the table of contents.

Solution: To remove or exclude the headings from the table. Here you will only need to add a CSS class to Posts widget whose headings you want to exclude.

CSS class you will need to add is – uae-toc-hide-heading

The CSS class will need to be added under the Advanced Tab > Advanced section > CSS Classes

Case 2: Hide Headings from the Single Page

On a single page, you might have multiple section headings with Table of Contents widget, and need to exclude a specific heading in the table. But, here few headings are added using the Text editor and you don』t need to hide all the headings of the text editor, just the second one.

Solution: The previous solution will work a similar way even here. Just go to the Text Editor and find the specific heading to be excluded, and go to the text tab which is beside the Visual section.

Now, let』s say you have h3 tag so you will add the following in the tag – class=」uae-toc-hide-heading」. Refer the screenshot on how it needs to be added.

After you add the class to the heading tag and the heading will be excluded from the table. Hit Update or Publish the page with the changes and you will see the heading to be excluded.

Here』s the GIF on how to do this –

Similarly, if you find any other case, you will need to add the uae-toc-hide-heading to exclude any specific heading.

How to Trigger a Modal Popup on the Click of a Menu Element?

The Modal Popup widget of the Ultimate Addons for Elementor allows you to display a popup based on various actions. In this article we』ll see how to trigger a popup on the click of a WordPress Menu element. You can do this using a custom CSS class.
Here are a few steps you need to follow:
1. Create a new section and add a modal popup inside it. You can design the modal popup as per you requirements.
2. Open Display Settings of the Modal Popup widget. Select the Custom Class option from the dropdown menu.
Add your custom class name in the field as shown below.

3. Now go to your WordPress Dashboard -> Appearance -> Menu

4. Create a Custom Menu element on click of which you wish to trigger a popup.

4. Enable the CSS Classes option under the Screen Option settings

5. Add the respective CSS class name ( the one you entered in step 2 ) under the selected menu element.
Also select the location you wish to display the menu element on. Like we』ve selected Primary Menu in the screenshot below.

6. Trigger the Popup sitewide
By default, this popup is triggered only on a single page. If you wish to trigger this popup on the entire website, and make it work with all your themes, we will use the 『wp_footer『 hook with a PHP function. You can paste the following code into the functions.php file of your theme/child theme.
function ultimate_elementor_modal_popup() {
echo do_shortcode( '[uael-template id="your-saved-section-id"]' );
}
add_action('wp_footer', 'ultimate_elementor_modal_popup');
You just need to replace your-saved-section-id with the ID of your Saved Section that you created in Step 1. For steps to get your saved section ID, you can refer to our article about UAEL saved sections.
This assures that the modal popup you just created, will be displayed on all the pages of your website!

Navigation Menu -Dropdown Width and Position Options

The Navigation Menu widget of UAE is a gamechanger to help you design every kind of Navigation Menu for a website.

How do we say this? We provide two options which are Dropdown Width and Dropdown Position which can be set for the individual Menu』s Submenu.

Let』s see them in details –

Dropdown Width

First, where to find this option? Make sure you select the Menu Type as Custom under the Content tab.

Now, under the Menu Items, go to the Menu Item. in the same section just below the Link option you will see the Dropdown Width option with multiple options.

They are –

Default CustomEqual to SectionEqual to Container Equal to ColumnEqual to Widget

Note: All these options will work, with the Custom Menu Type and Horizontal Layout only.

Let』s see them in details, and how each of them works –

Default

The default width is set to 220px. If the user wishes to changes the width, he can do so from the Styling options of the Dropdown section under the Style tab,

Custom

The custom options allows adding a custom width to the Dropdown. In this case, you will also see an option of Dropdown position just below the width option in the same section.

Equal to Section

The dropdown size here will be equal to the entire section in which the widget is present.

Equal to Container

Let』s say a section has more than two columns, then the columns reside in one container. So if you select Dropdown width as Equal to section it will be equal to that container.

This is can be used when you have a logo in the left column and needs the dropdown width up to the left of the logo.

Equal to Column

This option will make the width of the section equal to the column in which the widget is present.

Equal to Widget

With this option, the width will be equal to the width of the widget. It will be contained inside the blue outline of the widget container.

Dropdown Position

This setting will ensure the position of the dropdown according to its parent.

It will have three options –

Left – The dropdown will start from the extreme left of the parentCenter -The dropdown will align to the center of its parentRight – The dropdown will start from the extreme right of the parent.

How to add WooCommerce Add To Cart button on the page?

Woo – Add To Cart Widget allows you to add a WooCommerce Add To Cart button anywhere on the page. It gives you options to add a product to cart on-click with predefined quantity. It navigates the user to cart page.
This button can be used anywhere on the page.
Below are the available options-

Product (?)
– Start typing name of the product that you wish to add to the cart when the user clicks the button. Also, choose the Quantity.
– When a user clicks the button, the selected product will be directly added to the cart.
Button (?)
– Various options to customize the button are available here.
– More options are available under the Style tab.

Note:
1. This widget will be visible only if WooCommerce plugin is installed and activated.
2. If the widget is not visible in the Elementor widget list, then check if it is enabled from UAEL settings. (?)
3. Styling options for every feature are available under the Style tab. (?)
Refer a demo for Woo – Add To Cart Widget here. The information boxes displayed with the button on demo page are designed separately with other widgets.

Woo – Products Widget

UAEL  provides a powerful Woo – Products widget to showcase WooCommerce products on any page. It is the most flexible widget that allows you to display WooCommerce products in grid and carousel layout. We have added stylish skin options to enhance the layout design and we will be adding more in future.
The Woo – Products widget of UAEL has an inbuilt Query Builder that allows you to filter and show the exact range of products.
See the stunning layouts for Woo – Products on demo page.
Below are the options available with the widget-

General (Grid and Carousel layout)This tab includes Grid and Carousel layout options. Classic or Modern Skin options add more style to the product layout. See how to set the layout here.
QueryAn efficient inbuilt Query Builder provides all necessary filter options that allow displaying exact products. See how to use the query builder here.
ContentAllows to manage the display of product content like Product Category, Title, Ratings, Price, Short Description, Add to Cart Button. (?)
Sale FlashAllows you to display/hide a sale bubble with a product. You can also enter Custom Flash String if required. (?)
Featured FlashProducts that are set as featured will be displayed with a flash bubble. Default string will be 『New』. You can enter Custom Flash Content if required. (?)
Quick ViewA quick view option shows the product details like title, description, price etc. in a popup/lightbox. One can enable a quick view of the product with toggle. (?)

Note:1. This widget will be visible only if you have the WooCommerce plugin installed and activated on your website.2. If the widget is not visible in the Elementor widget list, then check if it is enabled from UAEL settings. (?)3. Styling options for every feature are available under the Style tab. (?)
 
Related Documents:1. How to Exclude WooCommerce Products with Woo-Products Widget?2. Filters/Actions for WooCommerce Products

Styling Checkbox / Radio / Acceptance controls in WPForms Styler widget

Have you ever wanted to style the checkboxes, radio buttons of the acceptance control in a WPForms? This is made possible with the WPForms Styler widget of the Ultimate Addons for Elementor!

Before we move on to the styling, please make sure you can see the WPForms Styler widget in the widget list. If not, refer to the article here.

The next thing you』ll want to do is enable WPForms』 built-in GDPR enhancements.

To do this, go to WPForms » Settings and click the 『GDPR Enhancements』 checkbox. This will turn on specific GDPR features that you can use to help with GDPR compliance.

Once you click this checkbox, you』ll be able to add a GDPR Agreement field to your site』s forms and customize it to meet your needs.

You can style these controls by following the steps mentioned below.

Go to the Content panel of the WP Forms Styler -> Click on the Radio & Checkbox tab -> Enable the Override Current Style Option. You can then make changes as per your requirements.

Introducing User Registration Form Widget

The User Registration Form widget of Ultimate Addons for Elementor will allow you to create and design the perfect user registration forms on your site. You will also have the option of redirecting the user, auto-login, and sending an email after successful registration using this widget.

Here are key features for the User Registration Form widget –

Option to Register only with the Email fieldForm Fields – User Name, First Name, Last Name, Email, Password, Confirm PasswordAlso provides Anti-Spam Honeypot protection Form Field and reCAPTCHA feature tooRegister Button customizationsColumn width option for all form fieldsOption to Hide/Show the Label fieldSet the Default User role for user registration form widgetHide the form from logged in UsersRedirect the user to a specific URL after a successful registrationAuto-Login or Send Email option after a successful registrationProvides Lost Your Password & Login Page optionsProvides Password Strength Checker optionSuccess / Error message customizations

Below are the settings available for the User Registration Form widget –

Form Fields

The first section under the User Registration Form widget will provide you with the options to choose the registration form fields. Here you can only provide the Email field using which users can also Register to your site if required. Read an article on How to Create a User Registration Form with Only Email Field in Elementor?

Other than the Email field you have the options to add User Name, First Name, Last Name, Password, and Confirm Password to your user registration form.

Another important feature we provide is the Honeypot form field, this provides an added level of security to your user registration forms from the spammers and bots. Just add the Honeypot form field and it is done. Simple, right?

You will also be able to set a size for the Form fields from extra small to extra large based on your requirements. And you will find the Required Mark option which can be enabled to add asterisk mark from here to the labels on the form.

After Register Actions

Under the Content Tab, you will see After Register Actions section here you will find various after Registration options like Redirect, Auto-Login, Send Email –

Below are the above-mentioned options with a detailed description –

Redirect

Under the Content Tab > After Register Actions > Add Action select Redirect option and enter the Redirect URL which will redirect the user after Successful registration.

Auto-Login

Under the Content Tab > After Register Actions > Add Action select Auto Login the user after successful registration will be automatically logged in to the site without requiring to log in again.

Send Email

Under the Content Tab > After Register Actions > Add Action select Send Email. On selecting Send Email option the user after successful registration will be sent an Email about their registration on your website.

To customize the Email being sent to the Users you will see the Email section below After Register Actions from where the default option is set to default.

You can also create a User Registration Form having only an email field, send an email to the user containing the Password after a successful registration.

General Settings

You will find the options for displaying fields below the form like – Lost Your Password, Login, Password Strength Checker and options to Style and align them.

Register Button

Under the Register Button section of the Content tab, you will be able to Customize the Register Button as per your requirements. You can edit the text of the Register Button, set the Size, Alignment, Width and also add an Icon with its positioning before and after the text along with the Icon Spacing between the text.

Success and Error Messages

You have the option to change the Success and Error Messages under the Content tab > Success and Error Messages –

Style the User Registration Form

Under the Style tab, we have different sections like –

Spacing: You can manage the spacing between the fields,

Label: Set the text color and Typography from here.

Input Fields: From here you can manage the Text Color, Typography, Border settings of the Input Fields.

Register Button: This section will allow you to set the Padding, Typography, Background, and other Border settings.

Success / Error Messages: Set the color styling and Typography for the Success Field Validation and Error Field Validation.