Author 詩語

Video Widget

UAE』s Video Widget use an innovative optimization technique. It provides a smart way for embedding YouTube, Vimeo videos to your page without sacrificing page speed.

Note – As per the deprecation announcement of the showinfo and rel parameter, there are a few changes in the YouTube API that has affected how this video widget will act.

You cannot put off the video information such as the channel name and video title.You will not be able to disable related videos from being shown.

With this change in the YouTube API, we』ve modified the Suggested Videos option and replaced it with Related videos option that will let you select the source of the videos. You can refer to the article here for more details.

Following are the key features that make the video widget of the Ultimate Addons for Elementor unique.

Loading Time Optimization – Widget embeds the thumbnail image of the YouTube/ Vimeo video instead of the actual video.Custom Thumbnail Image – Set a nice thumbnail image for video with overlay color.Play Button Customizations ( Supports Image, Icon, Hover Effects ) – Set icon or image as a play button with hover animations.

Here is a comparison between page speed – Embedding video with Traditional way vs Embedding video with UAE』s Video Widget.

The widget allows embedding video from YouTube and Vimeo. Before getting started, make sure to enable widget from UAE settings. (?)

Video Options Available with Video Widget –

YouTube VideoVimeo VideoWistia Video

Video Options For YouTube video

Autoplay: Video will play automatically on the page load.Related Videos From: It has two options – Current Video Channel and Any Random Video. Current Video Channel will display related videos from the same YouTube channel. Any Random Video will display random videos on the basis of public favorite videos. Note that suggested videos cannot be turned off completely.Player Control: Choose whether to display controls like play, pause, volume controls, full screen and more.Mute: Allows muting the video.Modest Branding:  Prevent the YouTube logo from displaying in the control bar.Privacy Mode: This prevents YouTube to store the visitor』s information on your website unless they play the video.

Video Options For Vimeo Video

Autoplay: Video will play automatically on the page load.Loop: Choose a video to play continuously in a loop. The video will automatically start again after reaching the end.Intro Title: Displays title of the video.Intro Portrait: Displays the author』s profile image.Intro Byline: Displays the author』s name of the video.Controls Color: Set color for the video player controls. (?)

Video Options for Wistia Video

Link & Thumbnail Text: Unlike the YouTube and Vimeo video type, here you will need to Copy the Link & Thumbnail text from the respective Wistia』s video.Autoplay: Video will play automatically on the page load.Loop: This would let the video to play continuously Reset: This would get back to the beginning of the video displaying the video and thumbnail, make sure if they are set to display on load.Mute: Mutes the volume of the VideoShow Playbar: Displays the progress bar of the video in the bottom Playbar.Enable Double Click on Mobile: This option needs to be enabled if you are unable to see custom thumbnail or overlay color on mobile. Refer to this article for more information.

How to Get a Valid Link for Wistia Video

To get the Wistia video』s link you will need to go to your Wistia video, right-click on it and choose the last option of 「Copy Link and Thumbnail」. Now copy the same and paste it in this field.

Note: If you change the thumbnail or link from the respective Wistia』s video, make sure you paste the Link & Thumbnail text in this field again here.

How to set thumbnail image for video?

You can set a nice thumbnail image for the video that will display before playing a video.

The setting can be found under Content (tab) > Thumbnail & Overlay.

Turn the Custom Thumbnail option ON. Set an Image and adjust the Overlay Color.

How to style Play Button?

The setting can be found under Content (tab) > Play Button. 

Play Button can be set as Image or Icon.

For Image 

Choose an appropriate image from the Media Libary.Hover Animation option adds a cool look to the play button.

For Icon 

Select an icon from the drop downYou can set a normal and hover color, text shadow for the icon.Hover Animation option is available under HOVER tab.

Set specific play time for video

The widget allows entering –

Start and End time for YouTube videoStart time for Vimeo video

When a user clicks to play the video, it will start playing from the defined start time and will stop at the defined end time.

Note:

1. To embed videos, enter a full link for the video.For example,

For YouTube video –✔️ Valid link: https://www.youtube.com/watch?v=aqz-KE-bpKQ&t=3s✖️ Invalid link:   https://youtu.be/aqz-KE-bpKQ

For Vimeo video –✔️ Valid Link: https://vimeo.com/274860274✖️ Invalid Link: https://vimeo.com/channels/staffpicks/274860274

2. After adding another widget, to edit the Video Widget again, click on the pencil icon in the right upper corner. (?)

Self Hosted Video Option

From the Ultimate Addons for Elementor v1.29.1 we introduce this option. Which lets you display the videos right from your Media Library or external sources with just a few clicks.

Key Features –

Newly added option for self-hosted video type –

External URL: Insert an external URL of the videoChoose File: If there』s no External video link of the video you can select an existing video file from the Media Library.

You will simply need to select the Video Type as Self Hosted from the Previous options of Video Type like Wistia, YouTube, Vimeo.

In this video type, it includes settings for all the video type. The settings includes all the Video Options – Lightbox, Autoplay, Loop, Player Control, etc.

You can have the option to set a Thumbnail and use the other settings for this Video type too.

Video Schema

This widget provides an inbuilt schema option for all video types – YouTube, Vimeo, and Wistia.

Adding schema for your video helps it to rank better in search results. It also allows search engines to display a 「rich snippet.」 A rich snippet is detailed information displayed with your search results like title, description, date, and thumbnail. Just like shown below –

Adding schema manually using code is a tedious task. Ultimate Addons offers ready-made fields to add schema for your video. 

Schema options you see in Video widgets help you to add a VideoObject schema to your video. 

You will find this option under the Content > Video Schema. Just enable the option and fill in the details. 

Here is a list of all required fields – 

Vide titleVideo descriptionVideo thumbnailVideo upload date and time

Note that all fields are mandatory. Missing any of the above fields might generate errors in schema code. So in such a case, you will observe a notice in the editor and the schema will not be generated until you fill all required fields. 

Once you fill in all the required information, the required schema code will be automatically generated and added to the page. 

You can test the schema using Google』s Rich results testing tool or Structure data testing tool. In these tools just enter the page URL or page source code. 

Note:

In case you have used a custom thumbnail for the video, the default thumbnail field under the Video schema section will not be visible.

The custom thumbnail you used under Content > Thumbnail & Overlay > Custom Thumbnail > Select Image, will be used as a video thumbnail for schema instead of the default thumbnail from Video Schema. 

If you choose to set a custom thumbnail but miss to select an image for it, you will observe a notice in the editor.

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

Styling Checkbox / Radio / Acceptance control in Contact Form 7 Styler of UAE

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

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

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

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

Not able to style these fields? Here are some troubleshooting tips.

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.

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

Unable to Style Checkbox / Radio Buttons / Acceptance Control using Contact Form 7 Styler of UAE

The Contact Form 7 Styler of the Ultimate Addons for Elementor allows you to style the radio buttons, checkboxes and acceptance too. Here is an article you can refer to.

In case you are unable to style them, here are a few things you need to check.

1. Make sure that our checkbox/radio field has 「use_label_element」 tag in Contact Form 7 source code.

2. Please check that your checkbox / radio field should not have 「label_first」 tag in Contact Form 7 source code.

3. Please make sure your acceptance field has condition statement in Contact Form 7 source code.

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

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?

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.

How to get Google Places API key?

Google Places API key allows connecting your project to the website. With the help of this, one can fetch Google reviews for your business. To display Google reviews with Business Reviews widget, the first thing you would need to set is the Google Places API key.

Google Maps Platform have detailed article about how to get API key. But below are quick and required steps to get API key –

Step 1 – Go to your Google API Console

Step 2 – From the 『Select a Project』 drop-down menu, select or create the project.

Step 3 – On the project page click 『ENABLE APIS AND SERVICES『

Step 4 – Type 『Places API『 in the search area. Select the 『Places API『 from search results and click the 『ENABLE『 button

Step 5 – On the 『Places API』 page select 『Credential『 tab and 『Create credential『 / 『API key『 option

Step 6 – Copy the created API key. Now, from the WordPress dashboard, visit Settings > UAE > Business Reviews > Settings, and paste the key under the Google Places API Key section.

Note: Google has now made it mandatory to have an active billing account associated with your API key. Click here to enable billing.