How to Create Mega Menu in Elementor

The more complex a WordPress site come with the need for a more comprehensive menu. One of the popular options to make the menu more comprehensive is the mega menu. Mega menus are big expandable menus where everything is visible at once. As we know, most popular websites use that feature on their websites, which means mega menus are very useful.

Until this article was made, Elementor doesn’t support creating the mega menus by default, so you’ll need the help of third-party addons. There are lots of addons for Elementor on the WordPress plugin directory to create a mega menu, but some addons aren’t flexible. In this tutorial, we will show you how to create a mega menu in Elementor with JetMenu by Crocoblock. JetMenu will make the processing of creating mega menus much easier.

How to Create Mega Menu in Elementor using JetMenu

There are three plugins that you need to install before we start the tutorial, as below:

  • Elementor
  • Elementor Pro (Elementor Pro is needed when you want to create a custom header template using Theme Builder)
  • JetMenu (You can purchase JetMenu for single plugin or you can buy a bundle of Crocoblock plugins)

Step 1: Set Up an Existing WordPress Menu

Now, it’s time to build the actual menu. Before we go any further to the plugin’s settings and start applying any changes, we want you to make sure that at least you have a menu on your WordPress site. If you have no menu yet, simply create one. You can read this article to learn how to create a menu in WordPress.

To set up your menu for mega menu, login to the WordPress dashboard and go to Appearance -> Menus and you can see your existing menu appearing. In this example, we use our existing menu “Mega Menu Example”. The menu has to be set as the main/ primary. On Menu Settings, set the Display location to the Main Menu or Primary Menu. Next, save the menu by clicking on the Save Menu button.

Step 2: Setup the JetMenu Settings

To open the JetMenu settings, login to your dashboard and go to Crocoblock > JetPlugins Settings > JetMenu > General Settings.

On top of the General Settings tab, you will find some options, Preset Manager, Export Options, Import Options, and Reset Options. Under those options, you can see four options such as SVG Image Upload Status, Template Content Cache, Revamp Menu, and Cache menu CSS.

The only option that we need to change here is the Revamp Menu. When this option it’s enabled, all settings made on the JetMenu dashboard will apply to the menus from the WordPress locations only. So, if you want to use your old menu with these settings, keep this option turned off. However, in this tutorial we want to build a new menu from scratch like we’re going to be doing in this tutorial, switch the toggle to ON.

There are two more options on JetMenu settings, Desktop Menu and Mobile Render. You can open those options and play around with those settings with your creativity. But in this tutorial, we won’t change anything.

Step 3: Enable JetMenu and Set the Mega Menu Item

We are going to enable JetMenu to continue the process of creating the mega menu. On your WordPress dashboard, go to Appearance -> Menus. Next, open the JetMenu Location Settings block and switch the Enable JetMenu for current location toggle under the Primary Menu.

Next, hover over a menu item that you want it to trigger your mega menu, then the Settings button will appear on the right of the menu item. In this example, we select two menu items as triggers for the mega menu, there are “ARTICLES” and “INFO”. Click the Settings “button and you will see the popup. In the popup, you will see some settings. In this tutorial, we configure only for one setting, that is enable the mega content. So, switch the toggle to the right on the Use Mega content option. Don’t forget to click the Save button to save the changes.

.

Step 3: Design the Mega Menu in Elementor

Next, we’re going to launch the Elementor editor, hit the Edit Mega content button and the Elementor editor will open in a window.

Now, you can design the mega menu with your creativity. First, we’re going to design the first menu item “ARTICLES”. In this example, we start to create a section with two columns. You can pick any widget that you want from the widget panel. Here, we will add the Vertical Mega Menu widget. Type the Vertical Mega Menu on the search box and then drag & drop it into the canvas area (first column).

We applied some changes in the block setting, as below:

Content:

  • Menu: Articles (You can select the existing menu that was you created before)., You need to create a new menu if you don’t have one and then go back here to continue the tutorial.

Style

  • Main Menu: Set the Main Menu Width to 300

Next, we continue to the second column. In this example, we will add the Posts widget which. Select the Posts widget from the menu bar then drag and drop it into the canvas area (second column).

On the settings block, we applied some settings as below:

Content -> General

  • Posts Numbers: 6
  • Columns: 2
  • Equal Columns Height: YES
  • Show Posts Excerpt: NO
  • Show Post Terms: NO
  • Show Posts Meta: NO

Content > Carousel

  • Enable Carousel: YES
  • Pause On Hover: YES

Once you’re done editing, update it by clicking on the UPDATE button. Close the window of the Elementor editor by clicking on the (X). When you’re back to the menu item setting, don’t forget to click the Save button.

Next, we move to the second menu item “INFO”. Click the Edit Mega content button. Once you entered the Elementor editor window, add a section with two columns. In the first column, we will add the Google Maps widget. Select the Google Maps widget on the menu bar then drag and drop it into the canvas area (first column). On the Content tab, you will find some options to edit your Maps Location, Zoom, and Height. So, edit the settings as your preference.

Next, we’re going to the second column. In this column, we will add the Form widget, which is one of the Elementor Pro built-in widgets. Find that widget then drag and drop it into the canvas area (second column).

Once you’re done with your editing, update it by clicking on the UPDATE button. Close the window of the Elementor editor by clicking on the (X). When you’re back to the menu item setting, don’t forget to click the Save button.

Step 4: Create Header Template Using Theme Builder by Elementor Pro

Now, it’s time to apply the mega menu that you just created as the header template using Theme Builder by Elementor Pro.

On your dashboard, go to Templates -> Theme Builder. This will take you to a window that contains plenty of options to build the template. Click the Header tab then create a new header template by clicking on the Add New button. You will see the library of header presets. In this example, we will create a header from the scratch. Close the library window and you will enter the Elementor editor.

Once you entered the Elementor editor, create a new section with two columns. The first column we’ll be using for the site logo and the second column for the mega menu that we’ve just created. Select the Site Logo on the widget panel then drag and drop it into the canvas area (first column). Next, select the Mega Menu widget on widget panel and drag and drop it into the canvas area (second column).

Next, it’s time to apply some changes to the header. You can play around with the settings and styling it with your creativity. If you don’t have any idea, you can see our settings below:

Site Logo

On the Style tab, set the Height to 100

Mega Menu

On the Style tab, edit the Items Typography and set the Size to 20

Well, it’s done. Before you publish your header template, don’t forget to rename your header template by clicking on the header settings button then you can rename it. Once you publish your header template, your new mega menu will be applied to your site.

The Bottom Line

At the time of writing (March 31, 2022), Elementor has no default feature to create a mega menu. The only way to create a mega menu is by using a third-party add-on. JetMenu is an Elementor add-on from Crocoblock designed specifically to create a mega on an Elementor-powered WordPress. You create the mega menu using the Elementor editor, which offer limitless design options. You can add any content you to your mega menu. From image, maps, WooCommerce products, blog posts, and so on.

How to Add Button Sound Effect in Elementor

See that buttons above?, give it a try.

When you click the cat sound button it will produce a meow sound, and when you click the dog sound it will produce a bark sound. In this article, we will show you how to add a sound effect to the button when it’s clicked in Elementor.

How to Add Button Sound Effect in Elementor

Step 1: Create a Button

Firstly, you need to create the button, you can customize the button as you like because Elementor has plenty of options to make your button look stunning.

Step 2: Prepare the Sound Effect Link

After the button is ready, now prepare the sound effect for the button and upload to the WordPress Media Library. You can use either MP3 or WAV file format for the sound effect. To upload the sound file to the WordPress Media Library, go to the WordPress dashboard and click Media -> Add New. You can drag and drop the files or click Select Files to upload them.

After the files are uploaded, click on one of the sounds, then on the appearing windows, copy the File URL to get the link for the sound effect.

Step 3: Add Following HTML Codes

To produce sound from the button we need to use following HTML codes.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

Credit to Jim Fahad Digital for the codes.

Add an HTML widget into the canvas area and paste the code into the HTML Code block.

Use your sound effect link to replace the Sound-Effect-URL.

var audio1 = new Audio('Sound Effect URL')

Decide the CSS Classes for the button and change the default button-class CSS classes code.

$(".button-class").mousedown(function() {

After you changed the code, it will look like this.

Step 4: Add a CSS Classes to The Button

To connect the button to the codes, we need to add CSS Classes to the button, so the code knows which button is clicked and triggers the sound effects.

And that’s for one button with a sound effect. If you want to add more buttons with sound effects, it’s doable by copying some part of the code and tweaking it a little bit.

Adding More Buttons with Sound Effects

Create the Button or Copy Existing Button

You can copy the existing button by right-clicking the existing button and selecting copy then paste it into any section by right-clicking inside that section. And decide the CSS Classes for the button to be called by the HTML codes.

Copy Some Part of the Code and Adjust the Variable

Let’s copy some parts of the previous HTML code that trigger the sound effect, it’s the following code below

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

After copying the code, paste it just below Audio 1 Ends. Edit the variable audio1 and all the code that uses the audio1 variable on the newly created code to audio2.

Then replace the URL for the sound effect if you’re using a new sound effect for the new button and edit the button-class code to your newly created button CSS Classes. The final codes Will look like the following image.

Your newly created button now will have a sound effect too when clicked.

The Bottom Line

Audio elements are among the great addition to a website. They not only provide an attractive element to the websites but also help in creating a long-lasting impression to the end-users. However, action or result should only be accompanied by a sound if it greatly reinforces or clarifies an important message to the user. Notifying the user of something that requires their attention, so it’s not giving a negative impact on your website instead.

How to Add Line Chart in Elementor with Happy Addons

The best way to visualize the data is to show a chart. There are many types of charts that we’ve already known. One of the charts we use the most is the line chart. A line chart is a way of plotting data points on a line. Often, it is used to compare the data. In this tutorial, we will show you how to add a line chart in Elementor using the Line chart widget from Happy Addons, because Elementor has no default feature to support creating the line chart.

How to Add Line Chart in Elementor with Happy Addons

Step 1: Install and Activate Happy Elementor Pro

The first thing you have to do is install Happy Addons Pro to your Elementor-powered WordPress site as the Line Chart feature is only available on the pro version. You can download Happy Addons Pro on its official website. Simply install and activate once you have downloaded the Happy Addons file.

Step 2: Create a New Content (Post/ Page) or Select an Existing Content)

Now we’re going to add a line chart in Elementor. You can create a new post/ page or select the existing one. In this example, we will create a new page. On your Dashboard go to Pages -> Add New. Next, press the Edit with Elementor button to bring you to the Elementor editor.

Step 3: Design the Line Chart

Once you entered Elementor Editor, next create a new section with a single column by clicking on the Add New Section button. Select the Line Chart widget from the menu bar and then drag & drop it into the column.

In the Edit Line Chart menu, go to the Content section and you will find options to edit Line Chart, Settings, and Wrapper Link. Click the Line Chart drop-down button to edit the items and apply some changes.

Now, you will see there are two areas, the Labels, and the items area. First, we need to edit the labels. Because the period of a line chart that we want to create is quarterly, so we need to change that. Write Q1, Q2, Q3, Q4 in the Labels box. (Write multiple labels with a comma (,) separator). In this example, we create a line chart with two items. So, we don’t need to add a new item.

We continued to edit the items. In the Content section, click the item box. You will find the options tab. CONTENT and STYLE. In this example, we’re creating the line chart of worldwide top 2 smartphones sales in 2021 (thousands of units). There are some changes in the Content tab that we applied for each item, as below:

Item #1:

  • Label: Apple
  • Data: 58, 51, 48, 82

Item #2:

  • Label: Samsung
  • Data: 76, 57, 69, 68

You can also go to the STYLES tab to adjust some settings. You can enable background fill, set background color, border color, and point color from here. But, in this tutorial, we don’t make any changes.

Once you finished editing the Line Chart, go to the Settings by clicking on the drop-down button. You will see many options that you can set as you want. Here, we will show you our settings are:

  • Title: Worldwide Top 2 Smarthones Sales in 2021 (Thousands of Units)
  • Scale Axis Range: 90
  • Step Size: 10

We’re going to the last thing that we e need to do for this tutorial. Click the Style section, you will find some options. There are Common, Legends, Labels, and Tooltip. You can play around with those settings, but in this example, we going to adjust on the Common option only. Click the Common drop-down then set the Border Width to 5, Line Tension to 5, and last but not least set the Point Border Width to 7.

Voilà, let’s see how amazing the line chart that you’ve just created is.

The Bottom Line

The line chart is simple, easy to read and interpret. But, in our opinion, the line chart can be an inconvenience to the readers, because it has many lines and may look cluttered. So, we suggest you don’t use too many items on the line chart.

How to Send Elementor Form Data to Google Sheets

Web forms are a very powerful tool for interacting with users. For instance, they can subscribe to your company’s newsletter just by entering their email address and any other data you wish to collect. Or perhaps you are an e-commerce company that wants to include a sales order form on your website as a convenience to your customers. Another type of form that may be useful to your business is including a customer feedback form so that you can gain better knowledge of what is working and what is not in your business.

Elementor Pro comes with many native widgets, one of the widgets to create a form easily on your website is the Form widget. With the Form widget, you can create a wide range type of forms on your WordPress website. For more information about the widget, you can check our previous article about Elementor Form Builder.

While Elementor has a built-in feature to manage form submissions (data), you might want to send the data to Google Sheets to organize and categorize data into a logical format.

In this article, we will show you how to get data from Elementor Form into Google Sheet which is a cloud spreadsheet editor that makes it easy to access and use for the users.

Start a New Spreadsheet in Google Sheets

You can access google sheets from sheets.google.com using a free Google account (for personal use) or a Google Workspace account (for business use). Create a new blank spreadsheet to get started.

Open the Apps Script Editor

Previously placed under the Tools menu by the name script editor, nowadays it is called Apps Script under the Extension menu.

Get the Code to Enable the Data Transfer

To be able to transfer the Elementor form data to Google Sheets, you need to connect them first using the following code.

// Change to true to enable email notifications
let emailNotification = false;
let emailAddress = "Change_to_your_Email";

// DO NOT EDIT THESE NEXT PARAMS
let isNewSheet = false;
let postedData = [];
const EXCLUDE_PROPERTY = 'e_gs_exclude';
const ORDER_PROPERTY = 'e_gs_order';
const SHEET_NAME_PROPERTY = 'e_gs_SheetName';
/**
 * this is a function that fires when the webapp receives a GET request
 * Not used but required.
 */
function doGet( e ) {
	return HtmlService.createHtmlOutput( "Yepp this is the webhook URL, request received" );
}
// Webhook Receiver - triggered with form webhook to published App URL.
function doPost( e ) {
	let params = JSON.stringify( e.parameter );
	params = JSON.parse( params );
  postedData = params;
	insertToSheet( params );
	// HTTP Response
	return HtmlService.createHtmlOutput( "post request received" );
}
/**
 * flattenObject
 * Flattens a nested object for easier use with a spreadsheet
 * @param ob
 * @returns {{}}
 */
const flattenObject = ( ob ) => {
	let toReturn = {};
	for ( let i in ob ) {
		if ( ! ob.hasOwnProperty( i ) ) {
			continue;
		}
		if ( ( typeof ob[ i ] ) !== 'object' ) {
			toReturn[ i ] = ob[ i ];
			continue;
		}
		let flatObject = flattenObject( ob[ i ] );
		for ( let x in flatObject ) {
			if ( ! flatObject.hasOwnProperty( x ) ) {
				continue;
			}
			toReturn[ i + '.' + x ] = flatObject[ x ];
		}
	}
	return toReturn;
}
/**
 * getHeaders
 * normalize headers
 * @param formSheet
 * @param keys
 * @returns {*[]}
 */
const getHeaders = ( formSheet, keys ) => {
	let headers = [];
	// retrieve existing headers
	if ( ! isNewSheet ) {
		headers = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
	}
  const newHeaders = keys.filter( h => ! headers.includes( h ) );
  headers = [ ...headers, ...newHeaders ];
  // maybe set order
	headers = getColumnsOrder( headers );
  // maybe exclude headers
	headers = excludeColumns( headers );
  // filter out control columns
  headers = headers.filter( header => ! [ EXCLUDE_PROPERTY, ORDER_PROPERTY, SHEET_NAME_PROPERTY ].includes( header ) );
  return headers;
};
/**
 * getValues
 * normalize values
 * @param headers
 * @param flat
 * @returns {*[]}
 */
const getValues = ( headers, flat ) => {
	const values = [];
	// push values based on headers
	headers.forEach( ( h ) => values.push( flat[ h ] ) );
	return values;
}
/**
 * insertRowData
 * inserts values to a given sheet at a given row
 * @param sheet
 * @param row
 * @param values
 * @param bold
 */
const insertRowData = ( sheet, row, values, bold = false ) => {
	const currentRow = sheet.getRange( row, 1, 1, values.length );
	currentRow.setValues( [ values ] )
		.setFontWeight( bold ? "bold" : "normal" )
		.setHorizontalAlignment( "center" );
}
/**
 * setHeaders
 * Insert headers
 * @param sheet
 * @param values
 */
const setHeaders = ( sheet, values ) => insertRowData( sheet, 1, values, true );
/**
 * setValues
 * Insert Data into Sheet
 * @param sheet
 * @param values
 */
const setValues = ( sheet, values ) => {
	const lastRow = Math.max( sheet.getLastRow(), 1 );
	sheet.insertRowAfter( lastRow );
	insertRowData( sheet, lastRow + 1, values );
}
/**
 * getFormSheet
 * Find or create sheet for form
 * @param sheetName
 * @returns Sheet
 */
const getFormSheet = ( sheetName ) => {
	const activeSheet = SpreadsheetApp.getActiveSpreadsheet();
	// create sheet if needed
	if ( activeSheet.getSheetByName( sheetName ) == null ) {
		const formSheet = activeSheet.insertSheet();
		formSheet.setName( sheetName );
		isNewSheet = true;
	}
	return activeSheet.getSheetByName( sheetName );
}
/**
 * insertToSheet
 * magic function where it all happens
 * @param data
 */
const insertToSheet = ( data ) => {
	const flat = flattenObject( data ),
		keys = Object.keys( flat ),
		formSheet = getFormSheet( getSheetName( data ) ),
		headers = getHeaders( formSheet, keys ),
		values = getValues( headers, flat );
	setHeaders( formSheet, headers );
	setValues( formSheet, values );
	if ( emailNotification ) {
		sendNotification( data, getSheetURL() );
	}
}
/**
 * getSheetName
 * get sheet name based on form field named "e_gs_SheetName" if exists or used form name
 * @param data
 * @returns string
 */
const getSheetName = ( data ) => data[SHEET_NAME_PROPERTY] || data["form_name"];
/**
 * getSheetURL
 * get sheet url as string
 * @returns string
 */
const getSheetURL = () => SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getUrl();
/**
 * stringToArray
 * split and trim comma seperated string to array
 * @param str
 * @returns {*}
 */
const stringToArray = ( str ) => str.split( "," ).map( el => el.trim() );
/**
 * getColumnsOrder
 * used to set the columns order, set this by adding a form field (hidden) named "e_gs_order"
 * and set its value to the names of the columns you want to seperated by comma in the order you want,
 * any other colum not in that field will be added after
 * @param data
 * @param headers
 * @returns {*}
 */
const getColumnsOrder = ( headers ) => {
	if ( ! postedData[ORDER_PROPERTY] ) {
		return headers;
	}
	let sortingArr = stringToArray( postedData[ORDER_PROPERTY] );
  // filter out non existing headers
  sortingArr = sortingArr.filter( h => headers.includes( h ) );
  // filterout sorted headers
  headers = headers.filter( h => ! sortingArr.includes( h ) );
  return [ ...sortingArr, ...headers ];
}
/**
 * excludeColumns
 * used to exclude columns, set this by adding a form field (hidden) named "e_gs_exclude"
 * and set its value to the names of the columns you want to exclude seperated by comma
 * @param data
 * @param headers
 * @returns {*}
 */
const excludeColumns = ( headers ) => {
	if ( ! postedData[EXCLUDE_PROPERTY] ) {
		return headers;
	}
	const columnsToExclude = stringToArray( postedData[EXCLUDE_PROPERTY] );
	return headers.filter( header => ! columnsToExclude.includes( header ) );
}
/**
 * sendNotification
 * send email notification if enabled
 * @param data
 * @param url
 */
const sendNotification = ( data, url ) => {
	MailApp.sendEmail(
		emailAddress,
		"A new Elementor Pro Forms submission has been inserted to your sheet", // mail subject
		`A new submission has been received via ${data['form_name']} form and inserted into your Google sheet at: ${url}`, //mail body
		{
			name: 'Automatic Emailer Script'
		}
	);
};

Credit for the code to bainternet.

Clear All Code and Paste the Code

After you get the code, paste it into the Apps Script editor, and clear all existing code first to make it works.

Rename the Project and Save the Changes

Once the code is ready, you can rename the script title, then click the save button .

Deploy the Script and Copy the Web App URL

After the change is saved, let’s deploy the script by clicking the Deploy button and selecting New deployment from the options.

On the appearing window click the gear icon , and choose the Web app option.

On the newly appearing form change the access to Anyone and click the Deploy button.

If somehow the deployment of the script is asking for permission for accessing your spreadsheet, please Authorize its access to make the script able to write the data on your spreadsheet.

After the deployment of the script is successful, copy the Web app URL.

Paste the Web App URL into Elementor Form Webhook Setting

On Elementor editor, click the form you want to connect with Google sheet, it will open the form setting on the left panel of the editor, then scroll down and click on the Action After Submit block — Add Webhook action — it then opens a new Webhook block below, clicking on it will give you a URL field for placing the copied web app link.

Please make sure you do not activate the Advanced Data on the Webhook settings since the script won’t work properly if you do because the data will be sent as an array.

Alternatively, if you need the submission date time from the Advanced Data, you can create a new Hidden field, By clicking on the + ADD ITEM and changing the type of newly created field to Hidden then adding a Label for it. Continue by going to the ADVANCED tab of the hidden field, then, in Default Value, click on the database(Dynamic Tags) icon to select the Current Date Time option.

Okay, that’s it, you can test the form by filling in the text field and clicking the send button.

We tested the form we created by filling in the form and clicking the send button 3 times.

On Google Sheets, the code will make a new sheet under the name of the form on Elementor. We named the form to google sheet, and the new sheet name is the same.

On the newly created sheet, the data we send from the Elementor form is all there, without missing any data at all.

The Bottom Line

Web forms are a useful tool for tracking certain information from your website visitors. And they are probably one of the most important elements on your website when it comes to achieving your goals. By connecting the form to our Google sheet, we can organize and categorize data into a logical format. Once this data is entered into the spreadsheet, we can use it to help organize and grow our business.

How to add a Lottie Animation in WordPress

Today animation became ingrained in web design and seems to be a great addition to many website elements. It brings more life into the website and people’s attention often follows animations, which is the main reason for their use.

Nevertheless, don’t ruin your website with very heavy animation and increase your website loading time greatly!

Introduced in 2017, the JSON-format nature of Lottie files means they are significantly smaller than other file formats such as video or GIF, and Lottie is vector animation means Lottie files can be scaled up or down to any size, and the file remains incredibly small with no pixelation without compromising quality!

You can get over 1500 animations on LottieFiles or you can create one yourself using Figma, Adobe After Effects, or Adobe XD via plugins.

Using WordPress to build your website is no-brainer, WordPress is simply the world’s most popular way to create a website or blog at the moment, powering almost half of all websites on the internet. WordPress is a content management system that basically is a tool that makes it easy to manage crucial aspects of your website, like content without needing to know anything about programming. And there are more ways to easily make your website and give more customization in WordPress by using a page builders plugin.

There are several ways to add a Lottie animation in WordPress, depending on the editor you use.

How to Add Lottie Animation on Elementor

Elementor is a page builder plugin for WordPress. A page builder allows you to create a stunning web page without having to deal with either HTML or CSS. Page builder like Elementor — comes with a visual editor where everything is drag and drop. Originally launched in 2016, Elementor is one of the younger page builders. Even though it got a late start, Elementor has quickly racked up over 5,000,000 active installs on WordPress.org at the time of writing, and that makes Elementor the most popular page builder for a reason.

To add Lottie animation into your website using Elementor you need to have the Lottie files first and Elementor Pro version so you can use Lottie Widget which is only available on Elementor Pro version 2.10.0 or higher.

Firstly, prepare a section to place Lottie Widget on, and drag the Lottie widget to the canvas area from Elementor editor.

Then select the Source from the left panel, select Media File and click the upload button to use a Lottie file you have downloaded from LottieFiles — select the alignment you want, you also can give a link to the animation on the Link option.

If you want to use a Lottie file from a third-party source — change the Source into External URL and place the link in the space provided below.

To control the Animation behavior, open the Settings block, first option is the Trigger option, as the name implies controlling when the animation starts playing.

There are 4 triggers you can choose:

  1. Viewport triggers the animation based on the visible area of your device screen
  2. On click triggers the animation when clicked
  3. On Hover triggers the animation when animation hovered by the user cursor
  4. Scroll triggers the animation when the page is scrolled

For more customization options like setting the loop of the animation, selecting the renderer option, the width of animation, and giving motion effect on the animation, you can read our previous article on how to add Lottie animation in Elementor.

How to Add Lottie Animation on Divi

Divi is the most popular WordPress theme, however, Divi is more than just a theme, it’s a website building framework that makes it possible to design beautiful websites without ever touching a single line of code. With a built-in visual editor, it’s unlike any WordPress theme you have ever used before.  

To use Divi on any WordPress theme, not limited to Divi and Extra only, Divi also has page builder available as a standalone plugin, here on how to install Divi Builder plugin.

To use Lottie Animation on Divi Builder, you need to install Divi Supreme plugin on your WordPress site and activate it first. You can get the plugin on WordPress.org for free.

Then onto the Divi Builder editor add the Supreme Lottie Module into the row inside a section.

After adding the module, a panel will appear, paste the URL into the field given, or you can upload the downloaded Lottie file into it.


Once the animation is ready, then you can change animation behavior like enable/disable the loop, delay speed, direction, animation speed, and the viewport.

For more detailed instructions on how to add a Lottie animation in Divi, you can refer to our previous article.

How to Add Lottie Animation on Brizy 

Joining popular page builder like Elementor and Divi, Brizy is relatively new, with simplicity, lightweight editor, and intuitive drag and drop interface combined makes Brizy is a good choice for building your website pages.

If you used Elementor before then you won’t face much trouble getting used to it, as the interface is pretty similar to Elementor with the left panel on the left for adding an element into the editor, unlike Elementor which use the left panel to customize the elements, in Brizy customization is on the element itself when clicked.

To add Lottie animation on Brizy, you must use Brizy Pro since the Lottie element on Brizy is only available on the Pro version. If you are already on Brizy Pro, then you can search for the Lottie element in the Brizy editor panel and drag it into the canvas area.

After the default animation is in place, you can change the default link or upload the Lottie File to replace it, by clicking on the animation to open the element settings bar, then click the Lottie icon and paste the URL in Lottie Link for third-party hosted animation, or click + to upload the Lottie File. After your animation is ready, you can set the animation behavior the way you want it.

You can read our previous article for more detailed instructions on how to add Lottie animation on Brizy.

How to add Lottie animation on Gutenberg

Gutenberg is a new block-based editor introduced in WordPress 5. It replaces the classic WordPress editor, and it is a significant change in how content is created. With Gutenberg, you can add multiple media types and arrange the layout within the editor using blocks.

While Guttenberg is able to create stunning pages just like page builders do, Gutenberg is far behind when it comes to animation. So far, it has no native feature to add animation, and Gutenberg has no native block to add Lottie animation, however, you can use the HTML block to add a Lottie animation. It offers no setting option to control the animation behavior so that your Lottie animation will behave according to the settings you made on LottieFiles. You can’t even set the animation size.

To get the HTML code for the block, you can visit the LottieFiles website and pick one of the animations. On the appearing window, click the HTML icon on the Use this animation in section. You can set the animation size, speed, direction, and play mode. You can also set things like the background color, enable/disable animation controls, enable/disable autoplay, and enable/disable loop. Then scroll down to the GENERATED CODE section and copy the generated code. Let’s add HTML block into Gutenberg editor to place the code you copied.

To have some control over the behavior of the animation, you can use a third-party Gutenberg block, one of the plugins you can install is the Otter plugin, which offers a set of Gutenberg blocks, including the Lottie Animation block. You can get the plugin on the WordPress plugin directory.

The Bottom Line

While giving your website animation is a good way to grab people’s attention and make it more alive, choosing the right animation format for your website is very important so it’s not making your website very heavy to load and make people go away instead. Lottie animation offers lightweight animation and can be scaled up or down to any size, and the file remains incredibly small too.

How to Add Particle Effects in Elementor with Happy Addons

As a web designer, of course, we want our website to stand out from other websites. This means we have to give a great impression to the visitors. One of the ways the visitors have a great impression and make visitors more likely to come to our website is by decorating our website with particle effect.

Nowadays, particle effect is becoming one of the key elements of modern design techniques. In this article, we would like to show you how to add particle effects in Elementor with Happy Addons. There are three predefined particle effects provided by Happy Addons as follows:

  • Polygon
  • NASA
  • Snow

But if you need to customize the particle effect, there are plenty of options for adding as much as you need using custom effect.

How to Add Particle Effects in Elementor with Happy Addons

Step 1: Install and Activate Happy Elementor Pro

The first thing you have to do is install Happy Addons Pro to your Elementor-powered WordPress site as the Particle Effects feature is only available on the pro version. You can download Happy Addons Pro on its official website. Simply install and activate once you have downloaded the Happy Addons file.

Step 2: Create a New Content (Post/ Page) or Select an Existing Content)

Now we will start to use this addon to add particle effects in Elementor. You can create a new page or select the existing one. In this example, we will create a new page. On your Dashboard go to Pages -> Add New. Next, press the Edit with Elementor button to bring you to the Elementor editor.

Step 3: Design the Content

Well, we are ready to design our page. First, we need to add a new section by clicking on the plus icon (+) Add New Section and then select a single column (or any structure you want).

Before adding the particle effect, you can make some basic settings to the section. You can click the section handle to open the settings panel. In this example, there are two things you need to do as below:

  • Set the Height section to Fit To Screen
  • Turn it to Yes on Stretch Section toggle.

Next, add a widget by clicking on the plus sign (+). In this example, we add the Image widget. Drag the Image widget to the column. Select your image by clicking the image selector. You can choose the image from your library by clicking on the Media Library or uploading the image by clicking on the Upload files button.

After you’ve chosen the image, set the image size to Shop Single by clicking on the Image Size drop-down and then choose Shop Single – 600 x 0.

You can add more widgets to the section to your liking. Once you done adding the widgets, you can continue to the next step to add the particle effect.

Step 4: Apply the Happy Particle Effects

Finally, we are going to apply the Happy Particle Effects to our section. Click the section handle to open section settings panel then go to the Style tab. On the Style tab, open the Happy Particle Effects block and switch the Enable Particle Background toggle on (Yes).

Now, you can choose the style of particle effects. In this tutorial, we choose the Snow option. Once the style is applied, you can play around with the settings, such as particle color, opacity, flow direction, and many more. In this example, we set the Particle Color to White Element.

We need the particle effects to be visible clearly and dramatically, so we should change the section’s background. On the Style tab, open the Background block, choose the Classic on Background Type option, and then set the color to black.

Alright, let’s see what it looks like.

Custom Effect

You are probably interested in what is the custom effect? Happy Particle Effects have one more effect that is possible for you to create particle effect with your creativity, and that’s what this effect is for.

Go to Style and choose Custom on the drop-down list. Read the appearing instructions and click here link, this will take you to the external page (particles.js) where you can set a custom particle effect.

There are five default effects that you can choose from. Let’s say we are going to stick with the snow effect. Choose the Snow from the drop-down list. Under that, you can start playing around with the parameters. In this example, the only parameter that we adjusted is the size. Go to particles -> size, set the value to 20, and check (✓) the random box.

After creating the particle effect, download the JSON file by clicking the Download current config (JSON) button (see the GIF).

After you have downloaded it, open the JSON file with Notepad or your favorite plain text editor, select all and copy the text. Next, go back to the Elementor editor, and paste it on that area (see the GIF).

The Bottom Line

About four to five years ago, the particle effects were a hot thing, and it was very new. But, at this moment maybe it’s been a little bit overused and cliché. So, we advise you to use the particle effects maybe just once or twice on your entire website.

How to Add Image Masking in Gutenberg

This may sound cliché and overused, that an image worth a thousand words. Nevertheless, we have admitted that image has that much power. In WordPress, we have Gutenberg, a block-based editor that we can use to create posts and pages. In Gutenberg, you can easily add an image to your content. But the problem is Gutenberg doesn’t offer many image customization options, especially when we want to add image masking. But don’t worry, WordPress has some plugins that can provide you to do that.

In this article, we would like to show you a tutorial on how to add image masking in Gutenberg using Kadence Blocks, a plugin that offers extra Gutenberg blocks to extend Gutenberg’s capabilities. One of the blocks offered by Kadence Blocks is Advanced Image, which offers setting options to add image masking. It offers 7 default mask shapes as follows:

  • Circle
  • Diamond
  • Hexagon
  • Rounded
  • Blob 1
  • Blob 2
  • Blob 3

You can also use a custom shape by creating an SVG file and then upload it.

How to Add Image Masking in Gutenberg Using Kadence Blocks

The first thing you have to do is install the Kadence Blocks plugin. On your WordPress Dashboard, go to Plugins > Add New.

Type Gutenberg Blocks by Kadence Blocks on the searching box and then click Install Now button.

Next, activate the plugin by clicking on the Activate button.

Next, we will start to use this plugin to add image masking in Gutenberg. Start to create new content. On your Dashboard go to Posts > Add New if you want to create a new post, and go to Pages > Add New if you want to create a new page.

When you’re entering Gutenberg, you can find the Advanced Image block by clicking on the plus icon (+) Add Block. Upon selecting the Advanced Image block, you’ll be prompted to select the image from your media library or via URL. In this tutorial, we would like to select the image from the media library. Click the Select Image button and then upload your image by clicking on Media Libary on the library window. If you don’t have a file in your media library, you can upload your image by clicking on the Upload files button.

On the right panel, you will see the Block tab. Scroll down and you will see some setting blocks. Find Mask Settings and click the block. Choose your favorite mask shape by clicking on the drop-down menu.

Well, it’s done. You can publish your post/ page once your editing is finished.

The Bottom Line

The default Image block of Gutenberg comes with minimum styling options. There is no option to add masking to or other advanced styling option to further decorate your image. The Advanced Image block by Kadence Blocks gives you more options to style up your image, including adding masking. You can choose one of 7 mask shapes or use your own shape by creating an SVG file.

9 Best Mailchimp Alternatives for WordPress

Mailchimp is arguably the most popular email marketing tool, supported by the vast majority of popup builder plugins and form builder plugins. Unfortunately, popular doesn’t mean the best. There are some issues surrounding Mailchimp. One of which is regarding fake email subscribers.

Before switching to our current email marketing tool, (we use MailPoet, by the way) we used Mailchimp for about two years. During the period, we managed to collect about 1,000 subscribers. The open rate was very bad every time we sent a newsletter. Turned out, after we figured out the problem, over half of our subscribers were fake. Here is the evidence.

Of course, you can enable double opt-in to stop fake subscribers, but it should not happen on a big service like Mailchimp.

If you are experiencing the same issue with Mailchimp (or whatever the issue that makes you want to switch away), we have curated some better Mailchimp alternatives for WordPress.

In WordPress, there are two types of tools when it comes to email marketing. First, you can use a plugin. An email marketing plugin allows you to do everything from your WordPress dashboard. From managing subscribers to sending newsletters. Second, you can use a third-party service. Mailchimp is one of the examples of third-party email marketing services. Unlike an email marketing plugin, a third-party email marketing service requires you to login to the dashboard of the associated service to manage subscribers, send newsletters, and other things related to email marketing.

WordPress Plugins Alternatives to Mailchimp

1. Mailster

Most email marketing tools and plugins adopt a subscription-based business model for the pro version. If you hate this business model, Mailster is the best option to run email marketing on your WordPress site. It is an email marketing plugin so that you can do everything from your WordPress dashboard.

Mailster is marketed via CodeCanyon and you can get it with a one-time purchase option with a support period of 6 months or 12 months. You will continue to get the plugin updates after the support period ends. The developer offers lifetime updates for the plugin.

Although you don’t need to spend money on a monthly/yearly basis for Mailster, you still need to spend monthly/yearly fee for email delivery service unless you use your own SMTP server. Mailster has no built-in email delivery service, so you have to rely on a third-party email delivery service. Mailster can be integrated with services like Mailgun, SendGrid, SparkPost, and MailJet. You can also use your own SMTP service if you have one.

The key features offered by Mailster include:

  • Drag and drop email editor
  • Premade email templates
  • Subscriber manager
  • Form builder
  • Analytics

2. MailPoet

If you are looking for an all-in-one email marketing plugin, MailPoet is one of our recommendations. As mentioned in the opening section, we currently use this plugin to send email newsletters to our subscribers. MailPoet already has a built-in email delivery service so that you don’t need to subscribe to a third-party service to be able to send emails. MailPoet is a great option if you are just getting started running email marketing as you can use it for free until your subscribers reaches 1,000.

MailPoet also comes with a drag and drop email builder just like Mailster above. One of the advantages of using MailPoet is that you can customize the pages like welcome page, unsubscribe page, and other pages belong to MailPoet. You can create a custom page using your page builder of choice. MailPoet can be integrated with page builders like Elementor and Beaver Bulder.

3. weMail

weMail lets you manage subscribers and send newsletters and other types of email campaigns right from your WordPress dashboard just like MailPoet above. However, you can’t send an email before you set up an integration with an email delivery service as weMail has no built-in email delivery feature. You need to connect weMail with services like Mailgun, SparkPost, and SendGrid. weMail is a cloud-based tool so it won’t consume much of your server’s resources.

4. Newsletter

As the name suggests, Newsletter is a WordPress plugin to create newsletters. Of course, it also lets you manage the subscribers before you send the newsletters. Newsletter comes with a drag and drop email builder to ease your job in creating the email. To track the performance of the emails you sent, Newsletter supports a native integration with Google Analytics. Newsletter has no built-in email delivery service so you need to integrate it with a third-party email delivery service before you can start sending emails.

5. Sendinblue

Sendinblue is basically an email marketing tool just like Mailchimp. However, it offers a dedicated plugin for WordPress where you can run all the email marketing processes from the WordPress dashboard. From managing subscribers to sending email campaigns. With Sendinblue, you don’t need to set up an email delivery yourself as it already has a built-in email delivery service. The Sendinblue plugin allows you to:

  • Manage subscribers
  • Manage forms
  • Send campaigns
  • Track the campaigns

Since Sendinblue is an online service, you need to connect your account with your WordPress site first before you can use the plugin. You can connect your account via an API key.

Email Marketing Tools Alternatives to Mailchimp

1. MailerLite

MailerLite is a simple email marketing tool. It is probably the closest alternative to Mailchimp. You can use it for free as long as your subscribers are 1,000 or fewer. With MailerLite, you can send email newsletters and other types of campaigns. MailerLite allows you to filter email subscribers by enabling double opt-in. You can connect MailetLite with your WordPress site in a wide range of ways. If you use Elementor, you can use its form builder to create an email subscription form. Other page builder plugins like Brizy and Divi Builder also support integration with MailerLite.

2. ActiveCampaign

ActiveCampaign is an all-in-one email marketing tool. It offers features like CRM, marketing automation, and email marketing which you can use to replace Mailchimp. However, ActiveCampaign offers no free version, so it is not the best option if you are just getting started with email marketing (trial version is available). Some features related to email marketing offered by ActiveCampaign are email segmentation, subscription form, subscriber manager, drag and drop email builder, and so on.

3. ConvertKit

Looking for an email marketing tool that offers a free version? ConvertKit is worth trying, then. It is an email marketing tool widely used by digital creators. Some creators use it to create a series of emails for their subscribers. In addition to sending newsletters, you can also use ConvertKit to sell digital products and online courses. Some popular page builder plugins and form builder plugins support integration with ConvertKit.

4. GetResponse

GetResponse is an all-in-one email marketing tool, pretty similar to ActiveCampaign. In addition to email marketing, GetResponse also comes with features like web push notification, landing page builder, and website builder.

GetReponse is also supported by most page builder plugins, including Brizy

With GetResponse, you can send email newsletters, create automated email sequenses, set automated blog digest, and so on. Of course, drag and drop email builder and subscriber manager are also available. One of the interesting features offered by GetReponse is an integration with Shutterstock to allow you to insert images from Shutterstock image library.

5. AWeber

Another email marketing tool you can consider if you want to make a switch from Mailchimp is AWeber. It offers a free version, which is great if you are just getting started to maximize your email marketing to grow your website. AWeber itself is an all-in-one email marketing tool. Email marketing is one of its features. Its email marketing feature allows you to send newsletters and other types of email campaigns. AWeber partners with Canva to allow you to design an email using Canva.

The Bottom Line

Maximizing email marketing is crucial to grow your WordPress site. When it comes to email marketing, the number of email subscribers is the main bargaining value when you want to send someone or a company a proposal to partner with. Thanks to the popularity of Mailchimp, many WordPress developers offer a native integration with it. Unfortunately, as we said earlier, popular doesn’t mean the best. There are many better alternatives to Mailchimp. In WordPress, you can use plugins like MailPoet and Newsletter to run email marketing. If you would rather be using a third-party email marketing tool instead, MailerLite and ConvertKit are two examples of Mailchimp alternatives you can use, other than tools we mentioned above.

How to Create Multi-Color Gradient Background in Elementor (More Than Two Colors)

By using Elementor as your page builder you can customize any background of the section in your website by giving it a solid color, gradient color, video, or a slideshow. By default, for gradient background in Elementor, you can use up to two colors only, however, we will give you a way to add more colors to the gradient background.

If you only want to add a two-color gradient into any background of the sections, firstly, you need to create a section and use any block structure you want. After creating one — or if you already have the section that you want to change the color of its background — click the Section Handle to open the settings panel.

On the Edit Section Menu, go-to Style Tab and click on the Gradient Button , it will show the gradient option to choose the color of your liking, and select the first color and second color.

After giving the section background gradient color, you can also change the type of gradient from linear to radial and change the gradient color angle. You can also give it some effects like scrolling effects and mouse effects.

How to Create More Than Two Multi-Color Gradient Background

To create a gradient background that consists of more than two colors, you need to use Elementor Pro as the custom CSS feature is only available on the pro version. So, make sure to upgrade to the pro version if you haven’t done so.

Step 1: Clear First and Second Colors

Firstly, we need to clear the colors from the first and second colors in the Gradient option. Then click the Color option and click the Clear button to clear the color.

Do the above step for the second color as well.

Step 2: Go to Custom CSS Block to Insert Some Code

After the colors are cleared, go to the Advanced tab and click Custom CSS block.

In this step, we will type some codes that allow us to customize the gradient color.

Type or copy the following codes into the available box.

The code:

selector{background-image: 
  linear-gradient(red,blue,green,yellow); 
}

And you will get gradient colored background with four colors in it.

You also can give further customization for the gradient color, such as gradient direction or angle of the gradient by giving more codes to the code above.

selector{background-image: 
  linear-gradient(to top right,red,blue,green,yellow); 
}

The code above makes the color direction go to the top right of the background.

selector{background-image: 
  linear-gradient(150deg,red,blue,green,yellow); 
}

And that code for the angle of gradient color, you can try to change the direction or the angle as you wish.

Bonus

We have created some multi-color gradient backgrounds for Elementor and put them together into a page template. The page consists of 18 sections whereby on each section you will find a three-color gradient background. Simply click the button below to download the template.

9 Best Plugins to Customize the WordPress Dashboard

WordPress is fully customizable. Not only you can customize the frontend (the visible areas by visitors), but also the backend (dashboard). Customizing the WordPress dashboard is required in some cases. For instance, when you are developing a website for clients. We have curated some plugins that you can use to customize the dashboard of your WordPress website.

WordPress itself actually has a built-in feature to customize the main dashboard but limited to disabling the elements on the screen. You can access this feature by clicking the Screen Options menu on the upper-right corner, next to the Help menu.

For more advanced customizations such as renaming the menu labels or replacing the default dashicons (icons of the menu labels), you need to use a plugin or edit the code if you have PHP knowledge.

Here are the WordPress plugins to customize the dashboard:

Best Plugins to Customize to WordPress Dashboard

1. Ultimate Dashboard

Ultimate Dashboard is a plugin developed by David Vongries. He is the developer of Page Builder Framework, one of WordPress themes we recommend to pair with a page builder plugin like Elementor and Brizy. The plugin offers advanced customization options to white label your WordPress dashboard, including the ability to rename the menu labels, replace the default dashicons, and other elements on the dashboard. You can also white label WordPress by replacing the WordPress attributes inside the dashboard, including the icon.

You also have a chance to set the custom accent color of the dashboard. Other features offered by Ultimate Dashboard include custom login (you can customize the login page and login redirect), the ability to add custom widgets, and more. Ultimate Dashboard is released as a freemium plugin. You need to use the pro version to unlock the advanced customization options.

2. Avada Custom Branding

Avada Custom Branding is a plugin developed exclusively for Avada Theme. In other words, you need to use the Avada Theme to use the plugin. The plugin itself is available in the theme bundle of Avada. No need to make another purchase if you want to use it. Avada Custom Branding offers similar features as the ones offered by Ultimate Dashboard above. You can remove the WordPress attributes on the dashboard. If you need to rename the menu labels, you can also do so. However, there are no options to replace the default dashicons.

There are also options to hide the elements on the main WordPress dashboard such as the Screen Options and Help menus on the top bar. Main menus like Settings, Posts, Pages, etc can also be hiden. Avada Custom Branding also makes it possible to customize the login page. You can set things like the icon, background color, background image, link color, and so on. You can also disable the lost password link if you want it.

3. Ultimate Client Dash

Ultimate Client Dash is developed specifically to allow you to customize the dashboard of a WordPress website you built for a client. After installing and activating the plugin, you will have a new user role called “Client” which you can use when creating an account for your clients. You can use Ultimate Client Dash to customize the dashboard before you hand over the website to a client. You can set which menu items can be accessed by your client. For instance, you can prevent the client from accessing plugin manager and theme manager. There is also a white label feature to allow you to remove the WordPress attributes, but you need to use the pro version to unlock it. Ultimate Client Dash offers no option to rename the menu labels on the dashboard.

4. WPShapere

Want to give a different look to your WordPress dashboard? WPShapere is a plugin you can try. The plugin offers over 10 dashboard themes to choose from. Picking a theme will bring a new look to your dashboard.

WPShapere also offers customization options, of course. First, you can remove the WordPress attributes to replace them with your brand’s attributes. You can also rename the default menu labels or disable some menu items. Furthermore, you can also re-arrange the menu items. Here are the key features offered by WPShapere:

  • White label
  • Ability to rename menu labels
  • Custom login page
  • White label email

5. Simple Dashboard Theme

Simple Dashboard Theme is a plugin designed to turn your WordPress dashboard into a minimalist nuance. It brings a new look (theme) to your dashboard. Also, it removes the unnecessary elements brought by the installed plugins. You can also use the plugin to remove the WordPress attributes from the dashboard. Here are the key features offered by Simple Dashboard Theme:

  • Brings a minimalist nuance to your dashboard
  • Remove ads from plugins like Yoast, etc.
  • White label
  • Custom login page

6. WpAlter

You can use WpAlter to apply a simpler theme to your WordPress dashboard like Simple Dashboard Theme above, but WpAlter offers more options to customize the elements on the dashboard. For instance, you can rename the labels of the menu items in the dashboard. You can make use of this feature to, for instance, tailor the menu labels according to the language of your clients. WpAlter also comes with a white label feature in case you want to remove the WordPress attributes such as logo and text.

In addition to renaming the menu labels, WpAlter also allows you to rearrange the menu items. You can also replace the default icons with icons from Font Awesome. Furthermore, you can show/hide menu items based on user roles. Here are the key features offered by WpAlter:

  • Rename menu labels
  • Replace the default menu icons
  • White label
  • Show/hide menu items by use roles
  • Custom login
  • White label emails

7. Slate Pro

Slate Pro is another plugin you can use to apply a more minimalist nuance to your WordPress dashboard. There are several color schemes you can choose from. White label feature whereby you can remove the WordPress attributes, as well as the ability to customize the login page, are available in the plugin. If you want to rename the default labels of the menu items, you can also do so. Slate Pro also allows you to hide specific menu items from certain users based on their roles. Other features offered by the plugin include the ability to hide the admin footer, hide the version number of WordPress, hide WordPress update notices, hide plugin and theme update notices, and hide Screen Options and Help tab.

8. Branda

Branda is a white label plugin developed by WPMUDEV. It allows you to customize both the backend (dashboard) and the frontend (login page, registration page) of your WordPress dashboard. In Branda, features are considered modules. You need to enable the features (modules) before you can customize a certain part. For instance, to customize the login page, you need to enable the Login Screen module. When it comes to dashboard customization, Brand allows you to set things like custom logo (you can replace the WordPress logo with your own logo), color scheme, and several other options. Brand offers no feature to rename the labels of the menu items.

9. White Label

White Label, as you can guess, is a WordPress plugin designed to allow you to white label your WordPress site. You can both rebrand the backend and frontend of your WordPress site. There are plenty of customization options offered by White Label, including the ability to rename the default labels of the menu items. However, you need to upgrade to the premium version to unlock the features. The basic features available on the free version are the ability to set the color scheme and to set a custom welcome message.

The Bottom Line

When creating a website for a client, you might want to customize the WordPress dashboard before you hand over the website to the client. You can customize the dashboard to tailor the menu labels as well as the icons. You can also white label WordPress by removing the WordPress logo and other attributes. If you have no coding skills, using a plugin is the most reasonable alternative to customize the WordPress dashboard. We have curated the best WordPress plugins above that you can use to customize the dashboard of your WordPress site, as well as the login page.

How to Create and Display a Popup by Post Tag in WordPress

We are pretty sure that you’re already familiar with the small window that appears while browsing a website. Well, it’s called popup. Popup can appear in different sizes and screen positions on the website. In WordPress, there are many plugins for creating popups. Such as Elementor Pro, JetPopup, Brizy Pro, and others.

The important thing that we should remember is popup shouldn’t be annoying to your website visitor. So, create the popup as simple and attractive as possible.

Some Plugins to Create Popup in WordPress

Elementor Pro

Elementor Pro is an extension of Elementor with hundreds of premium features. So, it can empower you with vast professional tools that speed up your workflow and design. Elementor Pro gives you complete control over the layout and design of your website. In this case, you can play around to customize your popup design. Using Elementor Pro to create a popup by post tag is very simple and easy to use. You can easily set the display conditions of your popup very specifically.

JetPopup

JetPopup by Crocoblock is an add-on for Elementor. You can buy it as a stand-alone plugin or you can buy in a set with other plugins from Crocoblock. The advantage of using JetPopup to create a popup is it has many cool features.

  • You can play with popup triggers
  • You can create animation popup
  • A tons of popup presets

Brizy Pro

Popup Builder in Brizy Pro is coming to give you two flavors. The first is on click popup and the second is automatic triggers and conditions.

  • Open on click : Your popup can be trigereed by simply clicking on your elements in your page.
  • Triggers and conditions automatically: You can configure which visitor actions will determine the moment when popups are shown.

How to Create and Display a Popup by Post Tag Using Elementor

As we mentioned above that you have many options to create a popup in WordPress. In this tutorial we will show you how to create and display popup by post tag using the Elementor Pro version, so make sure that you’ve already had one.

Step 1: Create the Popup Template

The first thing that you have to do is create a new popup template. To create a new popup template, go to Templates > Popups on your WordPress dashboard and click the Add New button.

Then add the name of your popup and click CREATE TEMPLATE button.

It will direct you to the template library, you can choose a template from the library window or you can design your popup template. To use any template on your library window, just click the Insert button. But in this tutorial, we will create the popup template from the scratch. Click the X icon to close the template library.

Step 2: Adjust the Popup Setting

We need to do some adjustments in the popup setting before start creating a popup template. You can find the best settings for your site. In this tutorial, we will show you the popup settings for your preference. Click the gear icon on the bottom-left corner. In the popup settings, change the Width to 90 viewport width (VW), and Position to Center-Bottom.

Step 3: Design the Popup

Next, design your popup template. Add a new section and select the 5-column structure. In the section settings, set the Width to 950. You can play around with your settings. For example, you can go to the Style tab to set the background, go to the Advanced tab to customize the margin, and many more.

Now back to your columns. On the left column, set width to 33%, and for the other four is 16%.

On the left column, we will add a Heading widget with some text. You can add some text that contains an invitation to your website visitors to visit your other content that is relevant to the current content or any text you want. On the right, we will add an Image widget. You can add some images from thumbnail/ featured images of posts or manually upload the images.

Now the structure is ready. Go back to Popup Settings to customize entrance animation, exit animation, and margin. In this tutorial, we set the entrance to Fade In Down and for the exit animation to Fade Out Up. Next, go to the Advanced tab and then set the margin to 30 (link value together).

Step 4: Publish the Popup

So now the design is ready, let’s click the PUBLISH button to set the display conditions and trigger. To set the display condition, click the ADD CONDITION button and select your option from the dropdown. Since you want to display the popup by post tag, you can set the following display conditions (see the GIF).

Click Next. On the Triggers tab, set the trigger to On Scroll by switching the toggle to Yes. Set the Direction to Down, and set the Width to 95%. Because we want the popup to show when the visitors reach the end of our article.

In this tutorial, we’re not going to set any Advanced Rules. So click on SAVE&CLOSE. Well, now we’re done. Let’s see what it looks like.

The Power of Popup Builder: How to Achieve More with a Single WordPress Plugin

When implemented properly, a popup can be a great marketing tool to grow your website. For instance, you can use an email subscription popup to collect the email addresses of your visitors to turn them into your website subscribers. In WordPress, you can use a dedicated plugin like Ninja Popups to create a popup. Or, if you use Elementor, you can upgrade to the pro version to unlock its popup builder feature. A Divi user? Divi plugins like Divi Overlays, Divi Modal Popup, to Divi Supreme allow you to create a popup on your Divi-powered WordPress site.

One of the perks when using a popup to collect email addresses is that you can set a delay before the popup shows up. This practice can be an extra filter to collect active subscribers. Say you set the delay to 60 seconds. This means that the popup will only show up to visitors who stay on your website for 60 seconds or longer. If visitors stay on your website longer than 60 seconds, you can assume they enjoy your content. And when they subscribe via your email subscription popup, there will be a bigger chance they will open your emails when you send them newsletters.

In addition to email subscription popup, you can also make use of a popup to create something else, but it depends on the features offered by the popup builder plugin you use.

Features to Consider When Choosing a Popup Builder

A good popup builder should allow you to control the behavior of a popup. You should, for instance, be able to control how a popup appears. Whether on page load, on click, on page scroll, and so on. More importantly, it should also allow you to control the design of your popup.

Elementor Pro and JetPopup are two of the best popup builder plugins for WordPress. The two allow you to set the behavior of your popups. You can also control on which pages a popup appears thanks to their display condition feature. Here are the features to consider when choosing a popup builder plugin for WordPress:

— Display Condition

Display condition is a feature used to control where a popup appears. For instance, you can set a popup to appear only on a specific page. This feature is crucial especially if you want to create a popup for a marketing purpose. With the feature, you can display different popups on different pages or blog posts.

Elementor Popup Builder (available in Elementor Pro) and JetPopup are two examples of popup builder plugins that come with a display condition feature. Both Elementor Pro and JetPopup allow you to display a popup on specific pages and posts. For instance, you can set a popup to show up on posts under a certain category, post with a certain tag, post written by a specific author, and so on.

— Trigger Type

A popup won’t show up without a trigger. In the context of popup, the trigger can be page load, click, page scroll, and so on. In general, there are five events to trigger a popup to appear:

  • Page load
  • Page scroll
  • Click
  • Exit intent
  • After inactivity

The more trigger types a popup builder offers, there are more things you can do with a popup as well. For instance, if your popup builder supports on click trigger, you can create an off-canvas menu.

For your information, Elementor Popup Builder supports advanced trigger types to allow you to display a popup based on the following rules:

  • After x page views (e.g., 3 page views)
  • After x sessions (e.g., 3 sessions)
  • When arriving from a specific URL
  • When arriving from search engines
  • Based on login status (loggen in and logged out)
  • Based on web browers
  • Based on device types (desktop, tablet, smartphone)

— Ability to Control the Design

The ability to control the design is another feature you need to consider when choosing a popup builder plugin. In general, a popup consists of the following elements:

  • Overlay
  • Close button
  • The content of the popup itself

You should be able to control all elements above so that you can create a popup that fits your site design (e.g., color scheme). If you create a popup using Elementor or JetPopup, you can control everything related to design. Not just the elements above, but also layout, alignment, box shadow, border radius (and width), and so on.

Best Popup Builder Plugins for WordPress:

Before picking a popup builder, make sure to always define your needs first. If your main intention is to create email subscription popups, make sure the popup builder you want to use supports integration with the email marketing tool you use.

Here are five popup builder builders for WordPress you can consider:

1. Elementor Pro

If your WordPress website is built with Elementor, no need to install an extra plugin to create a popup. As mentioned earlier, the pro version of Elementor comes with a popup builder you can make use of. You can create the popup using the visual editor of Elementor. You can add any element you want, including a form which you can connect with MailerLite, Mailpoet, GetResponse, and other email marketing tools of your choice.

Key features:

  • Display conditions
  • A wide range of trigger types
  • Custom position
  • Full control over the design

2. JetPopup

If you enjoy using Elementor but are not interested in using the pro version, you can use JetPopup to create a popup. JetPopup is an Elementor add-on from Crocoblock designed specifically to create popups. JetPopup can also be used to create an email subscription popup, unfortunately, the integration is limited to Mailchimp.

Key features:

  • Display conditions
  • A wide range of trigger types
  • Custom position
  • Full control over the design (you design your popup with Elementor)

3. Brizy Pro

Brizy is a feature-rich page builder plugin just like Elementor. The pro version also comes with a popup builder. You can control the design using the visual editor of Brizy which offers a live editing experience just like other page builder plugins. When creating a popup using Brizy Pro, you can add any element, including a form which you can connect with an email marketing tool. Brizy Pro supports integration with many email marketing tools, not just Mailchimp.

Key features:

  • Display conditions
  • A wide range of trigger types
  • Custom position
  • Full control over the design

4. Divi Supreme

If you use Divi Builder on your WordPress site, Divi Supreme is a plugin you can use to create a popup. Divi has no built-in feature to create a popup. Divi Supreme allows you to create a popup using the visual editor of Divi. However, it doesn’t allow you to set a display condition like other popup builders above.

Key features:

  • A wide range of trigger types
  • Custom position
  • Full control over the design

9 Things You Can Create with a Popup Builder

The open ecosystem of WordPress allows developers to create plugins. As a user, you can solve a problem or add a new feature/functionality to your website using a plugin. However, installing too many plugins on a single website is not good practice. Instead, you can install a single plugin that can solve multiple problems.

If your popup builder plugin supports display condition, custom position, and multiple trigger types, you can use it to create the following things on your website:

1. Full-Screen and Off-Canvas Menu

To create a full-screen or off-canvas menu, your popup builder needs to support on-click trigger type. The idea is simple. You create the popup and set the trigger type to on-click. You can then call the popup using a certain element (e.g., button). You can place the button in the header or any area you want to place the menu item. Here is an example:

Elementor Pro, JetPopup, and Brizy Pro are examples of popup builders that allow you to achieve such a thing above.

2. Email Subscription Form Popup

We have mentioned email subscription popup a couple times in this post. The fact is that it is the most common form of popup found on websites on the internet.

There is one crucial thing to consider before you pick a popup builder to create an email subscription: the email marketing tools it supports. In Elementor Pro and Brizy Pro, you can use the Form element to add the email subscription form to your popup. The two allow you to connect a form with the following services:

  • MailerLite
  • ConvertKit
  • ActiveCampaign
  • GetResponse
  • Mailpoet
  • Sendinblue
  • Campaign Monitor
  • Mailchimp

A simple tip. To increase email open rate, you can set a delay to your popup (e.g., 60 seconds). Assuming those who stay on your website longer are really interested in your content, the chance they will open the emails is higher if they subscribe. If your email marketing service supports double opt-in, make sure to enable it to add extra filtering.

3. Back to Top Button

Back to top button is another thing you can create with a popup builder. The requirement for this is that your popup builder needs to support custom position so that you can place the button in any area you like.

Elementor Pro, Brizy Pro, and JetPopup are three examples of popup builder plugins that make it possible to create this type of button. In Elementor Pro and Brizy Pro, you can add a back to top button to blog posts or specific area by taking advantage of their theme builder feature.

4. Notification Bar

Some website owners use a notification bar to convey something to their visitors (special offer, featured content, etc.). Instead of installing a notification bar plugin, you can use your popup builder to create a notification bar.

In order to be able to create a notification bar, you need to make sure that your popup builder allows you to set the vertical alignment of the popup to top and width to full-width.

Which popup builders support those setting options?

Brizy Pro, Elementor Pro, and JetPopup are examples of popup builders that support those setting options.

5. Cookie Consent

Transparency is important to every online business. You need to disclose what data your website stores. The vast majority of websites have a privacy policy page the visitors can read. But it seems very few visitors really read the page. To “force” them to read the privacy policy page on your website, you can create a cookie consent page. You can set it to always show up until visitors close it. To do this, you need a popup builder that has a setting option to close the popup via a link or button.

Elementor Pro, Brizy Pro, and JetPopup are three popup builders that support a setting option to close a popup on button/link click.

6. Age Verification/Content Locker

The idea of this type of popup is pretty similar to cookie consent above whereby you require a visitor to close the popup via a button or link. In order to make the content invisible, you need to enable the popup overlay as well. The following settings are required to create an age verification/content locker popup:

  • Enable popup overlay
  • Disable close button
  • Disable pressing escape key to close the popup

Here is an example of age verification popup.

7. Floating Button

Do you want to create a floating button on your website? A popup builder also allows you to do so. But you need to make sure that your popup builder allows you to add a button element. The core of Elementor and Brizy are a page builder plugin. In other words, you can add any element to your popup, including a button. To make your content visible, you can disable the overlay of the popup. The capability of setting a custom position would be a great addition as you can place the button in any area to your liking.

8. Floating Social Sharing Buttons

The idea of this popup type is pretty similar to the floating button above whereby you disable the popup overlay and then place the popup to an area you want by making use of the custom position feature. But first, you need to make sure that your popup builder allows you to add a social sharing buttons element. Elementor is a page builder that has this type of element. That said, you can use its popup builder to create floating social sharing buttons. There are even premade popup templates for this purpose.

9. Promotional Banner

Last but not least. Another popup type you can create with a popup builder is a promotional banner. You can create a promotional banner to offer a special discount or other types of marketing strategies. You can make use of the display conditions and trigger types offered by your popup builder to target specific visitors to get a better result. For instance, you can set a popup to show up only for visitors coming from search engines. Avoid displaying a popup on a page without a delay. Otherwise, it will be considered annoying by your visitors. Also place the popup in the right position.

The Bottom Line

Popup is a great tool to grow your website, but you need to implement it properly as the vast majority of visitors consider popup annoying. Never create a popup that hinders your visitors from viewing your content. Also always consider adding a close button to give an option to your visitors to hide the popup so that they can focus on the content.

In WordPress, you have lots of options of popup builder plugins, but consider the features we mentioned above every time you want to install one (especially if you want to use a paid plugin). You can achieve many things with a popup builder only if your popup builder supports the following features:

  • Display conditions
  • Multiple trigger types
  • Full design control
  • Custom position

Elementor Pro — in our opinion — is the best popup builder out there, but you have freedom to pick your own option. As long as the option matches your needs, then it’s enough.

Pin It on Pinterest

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.