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 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.

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.

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.

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.

The rest of the tabs are closed. You’ll need to click on each to open and view their content.

If you want the first tab closed on default for aesthetic, design, or any other reason, you won’t find the option to do it through the plugin’s edit panel.

However, setting the accordion widget closed on page load is still possible using a simple script.

This tutorial will show you how to set the Elementor accordion widget closed by default.

How to Default Close Elementor Accordions

Elementor widgets generate the content with HTML elements added to the screen.

Each section or element gets its own set of body classes based on your assigned settings.

The CSS and JavaScript files are fired on page load, and the design or behavior for each element is applied based on its class.

While inspecting the accordion HTML element, you’ll notice that the elementor-active class triggers a specific behavior.

To close the accordion by default, we must run JavaScript code to remove that class.

We will cover all scenarios of how to close the accordions:

• Single accordion
• All accordions together
• Specific accordions only

Let’s start with the first option, close a single accordion,

Default Close a Single Accordion

This method is perfect if you only want to close a single accordion on a page.

In this case, drag an HTML widget above the accordion widget, and paste this JavaScript code inside.

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>

Save the changes and reload the page to ensure the accordion is closed.

You may see it open for a split second until the JavaScript file executes and close it.

Close All Elementor Accordions by Default

If you want to close all current and future accordions on your website, you’ll need to fire the same code above from your header template.

You can place the code above in your template files by using any code snippet plugin or the Custom Codes option of Elementor Pro.

You can read more about the different options in our Add JavaScript to Elementor article.

With Elementor Pro, navigate to the Custom Codes screen and click Add New.

Give the code snippet a name, paste it inside the code box, and publish it.

Once published, revisit any page with accordion and verify it’s now closed by default.

Default Close Specific Accordions

We understand that, in some cases, you would like to have some accordions closed while others can stay open.

We’ll need to assign a unique class name to the accordions we want to close by default, to differentiate them from the others.

First, click on the Advanced tab of the accordion widgets you would like to close, and enter closeAccordion in their CSS Classes box.

Then, create a custom code in Elementor Pro, paste the following code inside, and save the changes.

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.closeAccordion .elementor-tab-title').removeClass('elementor-active');
 $('.closeAccordion .elementor-tab-content').css('display', 'none'); }, delay);
});
</script>

Once saved, refresh any page containing an accordion widget with the closeAccordion class and verify it’s closed now.

You can also check the other accordion widget without the added class and verify that it functions as usual.

Troubleshooting if Accordion is Not Closed by Default

The JavaScript code we use above holds a delay function that will be triggered one second after the page is fully loaded.

The idea is to fire the script only after all the Elementor files are rendered on the page.

While it will work flawlessly for most designs, it will take longer than a second to load for heavy-content websites. Therefore, the code will be firing before Elementor is finished loading.

In such cases, the Elementor default files will overwrite our custom code and keep the accordion open.

To fix that, change the set time of the delay function to a more significant number. For example, switch 100 to 1000, and test it again.

Keep increasing the delay property number until you find the proper delay value for your website. 

Remember not to get discouraged by a high number because it will take the visitors more than a couple of seconds to scroll to the accordion section, which will be close by then. 

Conclusion

Elementor doesn’t have the option to toggle close the accordion widget by default.

However, we could still default close the accordion with a simple script; this tutorial showed you how to do that easily.

Leave a comment and tell us which one of the methods we presented works the best for you.

The post How to Set the Elementor Accordion Widget Closed by Default appeared first on PluginsForWP.

Businesses strategically use that valued real estate to promote offers or place ads to increase their revenue.

Posting content or an image widget in the sidebar is a wise strategy that can benefit your website differently. Some advantages can improve the engagement rate, while others can keep your visitors longer.

Scrolling the page down will remove the widget from the sight view, and as a result, it won’t use the maximum potential of the widget. 

Because profit optimization is one of the most critical aspects of every business, we need to find a way to keep the widget sidebar in view.

This article will show you how to make a sticky widget in WordPress in multiple ways.

Why Make a Sticky Widget

A sticky widget can help your WordPress website immensely in a few ways:

• First, it wins your customer’s attention to the offer you want to promote.
• It always stays on the screen, making it impossible to miss it.
• Place an ad that will always be visible, increasing the chance for users to click on it, which will get you more revenue.
• Clicks will improve the SEO engagement parameter, increasing your rank in search engines.
• A sticky widget that leads to another internal page on your website will decrease your bounce rate. The lower the bounce rate, the better.

All the reasons above, plus many more, are why we make the widget float on our product pages.

Now that you know why your website can also take advantage of a sticky widget, let’s learn how to do it.

In the following few sections, I will show you how to create a sticky sidebar in various ways: using CSS, installing a plugin, or using the Elementor page builder.

Sticky Widget with CSS

Although relatively simple, using the CSS method would be best if you understood the web’s structure layout.

Sticky elements work best with coded themes to support the flexbox design rather than float. However, no one code fits all situations because each theme was coded differently.

Therefore, pasting the code below in your theme’s stylesheet may not work. Instead, try to understand and mimic the showing process for your site.

Our example will demonstrate the process using the GeneratePress theme because it supports the flexbox container.

First, navigate to the Appearance -> Widgets screen, and add the widget (that you want to float) to the bottom of the sidebar.

If the floated widget isn’t the last, it will hide the other widgets when scrolling down.

Once added, visit the live page and verify that it was added successfully.

Apply the CSS

For the widget to stick while scrolling down, both the content and the sidebar sections should have the same height.

To check if that’s the case, open the inspection tool by right-clicking anywhere on the screen and clicking on inspect.

Then, navigate down the DOM structure, and verify that the sidebar height matches the content height.

If they both have the same height, that’s great. You saved a step. Otherwise, the first CSS code will increase the sidebar height to full.

You can enter CSS inside your child theme’s stylesheet or the customization screen’s Additional CSS tab.

Target the sidebar ID or class and add the height: 100% CSS rule to it.

.sidebar {
height: 100%;
}

Save the changes and verify that the sidebar height was extended to take the entire page’s size.

Then, target the widget (by class or ID) that you would like to stick to the page’s top and add the following code:

.sticky-widget {
position: sticky;
top: 20px;
}

The top value controls the distance of the sticky widget from the top of the screen. Please set it to 0 to position it at the top or increase the number to create some space.

Once applied, visit the page and verify that the widget is floating while scrolling down.

The WP Sticky Sidebar Plugin

The WP Sticky Sidebar plugin will initially do the same thing as the CSS method above.

However, the only difference is that it will work with any theme, whether it supports the flexbox container or the floating layout.

Moreover, it simplifies the CSS process and saves you from writing the rules yourself. Instead, you’ll need to enter a couple of element IDs, and the plugin will do the rest.

First, navigate to the WordPress plugins screen, search for WP Sticky Sidebar and install it on your website.

Once activated, navigate to the plugin’s screen at Settings -> WP Sticky Sidebar.

You’ll need to enter the class or ID of the specific element and the container containing both the sidebar and content.

For this example, we’ll use the OceanWP theme because it was built with a floating layout, and the first CSS method didn’t work.

So, right-click anywhere on the page’s content, and open the inspector tool.

First, we will copy the container’s ID containing both the content and the sidebar. In our example, it’s content-wrap.

Then, we will copy the widget’s class that we want to set sticky. In our example, it’s widget_media_image.

Once we have both IDs, we will go back to the WP Sticky Sidebar plugin’s screen and paste them into their proper location.

You can also increase the top margin value to a higher number to add space between the screen’s top and the widget.

Please save the changes when done, and refresh the page to verify that the widget is now sticky.

Sticky Widget with Elementor

If you’re one of the many users of Elementor, you’re in luck because you can make the widget sticky without using another plugin.

The sticky feature is part of the Elementor Pro plugin, which you can get from the official website for $59 or us for only $4.99.

After activating Elementor Pro, open the visual editor and navigate to the Advanced tab of the widget that you’d like to set as sticky.

Then, expand the Motion Effects tab and change the Sticky drop-down list to the Top.

The widget will float immediately after changing the settings and stick to the top of the screen on all devices.

You can also dictate which devices you’d like to enable the sticky widget by removing the unwanted devices from the list.

In addition, you can also set an Offset number to create space between the page’s top and the widget.

Once finished, save the changes and visit the page to ensure it works as expected.

Sometimes, the widget won’t stay within the column’s boundaries and will hide some parts of the footer.

To fix it, enable the Stay In Column toggle button to keep the widget position relative to its sidebar and stay inside it.

Finally, save the changes and test it once again to verify that it’s working well.

Conclusion

This article showed you how to add a sticky widget to a WordPress website in three different ways:

• With CSS rules
• Using a plugin
• Elementor page builder

We also discussed the benefits and pros of the floating widget and why we should add one.

Please leave us a message and tell us which of the methods above you used to achieve this task or if you need us to provide you with the proper CSS rules for your theme.

The post How to Add a Sticky Widget in the WordPress Sidebar in Multiple Ways (Including Elementor) appeared first on PluginsForWP.

While many websites use the toggle module to display different content by a switch, it could be helpful for you to know.

This article will teach you three ways to add a toggle button to WordPress.

What is Toggle Button

A toggle button is a great way to display different content on click. It acts very similarly to the accordions or the tabs.

Two different contents are assigned to the tabs, and clicking the toggle button will switch the visible content.

Many websites use the toggle button on their pricing pages to display different packages.

The toggle button saves you from bombarding your visitors with information that may be irrelevant to them but still accessible if needed.

Displaying different sections with a toggle design is a wise idea for both the business and the visitors.

Methods to Add a Toggle Button

There are multiple ways to add a toggle feature to your WordPress website, and in this tutorial, we will cover the following:

1. Use a Gutenberg block.
2. Toggle widget for Elementor.
3. Build our own with HTML, CSS, and JavaScript.

All ways are great and will initially achieve the same thing. However, choosing your preferred method should base on which plugins you use and your approach.

Because Gutenberg is the default WordPress editor and most used, we will use it first.

Add a Toggle Button with a Gutenberg Block

Although the Gutenberg editor doesn’t have a toggle block by default, it is still possible to add one by installing a plugin.

Installing a blocks plugin will add many extra features missing from the core editor.

Essential Blocks for Gutenberg is one of my favorite plugins to achieve this goal.

Before using the toggle block, we will need to install and activate the plugin on our WordPress website.

Therefore, navigate to Plugins -> Add new, and search for essential blocks. Once found, install and activate it.

Then, edit one of your pages, click on the plus icon, and add a new toggle block.

The toggle block will be divided into two sections, left and right. First, enter custom content on the left, switch, and type content on the right.

Once entered, move on to the three tabs on the right sidebar: General, Style, and Advanced.

For example, to change the default blue background color, click on the Style tab, expand the Background option, and set your custom color.

Keep exploring the different options of the block and adjust the shape and colors of the toggle button based on your needs.

Please remember to save the changes and visit the live page to verify that it’s working correctly.

Toggle Button Widget for Elementor

WPDeveloper, the company that developed the plugin above, also created a plugin for Elementor users.

Initially, all the added Gutenberg blocks now exist as Elementor widgets.

The Essential Addons plugin (free and pro) will add 90 unique widgets to Elementor.

The toggle button widget is part of the Pro version, which you can get from the official website for $39.98 or us for only $4.99.

Once downloaded, navigate to the plugins screen of your WordPress website and install the free version first from the plugins repository. Then, click the Upload button, select the plugin’s pro version, and activate it.

Once both are active, click on your desired page’s edit with Elementor button, and search for the toggle widget.

The section will be divided into primary and secondary content tabs, and you can control each handle label and content.

Like any Elementor widget, use the Style tab to customize any aspect of its look, such as colors, shape, etc.

For example, to change the button shape from round, expand the Switch Style drop-down list and select rectangle.

Keep styling the toggle button by changing its size and colors, and save the changes when finished.

Remember to visit the live page and verify it’s working as expected on the front end.

Please note: in both plugins above, you can use shortcodes to populate the sections with more complex content, such as pricing tables, before and after images, etc.

Read the following section if you prefer to use HTML markup to display toggled content rather than installing a plugin.

WordPress Toggle Button without a Plugin

Adding a toggle button to your website is possible without a plugin, and it’s pretty easy.

Three components assemble the content toggle switcher:

• HTML – the structured markup of the elements.
• CSS – customize and style the look of each feature.
• jQuery – react to the visitor’s click to show or hide the content.

Please make sure to change the content of the toggle switch handles and text instead of the existing ones. 

HTML

Edit your desired page, and paste the HTML below inside an HTML block.

<div class="toggleSection">
     <div class="toggleButtonHandles">
          <div class="beforeToggleLabel">Before label</div>
          <div class="toggleButtonSwitch">
               <label class="toggleButton">
                    <input type="checkbox">
                    <span class="slider round"></span>
               </label>
          </div>
          <div class="afterToggleLabel">After lable</div>
     </div>
     <div class="toggleContent active"><p>I'm the primary content</p></div>
     <div class="toggleContent"><p>I'm the secondary content</p></div>
</div>

After saving the changes, visit the page to ensure you can see the content on the screen.

As of now, before implementing the CSS rules, the content will be unstyled and plain. We now should prettify it with CSS.

CSS

Copy the CSS code below, and paste it inside the stylesheet file of your current child theme.

.toggleSection {
	text-align: center;
}
/* The switch - the box around the slider */
.toggleButtonHandles {
     display: flex;
     align-items: center;
     justify-content: center;
}
.toggleButton {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
}
.toggleButtonSwitch {
	padding: 0 10px;
}
/* Hide default HTML checkbox */
.toggleButton input {
     opacity: 0;
     width: 0;
     height: 0;
}
/* The slider */
.slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: .4s;
}
.toggleContent {
	display: none;
}
.toggleContent.active {
	display: block;
}
.slider:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     transition: .4s;
}
input:checked + .slider {
     background-color: #2196F3;
}
input:focus + .slider {
     box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
     transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
     border-radius: 34px;
}
.slider.round:before {
     border-radius: 50%;
}

Then, refresh the page that holds the toggle button to see the new look of the switch.

You can now click on the rounded slider to verify that the toggle handle is moving from side to side. Although the button reacts to clicks, it still doesn’t manipulate to show or hide the sections.

jQuery

Finally, the last piece of the puzzle is the jQuery code, which is in charge of hiding or showing the content based on our selection.

You can use FTP software to create a new script file or insert the JavaScript into Elementor.

Alternatively, you can use the Simple Custom CSS and JS plugin to achieve similar results.

jQuery(document).ready(function( $ ){
	$( '.toggleButton input' ).click(function() {
		$('.toggleContent').toggleClass('active');
	});
});

After implementing the code, test the toggle button once again. If used correctly, clicking on the slider will switch and display different content.

This is a solid starting point; a user with a basic understanding of CSS and JavaScript can expand and customize it further to fit the website’s needs.

Additional Articles

• Add copy to clipboard button to WordPress
• How to add timeline content to Elementor
• Add text over an image in Elementor
• PowerPack plugin for Elementor – walkthrough and review
• How to add a countdown timer in WordPress

Conclusion

Toggle buttons are gaining popularity in modern web design and strategies. Marketers use them in various ways, some for a better user experience and other to display relevant content.

This article showed you how to add a toggle button to your WordPress website in three ways.

Leave us a comment and tell us which way you chose to achieve this task.

The post How to Add Toggle Button to WordPress to Switch Between Content appeared first on PluginsForWP.

A drop-down box is an efficient way to direct visitors to act by choosing one of the list’s options.

This article will show you how to create a drop-down list box and display it with Elementor.

When to Use the Drop-Down List Box

The idea of using a drop-down list comes in handy in a funnel-like structure to encourage visitors to choose a single option out of many.

For example, the WooCommerce plugin uses the dropdown select box in their product pages to display multiple options.

When customers visit the page, they’ll need to expand the list box with the variable options and select the option that fits them best.

Another typical case for using the drop-down list, as we did and many more sites, is on the contact us page.

Because our visitors are contacting us for various reasons, we created a dedicated contact form for each department.

Before creating a new support ticket, you’ll need to select the subject you need help with, and a contact form will be displayed based on your selection.

A drop-down list menu is an innovative and effective way to maximize productivity and offer our best support.

How to Create a Dropdown List in Elementor

Although Elementor doesn’t have a native widget to add a dropdown list box, we can still create it by installing an extension like Unlimited Elements or with HTML.

Because an Elementor extension will add many extra code files and stylesheets, it will be better practice to use the HTML method instead.

Creating a dropdown list is a couple of steps process made by these components:

• First, the HTML structure – to enter the different selecting options.
• Adding JavaScript – to control what will happen after selecting one of the options.

Combining the HTML structure with JavaScript is optional, but I can’t think of a scenario where only use the dropdown box by itself.

Create the Dropdown HTML Code

The <select> tag and a nested <option> tag for each list option assemble a drop-down navigation list.

In addition, we can add a <label> tag before the code to add a title to the list.

For example, to display an options list of the best WordPress plugin names, we will use the code below:

<label for="wpPluginsList"><b>What's your favorite WordPress plugin?</b></label><br>

<select name="wpPluginsList" id="wpPluginsList">
  <option>Please choose one of these options:</option>
  <option value="Elementor-plugin">Elementor</option>
  <option value="Woo-plugin">WooCommerce</option>
  <option value="Seo-plugin">Yoast</option>
</select>

The name attribute assigned to the elements is needed to reference the form’s data after submission, and the id attribute is used to associate the list with the label.

The HTML structure above will render this dropdown list:

Please note: the for attribute value of the <label> element and the id attribute of the <select> element should match each other.

You can copy the exact code above or create a similar one with a code editor app like Visual Studio Code.

Once created, click on the edit with Elementor button to launch the visual editor, and drag the HTML widget to your desired location.

Then, paste the code inside the HTML widget and save the changes.

After saving, visit the live page and click on the dropdown list to ensure it’s working as expected.

If you only need the list, no more actions are required. However, add JavaScript if you want to trigger a movement after selecting an option.

Add the JavaScript Code

As mentioned earlier, Javascript is essential when creating a drop-down list element.

Initially, the code will watch for the visitors to select an option and react with an action.

The most common uses of the JS code in a drop-down box scenario are to scroll to the selected section or display it. Once you choose an option, you’ll be scrolled to the area assigned.

Regardless of the action you would like to perform, the process is ideally the same, and you’ll need to match the section ID to the value attribute text of the <option> tag.

For example, one of the value attributes of the option tags above is equal to the ‘Elementor-plugin‘. Therefore, I’ll assign the same value as an ID to the desired section.

Create many sections as needed and attach their unique id value to match their corresponding option tag from the drop-down list.

Once done, choose what you would like to happen after selecting an option from the drop-down list. The JavaScript codes below will either scroll to the section, display it, or both.

Scroll to the Dropdown Selected Section

This first code will check the selected option’s value and scroll you down to the top of its matching section.

You can paste the code below using an FTP or inside the plugin itself, as we showed you in the how to add JavaScript to Elementor tutorial.

<script>
(function ($) {
$(document).ready(function () {
  $('#wpPluginsList').change(function() {
    $selectedValue = $(this).val();
    $('html, body').animate({
        scrollTop: $('#'+$selectedValue).offset().top - 25
    },500);
  });
})
})(jQuery);
</script>

Once saved, revisit the page and select an option from the drop-down box. If coded correctly, you’ll be scrolled to the correct section.

If that was your only intention, you now have a fully functional drop-down menu created with Elementor. However, keep reading if you want to hide the sections and display them based on the user’s selections.

Show / Hide Sections Based on the Dropdown Selected Value

The code below will hide all the sections on the page load and only display a single one based on the user’s choice from the dropdown list.

Because we only want to hide specific sections, we need to assign a class to all the relevant departments to differentiate them from the other areas (that we don’t want to hide).

To do that, go to the Advance tab of all the relevant sections that are part of the dropdown list, and populate them all with the same class, for example, hideOnPageLoad.

Then, use the code below:

<script>
(function ($) {
$(document).ready(function () {
  $('.hideOnPageLoad').hide();	
  $('#wpPluginsList').change(function() {
    $('.hideOnPageLoad').hide();
    $selectedValue = $(this).val();
    $('#'+$selectedValue).toggle();
  });
})
})(jQuery);
</script>

Save the changes once again and test the drawdown feature to ensure it’s working as expected.

Neat right? How about combining both methods? Show the section and scroll to it.

Combine Both Methods Into One

Each of the codes above had its purpose, one was to scroll, and the second was to show.

We will combine both codes this time, so choosing a value from the drop-down list will display the sections and scroll us to it.

Please remember to follow the method above and assign the same class to all desired elements.

<script>
(function ($) {
$(document).ready(function () {
  $('.hideOnPageLoad').hide();	
  $('#wpPluginsList').change(function() {
    $('.hideOnPageLoad').hide();
    $selectedValue = $(this).val();
    $('#'+$selectedValue).toggle();	
    $('html, body').animate({
        scrollTop: $('#'+$selectedValue).offset().top - 25
    },500);
  });
})
})(jQuery);
</script>

When finished, the code’s final behavior will display and scroll to the selected element.

Conclusion

This article showed you how to create a dropdown menu with Elementor by using HTML and JavaScript.

Although Elementor doesn’t have a native dropdown widget, we could still achieve it with some code.

Leave us a comment and tell us if you have any questions about the process.

The post How to Create a Dropdown List Menu in Elementor appeared first on PluginsForWP.