How to Add Image into a Text in Elementor

Elementor has allowed everyone to become a web designer without needing to have advanced CSS skills. Its visual editor allows you to create a beautiful web page without writing any single line of CSS code. You can simply add the design elements (widgets) you want and style them up on the settings panel. Even so, having CSS skills would a great bonus in using Elementor. You will be able to apply unique styles to your web page using the custom CSS feature of Elementor. In this post, we will show you how to add an image into a text in Elementor using Elementor’s custom CSS.

In some design tools such as GIMP and Photoshop, you typically need to add a layer mark to add an image into a text. In Elementor, you can accomplish the same thing by adding a CSS code as the Heading widget and the Text widget of Elementor has no setting option to add an image as the background.

Adding image into a text in Elementor

Before getting started, make sure that you have upgraded your Elementor to the pro version if you haven’t done so since custom CSS is only available on Elementor Pro (read: Elementor Free vs Elementor Pro). Once you are ready, create a new page or template and edit it with Elementor. Of course, you can also edit an existing one. Add the Heading widget to the canvas area.

Go to the settings panel to replace the default text under the Content tab and.

Go to the Style tab to style up the text. You can set the text size, font style, and so on by clicking the pencil icon on the Typography option under the Title block. Since you want to use an image as the background of your text, no need to set the text color.

Next, go to the Advanced tab and open the Custom CSS block and paste the following CSS code. Replace the image URL with your own image URL.

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

Here is the example.

If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

6 Best Free SMTP WordPress Plugins and Why You Need One

SMTP — which stands for Simple Mail Transfer Protocol — is an internet standard for email transmission. This protocol is used for receiving and sending emails. Big mail services such as Gmail, Yahoo Mail!, and Outlook may use their own proprietary protocol, but they keep use SMTP when sending or receiving emails from outside their systems.

WordPress has no built-in SMTP feature. Instead, it uses a function called wp_mail for mail delivery. Most form builder plugins — Including Elementor’s form builder — make use of the wp_mail function to deliver the form submission if the action button is set to email. Some e-commerce plugins (including WooCommerce) also use the same function for shopping transactions such as notification or confirmation.

The wp_mail function itself depends on the send_mail function belongs to PHP to work. If this function (send_mail) is disabled, then the wp_mail function cannot work. As a result, your form submissions and shopping transactions are failed to send. In such a case, you can install and configure an SMTP plugin to add an SMTP functionality to your WordPress site. This way, the mail delivery job will be handled by the SMTP plugin instead of the wp_mail function.

In addition to form builder plugins and e-commerce plugins, some email marketing plugins, such as weMail and Newsletter, also require SMTP to work. That is why an SMTP plugin is crucial enough if you use your WordPress site for a business purpose.

6 best free SMTP WordPress plugins

Now you have understood the role of an SMTP plugin on WordPress. Here are 6 of the best SMTP plugins you can use for free.

1. Post SMTP

Post SMTP is one of the most popular SMTP plugins for WordPress that you can use for free, totally free. You can use this plugin to configure Gmail as an SMTP server for your WordPress site. You just need to connect your Gmail account with this plugin using an API key. Configuring Gmail to become an SMTP server on your WordPress site is relatively easy with Post SMTP as it comes with a helpful configuration wizard. In addition to Gmail, Post SMTP also supports other SMTP services such as Mandrill, SendGrid, and Mailgun. If you use Google Chrome, the developer of this plugin also offers a Chrome extension to notify you over failed email delivery.

2. WP Mail SMTP

Do you use WPForms? If yes then WP Mail SMTP is a perfect plugin for you. This SMTP plugin is developed by WPForms. Unlike Post SMTP which is released as a free plugin, WP Mail SMTP — just like WPForms — is released as a freemium plugin. The free version allows you to configure Gmail as an SMTP server on your WordPress site. The free version also supports SendGrid, Sendinblue, and Mailgun. If you use SMTP services like Amazon SES, Outlook, Office 365, Microsoft SMTP, you need to use the pro version. Other features offered by the pro version of WP Mail SMTP include mail logging and notification management.

3. SMTP Mailer

SMTP Mailer is a great plugin if you have your own SMTP server and want to use it on your WordPress site. You just need to enter the SMTP host, SMTP login, and SMTP port. This plugin will do the rest.

4. Gmail SMTP

Gmail SMTP is an SMTP plugin developed by the same developer as the SMTP Mailer above. The difference, this plugin is designed specifically for Gmail. It is a great fit if you have no SMTP server and want to use Gmail as the SMTP server on your WordPress instead. Same as Post SMTP and WP Mail SMTP, you will need a Gmail API key to use this plugin.

5. WP Mail Bank

WP Mail Bank has one thing in common as WP Mail SMTP. This plugin is also released as a freemium plugin with the free version allows you to configure Gmail as the SMTP server on your WordPress site. If you have your own SMTP server, WP Mail Bank also allows you to use it on your WordPress site.

Popular SMTP services such as SendGrid and Mailgun are also supported by WP Mail Bank. However, you need to use the pro version to use it on your WordPress. The pro version comes with a report and notification feature. WP Mail Bank itself is easy enough to use as it offers a helpful configuration wizard.

6. Easy WP SMTP

Easy WP SMTP is a suited plugin if you have your own SMTP server and want to use it on your WordPress site. Just like SMTP Mailer, you just need to provide the SMTP host, SMTP login, and SMTP port of your SMTP server to use it on your WordPress site. In addition to using your own SMTP server, Easy WP SMTP also allows you to configure Gmail, Yahoo Mail, and Hotmail to become an STMP server on your WordPress site.

How to Create a Gradient Progress Bar in Elementor

Elementor has a native Progress Bar widget that you can use to add elements like skill level or progress of something to the page/template you are creating. When using this widget, you can customize its look by changing the color and the typography of the text. This widget only allows you to use a solid color for the bar.

Is it possible to create a progress bar with a gradient color?

If you have a CSS skill, you can use the pro version of Elementor and add a custom CSS to the Progress Bar widget to create a gradient progress bar. Otherwise, you can install an add-on that offers a progress bar widget in which allows you to choose a gradient color when changing its color. Two add-ons that offer such a widget are Essential Addons and JetElements.

Creating a gradient progress bar in Elementor using Essential Addons

Essential Addons is one of the most popular Elementor add-ons. It offers more than 60 widgets, including a Progress Bar widget that you can use to create a gradient progress bar. Essential Addons is a freemium add-on. The Progress Bar widget is available on the free version. You can download the free version of this add-on on the official plugin directory of WordPress.

After installing and activating the Essential Addons, create a new page or template and edit it with Elementor and drag the Essential Addons’ Progress Bar widget to canvas.

Select the progress bar style you want to create from the dropdown menu on the Layout option. There are 7 progress bar styles you can choose from. To create a gradient progress bar, you need to select the Line style.

Set the title, counter value, and animation duration. Once done, switch to the Style tab and open the Fill block. On the Background Type option, select Gradient and set first color and the second color. You can also set the gradient type (linear or radial), location and the angle.

You can open other option blocks on the Style tab to set more styling options.

Creating a gradient progress bar in Elementor using JetElements

Unlike Essential Addons which is released as a freemium add-on, JetElements is released as a premium add-on. So, you need to make a purchase to download it. You can download JetElements on the Crocoblock website. Crocoblock is the developer of JetElements. JetElements costs $19 per year. Alternatively, you can get JetElements with a one-time purchase option on the Jupiter X theme and Monstroid2 theme.

After installing and activating JetElements, create a new page or template and edit it with Elementor. Drag the JetElements’ Progress Bar widget to the canvas area.

Set the progress bar type from the dropdown menu on the Type option. Also set the set title as well as the percentage.

Go to the Style tab to style up the progress bar. On the Progress Bar block, set the background type of the status bar to gradient and set the first color as well as the second color. Also set the location, gradient type (linear or radial), and angle.

You can open other option blocks on the Style tab to set more styling options.

How to Integrate Elementor with ConvertKit

Do you use ConvertKit and want to create a website with Elementor? If yes, you are in luck as Elementor supports integration with ConvertKit. The integration allows you to collect email subscribers via an Elementor form. No need to install an extra plugin. You just need a ConvertKit API key to connect your ConvertKit account with Elementor.

In order to able to integrate Elementor with ConvertKit, you need to use Elementor Pro since the Elementor integration with third-party services is only available in the pro version (read: Elementor Free vs Elementor Pro).

Follow the steps below to integrate Elementor with ConvertKit.

Step 1: Get a ConvertKit API key

To get a ConvertKit API key, visit the ConvertKit website and login with your account. Once logged in, click your username on the top-right corner and select Account Settings.

Copy the API key on the Account Info section.

Step 2: Integrate Elementor with ConvertKit

Once the API key is copied, login to your WordPress and go to Elementor -> Settings to open the Elementor settings page. Click the Integrations, scroll down, and paste the API key you have just copied to the ConvertKit section. Click the Validate API Key button to check the validation of the API key. Once the validation succeeds, click the Save Changes button on the bottom.

Step 3: Create a form

Once Elementor and ConvertKit are successfully integrated, you can create a new form to collect email subscribers to your ConverKit account. To do so, create a new page, post, or template and edit it with Elementor. Or, you can also edit an existing one. Create a new form by dragging the Form widget to the canvas area.

Set the fields you need on the Form Fields block. Once done, open the Actions After Submit block and set it to ConvertKit.

The step above would create a new block called ConvertKit. Open this block and select an existing form you have on your ConvertKit account. On the API Key option, leave it to default. Also set the field mapping according to the fields on the form you selected. You can also select a tag on the Tags field.

To customize the look of your form, you can go to the Style tab. There are four blocks you can open with each block offers different styling options.

Form block

This block allows you to set the gap between columns and rows of your form, form label typography (font size, font family, font style), text color, and HTML field typography and text color.

Field block

This block allows you to customize the look of the form fields. From text color, typography, background color, border color, and border radius.

Button block

This block allows you to customize the look of the form button. From the background color, text color, typography, border color, border radius, hover color, text hover color.

Messages block

This block allows you to customize the typography as well as the text color of the success message, error message, and inline message.

Click the PUBLISH/UPDATE button once you are done editing your page.

In case you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

How to Integrate Elementor with Typeform

Typeform is a unique online form creator that allows you to create an interactive form, while Elementor is a great page builder plugin with an intuitive visual editor. Combining the two is a great idea to increase user engagement on your website. You can create content like quizzes or an interactive survey with Typeform. Unfortunately, Elementor has no default feature that allows you to integrate it Typeform. You can use Essential Addons to integrate Elementor with your Typeform account.

The new version of this add-on (version 4.0) comes with a Typeform widget that allows you to add your existing Typeform forms to an Elementor-powered page or template. Essential Addons itself is a freemium Elementor add-on. You can use the free version of Essential Addons to add your form since the Typeform widget is available on the free version. Before being able to use the Typeform widget, you need to integrate Elementor with your Typeform account first using a personal token.

Integrating Elementor with Typeform

Before getting started, make sure you have installed and activated Essential Addons on your WordPress site. You can download the free version of Essential Addons on the official plugin directory of WordPress. If you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

First off, login to Typeform with your account. Click the arrow icon next to your username and click Settings.

Click Personal tokens on the left sidebar (on the Profile section) and click Generate a new token button on the right sidebar.

Give your token a name and click the Generate token button. Copy the generated token.

Login to your WordPress dashboard and go to Essential Addons -> Essential Addons to open the Essential Addons settings page.

On the Essential Addons settings page, go to the Elements tab. Scroll down to the Form Styler Elements section to find the Type form widget. Click the Settings link and paste the personal token you have just copied.

Click the SAVE SETTINGS button on the bottom to save the new change.

Adding a Typeform Form

Once Typeform is successfully integrated with Elementor, you can now add an existing form on your Typeform account. To do so, simply create a new page, post, or template and edit it with Elementor. Of course, you can also edit an existing page, post, or template. Drag the Typeform widget to the canvas area. Select a form you want to add from the dropdown menu on the Typeform block under the Content tab.

To style up your form, you can open the Style tab. You can change the color of form container, form width, height, opacity, and margin.

Publish/edit your page once you are done styling it up.

How to Use Inline Positioning in Elementor

When creating a page or template with Elementor, you sometimes want some widgets to have a side-by-side position in the same column. Elementor supports inline positioning that allows you to accomplish it. To give an overview, here is what we are talking about.

As you can see from the image above, there are two button widgets in the horizontal alignment in the same column. In Elementor, when adding a new widget to a certain column, you can only place it beneath or above an existing widget, in a vertical alignment. The custom positioning feature of Elementor allows you to have two or more widgets in a side-by-side position in the same column as the one in the image above.

First off, select a widget you want to set the custom position of and go to the Advanced tab. Open the Positioning block and set the Width to Inline (auto).

Select another widget in the same column and repeat the steps above.

That’s it.

The practice above is great to be implemented on a page where you offer a digital product, say a WordPress theme. You can provide two buttons (i.e. Buy and Preview) that your visitors to choose from.

In case you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

How to Create a Maintenance Page with Elementor

With Elementor installed and activated on your WordPress site, you don’t need to install an extra plugin to create a maintenance page. The visual editor of Elementor allows you to create a stunning maintenance page on your WordPress site without having to deal with CSS. You can add any element you want (called widget) such as counter, form, image, button, text, and so on. In this post, we will show you how to create a maintenance page in WordPress using Elementor.

In case you haven’t known about Elementor (we are not sure about that). It is the most popular WordPress page builder plugin with over 5 million installations. You can use Elementor to create any type of web page. From the homepage, about page, contact page, 404 page, to a maintenance page. The pro version of Elementor even allows you to create a custom header, custom footer, and custom single post layout. You can read the beginners’ guide we have written to learn how to use Elementor.

How to create a maintenance page with Elementor

There are two ways to create a maintenance page in WordPress with Elementor. First, you can create the page from scratch. You can choose this option if you have your own design concept for the maintenance page you want to create. Second, you can create the maintenance page from a template. This option is a great fit if you need an instant way to create the maintenance page. You just need to replace the default content (text, button, image, and so on) with your own content. In this post, we will use the second method.

You can download the free version of Elementor on the official plugin directory of WordPress.

Assuming you have installed and activated Elementor on your WordPress, create a new page (Pages -> Add New) and edit it with Elementor.

You will be taken to the Elementor editor after clicking the Edit with Elementor button above. Before you start to edit the page, set the page layout first. To do so, open the Settings panel by clicking the gear icon on the bottom-left corner. Set the page layout on the Page Layout option under the General Settings block under the Settings tab.

Since we want to create the maintenance page from a template, click the folder icon on the canvas area to open the template library.

Search for the maintenance page template you like. You can use the search box to ease your job. Click the INSERT button to load the template to the Elementor editor.

Once the template is loaded to the Elementor editor, you can start editing it. Click/select a widget you want to edit and go to the left panel to edit the content.

Again. You can read this guide if you are completely new to Elementor. You can learn how to edit a widget, column, and section in Elementor from the guide.

Once you are done editing the page, click the PUBLISH button on the bottom side on the left panel.

Applying the maintenance page

Once you are done creating the maintenance page, you can apply it by setting it as the homepage of your website. To do so, switch back to the WordPress dashboard and go to Settings -> Reading. On the Your homepage displays option, set to static page and select the maintenance page you have just created from the dropdown menu.

Click the Save Changes button to apply the new change.

You can revert the static page to your actual homepage once your website is ready.

How to Integrate ActiveCampaign with Elementor

ActiveCampaign is one of the email marketing tools that you can integrate with Elementor. Just like other tools such as MailChimp and MailerLite, the ActiveCampaign integration with Elementor allows you to collect email addresses/contacts via an Elementor form.

You need an ActiveCampaign API key and API URL to integrate your ActiveCampaign account with Elementor. Before getting started the integration, please note that the third-party service integration is only available on the pro version of Elementor (read: Elementor Free vs Elementor Pro).

Step 1: Get the ActiveCampaign API key and API URL

First, visit the ActiveCampaign website and login with your account. Click the Settings menu (the gear icon) on the left sidebar and select Developer.

Copy the API URL and the API key on the API Access section.

Step 2: Start the integration

Once the API URL and API key have been copied, login to your WordPress dashboard and go to Elementor -> Settings. Open the Integrations tab and scroll down to the ActiveCampaign section. Paste the API URL as well the API key to the available fields and click the Validate API Key button to check the validation.

Click the Save Changes button on the bottom to apply the change.

Step 3: Create an Elementor form

Once ActiveCampaign is successfully integrated with Elementor, you can now create a form and set the submit button to ActiveCampaign. To create a form in Elementor, simply drag the Form widget to the canvas area.

Set the fields you need on the Form Fields block under the Content tab. Once done, open the Actions After Submit block and set it to ActiveCampaign.

You will see a new block called ActiveCampaign after setting the action after submit. Open this block and select an existing list you have on your ActiveCampain account. On the API Credentials option, leave it default. Also select the field mapping according to the fields you have on your form.

Click the PUBLISH/UPDATE button once you are done editing your Elementor page.

To test if your integration works out, simply fill out your form and go to the ActiveCampaign dashboard to check the result.

In case you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

How to Create a Gradient Heading in Elementor

When creating a web page or template with Elementor, you can make a little experiment with the heading element to make the page you are creating looks standout. One of the experiments you can try is by adding a gradient effect to the heading element. This post will show you how.

The Elementor’s native Heading widget offers no option to set a gradient effect. You can only use the solid color for the heading text. You can add a custom CSS to add a gradient effect to the heading element in Elementor. Custom CSS itself is only available on Elementor Pro so you need to upgrade your Elementor to the pro version if you haven’t done so (read: Elementor Free vs Elementor Pro).

Adding gradient effect to the heading element in Elementor

Assuming you have upgraded your Elementor to the pro version, create a new page/template and edit it with Elementor. Or, you can also edit an existing one. Add the Heading widget to the canvas area.

Go to the Advanced tab and open the Custom CSS block and paste the following CSS code.

The code:

selector .elementor-heading-title {
    background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
    -webkit-background-clip: text;
    display: inline-block;
    padding: 14px;
    -webkit-text-fill-color: #00000000;
}

You can change the colors by pasting the hex code of the colors you like on the background-image property.

For more gradient options, you can read our posts here and here.

The easier way to create a gradient heading in Elementor

If adding CSS looks scary for you, there is an easier way to create a gradient heading in Elementor: by installing an add-on. Two add-ons that allow you to create a gradient heading is Happy Addons and Raven. Happy Addons is a freemium add-on and the widget to create a gradient heading (called Gradient Heading) is available on the free version. You will be able to set the gradient type (radial or linear), gradient position, and location.

The Raven’s Heading widget also offers the same gradient setting options as Happy Addons. However, you need to buy the Jupiter X theme to use Raven as the add-on is built exclusively for the Jupiter X theme.

In case you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.

5 Elementor Add-ons to Create an Advanced Map

Are you looking to create an advanced map on your Elementor-powered website? Elementor has a native widget — called Google Maps — that allows you to create a map. However, you can only use the widget to create a basic map. You can install an add-on if you need to create an advanced map on your website. We have compiled the best Elementor add-ons that offer a widget to create an advanced map.

Elementor — as well as the add-ons on the list below — use Google Maps to provide the map. You need an API key to create an advanced map with Google Maps (read: How to get a Google Maps API key). The new Google policy also requires you to enable Google Cloud billing although you can still use Google Maps for free.

So, here is the list of the Elementor add-ons that you can use to create an advanced map on your website.

1. Essential Addons

Essential Addons is the best Elementor add-on to create a map. The Essential Addons’ Google Map widget allows you to create 8 map types: Basic, a map with multiple pins, static map, polyline, polygon, overlay, map with routes, and a 360-degree virtual tour.

In addition, you can also select one out of 6 map themes when creating a map with this add-on. With the ability to create a 360-degree virtual tour, Essential Addons is a perfect add-on for sites like zoo sites and tourism attractions. If you have a trip agency business, providing a 360-degree virtual tour allows your aspiring consumers to have an overview of the place you offer.

2. JetElements

JetElements is one of the most popular premium Elementor add-ons. It is developed by Crocoblock and part of the Jet Plugins family. This add-on comes with a widget — Advanced Map — that allows you to create a map with multiple pins.

There are 11 different map styles offered by the JetElements’ Advanced Map widget. There are also options to enable/disable/ scroll wheel zoom, show/hide zoom controls, show/hide fullscreen control, show/hide street view controls, and so on.

3. PowerPack

If you are looking for an Elementor add-on with a white label feature then PowerPack is a great fit. This add-on also comes with a widget — called Google Maps — that you can use to create a map with multiple pins. The PowerPack’s Google Maps widget is great to show certain locations in a city or country.

There are 7 map styles offered by the PowerPack’s Google Maps widget. You can also enable/disable street view controls, zoom control, fullscreen control, and scroll wheel zoom. There is also an option to use a custom pin.

4. Ultimate Addons

Ultimate Addons also has a widget that you can use to create a map with multiple pins. When adding a new location, you can set a custom pin icon if you don’t like the default pin icon. Just like other add-ons above, the Ultimate Addons’ Google Map widget also allows you to set enable/disable the controls such as street view controls, zoom control, fullscreen control, and zoom on scroll.

There are 10 map styles offered by Ultimate Addons’ Google Map widget.

5. The Plus Addons

The Plus Addons is another add-on you can consider if you are looking to create a map with multiple pins on your website. The Plus Addons’ Google Map widget allows you to add multiple locations on your map. When adding a new location, you can set a custom pin icon.

There are 7 map styles you can choose from. You can also set the map type whether roadmap, satellite, terrain, or hybrid. You can also set an overlay to make your map looks more stylish.

4 Email Marketing Plugins You Can Use via WordPress Dashboard

Most WordPress page builder plugins, including Elementor and Divi Builder, come with a default feature that allows you to integrate an email marketing service with your WordPress site. However, it only allows you to create an email subscription form to collect subscribers. The overall email marketing process — such as managing the subscribers, sending newsletters, monitoring, and so on — is keep performed via the dashboard of the email marketing service you use instead of the WordPress dashboard. If you are looking for an email marketing plugin that you can use via the WordPress dashboard, we have collected the best plugins.

A good email marketing plugin should consist of at least the following components:

  • Mail delivery (SMTP).
  • Subscriber manager.
  • Analytics.
  • Email composer where you can create a new campaign.

Top 4 All-in-one Email Marketing Plugins for WordPress

Here are our recommendations for email marketing plugins that you can use directly from the WordPress dashboard.

1. Sendinblue

Sendinblue is an email marketing service much like Mailchimp and MailerLite. Sendinblue is especially great service for WordPress users as it comes with a plugin that allows you to run the whole email marketing process via your WordPress dashboard. No need to back and forth between the WordPress tab and Sendinblue tab in the web browser. The Sendinblue WordPress plugin allows you to:

  • Manage email subscription forms.
  • Manage subscribers.
  • Create new campaigns.
  • Monitor the campaigns.

Again, you can do the marketing activities above via your WordPress dashboard. You just need to connect your Sendinblue account with your WordPress site via an API key. Sendinblue has a default SMTP so you don’t need to use an external mail delivery service to send emails.

The Sendinblue plugin is free while the Sendinblue service itself is freemium. The free version of Sendinblue allows you to send a maximum of 300 emails per day. You can collect as many email subscribers as you want.

2. MailPoet

MailPoet is an email marketing plugin developed specifically for WordPress. It comes with a lot of features just like popular email marketing services out there, but WordPress-only. It comes with a drag-and-drop email composer to make it easy for you to create a professional email newsletter or certain campaigns. There are also premade email templates you can choose from to save you time in creating the email content. Same as Sendinblue, the MailPloet plugin can be downloaded for free, while the service itself is freemium.

MailPoet allows you to run the following campaigns right from your WordPress dashboard:

  • Send newsletters.
  • Automatically send an email to a new subscriber.
  • Automatically send an email to subscribers about new content.
  • Automatically send an email notification for new product availability (for WooCommerce).

MailPoet has a default email delivery service, but you can also use your own SMTP service if you have one.

3. weMail

weMail is an email marketing plugin developed by weDevs, the same developer that develops the Happy Addons, a premium Elementor for Elementor. It is also developed specifically for WordPress like MailPoet. weMail is especially a great option if you are looking for an email marketing plugin that supports collaboration. You can use this plugin to manage email campaigns with your marketing team. weMail also comes with a drag-and-drop and email composer to ease your job in creating email content. weMail comes with robust analytics feature that allows you to easily see the number of opens, clicks, and bounces of your emails. You can also integrate it with Google Analytics.

weMail allows you to use Amazon SES, SparkPost, and Mailgun as the SMTP service. You can also use Gmail or your own STMP server if you have one. It also supports integration with popular form builder plugins such as WPForms, weForms, and Gravity Forms. weMail is also a freemium service.

4. Newsletter

Newsletter is another email marketing plugin that is developed specifically for WordPress. The features offered by this plugin are not much different from the 3 first plugins above in which you can create an email campaign using its drag and drop composer. The Newsletter’s email composer allows you to add elements such as a call to action, image, heading, separator, blog posts, header, footer, and so on. Newsletter also comes with great analytics feature that lets you know the mail opens and total sent.

At the time of writing, Newsletter has no built-in email delivery service. You can use Sendinblue, Mailjet, Mailgun or Amazon SES to add an email delivery function to this plugin.

How to Create a Tabbed Image Gallery in Elementor

As we said in this article, Elementor is more than just a page builder plugin. It is a multipurpose plugin that can replace several WordPress plugin types at once. One of the plugins that can be replaced with Elementor is the image gallery plugin. With Elementor, you don’t need to install an extra plugin to create an image gallery on your WordPress site. There are two widgets offered by Elementor to create an image gallery: Basic Gallery and Gallery.

The Basic Gallery widget — which is available on Elementor Free — allows you to create a basic image gallery, while the Gallery widget allows you to create a more advanced image gallery, including a tabbed image gallery. This is great if you want to create a gallery on a photography website. In this post, we will show you to create a tabbed image gallery in Elementor.

How to Create a Tabbed Image Gallery in Elementor

The Gallery widget is available on the pro version of Elementor. So, make sure you have upgraded your Elementor to the pro version if you haven’t done so (read Elementor Free vs Elementor Pro). There are many advantages you will get by using Elementor Pro, including the ability to create a WordPress theme without coding.

In this example, we are going to create a landscape photo gallery. The photos are divided into three types: mountain, sea, and waterfall. We will create three tabs to host each landscape type plus one tab to view all photos.

To get started, create a new page and edit with Elementor. Or you can also edit an existing page. Add a section and drag the Gallery widget to it.

Under the Settings block under the Content tab, set the Type option to Multiple.

By default, your gallery contains only one tab. To add new a new tab, simply click the ADD ITEM button.

Open one of the items (tabs). Set the tab label on the Title field. Click the plus button to select the images you want to add to the tab.

Select the images from your WordPress media library. If you haven’t had one, simply upload ones. Click the Create a new gallery -> Insert Gallery button to add the gallery to gallery tab.

Open the rest items (tabs) and repeat the steps above to set the tab label and add the images.

Customizing the Gallery

Once done adding the images to each tab, you can customize your gallery. On the Settings block, you can set the layout, row height, space between images, and image size. There is also an option to enable Lazy Load.

Open the Filter Bar block to set the main tab label (the “all” tab), pointer, and animation.

Open the Overlay block to enable the overlay. You can display the image title and description when hovering over an image by setting the Title and Description.

If you want to display the Title and Description on mouser hover, you need to edit the individual image in the gallery and add the parameter you set (alt text, title, caption, or description).

Open the Style tab to style up your gallery. There are 4 blocks you can open: Image, Overlay, Content, and Filter Bar.

Image

This block allows you to set the border color of the image, hover border color, border width, border radius, CSS filter, and hover animation.

Overlay

This block allows you to set the overlay color, hover overlay color, blend mode, and hover animation.

Content

This block allows you to customize the image content. Content refers to the image title and description. You can set the alignment, vertical position, padding, text color, and typography (font style, font family, and font size).

Filter Bar

This block allows you to customize the filter. You can set the alignment, normal color, hover color, active color, text color, space between tabs, and typography.

You can play around until you get satisfied with the result. Once done, click the PUBLISH/UPDATE button on the bottom side on the left panel to publish/update your page.

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.