Ultimate Addons for Elementor 文件

Introducing Cross-Site Copy Paste Feature for Elementor!

We introduce the most sought out feature in Elementor i.e Copy/ Paste Style and take it a notch above and have made it Cross-Site Copy-Paste feature, which will speed-up your website design process.

Before knowing more about the features, here are some key points –

You can copy Widget / Column / Section from one domain to anotherSaves your time and repetitive workNative Elementor provides Copy/Paste in the same domain. Ours make it Cross-Site and Domain.

How?

Previously, we needed to Save the Template, download it from let』s say Site A and then Upload it to Site B and then import it on the required section.

Now with the UAE』s Copy, Paste Feature!

We can simply right click on the section or column whose features or settings that need to be copied from Site A and visit the site B and right-click on the section where we need to paste it and we are done!Isn』t that amazing?

Let』s see the Steps and the functionality in action –

Step 1: Right-click on the section on Site A.Step 2: Copy it.Step 3: On Site B, right-click where to add the copied section. Step 4: Paste it.

And you』re done!

Full-Page Copy Paste [New Addition]

Introducing Full-Page Copy Paste feature in Ultimate Addons for Elementor』s version 1.28.0. Now, you will be able to easily copy and paste the complete page across websites and domain with just a few clicks.

Before knowing more about this feature, here are some key points –

The whole page in the elementor editor can be copied across domains.Previously UAE had a similar feature but limited to single elements like widget, column, or section.Now you can save a lot of time as you can easily copy and paste full pages.Only in the case of local to remote domain images will not be copied.

Let』s see the Steps to see how it works –

Step 1: Right-click on any section on Site A.Step 2: Click on UAE Copy AllStep 3: On-Site B, right-click on the page.Step 4: Click on UAE Paste All to paste it!

And you』re done!

FAQs

1. Will it inherit Elementor』s Global Theme styling?

=> Yes, if you have different theme styling on both websites, your copied content will automatically inherit style from Global Settings. You don』t have to worry about making any changes or setting it again. 

2. Once I Cross-Site Paste the content, can I edit it? 

=> Yes, of course! Your content will be copied as it is so you can easily edit and customize it in the Elementor editor. 

3. Will my forms from third-party plugins copied and pasted across websites?

=> Yes, you will just need to make sure you have the relevant plugins installed on the website where you will be pasting it. But it will not Import / Export the forms, you will need to create the form and select it manually after pasting the widget.

4. Will my images and videos will be copied?

=> Absolutely. All your content including images and videos will be copied. Images and videos will be added to the media library automatically. 

5. What setup I will need on my websites?

=> You will need Elementor and Ultimate Addons for Elementor activated on websites. Make sure you have Cross-Site Copy-Paste feature enabled. 

6. Can I turn off  Cross-Site Copy-Paste feature?

=> Yes, you can. From UAE settings screen you can deactivate this feature. Let』s say you are not using this feature so you can simply turn it off and save loading extra code on your page. 

7. Will the other third-party plugins content be copied easily?

=> Yes, if you are displaying a Map using plugin M on website A, you will need the same plugin M activated on site B. So when you copy and paste the form it will find its parent plugin and a Map will display smoothly. 

8. Will the Images be copied from Local Setup to Live Site?

=> No. The Image will not be copied from the local environment to the Live Website.

9. What will happen while pasting using the UAE Paste on a WordPress website with a different theme installed?

=> In this case, the pasted widget will inherit the styling from the theme on the current site until you haven』t set the styling from theme styles or specific widget styles.

10. Will this feature work with a single license?

=> Yes, you can use this feature on multiple sites with a single UAE license.

11. Will it work on Cross browsers?

=> As of now, this feature will not work with cross browsers.

12. Will it work on Safari browsers?

=> As of now, Cross-Site Copy-Paste will not work on the Safari browsers.

Time to Get Started!

It』s time to speed-up your website designing process, with Ultimate Addons for Elementor. Update to v1.24.0 and above and let』s create or replicate features and styles without much efforts.

Note

The Ultimate Addons for Elementor version 1.28.0 brings the Full Site Copy Paste feature. Read more here.

Enable Infinite Load Pagination for Post Timeline

Timeline provides a unique feature of Infinite Load for posts. Posts that are selected from the query builder can be set to load automatically in the timeline on the scroll. This is very useful when you display posts dynamically on the page. All posts will load in a predefined timeline design. You do not need to manually set a number of posts to display on each page and design timeline again for it.
Read How Query Builder Works for Post Timeline?
The setting can be found under  Content (tab) > General > Infinite Load. Set toggle to Yes. It displays all query posts with infinite load pagination.

Note: It will display the x number of posts for each load; where x is the value that entered in Post Per Page setting.

Filters/Actions for Login Form Widget

Filters

Filters available for Login Form Widget are listed below.

HELPS MODIFY THE ERROR MESSAGES STRING.

add_filter( 'uael_form_error_string', function( $strings ) {
//Modify the strings here.
return $strings;
}, 10, 1 );

HELPS MODIFY THE 『REMEMBER ME』 STRING.

add_filter( 'uael_login_remember_me', function( $string ) {
//Modify the string here.
return $string;
} );

Woo – Mini Cart Widget

The Woo – Mini Cart widget allows you to insert a Mini-Cart for your store that can display cart details in multiple ways over your page. The Cart details and Subtotal can be previewed in different ways like – Dropdown, Modal, Off-Canvas. Combined with lots of styling options, you can match the style of your website.

Mini Cart with Dropdown Style

Key features —

Cart Styles – Icon/Text/Icon+TextDropdown Styles – Dropdown/Modal/Off CanvasCart Position – Inline/FloatingShow Badge ( Items Count )Show Subtotal

Below are the steps to use the Woo – Mini Cart Widget for Elementor –

Adding Woo – Mini Cart widget

Let』s see how to use Woo – Mini Cart widget in Elementor –

Note: Before starting make sure you have Elementor and Ultimate Addons for Elementor and WooCommerce plugins activated. Ensure you are above version 1.29.0 and above.

Step 1 – Edit page/post with Elementor and insert the widget to the Elementor』s editor.

Step 2 — Select a style for the Mini Cart on how you would like to display with some Text/Icon or Both under the Cart Button section of the widget.

Step 3 — Now, with options like Custom Text for the Cart, Show/hide the Subtotal or Badge. Also, you can control the position of the badge to display inline or Top. And finally, manage the alignment of the widget too.

Step 4 — Some cool options are available under the Cart section of this widget. Here you can handle the options to display the Preview Cart details in the Dropdown that can be showed on Hover/Click. And also display the Cart Details in the Modal or Off-Canvas.

Step 5 — Matching the Mini Cart and it』s preview based on the Elementor』s settings preview is one of the most important things.

Following are the Styling options for the Woo – Mini Cart widget for Elementor —

Cart Button styling — Under this option, you will also find the option to position the Cart – Inline/Floating for Modal or Off-Canvas Cart Style.Cart styling — Further you have options to style the Cart Button』s Typography, Cart icon size, Color, Subtotal, empty message, Overlay Color, etc.Products styling — Even these are precise options for Product styling that include Image, Title, Quantity & Price, Remove Product Icon, etc.View/Checkout Buttons Styling — These provide further options to manage the Typography, Space, Color options to make them look better.Responsive options — All these options are with responsive settings so that you can manage them on different screen sizes.

Introducing a New Login Form Widget for Elementor

Customize WordPress login forms and make them look beautiful. Further improve user onboarding experience with social login support and many more advanced features.

Watch a detailed video about Login Form widget –

Let』s see how you can add Login Form with the comfort of Elementor. Start with dragging and dropping the Login Form.

Before moving forward with all the widget settings, let』s take a quick look at the key features –

Custom Form – Username / PasswordSocial Login support – Facebook / GoogleOption to hide custom form – login only with social buttonsCustom redirects for Login & LogoutCustom URL for Register and Lost your password Separator between Login Form and Social LoginShow / hide / customize labelsEasy & 100% customization optionsLog In Button style optionsField validation style options

Form Fields

In the Content tab, the first section you will see is Form fields. You have the option to either display the default WordPress Login labels, Custom or no labels.

Here you will also be able to Show/Hide the Remember Me field and set size for the input fields.

Social Login and Register

This is the next section, where you will be able to enable the Social Login for Facebook and Google.

Visit the following links, if you want to figure out the Steps to Create a Google Client ID and for the Facebook App ID.

You will need to add these IDs from the WordPress Dashboard under Settings > UAE > Login Form – Google Client ID/ Login Form – Facebook App ID.

We also have provided default skins for the Social Login like Dark (deafult) and another is Light.

Sometimes, you might provide both the login form as well as the Social Login for your users to login. So there you might need a separator asking them to either login using the Login Form or Social Login.

You will also have total control over the separator text and its styling.

Hide custom form fields – login only with social buttons

You can hide the form fields by using the Hide Custom Form setting and only display the Social Login using this the users can log in to your website.

Custom Redirects

Under the Additional Options section of the Content Tab, you will see the option to Redirect the User after Login or Logout to custom URL on your own website.

Just need to add the URLs to the respective page of the current website where you want the user to be redirected after a successful login or logout.

Custom URL for Register and Lost your password

Do you have a Custom User Registration Form and need to link it from the Register link under the Login Form.

We have got you covered, you just need to Show the Register button from the Additional Options section. And select the Custom URL under the Link to field.

Refer the below screenshot to find the screenshot where you will find this setting –

Style the Login Form

We have provided all the Styling options under the Style Tab. In the first Spacing section, you will be able to manage the spacing of the Form fields』 labels, and the top spacing of the separator, and Social Login spacing.

And in the next Form Fields section, you can update the Typography of the Labels, Input field, Remember Me Typography settings.

Social Login: From here you can manage the Social Login Alignment, Border Radius and Box Shadow.

Button: The button section allows us to manage the styling of the Button.

Field Validation Messages: You also have the control to manage the Field Validation and Error Messages.

How to Create a Custom Mega Menu using the Nav Menu widget – 3 Simple Steps!

Let』s begin to create a Mega Menu in a few simple steps using the Navigation Menu widget of UAE –

Pre-requisites –

UAE version 1.21.0 and aboveEnable the Navigation Menu from the Settings > UAE

Step 1: Choose 「Custom」 from the widgets』 Content tab > Menu section > Type.

Step 2: From the Sub Menu section, choose Saved Section/Saved Widget as per your convenience.

Note: You need to create Saved Section to able to fetch them in the Content Type section. While to insert Saved Widget you will need to have Elementor Pro.

Step 3: Apply width to this sub-menu as required from the Menu section.

Here is a document on how the existing dropdown width types work.

That』s it! Now, you have a Mega Menu ready.

Watch a detailed video for UAE Navigation Menu widget here.

How to Design a Custom Menu Using the Navigation Menu Widget?

The Navigation Menu widget of UAE allows creating a Custom Menu from the widget itself.

Let』s see the steps on how you can design a Custom Menu using the Navigation Menu widget –

Step 1:

First drag-n-drop the Navigation Menu widget on the Elementor editor.Under the Content tab > Menu > Type select 『Custom『 from the dropdown.You will see some default sections with Menu and Sub-menu items.Menu Item is the parent menu item and Sub Menu Item is the child of that parent menu.Under each Menu Item, you can update the Menu Item text, Link, Dropdown Width, and its position.And in the Sub Menu Item, you will be able to choose the Menu Content-Type – Text / Saved Section / Saved Widget, or Link in the case of Text option.In the Sub Menu Item, you will also have the option of converting it to Menu Item.

Step 2:

Apply the styling to the menu according to your design requirements.

Step 3:

Publish or update the Page with a fresh-looking Navigation Menu that is ready to dazzle your website visitors.

Watch a detailed video for UAE Navigation Menu widget –

Introducing a New Navigation Menu for Elementor!

We bring to you the most versatile Navigation Menu for Elementor. This Navigation Menu widget of UAE will allow you to create a custom Menu right from the widget.

Key features of the Navigation Menu widget –

Types of Menu – WordPress default and Custom ( can design your own menu )Types of sub-menu items – Text, Saved Section, Saved WidgetDifferent width and position options for the SubmenuDifferent types of layoutLink hover effects with animationsResponsive menuAlignment and styling options with animations

Watch a detailed video for UAE Navigation Menu widget –

WordPress and Custom Menu Types

You can either use the existing or current menus created under WordPress > Appearance > Menus or you can choose the Custom in the Content > Menu section > Type.

This will allow you the flexibility to create a custom menu, in which you can add Menu Items from the widget interface.

Using the WordPress Menu will not hamper the styles anyhow, you can apply all the styling to both the Menu type.

Different Types of Layouts

After the Menu Items have been added the next step is to choose the Layout for the Menu.

You can choose from – Horizontal, Vertical, Expanded, and Flyout.

The Layout section can be found under the Content tab > Layout section.

Here you can also provide alignment to the complete Menu, choose an Icon for the Dropdown, Animation – ( Slide Up, Slide Down ) for the Submenu item.

There are also many options for the Responsive screen, from choosing Icon and Close Icon. and also the Responsive option.

Types of Link Hover Effect and Animation

This section will be visible only in the case of Horizontal Layout

You can select or pick a hover effect and animation for the Menu, and add different effects on hover and active menu items.

This setting can be located under the Style tab > Main Menu.

There are options to manage the Normal and Hover color for the Text, Background, and Pointer for Hover color.

Menu Styling and Customization Options

The Dropdown section which is the second section under the Style tab allows managing the complete spacing, Color and also add a Divider for the Submenu.

Spacing is the most required feature while designing a Menu item. You are allowed complete flexibility to style and space all the items of the Menu.

In the Navigation Menu widget of UAE, you will be allowed to even manage the Submenu Dropdown』s width as per your requirement.

You will just need to drag and manage every aspect of the Menu items spacing.

Let』s see take a quick look at all the spacing elements –

Distance from the top of the Main MenuHorizontal PaddingVertical Padding

And the last section is the Menu Trigger & Close Icon which will help you to manage the size, border Width, Border Radius, and Icon Size too.

Multi Buttons Widget

Ultimate Addons for Elementor offers a Multi Buttons widget that allows you to add multiple buttons within a single section. These are individual buttons that can be grouped together and controlled with individual settings as required.
In this article, we』ll go through a few things you would want to know about the Multi Button widget.
Key Features-

Multiple Buttons
Common Styling Options
Individual Styling Options
Individual Button Control
Responsive Support
Icon Support
Hover Effects and Animations
Complete Customization

You can add a number of buttons with different colors, shapes, sizes, border, hover effects, typography.
Add Multiple Buttons
The Multi Button widget of UAEL allows you to add multiple buttons together. You simply need to drag and drop the Multi Button element on page and go to the Content tab. You』ll see two buttons added by default. You can add more by clicking on the Add Item button below.

Common Styling Options
The Multi Button widget gives you some global styling options that let you style all the buttons together. Want all the buttons to look identical? You can use the settings here.
You can also manage the spacing between the buttons. You can set the required spacing or connect all of them together.

Individual Styling Options
In case you wish to style each button separately, you can do so by using the styling options given under them. Simply open the content tab of the Multi Button widget and click on the button you wish to edit. You can further beautify the button under the design tab.

Individual Button Control
It is sure that you won』t want all the buttons to act the same. You can control each button through its General settings. Take a look at the screenshot below.

Responsive Support
Like all the other widgets, the Multi Button too is responsive and looks great on all devices. You can choose to hide this group of buttons on a particular device too.

Apart from the above features, you can choose on what breakpoint the buttons should stack. You can choose a device where you wish the buttons to appeared stacked on.

Icon Support
At times, plain text buttons might seem boring. You can add icons along with text on a button to make it look good.

Hover Effects and Animations
An interactive website pleases users. You can add some cool animation effects that are seen when a user hovers on the button. You can also enhance the animation effect by applying box shadow.
Complete Customization
The Multi Button widget comes with various options that allow you to customize individual buttons completely. You can change their typography, manage background, borders, colors, etc.
Want to see some real examples we』ve created using the Multi Button widget? You can take a look at the demos.

Filters/Actions for WooCommerce Products

Actions available for WooCommerce Products are listed below.

uael_woo_products_before_summary_wrap

Fires at the beginning of the product summary
function summary_wrap( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_before_summary_wrap', 'summary_wrap', 10, 2 );

uael_woo_products_after_summary_wrap

Fires at the end of the product summary
function summary_wrap( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_after_summary_wrap', 'summary_wrap', 10, 2 );

uael_woo_products_title_before

Fires at the end of the product title
function title_before( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_title_before', 'title_before', 10, 2 );

uael_woo_products_title_after

Fires at the end of the product title
function title_after( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_title_after', 'title_after', 10, 2 );

uael_woo_products_price_before

Fires at the beginning of the product price
function price_before( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_price_before', 'price_before', 10, 2 );

uael_woo_products_price_after

Fires at the end of the product price
function price_after( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_price_after', 'price_after', 10, 2 );

uael_woo_products_rating_before

Fires at the beginning of the product rating
function rating_before( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_rating_before', 'rating_before', 10, 2 );

uael_woo_products_rating_after

Fires at the end of the product rating
function rating_after( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_rating_after', 'rating_after', 10, 2 );

uael_woo_products_short_description_before

Fires at the beginning of the product short description
function desc_before( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_short_description_before', 'desc_before', 10, 2 );

uael_woo_products_short_description_after

Fires at the end of the product short description
function desc_after( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_short_description_after', 'desc_after', 10, 2 );

uael_woo_products_add_to_cart_before

Fires at the beginning of the product add to cart
function add_to_cart_before( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_add_to_cart_before', 'add_to_cart_before', 10, 2 );

uael_woo_products_add_to_cart_after

Fires at the end of the product add to cart
function add_to_cart_after( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_add_to_cart_after', 'add_to_cart_after', 10, 2 );

uael_woo_products_category_before

Fires at the beginning of the product category
function category_before( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_category_before', 'category_before', 10, 2 );

uael_woo_products_category_after

Fires at the end of the product category
function category_after( $product_id, $settings ) {
echo '

';
}
add_action( 'uael_woo_products_category_after', 'category_after', 10, 2 );

#Filters

Filters available for WooCommerce Products are listed below.

Helps modify Query Arguments.

add_filter( 'uael_woo_product_query_args', function( $query, $settings ) {
// Modify the query here
return $query;
}, 10, 2 );

Helps modify 『out of stock』 string.

add_filter( 'uael_woo_out_of_stock_string', function( $modified_string ) { // Modify the string here return $modified_string; }, 10, 2 );

Helps modify the product title link.

add_filter( 'uael_woo_title_link', function( $title_link ) { // Modify the link here return $title_link; }, 10, 2 );

Helps modify the product structure.

add_filter( 'uael_woo_products_content_structure', function( $shop_structure, $settings ) { // The below array is the actual structure, you can swap the elements to have the desired structure $shop_structure = [ 'category', 'ratings', 'title', 'price', 'add_cart', 'short_desc' ]; return $shop_structure;}, 10, 2 );

Helps disable the link of the product image.

add_filter( 'uael_product_disable_link', function( $is_enable ){ // return false to disable the link return $is_enable;}, 10, 2 );

Helps modify the structure of a quick view.

add_filter( 'uael_quick_view_product_structure', function( $quick_view_structure ) { // The below array is the actual structure, you can swap the elements to have the desired structure. $quick_view_structure = [ 'title','ratings','price','short_desc','add_cart' ]; return $quick_view_structure;}, 10, 2 );