How to Display Your Form in a Single Line using WPForms Styler Widget?

How to Display Your Form in a Single Line using WPForms Styler Widget?

You can create and display Inline Forms using the WPForms form builder. And yes they are supported using the UAE』s WPForms Styler widget too.

In our example, we』ll be creating a form with three form fields: First Name, Last Name, and Email.

To display the form in a single line, navigate to Settings » General in your form builder and add the CSS class inline-fields to the Form CSS Class field.

After that, you might require reducing the height of your form, you can set the placeholder text and select Hide Label for each field in Advanced Options.

Here』s how the form will display inline on the front end:

That』s it! Now you will be able to create forms that will be displayed in a single line.

Unable to see WPForms Styler Widget in UAE?

Unable to see WPForms Styler Widget in UAE?

Please make sure the following things are present on your website –

Step1: You have installed the Ultimate Addons for Elementor version 1.15.0 or higher.

Step 2: You have installed & activated the WP Forms plugin. You can find it in under WordPress Dashboard > Plugins > Installed Plugins

Step 3: WP Forms widget is enabled in UAE Widget settings. You will be able to find this option under Dashboard > Settings > UAE > Widgets

How to Add Custom Particle Backgrounds Style?

How to Add Custom Particle Backgrounds Style?

With UAE – Particle Backgrounds you get some prebuild particles styling. Apart from these default styles you can customize and personalize background style with JSON code. You can do so with a few easy steps and don』t need to have any coding skills.

You can customize and add custom JSON code from the link here. Below are the steps –

1. Visit the link here to design a custom particles styling.

2. Choose options as per requirement. You can select particles styling like shape, color, size, number, etc. From interactivity options, you can choose interactive effects on mouse hover/click. You can even set a page background for particles.

Screen Recording 2019-05-18 at 06.08.55.00 PM.mp4

3. Once you are done with setting custom styling, click on the Download current config (json). This will export the required JSON code for your custom styling.

4. Open the above-downloaded file and COPY the entire code.

5. Go to your Elementor page and open the Style tab for the section you want to set background for.

6. Under UAE – Particle Backgrounds, choose Style as Custom. Paste the above-copied code under Add Particles Json window.

Save the changes and you are done!

How to find Yelp Business ID?

How to find Yelp Business ID?

UAE』s Business Reviews widget requires the Yelp API key to display Yelp reviews. This article will help you find your Yelp Business ID.

It is easy to get Yelp Business ID –

Go to your Yelp business pageObserve the URL of this pageThe ID appears at the end of the URL. For example – www.yelp.com/biz/your-yelp-business-id

How to get Yelp API Key?

How to get Yelp API Key?

UAE』s Business Reviews module requires the Yelp API key to display Yelp reviews. This article will help you find your Yelp API key.

After inserting Yelp Business ID if reviews are not displaying properly, check if the Yelp API Key is correct. Below are the steps to get Yelp API Key –

Go to link here. You will find all process in this document but below are extracted and easy steps –

Step 1 – Click on the Create App link.

Step 2 – It will take you to the login page. Login with your account details

Step 3 – You will find your API key under General > Manage App. You can enter your email ID and description on this page.

Step 4 – Copy this API key. Now, from the WordPress dashboard, visit Settings > UAE > Business Reviews > Settings, and paste the key under the Yelp API Key section.

How to find Google Place ID?

How to find Google Place ID?

UAE』s Business Reviews module requires the Google Places API key to display reviews of Google Places. This article will help you find your Google Place ID.

It is very easy to get Google Place ID of your business –

Step 1 – Visit link here.

Step 2 – Enter your business location. A location drop pin will display your Place ID.

Step 3 – Copy the Place ID: xxxxxxxxxxxxxxxxxxxx and you will need to paste it in the widget under the Google Place ID.

Particle Hover Effect Not Working?

Particle Hover Effect Not Working?

In UAE – Particle Backgrounds, under Advanced Settings, you get an option to Enable Hover Effect. The hover effect is an interesting feature that will interact with the user when hovered with a mouse.

This effect will not work in the following cases –1. This will be visible only in the frontend and will not work in the backend.2. In case a content/spacer is overriding the background. For example – In a row, you have added a heading and added a spacer above and below the heading. This will occupy the entire space in the row. As the spacer has a transparent background, particle background for the will be visible but it will not be interactive since it has spacer over it. The hover effect will work outside the spacer where a cursor can have direct contact with the particles background.To solve this you can remove the spacer and add padding for the row. So that particle background will display.

Not Able to See Particle Background?

Not Able to See Particle Background?

Sometimes enabling the Particle Background does not change anything in the background. This might happen because widgets are covering the entire row/column and there is no space for particles background to show up.

For example – In a row, you have added a heading and added a spacer above and below the heading. Consider you applied a background color for all these widgets. This will occupy the entire space in the row. So particle background added to row will not display as it has heading and spacer above it. In case columns or widgets have a transparent background, particles background will be visible.

To solve this make sure to set a transparent background to all columns/widgets that display above the row where particles background is enabled.

Filters/Actions for Hotspot Widget

Filters/Actions for Hotspot Widget

Filters available for Hotspot Widget are listed below.

Helps Modify 「Next」 text in hotspot tour.

add_filter( 'uael_hotspot_next_label', function( $next_label, $settings ) { // Modify the string here return $next_label; }, 10, 2 );

Note: $next_label –  The next string in hotspot tour navigation.

HELPS MODIFY 「PREVIOUS」 text IN HOTSPOT TOUR.

add_filter( 'uael_hotspot_previous_label', function( $previous_label, $settings ) { // Modify the string here return $previous_label; }, 10, 2 );

Note: $previous_label –  The previous string in hotspot tour navigation.

HELPS MODIFY 「End tour」 text IN HOTSPOT TOUR.

add_filter( 'uael_hotspot_endtour_label', function( $endtour_label, $settings ) { // Modify the string here return $endtour_label; }, 10, 2 );

Note: $endtour_label–  The End Tour string in hotspot tour navigation.

HELPS to set the maximum width of the tooltip.

add_filter( 'uael_tooltip_maxwidth', function( $maxwidth, $settings ) { // Modify the maximum width here return $maxwidth; },10,2);

Note: $maxwidth–  Maximum width of the Tooltip.

HELPS TO SET THE Minimum WIDTH OF the TOOLTIP.

add_filter( 'uael_tooltip_minwidth', function( $minwidth , $settings ) { // Modify the minimum width here return $minwidth; },10,2);

Note: $minwidth–  Minimum width of the Tooltip.