How to Create a Custom 404 Page on Monstroid2 Theme

The 404 page is important enough for a website. When visitors access a URL that doesn’t exist on your website, they will be directed to this page. A 404 page usually contains a standard message like “page doesn’t exist”, “page not found” or something similar. Each Monstroid2 skin has a unique 404 page. If you want, you can create your own 404 page to replace the default 404 page of your skin.

Since Monstroid2 is an Elementor-based WordPress theme, you can create a custom 404 page via Elementor’s visual editor. No coding skill is required at all. You can add any element you want to your 404 page. From an email subscription form, button, animation, blog posts, and so on.

If you use Elementor Pro, you can use one of the available 404 page templates offered by Elementor Pro. If you use Elementor Free, you have to create a custom 404 page from scratch since there are no 404 page templates available on Elementor Free. Monstroid2 also offers no 404 page templates.

Creating a custom 404 page on Monstroid2

To get started, go to Monstroid2 -> My Libary. Click the Add New button to create a new page template.

On the appearing popup dialog, select Single on the Select Type section. Give your template a name and click the Create Template button.

You will be directed to the Elementor editor after clicking the Create Template button above. Start by adding a section by clicking the plus icon on the canvas area. As we said above, you can add any elements you want using the available widgets.

You can play around with the Elementor editor to create your 404 page. Once you are done creating the page, open the Settings panel by clicking the gear icon on the bottom-left corner. Open the Conditions option and set to Singular on the General section and then select 404 Page. Click the PUBLISH button.

That’s it! Now try to access your website and add a random text after your domain name to see your new 404 page.

How to Install Google Analytics on Monstroid2 Theme

Google Analytics is a second to none tool to track website traffic. Most website owners use Google Analytics to analyze their website traffic. Some paid WordPress themes, such as Divi and Newspaper, have a default setting to allow you to effortlessly install Google Analytics to your website. Unfortunately, the same setting option is not available on Monstroid2.

You can install Google Analytics on Monstroid2 using the old way: by pasting the tracking code to either the footer.php file or header.php file of Monstroid2. Alternatively, you can edit the footer section of the skin you use and embed your Google Analytics tracking code using Elementor’s HTML widget.

Installing Google Analytics on Monstroid2

Before start installing Google Analytics on Monstroid2, you definitely need to get the Google Analytics tracking code first. To get the tracking code, login to the Google Analytics dashboard and go to the Admin page by clicking the gear icon on the bottom-left corner.

Select a property by clicking the dropdown menu on the Property column. Or, you can also create a new property by clicking the Create Property button. Click Tracking Info -> Tracking Code to get the tracking code.

  • Installing Google Analytics using the old method

To install Google Analytics using the old method, login to your WordPress dashboard and go to Appearance -> Theme Editor.

Select either the footer.php or header.php file.

Paste the Google Analytics tracking code right before the </body> tag and click the Update file button.

  • Installing Google Analytics by editing the skin footer

If the method above doesn’t work, you can use this alternative to install Google Analytics to Monstroid2. As you knew, Monstroid2 offers skin. You can edit either the footer or the header of the skin you use. To do so, go to Monstroid2 -> My Library.

Hover your mouse over the active footer/header and click Edit with Elementor.

Add the HTML widget. You can place it anywhere.

Go to the left panel and paste the Google Analytics tracking code to the HTML Code field and click the UPDATE button.

How to Integrate Monstroid2 with Mailchimp

Nearly all Monstroid2 skins have at least one email subscription form. Backpackstory, for instance. This skin has an email subscription form on the footer section. Monstroid2 itself uses Mailchimp as the email newsletter service. Email addresses entered on the email subscription form will be sent to a Mailchimp audience. But, you need to integrate your Mailchimp account with Monstroid2 first in order to allow the email subscription form to work.

The Monstroid2 integration with Mailchimp is powered by JetElements so make sure this plugin is installed and activated. There are two components you need to start the integration:

  • Mailchimp API key
  • Mailchimp list ID

Getting Mailchimp API key and list ID

You need a Mailchimp API key to connect your Mailchimp account with Monstroid2. While for list ID, you need it to specify to which audience the email addresses entered via Monstroid2’s email subscription form to be sent to.

Note: list is now audience in Mailchimp

  • API key

To get a Mailchimp API key, login to the Mailchimp dashboard and go to your profile by clicking your profile icon on the upper right and select Profile.

Click Extras and select API keys

Click the Create A Key button and copy the API key on the API key column. To make it easy for you to identify your API key in the future, you can add a label of your API key. Simply click none set on the Label column to add the label.

  • List ID

To get the list ID, click the Audience menu and select an audience you want the email addresses to be sent to. Click Manage Audience on the right side and select Settings.

Scroll down to the bottom and copy the list ID from the Unique id for audience your audience name field.

Start integrating

Once you got the Mailchimp API key and list ID, login to your WordPress dashboard and go to JetPlugins -> JetElements Settings.

Click the Integrations tab and paste the Mailchimp API key and the Mailchimp list ID to the respective fields on the Mailchimp section.

If you want to create an email subscription form popup using JetPopup, you can go to JetPlugins -> JetPop Settings to integrate your Mailchimp account.

How to Style Contact Form 7 Using Essential Addons

Contact Form 7 is one of the most popular form builder plugins for WordPress. It’s completely free to use. Not only you can use Contact Form 7 to create a contact form on your WordPress site. You can also create form types like a booking form or a file upload form. There are 14 field types you can choose when creating a form with Contact Form 7.

One of the common issues about Contact Form 7 is the styling process. Contact Form 7 uses the default styling option of your current WordPress theme. You can use a different style to your form, but CSS skill is required. If you have no CSS skill, you can use Essential Addons to style your Contact Form 7 form.

Essential Addons is an Elementor add-on so the styling process is done via Elementor, the most popular page builder plugin for WordPress. Both Elementor and Essential Addons are freemium plugins. You can use the free version of both to style your Contact Form 7 form.

How to style a Contact Form 7 form using Essential Addons.

Before getting started to customize the style of your Contact Form 7 form, make sure you have installed Elementor and Essential Addons. Once they are installed and activated, create a new page (Pages -> Add New) and edit it with Elementor.

Before you start the styling process, set the page layout by clicking the gear icon on the bottom-left corner. Set the page layout on the Page Layout section.

Add a new section by clicking the plus icon on the canvas area and drag the EA Contact Form 7 widget from the left panel to the canvas area.

Go to the left panel and select a form you want to customize its style.

After selecting a form, go to the Style tab. As you can see, there are several styling options you can set. Here are the common styling options you might want to set.

  • Form width, alignment, and background

Under the Form Container option, click the color selector on the Background Type section and set the color you want for the form background. You either use a solid color or a gradient color as the background.

To set the form alignment, simply select your preferred alignment option on the Form Alignment section.

To set the form width, set the value of the form width on the Form Max Width section.

  • Field background, width, and border radius

To set the background of the fields, the width, and border radius, you can open the Input & Textarea option. Click the color selector on the Background Color section to set the background. You can also set the field background color of the focus mode by clicking the FOCUS tab.

To set the width of the fields, you can set the value on the Input Width section. Beneath this section, you can also set the width of the text area field.

To set the border radius, simply go to the Border Radius section and set the value of the border that you prefer. You can also set the typography (font family, font size, font style) by clicking the pencil icon on the Typography section.

  • Labels

Essential Addons also allows you to customize the style of the labels of your form. You can set the text color as well as the typography. To do so, open the Labels option. Set the text color by clicking the color selector on the Text Color section. To set the typography, click the pencil icon on the Typography section.

  • Submit button

To customize the style of the submit button, open the Submit Button option. From here, you can set the alignment of the button, width, background color, text color, border radius as well as the typography.

  • Error message

To customize the style of the error message, you can open the Errors option. You can set the text color of the error message, the typography, the background color of the validation error, the text color of the validation error, and so on.

There are several other styling options you can set. You can play around with the left panel until you get satisfied with your form style.

You can add several other elements to your page using the available widgets offered by both Elementor and Essential Addons. Once you are done, click the PUBLISH button on the bottom side of the left panel to publish your page.

Embedding the form to a regular page

After clicking the PUBLISH button, your contact page has basically been published. The page itself is powered by Elementor. If you prefer to add your Contact Form 7 form to a regular page (a page created with Gutenberg, the default editor of WordPress), you can install the Elementor Blocks for Gutenberg plugin. This plugin will convert an Elementor template into a Gutenberg block.

To save your Contact Form 7 form as an Elementor template, click the arrow button next to the PUBLISH/UPDATE button on the left panel and select Save as Template.

Give your template a name and click the SAVE button.

Create a new page (Pages -> Add New) and give it a name like “contact us” “contact” or any name to your liking. Add a new block and select Elementor Library and select the Contact Form 7 form template you have just created.

How to Create a Map with Multiple Locations in WordPress

Say you have a business that already has several branches in the city, and you want to create a digital map that shows the locations of those branches. If you have a WordPress-based website, you can create such a map in an effortless way. There is a great plugin that you can use to create a map with multiple locations: Essential Addons.

Essential Addons itself is a premium Elementor add-on so you need to install Elementor as well before being able to use it. You can use the free version of Elementor to create a map with Essential Addons. The free version of Essential Addons is also available. However, the widget to create a map is only available on the paid version. You can download the paid version of Essential Addons on its official website.

We will use the Google Maps platform to create a map to your WordPress using Essential Addons. Before getting started, make sure to install both Elementor and Essential Addons.

Integrating Google Maps with Essential Addons

Before being able to add a map from Google Maps with Essential Addons, you need to integrate them first. You need an API key to integrate Google Maps with Essential Addons. First off, visit Google API Console and login with your Google account. Create a new project by clicking the dropdown menu on the top side and click NEW PROJECT.

Give your new project a name and click the CREATE button.

Once your new project is created, select it from the dropdown menu and click Library on the left panel.

Google divides the API of the Google Maps platform into 15 types. You can see them by clicking the VIEW ALL link on the Maps section. You need to activate the APIs according to what you want to accomplish. In our case, you need to activate the following APIs to add a map from Google Maps using Essential Addons.

  • Directions API
  • Geocoding API
  • Maps JavaScript API
  • Places API

To enable an API, select an API you want to enable (by clicking it) and click the ENABLE button.

Once done activating the required APIs (Directions API, Geocoding API, Maps JavaScript API, and Places API), return to the main dashboard of Google API Console and click Credentials on the left panel. Click the Create credentials button and select API key. Copy the API key on the appearing popup.

Login to your WordPress dashboard and click Essentials Addons on the left panel. Click the Elements tab and scroll down to the Advanced Google Map section. Click Settings and paste the API key you have just copied.

Click the SAVE SETTINGS button to apply the new change.

Start creating the map

Once Google Maps and Essential Addons are integrated, you can start creating the map. To do so, create a new page (Pages -> Add New) or new post (Posts -> Add New) and edit it with Elementor.

Before creating the page, set the page layout by clicking the gear icon on the bottom-left corner to open the Settings panel. Set the page layout on the Page Layout section.

Create a new section by clicking the plus button on the canvas area. To have a wider area for the map, you can select the single-column structure. Drag the EA Google Map widget from the left panel to the canvas area.

Go to the left panel and set the map type to Multiple Marker.

Open the Map Marker Settings option and click the existing map marker to edit it. Paste the latitude and longitude of the first location you want to add to the map. Also set the title as well as the description.

To get the latitude and the longitude of a location, open Google Maps and search for the location (place) you want to get the latitude and longitude of. Once found, right-click the map’s pinpoint and select What’s here?

You should see a popup on the bottom side of the Google Maps page with the coordinates that are required for your preferred place. Copy the latitude (the first value), and longitude (the second value).

Once done adding the latitude and longitude of the first location, click the ADD ITEM to add another place to your map.

Open Google Maps once again and search for the new place you want to add to the map and copy the longitude as well as the longitude and paste them to the respective fields as the one above. Repeat the steps above to add other places to the map.

Once done adding places, open the Map Controls option to enable/disable the controls you want to provide on your map. You can also set the zoom level here.

You can open the Map Theme option to select the Google Maps theme you want to use.

Until here, you have successfully created a map with multiple locations. You can open the Style tab to set the height as well as the width of the map.

If you want to have a full-width map, set the section that holds the map to full-width. To do so, click the section handle.

On the Content Width section under the Layout tab, set to Full Width. Also set the Colums Gap to No Gap.

Click the PUBLISH button on the bottom side of the left panel to publish your page.

Embedding the map to a regular page/post

If, for a certain reason, you prefer to embed your map to a regular page/post (the page/post created with WordPress’ default editor — Gutenberg), you can use the Elementor Blocks for Gutenberg plugin. This plugin will convert an Elementor template into a Gutenberg block. You can read this article to learn more.

To save the map you have just created as an Elementor template, click the arrow icon next to the PUBLISH/UPDATE button and select Save as Template.

Give your template a name and click the SAVE button.

Next, create a new page/post (make sure you have installed the Elementor Blocks for Gutenberg plugin in advance). Add a new block and select Elementor Library and select the template you have just created.

NOTE: If the map is not loaded after you drag the EA Google Map widget to the canvas area and you see a “For Development Purposes Only” message, make sure to enable your Google Cloud billing. The new Google policy requires developers to enable the billing account (you can still you Google Maps API for free). Read this article to fix the issue.

7 Best Free Elementor Add-ons

Illustration of elementor add-on

With the free version of Elementor, you can add elements like button, image, text, video, gallery, progress bar, and accordion to your page. The total of the design elements (called widgets) offered by the free version of Elementor is 30. You have two options to add extra widgets to your Elementor: by upgrading to the pro version or by installing an add-on. Or, you can do both to get even more widgets.

An Elementor add-on itself is a set of widgets developed by third-party developers. An add-on can also add extra setting options and functionalities to Elementor. For instance, JetSticky adds a setting option to add a sticky effect to a section (the setting option to add sticky effect is only available on Elementor Pro) while JetPopup adds functionality to create popups on Elementor Free.

If you don’t use Elementor for a business purpose, upgrading to Pro or buying a premium Elementor add-on might is not the choice you want to make. We have compiled some of the best Elementor add-ons that you can use for free. Here is the list.

1. Essential Addons

Essential Addons is one of the most popular Elementor add-ons with over 3 million downloads according to information on its official website. With this add-on, you can add sections like pricing table, team members or call to action to your page more effortlessly as the widgets to create those sections are available. Essential Addons also allows you to integrate your social media accounts (Facebook, Instagram, and Twitter) with your WordPress site. You can, for instance, display your Twitter or Instagram feed. Essential Addons itself is released as a freemium add-on. The widgets available on the free version include:

Post GridWPFormsAdvanced Tabs
Post TimelineweFormsAdvanced Accordion
Fancy TextInfo BoxProgress Bar
Creative ButtonsFlip BoxFeature List
CountdownDual Color HeadlineFluentForm
Team MembersCall to ActionFacebook Feed
TestimonialsPricing TableSticky Video
WooCommerce Product GridTwitter FeedBetterDocs Category Grid
Contact Form 7Data TableBetterDocs Category Box
Gravity FormsFilterable GalleryBetterDocs Search Form
Ninja FormsImage AccordionAdvanced Data Table
Caldera FormsContent Ticker

As you can see, there are also some widgets that you can use to add a form to your page in case you use the free version of Elementor. If you find Essential Addons useful, you can upgrade to the pro version to get about 29 other widgets. The pro version of Essential Addons comes with extensions to add parallax effect, add particle effect, and create a password-protected page.

2. Happy Addons

This is maybe the add-on that makes you happier when working on a page with Elementor as you will have 29 extra free widgets on your Elementor after installing the add-on. Happy Addons — just like Essential Addons — also allows you to effortlessly add elements like team members, pricing table, process bar, and testimonial to your page. This add-on also allows you to effortlessly add a form to your page if you use the free version of Elementor. Happy Addons is especially a great add-on if you use Calendly. There is a widget to embed your Calendly schedules to your WordPress site. Here are the widgets offered by the free version of Happy Addons:

CardweFormsStep Flow
Gradient HeadingNinja FormsCalendly
Info BoxWPFormsFlip Box
Icon BoxDual ButtonPricing Table
Image CompareTestimonialImage Grid
Team MemberJustified GridGravity Forms
ReviewNumberNews Ticker
Skill BarsLogo GridPost List
Contact Form 7CarouselPost Tab
Caldera FormsSlider

Happy Addons also comes with a set of icons to enrich your icon collection. There are about 500 icons offered by Happy Addons. There are also extensions like Background Overlay, Floating Effects, CSS Transfor, and Happy Clone (to duplicate a page or post).

3. Premium Addons

Despite its name, this add-on also offers a free version that offers about 22 widgets, including a widget to display the latest blog posts on your website. Premium Addons is actually a great Elementor add-on to integrate your WordPress with your social media accounts. However, the social media widgets (Facebook, Instagram, Twitter, and Behance) are only available on the pro version. Here are the widgets available on the free version of Premium Addons.

Carousel WidgetModal Box WidgetFancy Text Widget
Blog WidgetTestimonials WidgetHeading Widget
Google Maps WidgetBanner WidgetDual Heading Widget
Persons WidgetButton WidgetVideo Box Widget
Image Grid WidgetImage Button WidgetCounter Widget
Image Scroll WidgetProgress Bar WidgetCountdown Widget
Image Separator WidgetPricing Table Widget Contact Form 7 Widget
Vertical Scroll Widget

Premium Addons is also a popular enough Elementor add-on. It has been downloaded over 3.5 million times with about 200.000 active installs. In addition to widgets, Premium Addons also provides ready-to-use Elementor templates.

4. OneElements

At the time of writing (January 27, 2020), OneElements is available as a free Elementor add-on. The premium version might is about to come soon as the developer is preparing several new features such as templates and “coming soon” widgets. At the time being, there are about 27 widgets offered by OneElements:

Modern IconTeam MembersLogo Grid
Featured Icon BoxFeatured CounterPowerful Info Box
Gradient DividerPretty Start RatingsBrand Carousel
Ultimate ButtonThe Social IconsTeam Carousel
Advanced HeadingModern Posts GridTestimonial Grid
Gradient ButtonPosts CarouselTestimonial Carousel
Multiple HeadingPosts Load MoreModern Icon List
Gradient HeadingModern AccordionSingle Testimonial
Image with overlayMinimal FAQ’sSingle Team

5. Unlimited Elements

The way Unlimited Elements works is a bit different from the four first Elementor add-ons above. You won’t have new widgets immediately after installing the plugin. Instead, you are required to install the widgets you want to use via its widget catalog. Technically, Unlimited Elements comes with the following widgets:

Pricing TableImage Hover AffectSocial Network Icons
Team MemberAccordionProduct Box
Content BoxAudio PlaylistGoogle Chart
TimelineCarouselVideo Gallery
TestimonialContent TabImage Gallery
SeparatorHeaderPost
DividerButtonInstagram

The difference is, Unlimited Elements offers those widgets in predesigned widgets. The widgets won’t appear on Elementor’s widget panel before you install them. Some widgets can be installed for free, some require you to upgrade to Pro.

6. Element Pack Lite

Element Pack is another great Elementor add-on you can try. The free version of this add-on is also available (Element Pack Lite) although with limited enough widgets. The free version of Element Pack comes with 18 widgets:

Business HoursToggleImage Magnifier
Custom GallerySliderMember
Flip BoxCall OutProgress Pie
Panel SliderCountdownScroll Button
LightboxCookie ConsentTrailer Box
Simple Contact FormImage CompareContact Form 7

Element Pack Lite is enough if you want to add elements like a flip box, image comparison, and image magnifier to your page, while Contact Form 7 widget allows you to add a form to your page.

7. Livemesh Addons

If you have the free version of Elementor and need to display the blog posts on your website, Livemesh Addons is worth-trying. This add-on comes with a Blog Posts Grid that you can use to display blog posts in a responsive grid. Or, you can use the Post Carousel extension to display blog posts as a carousel. Livemesh Addons also allows you to effortlessly add elements such as team members and pricing table to your page. Here are the widgets offered by the free version of Livemesh Addons.

ServicesTestimonials
Portfolio GridTestimonials Slider
Blog PostsPost Carousel
Team ProfilesGeneric Carousel
OdometersClients List
Bar ChartsPricing Plans
Animated Pie Charts

3 Elementor Template Kits to Create an Online Magazine

Elementor is a multipurpose page builder plugin for WordPress. Not only you can use it to create static pages such as landing pages, homepages, about pages, and contact pages. With the pro version of Elementor, you can also create your own WordPress theme without coding. You can create custom theme parts such as the header, the footer, the single post template, the category page, and so on.

Your job of creating a website (a complete website) with Elementor gets easier with a template kit. A template kit itself is a set of Elementor templates with a consistent design concept. Elementor introduced the first edition of template kit on August 2019. A template kit is intended for a specific website type. For instance, the Digital Agency template kit is intended for digital agency websites (although you can also use it for other website types with some modifications). Usually, a template kit consists of the following templates:

  • A homepage template
  • A header template
  • A footer template
  • An about page template
  • A contact page template
  • A 404 page template
  • A single post template
  • An archive template

Template Kits are only available on Elementor Pro so you need to update your Elementor if you haven’t.

Here are 3 great Elementor template kitss to create an online magazine.

1. The Magazine Template Kit

Image: Elementor Blog

Earlier this year (2020), Elementor released the 6th edition of template kit. This template kit is dedicated to online magazines. So, if you plan to create an online magazine with WordPress+Elementor, this template kit is a great option. This template kit has a clean concept with white as the background color. The homepage layout is pretty cool. There are blocks dedicated to ad banners. The Magazine Template Kit comes with the following set of templates.

  • The homepage template
  • Popup templates
  • A single post template
  • Archive page templates
  • A 404 page template
  • A header template
  • A footer template

2. Noovazity

Noovazity is a great template kit to create an online magazine or news portal. This template kit is built with JetPlugins — a set of premium Elementor add-ons developed by Crocoblock. This template is available as a default feature of Monstroid2 theme. The developer of Monstroid2 itself uses the term “skin” instead of “template kit”. Whatever you call it, Noovazity is great to build an online magazine or a news portal. This template kit comes with common elements you usually find on an online magazine such as news ticker, grid blocks, and so on.

3. Turbodrive

Same as Noovazity, Turbodrive is also available as a default feature of Monstroid2 theme. Turbodrive is designed specifically for automotive magazines, but you can also use it for other magazines types such as sport, entertainment, and so on. This template kit also contains common elements you usually find on an online magazine such as news ticker and grid blocks to display articles from certain categories. There is a block dedicated to embedding a YouTube playlist, which is great if you have a YouTube channel. This block is created using JetBlog.

How to Add Google Maps to WordPress with JetElements

There are a bunch of plugins you can use to add Google Maps to your WordPress site. JetElements is one of which. JetElements is a premium Elementor add-on developed by Crocoblock. It adds several extra widgets to your Elementor, including Advanced Map which you can use to easily add Google Maps to your WordPress site. There are 10 map styles you can select. You can also add multiple pins.

In this post, we will show you how to use the Advanced Map widget to add Google Maps to your WordPress site.

Before getting started, make sure you have installed both Elementor and JetEements on your WordPress. You can use the free version of Elementor to use JetElements. While for JetElements, you can get it from its official website for $19. You can also get JetElements via Monstroid2 theme.

Step one: Get the Google Maps API key

Before being able to add Google Maps to your website using JetElements, you need to get an API key to integrate JetElements with Google Maps. You can get the API via Google API Console. So, visit Google API Console and login with your Google account. Once logged in, create a new project by clicking the dropdown menu on the top side and click NEW PROJECT.

Give your project a name and click the CREATE button.

Select your new project from the dropdown menu and click Library on the left panel.

JetElements provides no detailed information on which APIs you need to enable in order to make Advanced Map widget works. According to our experience, you need to at least enable the following APIs:

  • Geocoding API
  • Maps JavaScript API

Google itself divides the API of Google Maps into 15 types. You can view them by clicking VIEW ALL on the Maps section.

To enable an API, select the API you want to enable (by clicking it) and click the ENABLE button.

Once you are done enabling the required APIs, return to the main dashboard of Google API Console and click Credentials on the left panel. Click the Create credentials button and select API key. Copy the API key on the appearing popup.

Next, login to your WordPress dashboard and go to JetPlugins -> JetElements Settings. Open the Integrations tab and paste the API key you have just copied to the Google Map API Key field.

Start adding the map

Once JetElements and Google Maps are integrated, you can start adding the map. To do so, open the page you want to add the map to with Elementor. On the Elementor editor, drag the Advanced Map widget to the canvas area.

You can go to the left panel to make some settings on your map. You can make the settings from the Map Settings option. To change the style map, you can open the Map Style section.

Adding your business location to the map

By default, the pin address is set to London Eye, London, United Kingdom. You can change it to add the location of your business. To do so, open the Pins option and click the existing pin address. Paste the address of your business to the Pin Address field and change the description on the Pin Description field.

In order to make the pin address you have just set be visible on the map, you need to set the map center. For instance, if your business location in Jakarta, you can set the map center to Jakarta. To set the map center, open the Maps Settings option once again type your preferred map center (ideally city name).

Note: If you see a “For Development Purposes Only” message when adding a map, make sure to enable your Google Cloud billing. The new Google policy requires developers to enable the billing account (you can still you Google Maps API for free). Read this article to learn more.

How to Disable an Elementor Popup on Smartphones

The pro version of Elementor comes with a popup builder that allows you to create beautiful popups on your WordPress site. The Elementor’s popup builder might is the most complete popup builder plugin for WordPress. You can use it to create any kind of popup. From an email subscription form, promotional banner, announcement, and so on. You can even use the Elementor’s popup builder to create a beautiful menu as follows.

One of the advantages when creating a popup with Elementor is that you can control where the popup to appear. Whether on the entire website or certain page(s). You can even set the popup to show up only on the desktop if you want.

Disabling a popup on smartphone devices is reasonable enough since smartphones have a smaller screen than desktops. A smaller screen means the space to display the content is also limited. Visitors never love to visit a page that has an annoying popup, especially on smartphones.

How to disable an Elementor popup on smartphones

To disable a popup on smartphones, first, go to the popup library (Templates -> Popups). Hover your cursor over the popup you want to disable on smartphones and click the Edit with Elementor link to open in the Elementor editor.

Click the arrow button on the left panel and select Display Conditions, Triggers or Advanced Rules to open publish settings window.

On the Advanced Rules tab, enable the Show on devices option and remove smartphone (Mobile) from the field.

Click the SAVE & CLOSE button to apply the change. No need to update the popup (clicking the UPDATE button) unless you made some changes to your popup.

How to Add a Back to Top Button in Elementor

A simple way to improve user experience on your website is by adding a “back to top” button. Some users love this button since they can simply press the button to back to the top of the page they are reading without performing a mouse scroll. Some WordPress themes — such as Divi and Newspaper — have a default feature to add a “back to top” button.

If you use Elementor and the WordPress theme you use has no such feature, you can add one yourself. Adding a “back to top” button is pretty easy in Elementor.

First off, edit the page you want to add the “back to top” button to with Elementor. Click the section handle of the top section to turn it into the editing mode.

Go to the Advanced tab on the left panel and add a CSS ID by typing it on the CSS ID field.

Add a Button widget (or any widget that has an option to add a link such as Text, Icon, or even Image) to your page. You can place it anywhere.

Type the CSS ID of the top section you have just specified above on the Link field. Add the “#” symbol as the prefix.

Now click the button and, voila! You did it.

Set the button position

Of course, before updating your page you need to set the position of your button. Normally, you place the button on the bottom-right corner.

With the Button widget selected, go to the Advanced tab on the left panel and open the Positioning option. Set the Width to Custom and Position to Fixed. This way, you can freely set the position of your button by dragging it anywhere you want.

Drag the button to the area you want to place it (bottom-right corner, for instance).

Or, you can also set the horizontal offset as well the vertical offset to get a more precise position.

That’s it. You can go to the Style tab to style your button. Don’t forget to update the page once you are done.

The bottom line

A “back to top” button is a simple yet useful feature you can add to your website. This feature allows your visitors to effortlessly return to the top of the page. If you use Elementor Pro, adding a “back to top” button to a custom single post template is a great idea.

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.