Author 诗语

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.

What Are Presets And How To Use Them?

Ultimate Addons for Elementor offers presets that make designing your UAE widgets quick and beautiful.

You can apply presets just with a click and build stunning web pages saving lots of effort and time.

Take a look at how presets help you to build faster websites.

This document will explain what are presets and how to use them to quickly create great designs. 

What Are Presets?

Presets are ready-to-use templates for UAE widgets, that you can use for speeding up your website building. These templates save you time to adjust multiple settings for each of your widgets.

Presets are a set of different beautiful designs for UAE widgets. You can choose any preset you like, add content and your final nice section will be ready.

For example – here are different presets designs available for the Price Box widget.

Presets are available with UAE version 1.33.0 and above. Currently, presets are available for the following widgets –

Advanced headingDual Color headingInfo BoxPrice BoxPrice ListMulti-ButtonsLogin FormTeam MemberFAQBusiness Hours

With the upcoming updates, UAE will be coming with new presets for more widgets.

How To Use Presets?

You can find Presets in any of the supported widgets, under the 「Content」 tab. Follow these steps:

Step 1 – Click to edit widget. You will notice all designs under the 「Presets」 tab. 

For example – In the Info Box UAE widget, presets will appear as shown below

Step 2 – Select any of the Presets to see the template applied to your widget. To switch back to plain (default) design, please select the 「Default」 option. 

For example – In the Info Box UAE widget, you will observe the following presets designs

Step 3 – From here you are free to modify the widget content, and all settings if needed including the settings applied by Preset selected. 

Step 4 – Update to save changes.

Note: Choosing any preset will reset all style settings for the widget. When you choose any preset, make sure to save the changes.

Woo – Checkout Widget

The checkout page is an important step where users submit their addresses and payment details. Tedious and complicated checkout pages often lead to checkout abandonment.

With Woo – Checkout widget you can design beautiful and profitable checkout pages easily. UAE offers this unique widget that lets you customize the default WooCommerce checkout page.

Key Features –

Layouts – One column, Two column, Multistep Option to enable cart button and additional information box Custom labels for form fieldsCustomize login section Customize coupon sectionColor and typography options for all fields

Let』s see how you can use this awesome widget –

Adding Woo – Checkout Widget to Elementor Page

Before adding this widget to the page make sure to –

Set the page as your Checkout page in WooCommerce settings. For this, from dashboard visit to WooCommerce > Settings > Advanced Tab > Page setup > Checkout page.Also, add items to the cart to edit the checkout page. WooCommerce does not make the Checkout page accessible until items added to the cart.

You can add the widget to the checkout page and start editing it. The widget fetches all fields from the WooCommerce checkout page and lets you customize it with layout, color, typography, additional fields.

Layout

You can manage layout for the checkout form. Display it in –

One Column – All fields will display in a single column just like the default viewTwo Columns – Checkout form fields will be divided into two columns. The billing address and other details will be displayed in one column. While order review and payment method will be displayed in another column. Multistep – Checkout fields will be displayed in multiple and separate steps – billing, shipping, and payment. Users can fill one page and move on to the next.

It also offers two more options –

Enable Cart Button – It will add the 『Back to Cart』 button on the checkout page. So that if the user needs to make any addition or changes in the cart, option will be easily available. Show Additional Information Box – This will add an additional box where users can add any notes about orders.

Checkout Labels

Here you can add custom labels for checkout form fields. You can even connect dynamic tags with these fields.

You can set any label for –

Billing TextShipping TextOrder TextPayment TextCart Button Text

Login Section

This will add a link where users can login to their account and proceed with checkout. To check this option you will need to log out from the website and visit the checkout page. Here is how login section will look –

If you are not able to see the login option and wish to enable it, then from the dashboard visit WooCommerce > Settings > Accounts & Privacy > Enable 『Allow customers to log in to an existing account during checkout』.

You can customize this section with following settings –

Title – Add text for login section Link Text – Link text that will prompt user to login Form Text – Text that will display information in for login form

Coupon Section

Coupons can benefits your online business in various ways like bringing new users to store, help users to try new products. You can add and customize coupon section with following points –

Title – Text that will ask user if they have coupon code Link Text – Link text that will prompt user to open a box to enter coupon detailsForm Text – Text that will display above the input box Field Placeholder – Placeholder for a box where user enter coupon codeButton Text – Text on the button that will submit the code

Style Tab

The widget offers color and typography for each section of the checkout form. You can set text color, background color, typography, border, padding and other stylings for following fields –

SectionsHeadingsInput FieldsOrder ReviewPayment MethodButtonsField Validation & Error Messages

Related Articles –

FAQs: Woo – Checkout Widget

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.

How to Set Multiple Column Fields in Contact Form 7 Styler of UAE?

Many times users wish to add multiple form fields in columns. This can be done by using a wrapper class.

The class you』ll be using for this is: 「uael-cf7-col「

You will need to use a parent wrapper with the above class name for every line you wish to insert. You will also need to enclose every Form element within a tag.

For example –

For a 3 column layout:

For a 2 column layout:

Note: You can replace Field 1, Field, Field 2, etc with the field code of Contact Form 7. Such as :

[text* your-name placeholder 「Your Name」]

All this has to be done in the form you create using Contact Form 7. Here is a quick screenshot that will help you understand how you implement the same.

The above screenshot was an example of the backend settings in Contact Form 7. Take a look at the screenshot below to see how it looks.

Introducing Caldera Form Styler Widget for Elementor!

Update: Ultimate Addons for Elementor v1.32.0 and above deprecates the Caldera Form Styler widget. As per the official statement from Caldera Forms, the plugin will be retired on 31 Dec 2021. So Caldera Form Styler widget won』t be available for new users after UAE v1.32.0.

Though the widget will continue working for existing users as the Caldera Form plugin is still working. So if you have used the Caldera Form plugin and Caldera Form Styler widget, it will continue working without any interruption. Future updates for the UAE Caldera Form Styler widget will be dependent on further notice from the Caldera Form plugin. As per the authors of the Caldera Form plugin, Caldera Forms will be eventually converted to Ninja Forms. Read more in their detailed post here.

You can design a Caldera Form to suit your websites color scheme and much more. You can completely customize a form with different color and style settings. Below are the key features for the widget –

Field style options ( Box & Underline )Easy & 100% customization for Radio & checkboxGradient color / Image background options for submit buttonDifferent styles for success and error messagesManaging space between the fields

With Caldera Form Styler Widget, first, select the Caldera Form from the list and style it with the UAE widget options.

Field style options ( Box & Underline )

The widget provides prebuilt styling options for input fields. You can choose Field Style as a box or underline. Box layout will add a border from all sides. You can choose the border style, color, width etc. from the available options. The Underline layout will add a border at the bottom of the input fields.

Box 

Underline 

Easy & 100% customization for Radio & checkbox

Have you ever wanted to style the checkboxes, radio buttons in a Caldera Form? This is easy with the Caldera Form Styler widget. Styling set for the form under General tab will be applied to checkboxes, radio buttons by default. You can set different styles by selecting the Override Current Style option. You have various color and style options under Radio & Checkbox tab.

Gradient color / Image background options for submit button

Now you can highlight the submit button with an attractive design. All options are available under the Submit Button tab. You can set background color/image/gradient for the normal and hover submit button. Other colors and Box Shadow options add a finishing touch to the button.

Different styles for Success and Error messages

Success / Error Message options allow setting colors for Error Field Message and Form Success Validation. The option Error Field Validation allows settings different colors for the fields that have an error.

Manage space between the fields

You can manage space between input fields. You can also manage the bottom spacing for Label and Description. These options are available under the Style tab.

Is Ultimate Addons for Elementor Compatible with the Latest Elementor/Elementor Pro?

After the recent update of Elementor v3.1, they have introduced a compatibility tag to ensure the third-party addons like ours will be up-to-date with the latest versions of Elementor and Elementor Pro.

Reference for compatibility doc – [Link here]

So there』s no need to worry about any compatibility issues as our developers periodically test our plugins like Ultimate Addons for Elementor, Elementor – Header Footer & Blocks.

If in case, we notice an update is required, we shall quickly release an update.

Apart from that, the Ultimate Addons for Elementor plugin follows a 15 days release cycle for every release, which will also update the compatibility tag with the latest versions of Elementor.

If in case, you find any minor/major issues while updating our plugins to the latest versions. Feel free to quickly open a ticket through our Support Portal and we shall take care and help you out accordingly.

Introducing Countdown Timer widget

The Countdown Timer widget of Ultimate Addons for Elementor will allow you to add and design beautiful Countdown Timers on your site even if you don』t have the Pro version of Elementor. You will also have the option of creating a Recurring timer among other timers like Fixed, Evergreen Timer using this widget.

Here are key features for the Countdown Timer widget –

The Countdown Timer widget can display Fixed, Evergreen, Recurring Countdown timersChoose the Action after Expiry among Hide, Show Message, Redirect, or NoneCustom Labels fields for Days, Hours, Minutes, Seconds Create custom layouts from Circle, Square, Rounded or None Display Flash Animation to show urgency before your Countdown is about to expireResponsive support for the Timer to display the Countdown in a single column

Below are the settings available for the Countdown Timer widget –

Timer Type

Under the Content Tab, you will see three options –

General

The first option under this field is Type using which you can choose the Type of Timer you want to display on your page. This field also has an option to add the Due Time when your timer will expire.

After Expire

Here you will have the option to choose which action to perform once your timer expires. Based on the Action you will be shown a field below it. For example, if you select the Redirect option you will have the option to enter the URL in the below field. This Redirect URL will redirect the user to the URL provided after the timer expires. Note: These Actions will only work when you are on the front end.

Display Labels

You have the option to display the default labels below your timer or you can add custom Labels or even hide them completely.

Note: UAE gives you the option to translate widget strings with WPML easily. Note that default labels can not be translated as they come embedded in code and they won』t be available with WPML for the translation. While you can translate custom labels added to the timer.

Layout

Under the Layout tab, you will see three options –

Select Style: Using the option under this setting you can select the Style from Square(default), Circle, Rounded, NoneSeparator: This is a toggle field using which you can disable the : separator between the timer digitsFlash Animation: Need to create a sense of urgency? This field will allow you to enable Flash Animation and a Start Animation Before field below it using which you can enter the minutes before which the Flash Animation will start flashing.

Countdown Items

Under Countdown Items section you will see the following important options –

Container Width: This option will allow you to set the width for the Countdown Timer itemsSpacing between items: Need to manage the spacing between the items? This option will help you manage the sameSpacing between digits and labels: To increase the space between digits and labels of the Countdown timer, you can use the slider in this option to increase the same as requiredResponsive Support: Does the Timer digits look a bit too congested? Enabling this option will make your Countdown items in a column on responsive devices

You also have the option here to change the Background Color, Border Style, and Padding of the Countdown Items.

Digits and Labels

These two are different sections and allow the option to add Typography and color for the Labels and Digits of the Countdown Timer fields.

Note: Make a note that the separator color will be inherited by the color of the digits.

Unable to See Caldera Form Styler Widget?

Caldera Form Styler widget allows you to design your form beautifully. If you are not able to see this widget in the UAE』s widget list please check the following things –

If Ultimate Addons for Elementor (UAE) plugin is updated to v1.32.0 and above. This version will deprecate the Caldera Form Styler widget. As per the official statement from Caldera Forms, the plugin will be retired on 31 Dec 2021. So Caldera Form Styler widget won』t be available for new users after UAE v1.32.0.Caldera Form plugin is installed and activated. The Caldera Form Styler widget totally depends on the Caldera Forms plugin and will not be available unless the Caldera Form plugin is installed and activated.Caldera Form Styler widget is activated from Dashboard > Settings > UAE.

Filter/Actions for Timeline Widget

Filters

Filters available for Timeline widget are listed below.

HELPS TO MODIFY THE NUMBER OF PAGES WHILE INFINITE LOADING.

add_filter( 'uael_timeline_infinite_limit', function( $change_page_limit ) {
// Modify the number of pages while infinite loading.
return $change_page_limit;
}, 10, 1 );