Introducing a New Login Form Widget for Elementor

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.

Filters/Actions for Posts Widget

Filters/Actions for Posts Widget

#Actions

Actions available for Posts Widget are listed below.The parameters used in the below actions/filters are one of the below-listed options. The detailed description of these parameters is as specified below.

$settings : This is the entire setting array for the particular dragged dropped Post Widget. One can add conditional logic as per the selected options in the settings.
$post_id : This is the single post ID in the loop. This is useful when one wants to fetch post specific data and display it.

uael_posts_before_outer_wrap

Fires at the beginning of the post outer wrap
function summary_wrap_before( $settings ) {
echo '

I am at the beginning of the post outer wrap.

';
}
add_action( 'uael_posts_before_outer_wrap', 'summary_wrap_before', 10, 1 );

uael_posts_after_outer_wrap

Fires at the end of the post outer wrap
function summary_wrap_after( $settings ) {
echo '

I am at the end of the post outer wrap.

';
}
add_action( 'uael_posts_after_outer_wrap', 'summary_wrap_after', 10, 1 );

uael_posts_before_wrap

Fires at the beginning of the post wrap
function post_wrap_before( $settings ) {
echo '

I am at the beginning of the post wrap.

';
}
add_action( 'uael_posts_before_wrap', 'post_wrap_before', 10, 1 );

uael_posts_after_wrap

Fires at the end of the post wrap
function post_wrap_after( $post_id, $settings ) {
echo '

I am at the end of the post wrap.

';
}
add_action( 'uael_posts_after_wrap', 'post_wrap_after', 10, 2 );

uael_single_post_before_wrap

Fires at the beginning of the single post wrap
function single_post_before( $post_id, $settings ) {
echo '

I am at the beginning of the single post wrap.

';
}
add_action( 'uael_single_post_before_wrap', 'single_post_before', 10, 2 );

uael_single_post_after_wrap

Fires at the end of the single post wrap
function single_post_after( $post_id, $settings ) {
echo '

I am at the end of the single post wrap.

';
}
add_action( 'uael_single_post_after_wrap', 'single_post_after', 10, 2 );

uael_single_post_before_inner_wrap

Fires at the beginning of the single post inner wrap
function single_post_inner_before( $post_id, $settings ) {
echo '

I am at the beginning of the single post inner wrap.

';
}
add_action( 'uael_single_post_before_inner_wrap', 'single_post_inner_before', 10, 2 );

uael_single_post_after_inner_wrap

Fires at the end of the single post inner wrap
function single_post_inner_after( $post_id, $settings ) {
echo '

I am at the end of the single post inner wrap.

';
}
add_action( 'uael_single_post_after_inner_wrap', 'single_post_inner_after', 10, 2 );

uael_single_post_before_content_wrap

Fires at the beginning of the single post content wrap
function single_post_content_wrap_before( $post_id, $settings ) {
echo '

I am at the beginning of the single post content wrap.

';
}
add_action( 'uael_single_post_before_content_wrap', 'single_post_content_wrap_before', 10, 2 );

uael_single_post_after_content_wrap

Fires at the end of the single post content wrap
function single_post_content_wrap_after( $post_id, $settings ) {
echo '

I am at the end of the single post content wrap.

';
}
add_action( 'uael_single_post_after_content_wrap', 'single_post_content_wrap_after', 10, 2 );

uael_single_post_before_thumbnail

Fires at the beginning of the post thumbnail
function single_post_thumb_before( $post_id, $settings ) {
echo '

I am at the beginning of the post thumbnail.

';
}
add_action( 'uael_single_post_before_thumbnail', 'single_post_thumb_before', 10, 2 );

uael_single_post_after_thumbnail

Fires at the end of the post thumbnail
function single_post_thumb_after( $post_id, $settings ) {
echo '

I am at the end of the post thumbnail.

';
}
add_action( 'uael_single_post_after_thumbnail', 'single_post_thumb_after', 10, 2 );

uael_single_post_before_meta

Fires at the beginning of the post meta
function single_post_meta_before( $post_id, $settings ) {
echo '

I am at the beginning of the post meta.

';
}
add_action( 'uael_single_post_before_meta', 'single_post_meta_before', 10, 2 );

uael_single_post_after_meta

Fires at the end of the post meta
function single_post_meta_after( $post_id, $settings ) {
echo '

I am at the end of the post meta.

';
}
add_action( 'uael_single_post_after_meta', 'single_post_meta_after', 10, 2 );

uael_single_post_before_terms

Fires at the beginning of the post terms
function single_post_terms_before( $post_id, $settings ) {
echo '

I am at the beginning of the post terms.

';
}
add_action( 'uael_single_post_before_terms', 'single_post_terms_before', 10, 2 );

uael_single_post_after_terms

Fires at the end of the post terms
function single_post_terms_after( $post_id, $settings ) {
echo '

I am at the end of the post terms.

';
}
add_action( 'uael_single_post_after_terms', 'single_post_terms_after', 10, 2 );

uael_single_post_before_comments

Fires at the beginning of the post comments
function single_post_comment_before( $post_id, $settings ) {
echo '

I am at the beginning of the post comments.

';
}
add_action( 'uael_single_post_before_comments', 'single_post_comment_before', 10, 2 );

uael_single_post_after_comments

Fires at the end of the post comments
function single_post_comment_after( $post_id, $settings ) {
echo '

I am at the end of the post comments.

';
}
add_action( 'uael_single_post_after_comments', 'single_post_comment_after', 10, 2 );

uael_single_post_before_date

Fires at the beginning of the post date
function single_post_date_before( $post_id, $settings ) {
echo '

I am at the beginning of the post date.

';
}
add_action( 'uael_single_post_before_date', 'single_post_date_before', 10, 2 );

uael_single_post_after_date

Fires at the end of the post date
function single_post_date_after( $post_id, $settings ) {
echo '

I am at the end of the post date.

';
}
add_action( 'uael_single_post_after_date', 'single_post_date_after', 10, 2 );

uael_single_post_before_author

Fires at the beginning of the post author
function single_post_author_before( $post_id, $settings ) {
echo '

I am at the beginning of the post author.

';
}
add_action( 'uael_single_post_before_author', 'single_post_author_before', 10, 2 );

uael_single_post_after_author

Fires at the end of the post author
function single_post_author_after( $post_id, $settings ) {
echo '

I am at the end of the post author.

';
}
add_action( 'uael_single_post_after_author', 'single_post_author_after', 10, 2 );

uael_single_post_before_title

Fires at the beginning of the post title
function title_before( $post_id, $settings ) {
echo '

I am at the beginning of the post title.

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

uael_single_post_after_title

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

I am at the end of the post title.

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

uael_single_post_before_excerpt

Fires at the beginning of the post excerpt
function excerpt_before( $post_id, $settings ) {
echo '

I am at the beginning of the post excerpt.

';
}
add_action( 'uael_single_post_before_excerpt', 'excerpt_before', 10, 2 );

uael_single_post_after_excerpt

Fires at the end of the post excerpt
function excerpt_after( $post_id, $settings ) {
echo '

I am at the end of the post excerpt.

';
}
add_action( 'uael_single_post_after_excerpt', 'excerpt_after', 10, 2 );

uael_single_post_before_cta

Fires at the beginning of the post cta
function cta_before( $post_id, $settings ) {
echo '

I am at the beginning of the post cta.

';
}
add_action( 'uael_single_post_before_cta', 'cta_before', 10, 2 );

uael_single_post_after_cta

Fires at the end of the post cta
function cta_after( $post_id, $settings ) {
echo '

I am at the end of the post cta.

';
}
add_action( 'uael_single_post_after_cta', 'cta_after', 10, 2 );

#Filters

Filters available for Posts Widget are listed below.The parameters used in the below filters are one of the below-listed options. The detailed description of these parameters is as specified below.

$settings : This is the entire setting array for the particular dragged dropped Post Widget. One can add conditional logic as per the selected options in the settings.
$post_id : This is the single post ID in the loop. This is useful when one wants to fetch post specific data and display it.
$query : The WP_Query object.
$classes : The array of classes.
$date_format : This is the date format in terms of 「F j, Y」

Helps modify Query Arguments.

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

Helps to add extra classes to Post Wrapper.

add_filter( 'uael_wrapper_classes', function( $classes ) {
// Modify the classes array here.
array_push( $classes, 'my-new-class' );
return $classes;
} );

Helps to add extra classes to Post outer Wrapper.

add_filter( 'uael_outer_wrapper_classes', function( $classes ) {
// Modify the classes array here.
array_push( $classes, 'my-new-class123' );
return $classes;
} );

Helps modify Post Permalink.

add_filter( 'uael_single_post_link', function( $link, $post_id, $settings ) {
// Modify the link here
$link .= '&utm_campaign=post_grid';
return $link;
}, 10, 3 );

Helps modify Post Date Format.

add_filter( 'uael_post_the_date_format', function( $date, $post_id, $date_format ) {
// Modify the date here
return $date;
}, 10, 3 );

Helps modify Post Meta Sequence.

add_filter( 'uael_post_meta_sequence', function( $sequence ) {
// Modify the date here
// The below array is the actual sequence, you can swap the elements to have the desired sequence for meta
return array( 'author', 'date', 'comments', 'cat', 'tag' );
});

Helps Linking/Unlinking the taxonomy badge.

add_filter( 'uael_link_taxomony_badge', function( $value ) {
// Set the value to "yes" to link the Taxonomy badge.
// Set the value to "no" to unlink the Taxonomy badge.
$value = 'yes';
return $value;
} );

Helps modify Filterable Tabs.

add_filter( 'uael_posts_filterable_tabs', function( $filters, $settings ) {
// Modify the array here.
return $filters;
}, 10, 2 );

Helps modify the terms of Taxonomy Badge.

add_filter( 'uael_posts_tax_filter', function( $terms ) {
// Modify the array here.
return $terms;
}, 10, 2 );

Helps modify the post date in the event skin.

add_filter( 'uael_post_event_date', function( $date, $post_id, $date_format ) {
// Modify the date here
return $date;
}, 10, 3 );

Helps modify the post category meta.

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

Helps modify the offset top for AJAX pagination.

add_filter( 'uael_post_offset_top', function( $offset_top ){ // Modify the offset top here return $offset_top;}, 10, 2);

Introducing User Registration Form Widget

Introducing User Registration Form Widget

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

Here are key features for the User Registration Form widget –

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

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

Form Fields

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

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

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

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

After Register Actions

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

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

Redirect

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

Auto-Login

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

Send Email

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

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

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

General Settings

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

Register Button

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

Success and Error Messages

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

Style the User Registration Form

Under the Style tab, we have different sections like –

Spacing: You can manage the spacing between the fields,

Label: Set the text color and Typography from here.

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

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

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

How to Exclude WooCommerce Products with Woo-Products Widget?

How to Exclude WooCommerce Products with Woo-Products Widget?

Many times, you would want to display all the products. But, at the same time, you might want to exclude some particular products. You can do this using the Woo – Products Widget.
The Query Builder of the Woo – Products Widget allows you to either display All Products or filter them as per your requirements. You can exclude particular products from a particular list using options listed under Query tab.
Below are the available options-

Exclude Product

Start typing the product name and select it manually to exclude from the product list.
For Example- If available products are X, Y, and Z. Selecting All Products option will display X, Y, Z products. But if you wish to exclude Y product then type Y in the text box.
It will exclude the Y product from the list and will display only X and Z.

Exclude Current Product

If you wish to exclude currently displaying product from all product list to avoid a duplicate appearance, use this option. Set the toggle to exclude current product.
For Example- If available products are X, Y, Z and they come under same category A. If products from category A set to display on all single product page. Then while viewing X product, all products including X will be displayed at the bottom of the page. To avoid the duplicate appearance of X opt to Exclude the Current Product so that only Y and Z will be displayed on X product page. Similarly, Y will be excluded from its single product page and X, Z will be displayed.

How to Create a User Registration Form using Elementor?

How to Create a User Registration Form using Elementor?

Looking to create a User Registration Form using Elementor?

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

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

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

Now, let』s see the steps –

Step 1: Create a User Registration Form Using the Widget

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

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

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

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

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

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

Step 2: Configure Your Form Settings

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

New User RoleChoose After Registration Actions

Let』s see them in detail –

New User Role

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

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

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

Choose After Registration Actions

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

Redirect after RegisterHide after Register Auto LoginSend Email

Let』s see them in detail –

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

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

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

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

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

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

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

Step 3: Add the User Registration Form to Your Website

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

Refer this gif on how you can add the same –

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

Example: User Registration Form on a WooCommerce Page

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

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

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

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

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

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

Conclusion:

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

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

Content Toggle Widget

Content Toggle Widget

This widget allows switching between two types of content, saved templates or pages. Here is the demo. Below is the detailed video –

Key features –

You can display content / saved section / saved pageChoose which content section to display by defaultDifferent switch stylesHeading and toggle switch layout ( inline/stack)Responsive option for inline layoutDynamic field support for heading Styling for each part of the widget

Add content for toggle switch

When user clicks on the toggle, a content will be switched. You would need to enter content for both sides. This content can be –

TextSaved section Saved page

Default content display and toggle switch styles

Between both contents you can choose which content to display by default. To set this go to Style > Switcher > Default Display and select content.

Different styles for the toogle button can be found under Style > Switcher > Switch Style. You can completely customize the toggle switch with available options.

Layout and other styling options for headings

Headings can be set inline or stack. If you set it to display inline, on responsive you can stack them with a responsive option. These options are available under Style > Headings > Layout. Headings tab will contain all option to customize both headings completely.

Styling Checkbox / Radio / Acceptance controls in WPForms Styler widget

Styling Checkbox / Radio / Acceptance controls in WPForms Styler widget

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

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

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

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

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

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

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

Image Gallery Widget

Image Gallery Widget

UAE』s Image Gallery widget lets you create an attractive gallery with some advanced features.

It supports default WordPress Gallery. You can use WordPress Gallery features like uploading an image with simple drag-drop, selecting multiple images and re-ordering them.

You can take a look at our demo to see how the widget displays image gallery beautifully – Demo Page.

Before getting started, make sure to enable widget from UAE settings. (?)

Some Rich features of the Widget are –

Filterable Image Gallery

This feature allows categorizing images. It displays all image categories with Filterable Tabs. Clicking on the tab will display images assigned to the respective category. Images will display with a default shuffling animation. Read how to design filterable image gallery?

Image effects like Instagram

Now, use filters like Instagram on your website』s image gallery. Filters can be applied to the original image, and also as a hover effect. You can also manage image overlay color. The setting is available under Style (tab) > Thumbnail >  Image Effect

Grid / Masonry/ Justified / Carousel Layout

Choose the best layout to make your gallery look stunning.

Grid: This layout will display products in 「rows and columns」 structure.Masonry: This layout adjusts the images in columns according to size. Hence reduces the size of the image gallery on the web page.Justified: Set all images in the same row at the same height. It fills all spaces between the rows. Read more about this layout in the article here.Carousel: Images will display in a nice slider.

Different Carousel settings give total control of the slider.

Scale effect for normal and hover image

You can now use the Scale effect that resizes (enlarges) the image on hover. This setting  is available under Style (tab) > Thumbnail >  Scale.

Show Image Caption

It allows you to add a trendy caption for the image to make it more descriptive. Enable the option from Content (tab) >  Additional Options > Show Caption. See how to add a caption for the image?You can completely customize the image caption by applying a background color, text color, padding, vertical alignment, and typography. This setting is available under Style (tab) >  Caption

Caption Below Image of Lightbox

With the update of UAE v1.17.0, you will now be able to add a caption below the Lightbox Image. Also, you will be set Color, Typography, and also manage the Caption bottom spacing respective to the Image.

You can find this option from Content (tab) > Lightbox > Show Caption Below Image. See how to add a caption for the image?

Advanced Lightbox Actions

Under the Lightbox section, you will find another option which provides the following option – Zoom, Social Share, Slideshow, Full Screen, Download, Gallery

This would allow Images with the above-mentioned options in the lightbox, allowing users to Share, play the Images on Slideshow, view the Images on Full Screen, or even Download them. You will find these actions in the top right corner of the Lightbox.

Below is the screenshot where you will find this option –

Add a custom link to the image

Now it』s easy to link the image with a custom URL. The setting is available under Content (tab) >  Additional Options > Click Action. See How to open a webpage on the click of an image?

Ability to open a lightbox on the click of the image

You can choose to display the image in a lightbox when the user clicks on it within the gallery. This gives a closer view of the image. This setting  is available under Content (tab) >  Additional Options > Click Action.

Totally Responsive Gallery

Manage view of the gallery on responsive devices easily with toggle.

Note: If you have enabled a Filterable Gallery for justified layout, and not able to see images under filterable tabs. Then check if Last Row Layout option for justified image gallery is set to hide. Change it to Justify to display images under filterable tabs.

Related Documents –

How to Set Icon on Image Hover?

How to Display Specific Category Tab as a Default on Page Load?

How to activate Ultimate Addons for Elementor license?

How to activate Ultimate Addons for Elementor license?

Ultimate Addons for Elementor is a plugin that extends the elementor page builder and adds more widgets in it.
Once you install the plugin you can register UAE license key to get remote auto updates, support and unlocking other goodies for your website.
You can refer to the article here to know where you can find the License key.
To activate license of Ultimate Addons for Elementor, navigate to WordPress Dashboard > Plugins > Ultimate Addons for Elementor > Activate License.

Enter your license key in the popup box and Activate your license.

Woo – Products Widget

Woo – Products Widget

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

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

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