Text over an image is the ultimate element because it covers a perfect section’s visual and textual aspects. It’s more effective to show a product’s photo with written information about its benefits. 

This article will show you how to add text over images in the Elementor page builder plugin.

Why Position Text Over Images

Text and images are the two primary components of every website. While each of them can be very effective on its own, combining them can skyrocket your results.

Here are the main reasons why to place text over images:

• Hero slider – Many websites’ hero sections feature sliders with a call-to-action button atop a background image.
• Emphasize critical points – writing about a service or product isn’t always enough. Displaying an image with relevant text can deliver a more explicit message.
• Image with hotspots – This is very useful for highlighting the advantages of a particular product. The hotspots will be strategically placed on the image, and hovering over them will expose relevant information.
• Efficient design – Occasionally, placing images next to or below the text can use valuable space on your website that will go to waste. Placing the reader over the image is a better practice for using the maximum available space.

Whether it is one of the reasons listed above or to better match your design needs, it’s beneficial to know how to place text over an image.

This article presents four different methods for displaying text over an image. The first two methods can be accomplished using the free version of Elementor, while the last two require Elementor Pro.

Let’s start with the first method by using the image widget.

Method #1: Display Text Over the Image Widget

This is my preferred method for positioning text over an image, especially when using the basic version of Elementor.

Although it requires some CSS code, it shouldn’t discourage you from trying it, mainly because I will provide it for you.

First, click the “Edit with Elementor” button to open the visual editor screen.

Then, drag the image widget from the left sidebar to your desired section on the right.

Choose your image under the Content tab and change the Caption field to Custom. Once changed, enter the custom text you want to display over the image.

You can also use the Style tab to change the size and font family, as well as add a background color to the caption.

When satisfied with how it looks, navigate to the Advanced tab and assign the textOverImage class to the widget.

Once you have updated the changes, open the customization screen and enter the Additional CSS tab.

Then, paste the CSS code below and click Publish:

.textOverImage figcaption {
position: absolute;
margin: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
}

The provided CSS will position the caption in the center of the image. You can always re-edit the widget if you want to change the font size, color, or other settings.

Assigning a class to the image widget is only necessary if you are not using Elementor Pro. However, if you have the paid version, expand the Custom CSS tab and assign the code to the selector figcaption instead.

We will use the text widget with a background image in the following method.

Method #2: Text Widget with a Background Image

In our previous posts, I showed you how to set a background color or image to any page in Elementor. This method will use techniques we learned in the other article to accomplish similar results.

To start, drag either the Text editor or the Heading widget to the desired section on the canvas on the right.

After entering your custom text, center it and customize its properties, such as size and style.

Then, click on the Advanced tab, expand the background tab, and select the image to display behind the text.

For better results, set the image position to center-center, with no repeat and size to cover.

Then, expand the Layout tab and increase the padding values until you’re satisfied with the results.

Please remember to check the mobile view to ensure the style is consistent across all devices. You may need to adjust some of the properties for a better fit.

Up to this point, we used the accessible version of Elementor to display text over an image. The next couple of methods will show you how to do it with Elementor Pro (or you can get it from us for only $4.99).

Method #3: Text Over the Gallery Widget

The Gallery widget is a great way to combine images and text. It’s very similar to the first method I showed you above; however, we don’t need to use CSS this time.

First, drag the Gallery widget to the canvas on the right, and select the image you want to display.

Enter your custom text as the image’s caption, and then click the Insert Gallery button.

The gallery widget defaults to four columns, allowing each item to occupy 25% of the entire section. Therefore, change the column number to one and the image size to full.

Then, expand the Overlay tab and change the title field to caption. Once changed, hover the mouse cursor over the image to ensure the text is displayed.

Next, move on to the Style tab, expand the Overlay tab, and enter the Hover options. Here you can change the overlay background color or remove it altogether.

Finally, expand the Content tab, and style the text to fit your design expectations. Moreover, change the hover animation to none. That will ensure the reader is always displayed, even when the image is not being hovered over.

The Portfolio and the Posts widgets are similar to the Gallery widget, and you can achieve similar results by selecting any of them.

Method #4: The Hotspot Widget

The hotspot is a very cool widget often used to highlight key points of a product or a store locator indicator.

By default, the hotspot widget includes one hotspot in the middle of the image, but you can change its position and add as many as necessary.

After selecting the image, expand the Hotspot tab and change the properties of the first item.

Then, move on to the Position tab and adjust the vertically and horizontally offset values to the correct position.

You can then add additional text items to be displayed over the image and assign different values to each of them.

Once added, move on to the Tooltip tab if you want to change the tooltip’s position and trigger condition.

Of course, similar to any other Elementor widget, you can change any aspect of the widget’s look from under the Style tab.

When satisfied with the result, please save the changes and test them on the live site.

Conclusion

Showing text over images is an excellent feature every website owner should be familiar with. This article showed you how to position text over an image using Elementor in four ways.

Leave us a comment and tell us which of the methods above you used to achieve this task.

The post How to Add Text Over an Image in Elementor in Four Different Ways appeared first on PluginsForWP.

This background color appears when visitors select text on your site. Whether you are using WordPress with the native Gutenberg editor, Elementor page builder, or any other page builder, this change is simple to implement using CSS.

This tutorial will show you how to change the background text color, as well as the font color, for the entire site or specific elements.

That will enable you to maintain consistency with your branding while also making your website more visually appealing to visitors who interact with your content.

Why Change the Highlighted Text Color?

In most cases, the default background color of the highlighted text is light blue, with black text. This is practical, but it might not align with your website’s color scheme or branding.

Customizing the highlight colors ensures that every detail of your site aligns and matches with your visual identity, resulting in a more polished and professional look.

Changing Highlighted Text Color Using CSS

You can change the highlighted text background color with CSS, explicitly targeting the ::selection pseudo-element. This CSS rule allows you to define the colors of the selected text.

Here is a simple CSS code that you can apply to switch the text color to white and the background color to blue when the text is highlighted.

::selection {
  background-color: blue;
  color: white;
}

Applying the rule to the selection will take effect for the entire website. Whenever any text is selected anywhere on your site, a white text on a blue background will be displayed.

You’ll need to change the color value in the CSS rule to your desired one.

Applying CSS in Elementor

If you’re using Elementor as your page builder, applying this CSS across the whole site is simple:

1. Open your WordPress dashboard and navigate to any page built with Elementor.
2. Click the Site Settings icon (usually a gear or hamburger menu icon in the Elementor panel).
3. Locate the Custom CSS section within Site Settings.
4. Paste the CSS rule  ::selection here.
5. Publish or update your changes.

After you publish your page, don’t forget to refresh your live site and then try selecting the text to see the newly changed color effect.

Targeting Specific Elements for Highlighted Text Colors

Sometimes, you may want to use different highlight colors for various sections of your site.

For example, you may want to have your H1 headings use a different highlight color than the body text.

You can do this by specifying the element before the ::selection pseudo-element in your CSS. Here’s how you can set the highlight for h1 differently from the body text:

::selection {
  background-color: blue;
  color: white;
}

h1::selection {
  background-color: red;
  color: green;
}

With this CSS, when you highlight body text, it shows white text on a blue background, but when you highlight a h1 heading, it shows green text on a red background.

Remember to add spaces between the elements and ::selection to target the selection within that element correctly.

Changing Highlight Colors Without Elementor

Suppose you’re not using Elementor and instead rely on the default WordPress editor or another page builder. In that case, you can still customize the highlighted text color by adding the same CSS code to your theme’s customizer:

1. From your WordPress dashboard, go to Appearance > Customize.
2. Click on the Additional CSS section.
3. Paste your ::selection CSS code here.
4. Publish the changes.

This method ensures that changes to your highlight color are applied consistently across the entire site, regardless of the page builder you use.

Tips for Customizing Highlighted Text Colors

• Choose contrasting colors: Ensure the text color and background color have sufficient contrast to ensure easy readability.
• Match your brand palette: Use colors that align with your branding for a consistent look.
• Test across browsers: Highlight colors may render slightly differently across various browsers, so it’s essential to test your site on multiple platforms.

Conclusion

Changing the background color of the highlighted text in WordPress and Elementor is a quick and effective way to improve your website’s design and user experience.

By using simple CSS targeting with a ::selection pseudo-element, you can change the highlight colors globally or on specific elements, such as headings.

This technique can be applied easily by everyone, regardless of whether they are a beginner or an experienced developer, and can substantially affect the way visitors perceive your site.

You can try the simple color customization yourself and witness the incredible change that it can bring to your website. 

Please comment below and share your custom highlight color ideas.

The post How to Change Highlighted Text Color in WordPress (and Elementor) appeared first on PluginsForWP.

This guide will teach you how to place music on a specific page or throughout your entire site, using easy-to-follow instructions and either the Gutenberg editor or Elementor, without requiring the use of complex plugins.

This tutorial shows how to embed background music with autoplay functionality and control over the audio player visibility.

Adding Background Music to a Single WordPress Page

First, upload your desired audio file to your WordPress media library (or any other cloud storage app, such as Dropbox). 

Once uploaded, follow the steps below to insert background music to a specific page:

1. Open the WordPress page you want to add music to and click Edit.
2. Add a new HTML block using the Gutenberg editor. If you use Elementor, you can add an HTML widget instead.
3. Copy and paste the following HTML audio tag into the block:  <audio class="bg-music" controls src="YOUR_AUDIO_URL_HERE" autoplay loop></audio>
4. Replace YOUR_AUDIO_URL_HERE With the actual URL of your MP3 file from the media library.
5. Save or update the page and visit it to test the music. You should hear the audio playing automatically in the background, and the audio player controls will appear.

Hiding the Audio Player Controls

If you prefer the music to play silently in the background without showing the audio controls, you can easily hide them. Remove the controls attribute from the audio tag like this:

WordPress has a built-in CSS rule that hides audio players without controls, so once you remove the controls keyword and save, the music will continue playing, but the player itself won’t be visible.

Alternative Way to Hide the Audio Player Using CSS

If you want to keep the controls attribute for any reason but still hide the player from view, you can do so by adding custom CSS:

1. Make sure your audio tag has a unique class, for example, bg-music.
2. Go to Appearance > Customize > Additional CSS (or under the Advanced tab in Elementor) in your WordPress dashboard.
3. Add the following CSS code to hide the audio player: .bg-music { display: none; }
4. Publish the changes. The audio player will disappear from the page, but the music will still play in the background.

Adding Background Music to Every Page on Your WordPress Site

Music added directly to a single page will only play on that page. However, if you want background music to play site-wide, you need to add the audio code to the website footer.

The background music will be played on every page where the footer exists.

First, delete the audio player from the single page where you added it (in the previous step), so the music won’t be played twice. Then:

1. Add the audio code to your footer. You can do this in a couple of ways:
   • Using Elementor’s Code feature: Add a new custom code snippet and execute it after the page is loaded.
   • Add it directly to the footer template file.
   • Using a plugin like Code Snippets: Create a new snippet, paste your audio code under the HTML tab, and set it to load in the footer.
2. Remember to replace the source URL with the URL of your MP3 file.
3. Save and activate the snippet or custom code.
4. Visit any page on your website—you should now hear the background music playing everywhere, and the audio player will be visible in the footer.

Hiding the Audio Player Site-Wide

Just like with a single page, if you want to hide the audio player from all pages, remove the controls attribute from the audio tag in your footer code snippet or custom code. Save, and the music will continue to play silently across the entire site without showing the player.

Conclusion

Adding background music to WordPress is a quick and effective way to set the right tone for your website. If you want to hear music on a specific page or all pages, the autoplay and loop options of embedding an HTML audio element will enable you to do that on your own.

You can easily manage the visibility of the audio player either by removing the controls attribute or by applying custom CSS.

Plus, using Elementor’s code feature or a snippet plugin makes site-wide implementation straightforward.

Test this on your WordPress website and make your visitors feel more immersed!

The post How to Add Background Music to WordPress (and Elementor) with Autoplay appeared first on PluginsForWP.

That’s a common problem. Many WooCommerce store owners face this same issue, especially when managing multiple shipping options within the same shipping zone.

In this tutorial, I will show you how to diagnose and fix the issue where your free shipping method (or any other method) does not work as expected—even when the order amount meets the criteria.

Why the Shipping Method Isn’t Showing Up?

Let’s say that you have two shipping methods enabled in your WooCommerce store:

• Flat Rate Shipping – A fixed shipping fee, for example, $7.75.
• Free Shipping – Available on orders over $30.

Logically, when a customer adds products worth more than $30 to their cart, the free shipping method should automatically appear at checkout, giving them the option to select it and reduce the cost.

However, many users find that, despite crossing the set threshold, the checkout page stubbornly continues to show the flat-rate shipping option, completely ignoring the free shipping option.

Even refreshing the cart or checkout doesn’t help. That can be frustrating and confusing because we set up two different methods in WooCommerce, but only the flat rate is being applied.

Moreover, our business reputation can get damaged in our customer’s eyes if they think we are trying to overcharge them.

Such confusion will slow down or prevent the customer from completing the checkout, causing our business to lose money.

Step 1: Identify the Conflict in Shipping Zone Configuration

This issue lies in how WooCommerce handles shipping methods within shipping zones. A shipping zone is a geographic region you define to apply specific shipping rules. Most WooCommerce stores have zones, such as North America, Europe, or particular countries.

In this scenario, both flat rate and free shipping methods are configured separately but assigned to the same shipping zone.

This creates a conflict because WooCommerce can only apply one shipping method at a time. In most cases, the flat rate shipping method will overwrite the others and hide the free shipping option.

To verify this, navigate to your WordPress dashboard:

1. Go to WooCommerce > Settings > Shipping > Shipping Zones.
2. Look for the shipping zone column to see the methods that apply to your customers (e.g., North America).
3. Verify that more than one shipping method is listed under that zone.

You will likely see both the flat rate and free shipping methods listed separately, which causes them to override each other.

Step 2: Remove the Conflicting Free Shipping Method

To fix this, delete the free shipping (or the flat-rate shipping) method that is currently configured separately in the shipping zone.

This will leave only a single shipping method. Here’s how to delete the free shipping method:

1. Locate the free shipping method.
2. Click the “Delete” or “Remove” option next to it.
3. Confirm the removal to retain only the flat-rate shipping method.

Once completed, your shipping zone will only have the flat rate shipping method configured. This is important before you add multiple shipping methods correctly.

Step 3: Rename the Existing Flat Rate Method

Since you will be adding multiple shipping methods to the same zone, it’s better to rename the existing flat-rate shipping method to something more generic. Instead” of “Flat rate,” rename it to something such as “Standard Shipping” or “USA Rates” to reflect that there are now multiple shipping options.

To rename the flat rate method:

1. Click the Edit link next to the flat rate method.
2. Change the Method Title to a more descriptive name.
3. Save your changes.

This step will help you understand how to configure shipping zones should you need to adjust them later.

Step 4: Add Free Shipping as a New Method Correctly

Now that the new flat rate method has been renamed to include all methods, it’s time to add free shipping as a new shipping method under the same shipping zone.

This time, add it as a new shipping method under the existing flat-rate option.

Follow these steps:

1. In the Shipping Zone settings, click “Add Shipping Method.”
2. Select Free Shipping from the dropdown menu.
3. Click Add Shipping Method to confirm.
4. Now, click Edit next to the free shipping method.
5. Set the ‘Free Shipping Requires…’ condition to ‘Minimum order amount‘ or any other condition based on your store’s needs.
6. Enter your desired minimum order amount.
7. Save your changes.

With this setup, WooCommerce will automatically show the free shipping option once the cart reaches or exceeds $30.

Step 5: Verify the Shipping Options on Cart and Checkout Pages

Once you add the new shipping method, test whether the free shipping option appears as expected on both the cart and the checkout page.

• Add products to your cart so the total is above $30.
• Go to the cart page and refresh it. You should see both shipping options: the flat rate and the free shipping method.
• Refresh the cart to confirm the relevant shipping options are visible and can be selected.
• The customer can now choose between free shipping (when eligible) and a flat rate if they prefer.

Step 6: Set Free Shipping as the Default Option (Optional)

If you prefer to make free shipping the default option for eligible orders, automatically selected when customers reach the minimum order amount, you will need to reorder the shipping methods in the shipping zone settings.

To do this:

1. In the shipping zone settings, drag the free shipping method to the top of the list.
2. Save your changes.

Now, when a customer’s order qualifies for free shipping, it will be pre-selected on the checkout page, making the experience smoother and the customer happier

Additional Tips for WooCommerce Shipping Configuration

• Test Different Zones: If you ship to multiple regions, ensure each shipping zone has shipping methods configured correctly without overlap. Follow the steps in this tutorial to validate it.
• Check Plugin Conflicts: Sometimes, third-party plugins can conflict with shipping methods. Temporarily disable other plugins if necessary.
• Use Debugging Tools: WooCommerce has logging features for shipping issues. Enable debug logging for shipping to get more insights.
• Keep WooCommerce Updated: Regular updates fix bugs and improve compatibility, resolving unexpected shipping issues.

Conclusion

Properly configuring your WooCommerce shipping zones and methods is often the solution to resolving shipping methods that are not applied correctly.

Avoid creating separate shipping methods that conflict within the same zone. Instead, add multiple methods under one shipping zone with clear conditions.

By following these steps:

1. Identify and remove conflicting shipping methods.
2. Rename existing methods for clarity.
3. Add free shipping with the correct minimum order amount condition.
4. Verify the options on the cart and checkout pages.
5. Optionally set free shipping as the default method.

This simple trick ensures that your WooCommerce store displays the correct shipping options to your customers, improving their experience and enhancing your store’s credibility.

Please feel free to leave us a comment if you have any questions or require further assistance.

The post How to Fix Shipping Methods Not Working (Not Applying) in WooCommerce appeared first on PluginsForWP.

Responsive design is essential, and one of the most effective ways to achieve it is by using custom CSS breakpoints.

In this article, I will guide you through adding custom CSS breakpoints in WordPress and Elementor, helping you tailor your website’s appearance specifically for tablets, smartphones, and other screen sizes.

This method is beneficial when your theme or page builder doesn’t provide built-in options to adjust certain elements based on screen size.

Whether you want to change the color of your page titles, style links differently on mobile, or customize any other part of your site, adding your own CSS breakpoints gives you complete control.

Understanding Breakpoints and Responsive Design

Before diving into the practical steps, let’s clarify what breakpoints are and why they matter. In responsive web design, breakpoints refer to specific screen widths at which the layout or styling of a website changes to better suit the device. Standard breakpoints include widths for desktops, tablets, and smartphones.

Many WordPress themes and page builders, such as Elementor and Divi, provide default breakpoints and responsive controls. For example, you can adjust the logo, font, or margins for tablets or mobile phones. However, these built-in options can be limited, especially if you want to customize elements that aren’t directly accessible through the theme’s settings.

This is where custom CSS breakpoints come in handy. By writing your own CSS rules within media queries, you can target any screen size and style any element exactly how you want.

How to Add Custom CSS Breakpoints in WordPress

Let’s start with a simple example of a WordPress website. Imagine you want to change the color of your page title only on tablets or smaller devices, but your theme doesn’t offer a customization option for the title color at these screen sizes.

Here’s the process:

1. Open the Appearance Settings: In your WordPress dashboard, navigate to Appearance> Customize, where you can find various theme customization options.
2. Check Available Responsive Controls: Some themes allow you to change the size of body text or other properties based on screen size, but you may not find controls for specific elements, such as page titles.
3. Add Custom CSS with Breakpoints: If the option you want isn’t available, you can add custom CSS using media queries to target specific screen sizes.

Here’s an example of a CSS media query targeting screens smaller than 768 pixels wide (commonly tablets and smartphones):

@media only screen and (max-width: 768px) {
  /* Your CSS rules here */
}

Any CSS you write inside this block will only apply when the screen width is 768 pixels or less.

Example: Changing the Page Title Color on Mobile

Suppose you want the <h1> page title to turn blue on devices with a screen size of 768px or less. You might try this CSS:

@media only screen and (max-width: 768px) {
  h1 {
    color: blue;
  }
}

After adding and publishing this CSS, you might notice it doesn’t work as expected. This is because other CSS rules from your theme or page builder might be more specific and override your new style.

To fix this, inspect the page title element in your browser’s developer tools and find the exact class or ID assigned to the title. Then, update your CSS to be more specific. For example:

Replace h1 with your title element’s actual class or ID (.page-title-class). This specificity ensures your CSS rule takes precedence.

Once you publish and refresh your live site, resizing the browser window below 768px should change the title color to blue. Above that width, the title reverts to its default style.

Applying Custom CSS Breakpoints in Elementor

Elementor, one of the most popular WordPress page builders, offers built-in responsive controls for several elements. You can adjust font sizes, margins, and other styles for desktop, tablet, and mobile views.

However, some elements, such as tags or anchor links, may not have direct styling options for different screen sizes.

In this case, the same approach of using custom CSS breakpoints applies. Here’s how you can do it in Elementor:

1. Create or Select the Element: For example, add a link widget or create a link inside a text editor.
2. Check Elementor’s Responsive Options: Go to the Style tab and look for responsive controls. You might find options for font size or color for tablet and mobile, but sometimes these are limited.
3. Add Custom CSS: To fully customize the link’s Appearance based on screen size, navigate to the Advanced tab and then the Custom CSS section (available in Elementor Pro).
4. Write Your Media Query: Use a media query targeting your desired breakpoint and add CSS rules.

Example: Styling Links Differently on Very Small Screens

Let’s say you want your links to have a red underline only on tiny screens (under 400 pixels wide). You can add this CSS in Elementor’s Custom CSS field:

@media only screen and (max-width: 400px) {
  a {
    text-decoration: underline;
    color: red;
  }
}

After publishing, use the browser’s developer tool to resize your browser window below 400 pixels.

The links will turn red and receive an underline, making them more visible and user-friendly on smaller mobile devices.

This example also demonstrates that you’re not limited to standard breakpoints, such as 768px for tablets or 480px for phones—you can use any screen width to target particular devices.

Tips for Using Custom CSS Breakpoints Effectively

• Be Specific with Selectors: Use unique classes or IDs to avoid overriding your CSS by theme or plugin styles.
• Test Across Devices: Always check your site’s appearance on multiple screen sizes and devices to ensure your breakpoints work as intended.
• Use Browser Developer Tools: Inspect elements and test CSS live in your browser to fine-tune your selectors and styles.
• Combine with Theme Options: Use your theme’s responsive controls whenever possible and supplement with custom CSS for more precise control.
• Keep CSS Organized: Comment your CSS code to indicate which screen sizes and elements you target for easier maintenance and modification.

Why Custom CSS Breakpoints Matter

Responsive design isn’t just about shrinking or expanding content; it’s about adapting to different screen sizes and resolutions. It’s about optimizing the user experience for every device. Sometimes, you want to:

• Make text more readable on small screens by adjusting font size or color.
• Adjust button sizes or styles to enhance tap targets on mobile devices.
• Hide or show certain elements based on the device to reduce clutter.
• Enhance navigation and links for touchscreen usability.

Custom CSS breakpoints can tailor these experiences exactly as you envision them, regardless of your theme or page builder’s default capabilities.

Getting Started: Where to Add Your Custom CSS

Depending on your setup, there are several places you can add custom CSS in WordPress and Elementor:

• WordPress Customizer: Go to Appearance > Customize > Additional CSS to add site-wide CSS.
• Theme or Child Theme Stylesheet: Add your CSS to your child theme’s style.css file for permanent changes.
• Elementor Custom CSS: To customize individual elements or sections, use Elementor Pro’s Custom CSS feature under the Advanced tab.
• Custom CSS Plugins: Use plugins designed to add custom CSS if you prefer a plugin-based approach.

Regardless of your chosen method, ensure that you test your CSS changes thoroughly and back up your site before making any extensive modifications.

Conclusion

Adding custom CSS breakpoints to your WordPress site and Elementor pages lets you precisely control how your website appears and functions across various devices. When default theme or page builder options don’t offer the flexibility you need, custom CSS media queries are your best friend.

This approach empowers you to create a seamless and professional responsive design, from changing title colors on tablets to styling links on tiny mobile screens. Remember to be specific with your CSS selectors, test thoroughly, and refine your styles using browser developer tools.

Explore the resources available from trusted providers to learn more about WordPress plugins, themes, and customization tips.

The post Add Custom CSS Breakpoints to WordPress and Elementor (for Mobile Devices) appeared first on PluginsForWP.

Letting your website’s visitors find the right branch for them, based on their needs, will keep them happy and improve your foot traffic.

This article will teach you how to use a plugin to add a store locator in WordPress.

Why Use Store Locator

Store locator plugins for WordPress use Google Maps to display the different locations of your business.

The Google Maps module has many excellent perks, such as different map views, geolocation, and directions to the nearest store.

In addition, clicking on a store location will open a modal window with relevant information about the specific branch. Some extra information can be hours of operation, phone number, or special instructions like where to park.

The extra information will reduce the number of questions your customers may have and save your workers valuable time so they can move on with their job tasks.

When the customer is ready to visit his chosen branch, he can click on the branch on his smartphone. Clicking on the store location will automatically open the Google Maps app, ready to navigate them to the destination.

• Search for stores or service centers by location or category
• Get directions easily via Google Maps integration
• Filter locations based on tags such as hospital, clinic, or retail store
• View detailed information like contact numbers, hours, and emails

This is an indispensable tool for driving foot traffic and improving customer satisfaction for businesses managing multiple outlets, clinics, or service points.

Integrating your website and Google Maps will improve your overall customer experience and brand reputation.

Store Locator Types

There are different ways to display store locators on a map on your website. One option requires working with Google Maps and, therefore, using their API, and the second one doesn’t.

This tutorial will show you both ways, and you can choose your desired one.

To use a Google Maps locator, we must install a dedicated plugin and generate a Google Maps API key.

• Generate the Google Maps API key.
• Install a store locator plugin.

Regardless of your plugin of choice, we will need to generate a Google Maps API key to display it on our site.

The following section will walk you through embedding a store locator map using Google Maps. If you would rather do it without Google Maps, jump over to this section.

Method #1: Store Locator With Google Maps

Displaying Google Maps on our WordPress website requires creating a unique API key.

Note: you must have a Google account with billing enabled to generate a key.

If you only want to display a few locations individually, you can bypass generating the API key process. The Divi article explains more about our embedded Google Map.

However, you must obtain a valid API key to enjoy any store locator plugins fully. Here is how you do it:

1. First, navigate to the Google Maps Platform website.
2. Then, click on the Get Started button.
3. Once inside the Google Cloud platform, click the Create Billing Account link and enter your payment details (Google asks for your payment details for safety reasons, and you won’t be charged automatically).
4. Navigate into the APIs & Services -> Credentials screen.
5. Click on the Create credentials button and choose the API key option.
6. A popup window will open up with your new API key.

Great, your API key is ready to be used. You can copy it to the clipboard. We will use it shortly, but let’s discuss store locator plugins.

Store Locator Plugin for WordPress

We can use multiple store locator plugins to embed a map on our website. They are all very similar in their features.

A store locator plugin will create two components:

• Dedicated custom post-type page for every store you’ll add.
• Search page with Google Maps to display some or all locations.

When choosing which store locator plugin to use, consider all the plugin’s features.

We tested the store locator plugins using YITH, wpexpertsio, and agilelogix. They are all excellent choices. However, we prefer the WordPress store locator plugin by weLaunch.

The WordPress store locator plugin has many great features to help us style maps and create advanced filters and categories for every store.

In addition, it can easily integrate with your WooCommerce store and let your visitors check if a particular product is in stock and in which location.

More on that later, but let’s install the plugin for now.

Install the Store Locator plugin for WordPress

First, we must install and activate the store locator plugin on our website.

You can download the store locator plugin from the official Welaunch website or us for only $4.99.

The downloaded zip file contains two plugins: the weLaunch Framework and the store locator plugin. We need to install and activate both.

From your WordPress website, navigate to Plugins -> Add New -> Upload plugin and install the weLaunch framework plugin first.

Once activated, repeat the process and install the store locator plugin.

Once both plugins are active, we can enter the Google API key we generated in the last step.

To do that, navigate to Store Locator -> Settings -> General, fill in the Google API key field and save the changes.

After saving, move on to the next step and create store categories and filters.

Categories and filters

WordPress taxonomies, such as categories and tags, can help us filter the results and find the right branch based on users’ needs.

If all your locations are identical, adding categories and filters is optional and not required.

For example, let’s take an individual who owns a few food industry businesses. One stream of his can be dining-in restaurants with a full-blown menu, while a different company can be coffee shops that only serve coffee with limited menu options.

In a case like the above, it will be wise to assign different categories to the businesses. For example, one category can be ‘Restaurants,’ while the other is ‘Coffee Shops.’

To create new categories, navigate to Store Locator -> Categories, enter a category name, and click the add new category button.

Once added, you’ll see all the category names on the right side.

Categories are helpful for more complex types of businesses, and in most cases, you probably won’t even need to create different varieties.

If all your locations operate similarly, with minor differences, it’s better to use filters instead.

Let’s retake our coffee shop example and assume all locations have the same menu but different features. For example, one place can have Wifi while the other doesn’t. Another branch can be pet-friendly while others aren’t, and so on.

Letting our customers filter the locations on the map based on their specific needs will make deciding which branch to go to much more straightforward.

To create filters, navigate to Store Locator -> Filters and enter your desired parent filters.

Only the second-level filters will be shown as checkboxes inside the store locator. The first-level filters will be used as the filter top names.

In our example, we will create a parent filter named ‘Features’ and enter Wifi, parking, pet-friendly, and delivery.

Great job. When our list of filters is ready, we can move on to adding store locations.

Add store locations

We reach the fun part, where we can add store locations.

Every store you add will be registered as a custom post type and have its page.

To create a store, navigate to Store Locator -> All Stores and click the New Store button.

Adding a new store is similar to creating any other custom post type, such as a WooCommerce product.

You’ll need to add a title, description, and other details unique to stores, such as an address, contact information, and hours of operation.

Let’s continue with the same scenario and add a new coffee shop location.

The title can be the address itself or a short description of the place—something that differentiates this location from the others. A title like ‘iBean Waterfront’ will work great.

Then, keep adding the other relevant information asked on that page. For example, fill in descriptions, addresses, and operation hours.

Enable all the features this location offers on the right sidebar, such as parking and Wifi, and set a featured image.

Publish the store and repeat the process to add additional stores when done.

Once we have entered all addresses, it’s time to display the map with pins for each location.

Display the map with the store’s locations.

We will need to use the plugin’s native shortcode to display the Google Map with the various locations we entered.

Thus, create a new page, enter the [wordpress_store_locator] a Gutenberg shortcode block, and click on publish.

Once published, visit the page to view what the map looks like. The sidebar with the search bar, filters, and store locations will be positioned on the left, while the map with pins will be placed on the right.

The client must enable the browser to use his current location or enter one manually inside the address field.

Then, the map will display a pin with your location and all the available stores near you in the distance range.

Feel free to test the filters by selecting your desired options and waiting for the map to update with the relevant results.

You can also hover over the store in the search results to see its location on the map and more details, such as an address and phone number.

Once everything works as expected, we can keep moving and customize the map’s look and functionality.

Customize the Store Locator Plugin

One of the reasons why this store locator is our plugin of choice is thanks to the unlimited options to style and customize every aspect of it.

You can modify every part of the plugin by navigating to the relevant tab inside the Store Locator -> Settings screen.

Because we can tweak so many different settings, it is impossible to cover them all. However, we would like to point out some.

Layout

You can change the default layout of the store locator shortcode to a different template or a custom design.

Navigate to Settings -> Layout, and choose one of the many other available options.

Map height

By default, the map’s height is automatically determined by the height of the search results. You can keep only a few locations.

However, to make it more visually appealing, I recommend setting a maximum height instead. To do so, navigate to the map tab, uncheck the map auto height box, and set a specific number.

Another option you may like to change on this page is the distance unit. The default is KM, but you can change it to miles.

Data to show

When hovering over a location from the search results list, a popup window displays extensive information about the store.

Some of the data is irrelevant and better to be left out. In my opinion, the full description of each store is unnecessary and, therefore, should be hidden.

You can decide what to display or hide inside the data to show the tab. Many options are checked by default, but you can uncheck them based on your preferences.

Single store page

As mentioned earlier, every store has a designated page with its URL. The store page displays all the information you entered, including descriptions, hours, and featured images.

Navigate the single store page tab and uncheck the boxes if you want to hide some elements.

Alternatively, you can disable the single store page altogether. The stores will still be displayed on the map, but clicking on them will not open the store page.

There are so many more options than you can change. I recommend you review them and adjust them based on your business requirements.

Save the changes and revisit the store locator page to test the results.

Method #2: Store Locator Without Google Maps

The StoreLocator WP plugin is a robust solution that utilizes Mapbox maps instead of Google Maps. It provides a competitive alternative with attractive pricing and features.

The plugin allows you to manage your store data efficiently through a Google Sheet, which syncs with your WordPress site.

This means you only need to maintain your store locations in one place, and the plugin automatically updates your website’s store locator map.

One of the significant advantages of this plugin is its simplicity and speed—no complex coding or map API configurations are required.

It also comes with a free plan, which limits map loads and searches, making it ideal for small—to medium-sized businesses. Upgrading to a paid plan unlocks additional features and higher usage limits for larger enterprises.

Step 1: Install the StoreLocator WordPress Plugin

Begin by logging into your WordPress dashboard. Navigate to the Plugins section and click on Add New. In the search bar, type Store Locator and look for the plugin developed by Micro. Company. Click Install, then Activate the plugin.

Step 2: Install the Store Locator Google Sheets Add-On

The plugin requires a Google Sheets add-on to manage your locations easily. Head over to the store locator site and click on the link to download the Google Sheets add-on. This takes you to the Google Workspace Marketplace, where you can install the add-on by connecting it to your Google account and granting the necessary permissions.

Step 3: Set Up Your Store Locator Map in Google Sheets

Open a new Google Sheet. In the menu, click Extensions, navigate to Store Locator Map, and select Get Started. This action populates your sheet with sample data and automatically matches columns to the appropriate data fields, such as store name, address, phone number, etc. You can adjust these mappings later if needed.

Next, select a primary color for your store locator map that matches your brand’s theme. Click Get Map to generate your store locator. Once done, click Open Map to view the locator in a new tab. This URL is your unique store locator link.

Step 4: Link Your Store Locator URL to WordPress

Return to your WordPress dashboard and navigate to the Store Locator plugin settings. Paste the store locator URL you copied from Google Sheets into the required field. You must also define a path for your store locator page, such as location. This path determines where the store locator will be accessible on your WordPress site.

You can add this path as a menu option under your theme’s customized options for better user navigation. For instance, linking it to a “Visit Us” button in your menu makes it easy for visitors to locate your store.

Step 5: Create and Customize the Store Locator Page

The plugin automatically creates a Store Locator page under your WordPress Pages. You can edit this page to change the title or add additional content that better suits your website’s style and messaging. After making changes, update the page and reload it on the front end to confirm your edits are reflected correctly.

Step 6: Add Your Actual Store Locations in Google Sheets

Now comes the critical part: entering your real store data. In your Google Sheet, replace the sample information with your business locations. For each entry, include:

• Store or location name
• Street address
• State or region
• Country
• Contact number
• Email address
• Business hours
• Any other relevant details

After adding or updating your locations, navigate to Extensions → Store Locator Map and click ‘Update Map.’ This action generates the geographic coordinates (latitude and longitude) required for accurate map placement.

Step 7: Verify Your Store Locator on WordPress

Please return to your WordPress store locator page and refresh it. You should now see all your newly added locations on the map, each with its marker. The store locator features search functionality, enabling users to locate locations by name or apply filters, such as hospitals or clinics. Users can also get directions directly to any location via Google Maps integration.

Advanced Features and Customization

The Google Sheet format is flexible. You can add columns for more information about each location, such as special services or tags. In the plugin settings, specify which columns are active and mark them accordingly (for example, which column contains the phone number or email address). This enables the store locator to display more detailed information to your visitors.

You can also create custom filters based on tags or categories to help users effectively narrow down their search results.

Customizing Colors and Appearance

The store locator’s appearance can be tailored to match your website’s branding. In the settings, you can specify a custom HEX color code to change the primary color of the map markers and interface elements.

Conclusion

This article taught you how to use the store locator plugin on your WordPress website to display all your store locations.

By following the simple steps outlined—from installing the plugin and Google Sheets add-on to customizing your locator page and adding your store data—you can have a fully functional and visually appealing store locator up and running on your WordPress site in just a few minutes.

Leave us a comment, and let us know if you have any questions regarding the process. We will be happy to help as much as possible.

The post How to Add a Store Locator for WordPress in Less Than Five Minutes appeared first on PluginsForWP.

If you want to make your limited-time offers more compelling, automatically closing a popup after a set number of seconds can be a game-changer.

In this comprehensive guide, I’ll explain how to set up an Elementor popup that closes after a timer runs out.

This method suits countdown offers, exit-intent popups, and upsell funnels. It gives your visitors a clear call to action and a ticking clock that adds pressure to act quickly.

Why Use an Automatically Closing Popup?

Before diving into the technical steps, it’s’ essential to understand why you might want to use a timed popup that closes automatically:

• Create Scarcity: When visitors see a popup that lasts only a few seconds, they feel urgency and Scarcity. They know the offer is limited, encouraging faster decision-making.
• Improve Conversion Rates: Time-limited popups can increase conversions by prompting immediate action rather than letting visitors procrastinate.
• Control User Experience: Automatically closing popups prevents annoyance and popup fatigue by ensuring the popup doesn’t’ linger forever or require manual closing.
• Upsell and Funnel Optimization: In sales funnels or cart upsells, limiting the availability of an offer with a popup timer can boost average order values.

Let’s explore how to set this up yourself using Elementor and a simple code snippet.

Step-by-Step Guide to Closing an Elementor Popup Automatically After a Timer.

Create or Edit Your Elementor Popup

Start by opening Elementor and creating a new popup or editing an existing one. I used a simple popup with a timer set to six seconds for this tutorial. You can customize the popup content however you want—this could be a special offer, a lead capture form, or an announcement.

When setting the timer for your popup, you have flexible options.

Depending on your campaign needs, you can set it to count down from seconds, minutes, hours, or even days.

For scarcity-driven offers, shorter timers —such as 30 seconds to 2 minutes —work best, creating a genuine sense of urgency.

Add the HTML Block with Custom Code

Next, drag an HTML widget into your popup layout. This is where you will paste a small snippet of JavaScript code that controls the timer and closes the popup automatically once the time is up.

Here’s the essential part: you must adjust the timer duration in the code to match the desired duration. The timer is set in milliseconds, so, for example, 6000 milliseconds equals 6 seconds. If you want a 10-second timer, change this number to 10000.

Here is the exact code snippet for easy copying and pasting. Just replace the number in the code with your desired duration:

<script>
setTimeout(function(){
    document.querySelector('.dialog-lightbox-close-button').click();
}, 6000)
</script>

This script waits for the specified time and then triggers Elementor’s’ popup close function. It’s’ lightweight and practical.

Display and Publish Your Popup

Once you have set the timer and the code in place, ensure that you configure the popup display settings to target the correct pages or user actions. This could occur on page load, exit intent, or another trigger that aligns with your campaign goals.

After setting your display preferences, publish and test the popup to ensure it behaves as expected.

Testing Your Popup in Incognito Mode

One important note is that if you test the popup while logged in to your WordPress admin, the timer may not function correctly because Elementor often turns off specific scripts for logged-in users. To get an accurate test, open your site in an incognito or private browsing window to see how the popup appears and closes after the timer expires.

Prevent the Popup from Reappearing After Closing

By default, refreshing the page causes the popup to reappear, which can defeat the purpose of creating Scarcity. Elementor has an advanced rule called “Show up to X times” to fix this. Set this rule to 1 so the popup only shows once per visitor session.

This ensures that once a visitor closes the popup (or it closes automatically after the timer), it won’t bother them again on page refresh or subsequent visits during the same session. This is crucial for maintaining a positive user experience while creating a sense of urgency.

Turn off the Close Button for Maximum Scarcity

If you want to ensure you can’t bypass your timed offer by manually closing the popup early, you can turn off the close button entirely. This forces them to act within the timer window or wait until the popup closes automatically.

To do this, go to your popup settings and turn off the close button. After saving, your popup will no longer have a manual close option, increasing the pressure to engage with the offer before the timer runs out.

Tips for Using Timed Popups Effectively

• Keep it Short: Keep the timer under 2 minutes for scarcity offers. Longer timers reduce urgency.
• Clear Call to Action: Ensure your popup clearly explains the offer and instructs the visitor on the next step before closing.
• Use Cookies or Session Storage: Consider using cookies or session storage to track whether a visitor has seen the popup so you don’t repeat visitors.
• Test on Multiple Devices: Ensure the popup behaves well on both mobile and desktop devices, particularly with timers and automatic closing.
• Combine with Other Triggers: Use exit intent or scroll percentage triggers to show the popup at the best moment.

Conclusion

Automatically closing an Elementor popup after a few seconds is a simple yet powerful way to drive urgency and improve conversions on your WordPress site.

With just a bit of custom code and the proper popup settings, you can create a one-time offer that visitors must act on promptly or risk missing out.

By following the steps above—setting your timer, adding the JavaScript code, limiting popup reappearances, and optionally turning off the close button—you’ll have a professional, scarcity-driven popup ready to enhance your funnels and promotions.

Feel free to leave questions or comments if you need help implementing this tutorial on your site.

Remember, the key to success with timed popups is testing and tailoring the experience to your audience’s behavior and preferences.

The post How to Automatically Close an Elementor Popup On a Timer (After a Few Seconds) appeared first on PluginsForWP.

Besides being unuser-friendly, a cart page without items will ultimately cost you revenue.

When the user removes items from the cart, there is a better chance for him to navigate away from your website afterward. To prevent it from happening, it will be better to direct them to some of the products that may interest them.

Please take a look at our website, for example. When you try to load our checkout page plugins-for-wp.world/checkout when it’s empty, you’ll be redirected to our subscription page.

By doing so, I focused your attention on our available plans rather than giving you the option of where to go next, saving you valuable page load time.

This tutorial will redirect WooCommerce and Easy Digital Downloads empty cart pages to different pages.

Both codes below must be pasted in the functions.php file of your child theme or a site-specific plugin. Read our article and learn how to create a custom site-specific plugin in WordPress.

Please apply the functions below to a child theme and remember to back up WordPress before editing core files.

Redirect an Empty Checkout Page in WooCommerce

If you’re using the WooCommerce plugin to sell your goods, use the code below:

add_action("template_redirect", 'redirect_empty_checkout_woocommerce');
function redirect_empty_checkout_woocommerce(){
    global $woocommerce;
    if( is_cart() && WC()->cart->cart_contents_count == 0){
        wp_safe_redirect( site_url( 'shop' ) );
    }
}

The code above will redirect the visitors from an empty checkout or cart page to the archive Shop page.

However, if you prefer to land them on a different page, such as a specific product or the pricing page, change the URL address from 'shop' to 'product/product-name/'.

Redirect an Empty Checkout Page in Easy Digital Downloads

If you’re using the EDD plugin to sell your goods, use the code below

add_action( 'template_redirect', 'redirect_empty_checkout_edd', 11 );
function redirect_empty_checkout_edd(){
	if ( is_page( edd_get_option( 'purchase_page' ) ) && edd_get_cart_quantity() == 0 ) {
        wp_safe_redirect( site_url( 'downloads' ) );
		exit;
	}
}

Like the WooCommerce redirection function, the code above will redirect the users to the archive Downloads page, where they can view all your available products.

If you want to set a different URL, change 'downloads' to your desired address, such as 'downloads/product-name/'.

Related Articles

• How to redirect WooCommerce after checkout.
• How to edit the WooCommerce checkout fields.
• How to change the WooCommerce button’s color.

Conclusion

This article teaches you how to redirect empty checkout pages in WooCommerce and Easy Digital Downloads to another page.

Let us know which code snippet you used to achieve that.

The post How To Redirect WooCommerce and EDD Empty Checkout Pages appeared first on PluginsForWP.

If so, you came to the right place.

Although Elementor is already pre-loaded with various fonts, we can still add a custom one to differentiate ourselves from other websites.

This tutorial will show you how to add a custom font to your WordPress website using the powerful Elementor page builder plugin.

Why to Use a Custom Font?

Custom fonts are a powerful tool for bolstering brand identity and creating a unique visual style.

They offer designers creative freedom to tailor typography, enhancing aesthetic and thematic coherence.

Custom fonts are optimized for screen readability and support web accessibility. They distinguish designs, increasing memorability and impact in a sea of standard fonts.

They ensure consistency across diverse media, reinforcing brand integrity. Exclusive designs cater specifically to brand requirements, promoting uniqueness.

Moreover, custom fonts afford designers greater control over licensing and usage rights, ensuring legal compliance.

Ultimately, custom fonts elevate visual identity, enrich user experience, and amplify design impact.

How to Add Custom Fonts to WordPress With Elementor

Elementor Pro simplifies the process of adding custom fonts to WordPress.

While it’s still possible to manually upload custom fonts to WordPress, it is way easier with Elementor.

Before learning how to add the custom font to WordPress, you must have it downloaded to your local computer.

There are plenty of websites from which you can download fonts, such as DaFont and 1001freefonts.

Once you found your desired font, click on the Download button.

Once you publish the font, we should test it to ensure it’s working correctly.

Therefore, click the Edit with Elementor button to open the visual editor screen.

Then, choose the element you want to change (usually a title) and expand the typography tab. 

Expand the Font Family dropdown list and search for the custom font you added.

The title’s font will change accordingly after selecting your new custom font, which indicates it works correctly.

Finally, update the changes and visit the live site to ensure the new custom font is active and visible.

Conclusion

WordPress and Elementor come with hundreds of pre-loaded fonts for us to use. However, sometimes, they don’t have the one we want.

Custom fonts are a great way to build a brand story and character.

Therefore, this tutorial showed you how to add your favorite custom font to Elementor to enrich your business and brand recognition.

The post How to Add Custom Fonts to WordPress with Elementor appeared first on PluginsForWP.

Because the header typically contains the website’s most valuable links, it is essential to keep it visible as much as possible.

However, in some cases, you’ll want to change the header’s structure or design on scroll to compliment the page.

The changed header can be a different background color, elements order, minimized height, or anything else.

This tutorial will show you how to change the Elementor header when scrolling the page.

How to Change the Header in Elementor

Changing the website header requires combining a few steps, such as jQuery and CSS.

Once we understand the steps, let’s dive in and see how to change the header.

Create a Header Template

Creating a header template in Elementor allows you to design a custom header for your website. Thanks to Elementor’s user-friendly, drag-and-drop interface, the process is straightforward.

From your WordPress dashboard, go to Templates > Theme Builder.

In the Theme Builder, you’ll see different parts of your website that you can design. Choose the header.

Once the Elementor editor screen is loaded, choose pre-made templates or build them from scratch.

The fixed header that should be displayed at the top of the page will be the first section, while the default header will be the second section.

Prepare the Replace Header

Once we finish designing both headers, we can proceed to the next step and assign an ID.

We need to use jQuery (or JavaScript) to manipulate the visibility of the replacing header. To do that and differentiate between the two headers, let’s assign a unique ID to the fixed header.

So, click on the changing header section, navigate to the Advanced tab, and enter headerOnScroll inside the ID field.

Then, under the same tab, change the Position to Fixed and fill the z-index field with a high value like 99.

A high z-index value will ensure that the header will be displayed on top of the other sections of the page rather than behind them.

Once done, publish the header template and set the displaying conditions based on your needs.

Applying the jQuery to Change the Header

Changing a website header on scroll typically involves using JavaScript (or a JavaScript library like jQuery) and CSS to modify the header’s style or content based on the page’s scroll position.

The general idea is to listen for the scroll event on the window or document, check how far the page has been scrolled, and then apply changes to the header based on that scroll distance.

I already created the jQuery and CSS codes to simplify your life.

To apply the code, navigate to Elementor -> Custom Codes -> Create new.

Then, please copy the code below and paste it inside the custom code screen.

<script>
  (function ($) {
  $(document).ready(function () {
    var headerOnScroll = $('#headerOnScroll');
	var headerOnScrollHeight = headerOnScroll.height();
	headerOnScroll.css( 'transform','translateY(-'+ headerOnScrollHeight +'px)' );
	$(window).scroll(function() {
		if($(this).scrollTop() > 300){
			headerOnScroll.addClass('showNewHeader');
		}else {
			headerOnScroll.removeClass('showNewHeader');
		}
	});
  });
  })(jQuery);
</script>

<style>
#headerOnScroll.showNewHeader {
transform: translateY(0) !important;
}
</style>

You can change the 300 number in the code to control when the new header is displayed when scrolling down from the top of the page.

Once you’ve completed this, save the custom code and execute it on all pages (or all the pages where the header is presented).

Then, visit your website and ensure the Elementor header changes successfully.

Changing Header Troubleshooting

In most cases, with most themes, the steps we took up to this point will ensure that the fixed header is hidden on page load and behind the default header.

However, if on page load, you can still see both headers or a glimpse of the fixed header before it disappears, you can fix it in two ways:

1. Ensure the default header has a higher z-index value than the top header. For example, if we set the z-index value of the top header to 99, we should set the default header z-index value to 999.
2. Change the custom code executing location from the default <head> tag to </body> - End inside the custom code screen in Elementor.

Once you corrected the above two possible issues, save the changes and retest the header to ensure it changes on scrolling.

Conclusion

This tutorial showed you how to change the header in Elementor easily.

There are several reasons to change the header, some design-related and others practical. Whatever the reason, this tutorial showed you how to do it.

The post How to Change Elementor Header on Scrolling appeared first on PluginsForWP.