Author 诗语

Display Conditions

Ultimate Addons for Elementor introduces a new option to manage the visibility of any widget. You can choose to display widget, section, column based on date, time, user role, and so on. This will help you to display widgets to the target audience at the required time. It will ultimately improve the user experience.

UAE display conditions feature is available for all Elementor widgets including any third-party addons.

Let』s see how to use this option –

To find this option edit any widget, section, or column, and click on the Advanced tab. Here you will find a new option 『UAE – Display Conditions』.

Enabling conditions will open up following settings –

To and When

All display conditions will be available under the 『Conditions』 tab. You can decide the visibility of the widget, section, column primarily with these two options.

These works as extra cotrols to manage the visisbility of elements.

To: Show Element/ Hide Element – Based on conditions you are going to select, choose if you wish to show or hide the element. For example, if you choose a particular date and time, decide if you want to display or hide the element on this date and time.

When: All Conditions Met/ Any Condition Met – As name suggests, choose to display element when all conditions met or any one condition met.

Conditions

Here you can set all the display conditions. Currently there are 11 conditions available. You can set required conditions from the list.

You can add as many condistions as required. Once you set any condition, click on 『Add Item』 button to add next condition.

Let』s see all available conditions –

Date

Display or hide element on specific date.

Set Date > Is/ Is Not > Specific date

Day

Choose any day from Monday – Sunday.

User Role

Manage visibility based on the website』s user role like Administrator, Editor, Author, and so on. You also get control to display or hide elements for this selected user role.

Set User Role > Is/Is Not > Select user role.

Login Status

Set the condition for logged in or not logged in users.

To display elements for logged in users set, Login Status> Is > Logged in

To display elements for non logged in users set, Login Status> Is Not > Logged in

Browser

Choose to display/hide elements on following browsers –

Opera Microsoft EdgeGoogle ChromeSafariMozilla FirefoxInternet Explorer

Operating System

You can choose to display elements on specific operating system. Choose from a following list –

Date Range

Select a date range to display or hide elements.

Page

Choose from a list of available pages on your website.

Post

Choose from a list of available posts on your website.

Static Page

Here you can choose from static pages like homepage, 404 page, blog page, front page.

Time Span

Select a time duration to display/hide elements. You can set the start time and end time.

Request Parameter

This is a very powerful condition. Request Parameter lets you control the visibility of content based on the source URL of the users visiting your content. This option can be used for your social media, landing pages, e-mail, etc. as well as from any place on your website. 

For example, imagine that you have a landing page for a group of your products. You might like to have users interested in these products subscribe to your newsletter on your Contact page. At the same time, you don』t want to display a newsletter subscription form for other users visiting your website. You can do this using the Request Parameter.Let』s show you how to use this condition:

Step 1 – Request Parameter Setup

Navigate to the Contact page, and edit the section containing the Subscribe form (you can do this with individual widgets too). Click on Advanced > Display Conditions and select Request Parameter.

Here, you need to set the condition to 「Is」 (display target if matches) or 「Is Not」 (do not display target if matches) as needed. For our example, we selected the 「Is」 option – this means if a visitor is coming from the landing page, the form will be shown.

Then, you need to set the key and the value. This can be anything you want. Here, we will set the key as 「leads」 and value as 「newsletter」.

Step 2 – Creating And Using the Link

Now we need to create the link by adding the key and the value that we set in the previous step.

So if your Contact page URL is https://domain.com/contact, you will add key and value to the link in the following manner:  https://domain.com/contact/?key=value. The important thing to know here is that the key and the value used in the URL need to match those set in the previous step. 

Thus, the URL in our example would be https://domain.com/contact/?leads=newsletter

Now, you can use this link anywhere you need. For our example, we』ll add it to the button as shown in the image below:

That』s it – you successfully added the Request Parameter condition!

Now, visitors that click the button on the landing page (the one with the specific URL https://domain.com/contact/?leads=newsletter), will be redirected to the Contact page and will see the subscribe to newsletter form.

Any visitors coming from any other source (rest of your website, social media, etc.) will not see this form unless the same link is used on any of these other places.

ACF Field (Since UAE version 1.35.1)

You can set the conditions based on Advanced Custom Fields (ACF). Display conditions support the following ACF fields:

TextualSelect/choiceBoolean (true/false)PostTaxonomyDate/Time

To use display conditions with ACF fields, you need to have the Advanced Custom Fields plugin installed and activated. Also, you need to have at least one custom field published. To publish the custom filed, follow these steps:Step 1 – Navigate to Dashboard > Custom Fileds > Add New to add new Field Group;

Step 2 – Name your Field Group, set at least one Location rule, and set the status to 「Active」 (under the 「Settings」 Tab);

Step 3 – Now, add at least one custom field to your Field Group. Add Field Label, choose Field Type, and set other needed options based on the field type;

Step 4 – Click 「Publish」 to publish your field group.

Note:

The ACF field will be visible only on locations that match your Field Group location rule. Thus, setting your Filed Group to show if 「Post Type」 equals 「Post」, will show the ACF field only on Posts. Further, the location can be a specific post type, post or page, all posts and/or pages, logged-in users, etc.

Now that you added your Field Group and Custom Field, you will see this field in the location you chose. Hence, the location needs to match your Elementor page or post you want to add display conditions.

Next, navigate to your page or post backend editor, add value to the custom field, and save changes.

Finally, start editing your page or post with Elementor. Here, click on the element you want to add display conditions to and navigate to Advanced Tab > UAE – Display Conditions;

Set Conditions to 「ACF Field」, search for the custom field you previously added, and set the correct value. This value needs to match the value you added in your backend for display conditions to apply.

Notes

Display Conditions feature is available for all Elementor widgets, including third-party addons.Widgets, sections, and columns visibility will be a final result of all display condition settings. The output of this setting will only be visible in the frontend.

Woo-Categories Widget

Are you looking for an easy way to display WooCommerce categories anywhere on your online store? You can do that with Ultimate Addons for Elementor (UAE).

UAE comes with a 「Woo-Categories」 widget that allows you to display your selected product categories on any page or post.

You can take a look at our demo to check out how the widget works – Demo Page.

Note:

This widget will be visible only if you have the WooCommerce plugin installed and activated on your website. If this is set and the widget is still not visible, check if the widget is enabled from UAE settings.

A Slider or Grid Layout

You can add your WooCommerce categories as Grid or Slider. You can do this by clicking on your Woo-Categories widget and navigating to Content > Global > Layout. Next, in the dropdown menu, choose 「Grid」 to display categories as a grid or 「Carousel」 to use a slider instead.

Slider Settings

When you select the 「Carusel」 layout, you will notice the 「Slider Options」 panel next. Here, you will find all options available for setting up your product category slider.

Navigation

You can start by setting Navigation. You can choose to set both Arrows and Dots, only Arrows or Dots, or None.

Categories – To Show, to Scroll, and Total

Here, you need to decide how you want your slider to look. Total Categories sets a number of categories you wish to add to the slider. 

Next, you need to set the Categories to Show option. This is the number of categories that should be displayed for users out of the total number of categories. Thus, this number needs to be less than the total categories number.

In addition, the Categories to Scroll option determines the number of categories that will be changed with each scroll. In other words, if you set a value of 「1」, with each scroll, your slider will move one category further.

Play Options

Enabling Autoplay will make your slider scroll without the need for users to click on the navigation buttons. You will also get additional options to set Autoplay Speed and Pause on Hover.

Next, enabling the Infinite Loop will allow your slider to scroll infinitely in a loop. Otherwise, once the slider reaches the last category, users will only be able to scroll back to the opposite side. Finally, the Transition Speed will set how long the slider will need for one scroll.

Grid Options

If you selected the 「Grid」 layout, you would notice that the 「Grid Options」 panel shows below. Here, you will find all options available for setting up your product category grid.

Columns And Category Count

When you choose to display your product categories as a grid, they will be sorted into columns and rows. You can set the number of 「Columns」 from one to six in total. Your product categories will be automatically distributed to rows. Thus, to control the number of rows, you need to set the 「Categories Count」. 

For example, let』s say you set columns to 「3」 and categories count to 「6」. Accordingly, this will create a grid with two rows and three columns:

Set Up Category

The following options are available within both Slider and Grid Options. These options allow you to set the way categories are displayed in Slider or Grid.

Hide Category Product Count

You set the product count, the number of products in each category, to be hidden.

Display Title and Product Count Below the Image

By default, the title and product count are shown above the category image in WooCommerce. But, you can change the title and product count position below the image using the Title/Count Position option.

Display Category Title and Product Count Inline

Next, you can set the Title/Count Style to 「Inline」. Thus, the category title will be displayed together with the product count as an inline text.

Filters

You can use filter settings to choose the exact categories which will be displayed.

Category Filter Rule

Select the filtering rule from a dropdown menu:

Show All: this is a default option. It will display all available product categories;Only Top-Level: this rule will display only parent categories;Match These Categories: choose this rule to select the exact categories you wish to display. You can add one or more categories;Exclude These Categories: Similarly, you can use this rule to exclude one or more categories.

Display Category Description

Enabling Display Category Description will display category description.You can add the category description by navigating to Dashboard > Products > Categories. Here, select the category and click 「Edit」. Add your description to the 「Description」 field.

Display Category Description

Enabling Display Empty Categories will also display categories that are not assigned to any products.

Order

Order by allows you to set categories order according to: 

NameSlugDescriptionCount (Assigned Product Count)Menu Order. 

You can also choose the Order to 「Descending」 or 「Ascending」.

Styling

Styling options for every feature are available under the Style tab.

Layout

Under the Layout panel, you can set the gap between columns and rows.

Category Content

In addition, you can style your content. Set Alignment, Colors, Padding, and Typography

Further, you can choose the heading tag they』d like to apply to a category title text.

Instagram Feed Widget

Since version 1.36.0, the Ultimate Addons for Elementor (UAE) come with the Instagram Feed widget. Now you can embed your Instagram feed to any Elementor-built page or post.

This article will show you how to set up the 「Instagram Feed」 widget and add it to your website.

Instagram Feed Setup

The Instagram Feed widget needs to communicate with Instagram (Meta) to fetch the information from your Instagram account. Thus, you need to get the Instagram App ID, App Secret, and Access Token.

Firstly, you need to have a Meta (Facebook) for Developers Account or create one if you don』t have it already.

Create App

Once you』re ready, follow these steps to get your Instagram App Details:

Step 1 – Log in to your Meta for Developers Account. Here, click on 「My Apps」 in the top right corner;

Step 2 – Next, you need to create a new app by clicking on 「Create App」. Here, choose the Consumer or None app type and click 「Next」. Give your app a name and click the 「Create App」 button;

Step 3 – Once your app is created you』ll be redirected to your App Dashboard. Here, start by navigating to Settings > Basic, scroll down to the bottom of the page, and click 「Add Platform」. Select 「Website」 and click 「Next」;

Step 4 – Now, you will see that a new section with the Site URL field appeared. Add your website URL here and save changes;

Note:

To successfully save changes, you』ll also need to add your Privacy Policy URL and User Data Deletion URL. You will find these settings in the top section under the Basic app settings (Settings > Basic). At this stage, you can also use your website URL but you』ll need to replace them with valid URLs later.

Instagram Basic Display

Further, you need to add the 「Instagram Basic Display」 product and configure it.

Step 5 – On your App Dashboard, in the menu click on 「Add Product」;

Step 6 – Scroll down to Instagram Basic Display and click on the 「Set Up」 button;

Step 7 – After you added the Instagram Basic Display product, navigate to Instagram Basic Display > Basic Display, scroll to the bottom of the page, and click 「Create New App」;

Step 8 – Give your Instagram Display App a name. Next, the form will appear. You need to fill in the following fields:

Valid OAuth Redirect URIs: dedicated URI that can capture redirect query string parameters;Deauthorize Callback URL: URL that can handle deauthorization notifications;Data Deletion Request Callback URL: URL that can handle data deletion requests;

At this stage, you can also use your website URL for these fields. Keep in mind that you』ll need to replace them later with valid URLs.

Click on 「Save Changes」 when you』re done to save the app

Add an Instagram Test User

Also, you must add an Instagram tester user to your app before generating access tokens:Step 9 – In your App Dashboard, navigate to Roles > Roles and scroll down to the Instagram Testers section. Click 「Add Instagram Testers」, add your Instagram account username, and send the invitation;

Step 10 – Next, open another tab and log in to your Instagram account. Navigate to Profile > Edit Profile > Apps and Websites > Tester Invites and accept the invitation.

Get Your Instagram App API Details

Firstly, you』ll need to generate the Access token to fetch the posts/data from your Instagram account. Secondly, you』ll need to get your App ID and App Secret keys:

Step 11 – Return to your App Dashboard (Meta for Developers). Here, click on your app and navigate to Instagram Basic Display > Basic Display. 

Step 12 – Here, scroll down your Instagram App ID and Instagram App Secret section. Copy these and save them for later

Step 13 – Afterwards, scroll further down to the User Token Generator section. Now, you will see a list of test users here. Click on the 「Generate Token」 button for the user you previously added. Click 「Allow」 on the popup window. 

Once your access token is generated, copy the token and save it together with your App ID and App Secret.

Set Up Your Instagram Feed Widget

Finally, it』s time to set up your Instagram Feed Widget:

Step 14 – Login to your website and navigate to Dashboard > Settings > UAE. Scroll down to 「Instagram Feed」 and make sure that the widget is active. Now click on 「Settings」;

Step 15 – In Settings, scroll down to 「Instagram Feed」 and add your Instagram App ID, App Secret, and Access Token. Click 「Save changes」 to save your keys.

Add Instagram Feed To Page or Post

Now that your Instagram Feed widget is all set up, let』s add it to posts and pages:

Step 1 – Start editing your post or page with Elementor;

Step 2 – Search for the 「Instagram Feed」 widget in your widget list and add it to a page or post. Click on the widget to edit it;

Under the Content tab, you will find Layout Settings and Additional Settings. Further, you can style your Instagram Feed with Style Settings located under the Style tab.

Layout Settings

Step 3 – Firstly, you need to choose if you want to show your posts as a Grid or Masonry. You can choose one of these options by clicking on the Layout Type dropdown;

Step 4 – Next, set the way your images should be displayed with the following settings:

Columns: you can select the number of columns for your widget;Square Images: if you』re using a Grid layout, you can enable this option to crop your images equally;Image Count: set the total number of images you wish to display;Image Resolution: choose the image quality you wish to use for your images.

Additional Settings

Step 5 – In addition, you can set the cache duration with the 「Cache Time」 dropdown. Thus, the value you set here will determine how often is Instagram Feed widget going to refresh your posts;

Step 6 – Also, you can decide how your content will be displayed using Content settings:

Caption: enable or disable caption set length, and how it should be displayed (Always, On hover, or Below);Lightbox effect: enable this option to show your content as a lightbox popup slider on click;Image link: add a link to your Instagram posts. Clicking on any image will take the user to that post on your Instagram profile;

Step 7 – Furthermore, you can enable a link to your Instagram profile. In this case, you will see these settings:

Position: set link above or below content, or as an overlay;Link Title: add custom link title;Instagram Profile URL: add Instagram profile URL;Title Icon: choose an icon used with the link title;Icon Position: position icon before or after the title.

Style Settings

Now that your Instagram Feed content is set, you can switch to the Style tab.

Here, you can add layout and images styling, add an overlay, and modify some additional options:

Layout: set a gap size between rows and columns;Images: set normal and hover image options, turn images to grayscale, and set border and alignment;Content: if you enabled 「Captions」 under Additional Settings, you can set captions typography, color, alignment, and padding;Profile Link: if you enabled 「Instagram Profile Link」 under Additional Settings, you can set link typography, color, alignment, border, padding, and icon spacing;Overlay: add an overlay to images, set colors, type, margins, and opacity for both normal and hover states.

FAQs

How Long Is the Access Token Valid?This document describes how to generate the access token and use it for the Instagram Feed Widget setup. The access token which you generated this way is a long-lived access token. Instagram provides long-lived access tokens that are valid for 60 days. You can find more information on this in the official Instagram documentation.

How Can I Refresh the Access Token?You can refresh the access token from the Instagram Feed Settings page. Hence, to access this page navigate to Dashboard > Settings > UAE, scroll down to 「Instagram Feed」, and click on 「Settings」. Here, you will notice the 「Refresh Access Token」 button. Now, click that button, and the token will be refreshed. After refresh, the token will be valid for the next 60 days.Keep in mind that you need to refresh the token within the validity period (60 days). Contrary, if you fail to refresh the token before the expiry date, you will need to generate a new one. Thus, you will need to replace your old access token on the Instagram Feed Settings page with the newly-generated one.

Are There Any Request Limits When Using Instagram Feed Widget?There is a limit of 200 requests per hour. Further, Instagram will automatically reset the limit every hour. Once you hit the limit, the widget will display the 「Application request limit reached」 notification.In addition, there are some other limitations for IGTV, Stories, Reels, Comments, and Promoted Posts. Since these features are not supported by Instagram Feed Widget, they are not relevant here. You can find more information on this in the official Instagram documentation.

Woo – Products Carousel Does Not Display Correctly?

Facing the below-shown issue while setting the Carousel for Woo – Products?

Don』t worry! You just need to update some settings and it will work fine 

Why is this happening? 

The above case happens when under the Slider Options tab, the number of Total Products is less than or equal to the number of Products to Show. 

For example-

In Query Builder, Source is set to Manual Selection.One has entered 5 products name.Under Slider Options tab, the number of Total Products is set to 5 or less than 5And the number of Products to Show is set to 5.

In this case, as the Total Products are equal to or less than Products to Show, the carousel will not display correctly.

How to fix it?

The carousel will work fine only when the number of Total Products is greater than the number of Products to Show.  That means-

Total Products = Products to Show + 1(n) where n>0.

For example-

In Query Builder, Source is set to Manual Selection.One has entered 5 products name.Under Slider Options tab, the number of Total Products is set to 5 (= Products to Show + 1 )And the number of Products to Show is set to 4.

In this case, as the Total Products is greater than Products to Show, the carousel will work fine.

Note: In the above example, one can add more than 5 products with the query builder and set Total Products number to 5 or more than 5.

So the Ideal Condition will be like-

Number of products in Query Builder = 5Number of Total Products = 5Number of Products to Show = 4

How to set Hover Colors and Animations for Price List?

Price List widget provides options to set colors and animation for the hover state. Thus, you can set the hover background color, border color, hover box-shadow, and hover animation. This greatly improves the usability of the price list on your page or post.

To set hover colors and animation for your UAE Price List, follow these steps:

Step 1 – Start editing your page or post with Elementor. Click on your Price List widget to open settings;

Step 2 – Next, click on the 「Style」 Tab. Above the color settings, you will notice the Normal/Hover switcher. The 「Normal」 is active by default and this is used to set colors in a normal state;

Step 3 – To edit the hover state click on 「Hover」. Here, you can set the hover color as well as hover animation settings.

In addition to the settings mentioned above, the widget provides spacing options. Hence, you can set the Spacing Between Price Items and Spacing Between Image & Content.

Welcome Music for Elementor

Besides creating visually appealing websites with Ultimate Addons for Elementor, you can now add a new sensation – sound. Create the right atmosphere and engage your visitors on another level by adding background music with the Welcome Music widget.

This document will show you how to add Welcome Music to any page or post on your website.

Let There Be Sound

The Welcome Music widget lets you add music to your Elementor designs from any source. You can choose some of our default (pre-made) music or add your own:

Default options: The widget comes preloaded with audio files to suit your festive needs. It has Jingle Bells, Winter Winds, Winery, and Winter loop built-in. Add from a Link: Use a link to embed your music from any external URLUpload to Media Library: If you have any MP3 files on your computer, just upload them to the WordPress media library and use them. 

Once you choose your music, decide if you want the music to play automatically when your visitors open the post or page.

Also, you can set volume and decide to keep your sound looping or play it just once. Don』t worry, your visitors can pause the music if they want with the front-end Play/Pause button.

How Can I Add Welcome Music?

To add music to your page or post, please follow these steps:

Step 1 – To activate the Welcome Music widget, please navigate to Dashboard > Settings > UAE and scroll down to find 「Welcome Music」 in the list. Click on 「Activate」 to add the widget to your Elementor widget list.

Step 2 – Next, start editing your page or post with Elementor. Search for the 「Welcome Music」 widget and add it anywhere; 

Note

Adding the 「Welcome Music」 widget will not affect your design, as the widget is not visible on the front-end.

Step 3 – Click to edit the widget, and scroll to the 「Music」 panel (under the 「Content」 tab). The 「Music Source」 option lets you choose the audio source: Default, Link, or Media Library;

Note

If you』re adding audio from the link, the URL must be a direct link to the actual file.

Step 4 – For our example, we choose the 「Default」 option. Choosing the 「Default」 source will give you the additional option to Select Tune;

Step 5 – Now that you have your music added, enable or disable the Autoplay and Loop options, and set the Volume;

Step 6 – Next, scroll down to the 「Play/Pause Button」 panel. Here, you can decide if you want to display the button or not. Also, you can choose a position, color, size, and icons for the button.

Step 7 – Click on the 「Update」 button to save changes.

That』s all. Your visitors will now be able to enjoy a multisensory experience while browsing your website.

How To Close a Modal Popup on the Click of a Button or Text?

We』ve already seen how you can create a modal popup using Elementor and the Ultimate Addons for Elementor. You can design it as per your needs and control its behavior too.

What if you wish to allow users to close the popup when they click on some text or a button present on it?

You can do this too!

You can use the 「uael-close-modal」 class to do so.

All you need to do is:

1. Under the Content tab of Modal popup settings, select Type = Content.

2. Open the text tab of the content section and add your HTML code. Use the class within any HTML tag that you wish to add.

Example

Closing a popup on the click of a text.

Continue shopping

Here, the modal popup will get closed when the user clicks on the text 「Continue shopping」.

Closing a popup on the click of a button.

Click Me!

Here, the modal popup will get closed when the user clicks on the button.

Similarly, you can add any HTML tags and use the class in it so that the modal popup is closed when the user clicks on the specific element.

Party Propz for Elementor

Party Propz extension will help your website spread the holiday spirit and prepare you for the festive season. You can decorate all of your Elementor widgets, columns, and sections as easy you would decorate your home or office.

This document will show you how to do it.

What Can You Do with Party Propz?

Party Propz is an Elementor extension. Thus, it will work well with Elementor, UAE, and other third-party widgets. You can also add decorations to columns and sections. 

Depending on a holiday, you can choose from a range of premade items: 

Christmas treeReindeerHanukkah candles Hanging decorations Santa capSanta ClausSnowSnowman 

Also, you can add Icons and your own decorations as 「Custom images」.

Once added, you can move the decorative objects vertically and horizontally, rotate them, and adjust their size. As Party Propz are responsive, you can adjust settings for different screens. 

How Can I Add Party Propz?

To decorate your website with Party Propz, please follow these steps:

Step 1 – To activate the Party Propz extension, please navigate to Dashboard > Settings > UAE and scroll down to find 「Party Propz」 in the list. Click on 「Activate」 to add the extension to your Elementor settings.

Step 2 – Next, start editing your page or post with Elementor. Click to Edit the Section, Column, or Widget you want to decorate. For our example, we』ll be adding decorations to widgets; 

Step 3 – Choose the 「Advanced」 tab, and scroll down to the 「UAE – Party Propz」 panel. Click to expand it and enable Party Propz;

Step 4 – Choose the 「Image Type」, depending on whether you wish to add 「Image」 or 「Icon」;

Step 5 – Next, you need to select the Image Source or the Icon, depending on the type of image you chose in the previous step. You add an item by selecting 「Image Source」 from the dropdown menu or 「Select Icon」 from the icon library. 

Note

Each Section, Column, or Widget can be decorated with only one Party Propz item.

In our example, we decided to add Images and decorate widgets with some of our premade items;

Step 6 – Now that you added the decoration, it』s time to position it properly. The alignment will flip the item (horizontally) to be left or right-oriented. Horizontal and vertical positions will move the decoration to the exact position where you need it. Also, you can rotate the item and set the Z-Index (setting decoration in front or behind the element);

Step 7 – Optionally, you may 「Enable Image Styling」 to adjust CSS filters or set the Image Opacity.

Step 8 – Click on the 「Update」 button to save changes.

Now your website is ready to amaze your visitors and help them feel festive while browsing the website.

Twitter Feed Widget

Since version 1.36.0, the Ultimate Addons for Elementor (UAE) come with the Twitter Feed widget. Now you can embed your Twitter feed to any Elementor-built page or post.

This article will show you how to set up the 「Twitter Feed」 widget and add it to your website.

Twitter Feed Setup

The Twitter Feed widget needs to communicate with Twitter to fetch the information from your account. Thus, you need to get the Twitter Consumer Key and Consumer Secret key.

Firstly, you need to have a Twitter Developer Account or create one if you don』t have it already. Also, you』ll need to have a verified phone number and e-mail address on your account. 

Once you』re ready, follow these steps to get your Twitter API keys:

Step 1 – Log in to your Twitter Developers Account. Here, click on 「Developer Portal」 in the top right corner;

Step 2 – Next, you need to create a project and app. Click on the 「Create Project」 button and follow the instructions.

Accordingly, add your project name, set use case (Embedding Tweets in a website), description, and app name. Project and app names can be anything you like. To illustrate, we』ll name both our project and app 「UAE Twitter Feed」;

Step 3 – You will see your API key and Secret Key on the last step. Save these safely to add them to the UAE settings next.

If you lose these keys and need them again, you can regenerate new ones. To do this, navigate back to your Developer Portal > Project > App.

Next, click on 「Keys and Tokens」, and under 「Consumer Keys」, click on the 「Regenerate」 button. This will generate a new Consumer Key (API Key) and Consumer Secret (API Secret).

Step 4 – Login to your website and navigate to Dashboard > Settings > UAE. Scroll down to 「Twitter Feed」 and make sure that the widget is active. Now click on 「Settings」;

Step 5 – In Settings, scroll down to 「Twitter Feed」 and add your Consumer Key (API key) and Consumer Secret Key (API Secret) to UAE integration settings. Click 「Save changes」 to save your keys.

Note:

You can use the same Consumer Key and Consumer Secret Key on multiple sites.

Now, you can use the Twitter Feed widget on your posts and pages.

Add Twitter Feed To Page or Post

Now that your Twitter Feed widget is all set up, let』s add it to posts and pages:

Step 1 – Start editing your post or page with Elementor;

Step 2 – Search for the 「Twitter Feed」 widget in your widget list and add it to a page or post. Click on the widget to edit it;

Under the Content tab, you will find several options. Now, let』s start with setting up your account details.

Account

Step 3 – Click on the 「Account」 and select how you want your tweets to be fetched. Thus, under 「Search By」, you need to select 「Twitter Handle」 or 「Hashtag」. You will see the input field under the 「Search By」 option. This field will adjust to match your selection;

Step 4 – Now, you should add either your Twitter handle or hashtag to the input field;

Step 5 – You can also set the 「Cache Time」 in hours. The value you set here will determine how often the Twitter Feed widget will refresh your tweets.

Next, we』ll show you how to set your widget layout with settings available under the 「Layout」 option.

Layout

Step 6 – When you click on 「Layout」, you will see the following settings:

Content Layout: you can choose to show your tweets as Grid, List, Timeline, or Carousel;Sort By: set sorting to Recent Posts, Old Posts, Favourite, Retweet;Columns: you can select the number of columns if you』re using a Grid layout;Post Limit: limit the total number of tweets to show;Show Media: enable if you wish to show tweet images too;Media Size: if media is enabled, you can set its size;Content Lenght: length of visible content for each tweet;Equal Height: enable to equalize tweet heights if you』re using a Grid layout;

Further, if you set Content Layout to Carusel or Timeline, you will see a new menu option with additional settings for these layouts.

Further, you can control what content will be displayed in your tweets. You will find these settings under the 「Content」 option.

Content

Step 7 – The Content settings allow you to choose what tweeter feed content you want to display. Hence, you can individually disable the elements that you don』t need.

Finally, you can style the content and widget the way you want. You will find these options under the 「Style」 tab.

Styling Options

Step 8 – In addition, under the Style tab, you will find the following styling options:

Spacing: spacing settings for the widget;Content: set color and typography individually for all content elements (name, handle, feed content, etc.) Card: set Padding, Background, Border, Color, Shadow and Alignment for tweet cards;Image: modify Profile and Twitter logos;

Some of the options are layout-specific. For example, if you choose the 「List」 as a layout type, under 「Spacing」, you will see settings for Rows Gap. This allows you to set a gap size between rows of tweets. Contrary, if you choose the 「Grid」 as your layout type, you will also see Column Gap settings.

Display Content Based on Geolocation

Did you ever need to limit your sales to specific countries? Or do you need to display different content depending on user location? Since UAE version 1.35.1, you can add conditions to display content based on geolocation. 

To discover the user location (country), UAE Display Conditions uses MaxMind Geolocation integration.

Thus, this document will show you how to set up the MaxMind and UAE Display Conditions to work together. Further, we』ll show you how to display or hide the sections, columns, or widgets for users, depending on their location.

UAE Display Conditions

UAE Display Conditions are available for all Elementor widgets, including any third-party addons. 

Since Display Conditions is an extension for UAE and Elementor, you will need to activate it first. Please follow these instructions:

Step 1 – Login to your website and navigate to Dashboard > Settings > UAE;

Step 2 – Scroll down the Widget list to find 「Display Conditions」 and click on 「Activate」

Once the extension is activated, this option will be available for any Elementor widget, section, or column. 

You can find more information on conditions and extensions in the Display Conditions document.

Geolocation Condition

The Geolocation Condition allows you to set display conditions based on the country where the user is located. For example, this way you can display different products or pricelists for different countries. Also, you could hide some content in case that you provide services in a limited number of countries. 

To use Geolocation conditions, you will need to configure the MaxMind license key first. 

MaxMind Geolocation Integration setup

Since Geolocation requires the MaxMind license, you will need to create a MaxMind account and create your license. 

Create MaxMind Account

You can create the MaxMind account following these steps:Step 1 – Visit the GeoLite2 Sign Up page on the MaxMind website to create a MaxMind Geolocation account;

Step 2 – On the Sign Up page, complete the form with the relevant information, and click 「Continue」;

Step 3 – Next, you will receive the confirmation email with a link to set your password. Click on the link and choose your password. 

Create Free MaxMind License Key

Now, you need to create your MaxMind license key:

Step 1 – Login to your MaxMind account;

Step 2 – Click on the 「Manage License Keys」 option on the left-side menu;

Step 3 – Here, click on the 「Generate new license key」. Name your license key (License Key Description);

Step 4 – Also, you』ll see the notification 「Will this key be used for GeoIP Update?」. Answer 「No」 and click on the 「Confirm」 button;

Step 5 – Your license key will be created and displayed. Please store your key somewhere safe as you won』t be able to see it again.

Note:

Keep in mind that you can generate up to 25 license keys in your MaxMind account. Though the number of licenses is limited, you can use the same license on multiple sites.

Configure Display Conditions Settings

Once you create your license key, you will need to configure it in Display Conditions settings:

Step 1 – Navigate to Dashboard > Settings > UAE > Display Conditions > Settings;

Step 2 – Scroll down to the 「MaxMind Geolocation」 section and add your license key. Click 「Save Changes」;

How To Set Geolocation Condition?

Once you have added the MaxMind license, you can use Geolocation as a condition for displaying content. 

Let』s say that you have a special discount that is available only in the United States. Thus, you would want to display this deal only for users from the United States. To illustrate, we will show you how Geolocation Condition works on this example: 

Step 1 – Start editing page or post with Elementor, and click on the element you wish to add Geolocation conditions;

Step 2 – Now, switch to the Advanced tab, scroll down to 「UAE – Display Conditions」, expand it and enable the option;

Step 3 – Firstly, you must select whether to Show or Hide the Element when the condition is met. For our example, we will select 「Show Element」;

Step 4 – Next, set the condition to Geolocation and configure it. You need to select whether the condition should be applied (「Is」) to the selected country or not (「Is not」). Also, you need to select the country. 

In our example, we need the section to be visible when the user is from the United States. Thus, we will set the condition to 「Is」 and 「United States」:

Step 5 – Finally, if you』re using several conditions, you need to decide when the conditions are met. If you want all set conditions to be fulfilled, you must select 「All Conditions Met」. Otherwise, setting 「Any Condition Met」 will require that only one of the conditions is met.

Note:

Please keep in mind that if you』re using multiple Geolocation conditions (more than one country), you need to set the 「When」 option to 「Any Condition Met」.

Step 6 – Click on the 「Update」 button to save changes.

Now, in our example, the section containing the discount offer will be shown only if the website is accessed from the United States. Otherwise, it will be hidden.

To conclude, you can now have a website displaying targeted content for users in different locations with minimum effort.