Ultimate Addons for Elementor 文件

How to Import Starter Templates and Section Blocks Directly From Elementor Editor? (Know Elementor Popup)

Starter Templates plugin offers beautiful ready-made full-website templates to save your designing time. It also comes with single-page templates. You can import them from the dashboard under Appearance > Starter Templates.

But do you know that you can import single page templates directly from Elementor editor. In addition, you can also have a stunning range of readymade section blocks.

The option that allows you to import page and section blocks right inside Elementor editor is called – Elementor Popup in Starter Templates.

Let』s see how you can use the Elementor popup option to import templates –

Where Can I Find the Option?

In the Elementor editor, you will observe a Starter Templates icon as shown below.

Clicking on the Starter Templates icon will open templates and blocks library.

What Does It Offer?

Page templates – You will get single-page templates designed with beautiful sections. This can be suitable as your about page, the home page, contact page, and so on. These templates are the same as what you see under Appearance > Starter Templates – for Elementor page builder.

Section Blocks – You also get a number of blocks (single section) designed for various categories like about, team, testimonials, CTA, FAQ, services, etc. They are available in two color modes – dark and light.

You will also observe a search option to spot the required template/block.

How Can I Use It?

Choose your favorite template or a block. You will get two options while importing it –

1. Import Template/Block – Choosing this option will directly import the template on your page.

2. Save Template/Block – Clicking this button will save the selected template/block as a saved template/section in the Elementor library. You can find it in the dashboard under (Elementor) Templates > Saved Templates.

Importing 『Premium』 Page Template

Starter Templates is a free plugin. But we also offer a premium version of it.

In case while browsing a templates list you see a 『Premium』 tag, it means it is available with the premium version of the plugin.

Premium Starter Templates plugin is available with Essential Bundle and Growth Bundle. If you already own one of these bundles you can get the zip file and a license key from your store account and activate it on the website to access premium templates.

Creating a Sticky Header With Elementor Header & Footer Builder Plugin

Elementor Header & Footer Builder is a free WordPress plugin that allows creating custom header, footer and blocks easily.

You can design a section in Elementor and set it as a header/footer or use it as a custom block on the website. You can even choose specific pages/posts and other locations to display this custom section.

In this article we will explain how you can create header with this plugin and make it sticky in easiest way.

We have divided this article in two parts –

Designing a section with Elementor and set it as a header.Make this header sticky.

In case you already know how to create header with Elementor Header & Footer Builder Plugin you can directly jump to second part.

Creating Custom Header

Before beginning make sure you have Elementor plugin activated. Then follow the steps below –

Step 1 – Install and activate the Elementor Header & Footer Builder plugin from WordPress dashboard.

Step 2 – Visit Appearance > Elementor Header & Footer & Builder > Add New.

Step 3 – Give a nice title to the section. Set 『Type of Template』 as Header. You can select display rules. That means your custom header will be displayed only on chosen location.

Step 4 – Now open the Elementor editor and design a custom header as per your requirement.

Save the design and your custom header will display at selected location.

Once your custom header is up follow the next part to make it sticky.

Making Custom Header Sticky

Step 1 – Now edit the above header in Elementor and add a Custom ID to the outermost section (here we are using my-custom-id ).

Step 2 – Now add following custom CSS. You can add it to the customizer under the 『Additional CSS』 section or use any external plugin that provides an area to add custom CSS.

#my-custom-id.elementor-section{
position: fixed;
left: 0;
width: 100%;
}

Note – In the above code, please replace 『my-custom-id』 with your ID.

This step will make your header stick to the top.

IFurther, if you want to make your header sticky as soon as users scrolls the page add following JS and CSS code.

First, add the following JS snippet in the functions.php file of your child theme. In case you are not sure about how to install a child theme, kindly contact your theme author.

// WordPress custom function
function my_custom_function(){
?>

window.onscroll = function() {myFunction()};
// Get the header
var header = document.getElementById( "my-custom-id" );
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if ( window.pageYOffset > 40 ) {
header.classList.add( "hfe-sticky" );
} else {
setTimeout(function(){
header.classList.remove( "hfe-sticky" );
}, 100);
}
}

<?php
}
add_action('wp_footer', 'my_custom_function');

Then add following CSS to customizer under the 『Additional CSS』 section or use any external plugin that provides an area to add custom CSS. [In case you have added previous CSS at Step 2, please remove it and add following one].

#my-custom-id.elementor-section.hfe-sticky{
position: fixed;
left:0;
width:100%;
animation:slide-down 0.8s;
}
@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 0.9;
transform: translateY(0);
}
}

@media( max-width: 767px ){

#my-custom-id.elementor-section.hfe-sticky{
top: 0;
}
}

That』s it! Here is how your custom sticky header will look like –

Extra – More Customization using Custom CSS

In case you want to apply some styling for your sticky header you can use Custom CSS ID we added in Part-2 Step-1 (i.e. my-custom-id). Below is the template you will need to use.

#my-custom-id.elementor-section.hfe-sticky{
//your code here
}

Note – Replace 『my-custom-id』 with your ID and add the necessary code inside.

Here is an example that shows how you can use above CSS snippet –

Consider you need to change the background color of the header after it sticks to the top. Then CSS you will add is –

#my-custom-id.elementor-section.hfe-sticky{
background-color:red;
}

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.

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.

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

Social Share Widget

The Ultimate Addons for Elementor introduces the Social Share widget in v1.30.0 and above. This will now enable you to share your page or post on different social media with just a click of a button. Combined with lots of options, let』s take a closer look.

Key Features –

Easily share the page/post across different social media platformsChoose styles for the Social Share buttons from Icon & Text, Icon, or Text Display Total share count of Facebook, Twitter, Pinterest, Reddit, Buffer, Telegram, Tumblr, and others.Display Social Proof as Fake Share Count with display type Icon & TextSelect from different default Skin Options from – Gradient, Flat, Framed, Minimal, and BoxedDisplay a Floating share buttonAdd Animation to buttons

How to Add Social Share buttons on Elementor Page?

Step 1: First, search the panel for the 「Social Share」 widget, in the Elementor Editor, and drag & drop the widget onto the page.

Step 2: In the Content tab, choose the social networks you want to display on your pages/posts. You can also select among other options like

Step 3: To display the share counter, enable the 『Share Count』 setting.

Step 4: If you want to change the style of the buttons, go to the Style tab of the Social Share widget, where you can set the space between buttons, the button size, typography and more.

Let』s see the settings in brief and how to make better use of it —

Social Share Options

The first section of the Social Share widget allows you to select the Social Networks on which your posts can be shared with.

Under each Social Icon you can select another Social Network if required or also have an option to add an Custom Label.

Other options in the section provide better visual changes to the location, Icon Position, Skin Type, etc.

Style: This option provides option to display the Social Share with Icon & Text, or simply just display the Icon or Text.

Icon Position: Select from the Before or After position of your Icon besides the Text.

Skin: Choose from pre-defined options like Gradient, Flat, Framed, Minimal, and Boxed.

Shape: Options like Square, Rounded or Circle for quick styling

Position: This option will help make your Social Share buttons be displayed Inline or Float.On enabling this option you will notice some additional options to align the Floating buttons to the Left/Right, Vertical/Horizontal Position.

Alignment: This provides the Left/Right/Center options for the default Inline Position.

Target URL: You can also set the Target URL for the Icon to reach the Current Page/Custom URL.

Share Count

This section allows enabling the Social Count for your posts.

Show Fake Count: This option allows enabling the Fake Count values. You can set a default value, or even set the limit after which it is hidden and the Original count is displayed.

Fetch Share Count From: Based on the Social Networks on which has more shares you can select the same to display the total count.

Style: This option displays an Share Icon/Text based on the selection and can be styled using the Size, Icon Color, etc.

Styling

The Style tab of the Social Share widget provides the spacing options for Columns Gap/Rows Gap/Button Size/Button Height/Icon Size/Typography and Color.

Frequently Asked Questions

How to display share count for Facebook?

Read more here.

What are the Social Media for which share count can be Fetched?

FB, Pinterest, Twitter, Reddit, Tumblr, VK, OK, Buffer.

What is the Fake Count?

Enter the fake count and fake count limit. Once the original count reaches this limit the fake count will be hidden. Only the original count will be shown after this limit reaches. Until then it shows the addition of fake count and fake count limit.

How to Resolve Pinterest』s 「Something went wrong」 error?

Are you getting following error? —

You will need to simply add a featured image to the post/page from the Featured Image section.

Email Share Button showing blank screen?

Please note that if you are using a webmail service such as Yahoo! Mail or Gmail it will not open these services to share it as an e-mail.

The email share button is designed to send e-mail using the installed e-mail client, such as Outlook and Thunderbird.

How to Display Share Count for Facebook with Social Share Widget?

Below are the Steps to create the Facebook Graph API for using it on Social Share widget – 

Firstly, visit the Facebook Developers page and log in if you aren』t logged into Facebook. Make sure you are not logged in using your Business Account.

Next, visit the following Explorer link.

Step 1: Visit My Apps > Create App > Build Connected Experiences > add App Display name e.g. UAE Social Share [Enter other optional data below] > Click on Create AppStep 2: Hover over the Tools menu item on the Topbar > Click on Graph API explorer. Step 3: Now see at the right sidebar, under the Facebook App > Select your App Name – UAE Social ShareStep 4: Now, just under the last option => Click on User or Page Dropdown which has Get Token > Select – Get User Access token. A Popup will be open > Continue as 『Daniel』 (Your Facebook Name) > Add necessary Permissions > Token will be generated on the Access Token field on Top.Step 5: Paste the copied token under the UAE > Settings > Social Share > Facebook API

Filter/Actions for Video Gallery Widget

Filters

Filters available for Video gallery widget are listed below.

Helps to pass extra parameter to the slick library carousel layout.

add_filter( 'uael_video_gallery_slick_options' , function( $param ) {
// Pass slick library parameter here
return $param;
});

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

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.