The post Solved: Elementor Pro template not working with WMPL translation (2024) appeared first on Aidan McNally.

How it's done with Containers in 2024

I’ll first show you how to do this with containers (which is now the default in 2024), but I’ll also show you how to achieve this using sections, which many sites built before the latest upgrade will have. 

Step 1 is to create a new Container and add a background image to the container. Go to Style -> Background Overlay and add your image. Do not just add a background image to the container, make sure you are adding the image using ‘Background overlay’, or this will not work. 

Next, click on ‘Advanced’ and add a class to this container. Go to Advanced -> CSS Classes and insert a class name. It can be anything, but for the purposes of this tutorial I’ll call it ‘my-fade-container‘ (see the image below) 

When you use the ‘background overlay’ in Elementor, it adds the image using the CSS pseudo-class ‘::before‘. This is what we’re going to manipulate when the user hovers over the container. 

				
					.my-fade-container::before{
    opacity:0;
    transition:opacity 0.7s;  
}
				
			

In the code above we are targeting the ::before element that Elementor adds when a background overlay is added to a container. We are making the opacity 0 so that it is initially hidden. We are adding a transition length of 0.7 seconds, so that the fade-in is not instant (you can change this to any duration you like). 

				
					.my-fade-container:hover::before{
    opacity:0.5;
}
				
			

The next piece of CSS code we add is shown above. This will show the background when the user hovers over our container by changing the opacity to something above 0 (in this case, I’ve chosen 0.5 – so half opaque. A value of 1 would be fully opaque). 

You may notice that you still have some spacing between the inner content of your container and the background image. This is because Elementor also adds another element with a class ‘e-conn-inner’. In the next piece of code we’ll target that element, making the padding and margin 0. 

				
					.my-fade-container .e-con-inner{
    padding:0;
    margin:0;
}
				
			

And that’s pretty much it! To fade-out an image instead of fade-in, simply start with an opacity above 0, and change it to 0 on the hover. 

In the example at the start of this guide I added a border and some padding to the container. I also added the CSS rule ‘cursor:pointer’ to show the pointer when a user hovers over the container, but essentially you only need the above CSS rules to make the effect work. 

How it's done with Sections

If you made your site before the latest Elementor update, your site may use Sections instead of Containers, so the above code will not work. But fear not, the code for sections is just as easy. 

Step 1 is to create a new Section and add a background image to the section. Go to Style -> Background Overlay and add your image. Do not just add a background image to the section, make sure you are adding the image using ‘Background overlay’, or this will not work. 

Next, click on ‘Advanced’ and add a class to this section. Go to Advanced -> CSS Classes and insert a class name. It can be anything, but for the purposes of this tutorial I’ll call it ‘my-fade-section‘ (see the image below) 

When you use the ‘background overlay‘ for sections Elementor, it adds a new div with the class ‘elementor-background-overlay‘ into the section, and then any containers you have within the section are added as separate divs on the same level as the background-overlay div (i.e. not children, but siblings). This is what we’re going to manipulate when the user hovers over the container. 

				
					section.my-fade-section .elementor-background-overlay{
    opacity:0 !important;
    transition:opacity 0.7s;  
}
				
			

In the code above we are targeting the .my-fade-section element that Elementor adds when a background overlay is added to a section. We are making the opacity 0 so that it is initially hidden. We are adding a transition length of 0.7 seconds, so that the fade-in is not instant (you can change this to any duration you like). 

				
					section.my-fade-section:hover .elementor-background-overlay{  
	opacity:0.5 !important;
}
				
			

The next piece of CSS code we add is shown above. This will show the background when the user hovers over our section by changing the opacity of the overlay div to something above 0 (the highest opacity setting is 1). In this case I’m changing it to 0.5, or ‘half’ opaque (the value 1 would make the image fully opaque). 

And that’s pretty much it! To fade-out an image instead of fade-in, simply start with an opacity above 0, and change it to 0 on hover. 

In the example above I added a border to make it more visible, and some padding to the container as well as the rule ‘cursor:pointer’ for hovering over the container, but essentially you only need the above CSS rules to make the effect work. 

Let me know if this worked for you in the comments below. 

The post Tutorial: Fade Elementor background image with 3 lines of CSS (2024) appeared first on Aidan McNally.

There are two basic steps to adding reCAPTCHA to Contact Form 7:

1. Register your website for reCAPTCHA (Free) and get your keys
2. Add your reCAPTCHA keys to Contact Form 7

1) Register your website for reCAPTCHA and get your keys

Sign in to your Google account (e.g. by signing in to Gmail), and then go to the ReCAPTCHA admin Console. You will see the see the screen below. You can also go to https://www.google.com/recaptcha and click on ‘V3 Admin Console‘ link.

Screenshot of the reCAPTCHA admin console

By default, you will be creating an ‘Enterprise reCAPTCHA key‘, which is free for up to 1 million assessments per month, but will cost you money after that. For small sites, this is usually fine as you will never exceed this limit, but I still prefer to use the free version of reCAPTCHA just in case the terms of the Enterprise version change. If you want to use the free version too, you can simply click on the ‘Switch to create a classic key‘ link, as highlighted in the screenshot below.

Screenshot of the link to create a classic reCAPTCHA key

You will now need to do three things in order to register your reCAPTCHA:

i) Add a label

The label is simply a way for you to recognise your reCAPTCHA in your reCAPTCHA console the next time you log in. It can be anything you like but most people just use the domain that the reCAPTCHA code is for – e.g. example.com.

ii) Choose your reCAPTCHA type

There are two types of reCAPTCHA currently available. Version 2 (V2) is the older version of reCAPTCHA and requires the user to check the ‘I am not a robot‘ checkbox, or to pass a visible test, like the one pictured below.

ReCAPTCHA Version 3 (V3), is the newer version, where the assessment of whether or not the visitor is a human takes place automatically in the background, meaning the user is not required to click a checkbox or pass a test.

In this example, I will be using V3 because it is the version most people use and the version compatible with the latest releases of the Contact Form 7 plugin.

Note: You can only use ReCAPTCHA V3 with Contact Form 7 version 5.1 and above. You can use V2 with older versions of Contact Form 7. Therefore, you cannot use V2 keys on Contact Form 7 5.1 or above, and V3 on Contact Form 7 5.0 and below.

Screenshot of a reCAPTCHA V2 test

iii) Add your website domain

Under ‘Domains‘ simply add the domain that the reCAPTCHA is for – e.g. example.com. Once you click submit, you will be taken to a new page with your reCAPTCHA ‘Site key‘ and ‘Secret key‘ as shown below.

Note: You can choose to use the same reCAPTCHA for multiple domains, and this is why you have the option of adding more than one domain. However, most people will only add one domain here.

Screenshot of reCAPTCHA Keys

2) Add your reCAPTCHA keys to Contact Form 7

To add the reCAPTCHA to all of your Contact Form 7 forms, go to your WordPress backend (admin page) and click on Contact > Integration as shown in the screenshot below.

Scroll down to the ‘reCAPTCHA‘ box and click on Setup integration.

Screenshot of Contact form 7 integration page

The next step is to take the ‘Site key‘ and ‘Secret key‘ from the reCAPTCHA you just set up, add them to the input boxes, and click save, as shown in the screenshot below.

Note: Do not use the keys below. These for example purposes only. Use your own reCAPTCHA keys that were generated in the previous steps.

Screenshot of Contact form 7 reCAPTCHA integration page

Once you save your keys, all of the Contact Form 7 forms on your site will be using reCAPTCHA V3 automatically. Now your contact forms use reCAPTCHA’s score to verify whether the form submission is from a human or from a spam bot.

If you were using reCAPTCHA V2, you would need to add [recaptcha] form-tags to each form that you wanted a V2 reCAPTCHA to appear on. This is so the ‘I’m not a robot‘ checkbox appears.

If you are upgrading from V2 to V3, you don’t need to go back in and remove the [recaptcha] form-tags from your forms. If they are found in a form template, Contact Form 7 5.1 or higher ignores them and replaces them with an empty string.

Once you have clicked save you will see a box like the one below, telling you that reCAPTCHA is now active on all of your Contact Form 7 forms.

Screenshot of successful Contact form 7 reCAPTCHA integration

So, what do you think? Was this tutorial easy to follow? Did it help you out? Let me know in the comments below!

The post Tutorial: Adding ReCAPTCHA to Contact form 7 in WordPress (2024) appeared first on Aidan McNally.

My client makes his own brand of beer, and the beers are stocked in various bars throughout New York city. He wanted a simple map that showed the various locations that the beer can be bought. Luckily Google maps allows you to create custom maps, with location pins for whatever purpose you desire.

For the sake of this guide, I’ve switched the name of the beer and created my own fictional beer called GoldenBeer. It’s a delicious beer, and it’s quite impossible to get a hangover from it.

This guide is split into the following steps:

1. Creating a Google map
2. Manually adding locations
3. Importing multiple locations at once
4. Stlying your map
5. Using different layers
6. Changing the base map
7. Embedding your map on your website

1) Creating a Google map

The first step is to go to My Maps in Google Maps – https://www.google.com/maps/about/mymaps/ or https://www.google.com/maps/d/ and click on ‘Get Started’ (see the screenshot below).

Click on the ‘Create a new map’ button. This will give you a map with the name ‘Untitled map’, and create a layer for you called ‘Untitled layer‘.

As you may have guessed, you can use layers to organise your information. In my case for example, I’ll have a layer for bars that stock GoldenBeer, and a layer for liquor stores (or ‘off-licenses’ in British English) that stock GoldenBeer.

Layers are handy as users can select and deselect layers, making it easier for them to find locations. You can also style all of the locations in a layer at once, giving a visual cue to the separate locations.

You don’t have to do it right away, but you can rename your map by clicking on the current name (Untitled map). This name appears when people view your map, so you might as well rename it something like ‘GoldenBeer Bar Locations‘.

Manually adding locations

From here, you can manually search for a location (e.g. a landmark or a business). In my case, I’m searching for ‘Meghan’s bar and Kitchen‘, a bar on West 45th Street, New York, and one of the best places to hunker down and enjoy a GoldenBeer on a busy New York afternoon. Type in the location in the search bar and click on the search button.

When your location is found on the map, a box will pop up with the location and it’s details. Simply click on the ‘+ Add to map’ text at the bottom of this box (highlighted in the screenshot below in yellow). Repeat this process for as many locations as you want.

Importing multiple locations at once

So what if you have a lot of locations and you don’t want to add them all manually, one-by-one? GoldenBeer is stocked in 100’s of bars and liquor stores, and I didn’t want to type them all in manually; that’d take hours! Well, Google Maps allows you to easily import a number of data-types from various sources. For example, you can upload an Excel CSV file from your computer, or import a GPX (GPS Exchange Format) file from Google Drive.

In this example, I’m going to use an Excel file called ‘test-data.xlsx’ with a list of New York bars that stock GoldenBeer. The Excel file contains one column, called ‘Locations‘ and it simply contains a list of the bars name and address in the same field (see the screenshot below).

To upload the file, click ‘Import‘ from the modal on the left of the screen (highlighted in yellow in the screenshot below). This will import your locations into the currently selected layer, in this case ‘Untitled layer’ as I haven’t gotten around to renaming it yet.

You’ll then be asked to choose which column in your Excel file should be used by Google Maps to find your locations. In my case, there is only one column, so I check ‘Locations’, and then click ‘Continue‘.

You’ll then be asked to choose a column to use as the title for your locations. My location column only contains the name of the bar, so this is the title of the location too.

*Important note*

As the bars are already in Google maps as businesses, Google maps will use the correct name. However, if you are creating a map with locations that aren’t already businesses or other ‘places’ in Google Maps, you should have multiple columns, such as a ‘Bar Address‘ column, and ‘Bar name‘ column, then of course, you would use the ‘Bar name‘ column, and your custom map would have this as the name of that location.

Place a check beside the column you want to use as the title, and click ‘Finish‘.

You’ll now see a bunch of pins on your map based on the locations from your Excel file (see the screenshot below). Notice that the left modal shows name of file I uploaded (test-data.xlsx) and beneath that, it shows how many items were added – All items (12).

Styling your map

Now, if you want to use anything but the default blue pin that marks each of your locations, you can easily customise it. If I hover over the ‘All items (12)’ text, a paint-bucket icon appears (see the screenshot below).

The text above my locations on the left modal that says ‘Uniform style‘, refers to how all of my location pins are styled. This means that I can update the style of all of the pins at once. You can click the arrow beside this text to change the style settings.

With the style setting on ‘Uniform style’, clicking on the paint bucket makes a colour-pallete appear. From here I can style all of the items at once. I can change the colour of the location pin, use an icon provided by Google Maps, or I can even upload a custom icon via the ‘More icons’ button (see the screenshot below).

As mentioned above, If I need to style icons individually, I can do that too, by clicking on the arrow beside the ‘Uniform style‘ text, which opens up all of the individual locations (see the screenshot below).

If I click on any one of the locations, it appears on the map, and within the pop-up I can click on the paint-bucket icon to style that location individually (see the screenshot below).

Using different layers

Now, what happens if you have different types of data, or types of place that your product is sold? As I mentioned earlier, in my case, I need to differentiate between bars and liquor stores (off-licenses) so that users can easily tell the difference, and find what they’re looking for quicker.

To do this, I decided to make all of the location pins for bars one colour (blue), and all of the location pins for liquor stores another colour (red).

I uploaded the bars to one layer, and created a new layer for the liquor stores by clicking ‘Add layer’. I then imported an excel of the liquor stores into this second layer, and renamed the layer ‘Liquor Stores’.

This had a two-factor effect. It allowed me to style all of the locations on each layer at once instead of one by one. In addition, it improved the user experience, because layers can be turned on and off. Users can turn off the liquor stores for example, if they only want to see the bars on the map (see the screenshot below).

Changing the base map

Sometimes you may want to change the colours or amount of content visible on your map (or ‘base map’). The default map contains a lot of landmarks for example, and this may make it more difficult for users to see your locations.

A solution is to change the ‘Base map‘. This setting is found at the bottom of the left modal, and there are currently 9 options to choose from. Simply click ‘Base map’ and choose one of the options to see what your map looks like with the new background (see the screenshot below).

Embedding your map on your website

So now you have created your map. How can you show it to people? Or even use it yourself at a later date?

Simply go to your maps dashboard (https://www.google.com/maps/d/), locate the map you created, and click on the share icon (see screenshot below). From here, choose the last option ‘Embed on my site‘.

A popup modal will appear containing the HTML you need to embed on your site (it’s an iFrame). Copy the contents and paste this into your website.

• If you’re using the WordPress block editor, use the ‘Code‘ block for this content.
• If you’re using the plain old WordPress WYSIWYG editor, then use the ‘Text‘ tab (beside the ‘Visual’ tab where you input content).
• If you’re using the Elementor page builder, use the ‘HTML’ element.
• Other page-builders will also have a block/element that allows you to insert HTML.

So, there you have it. That’s how you can create a map with multiple map markers. In this case we used it to show the locations that a product is sold, but this is one of the many uses for a custom map. What will you use your custom Google map for?

Let me know in the comments below if this helped you, or what you’re planning to use your custom Google Map for.

The post Tutorial: Creating a Google Map with multiple locations (2024) appeared first on Aidan McNally.