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.

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.

This article will teach you how to add JavaScript to Elementor in two ways.

The first way is by using the default HTML widget of Elementor, and the second is by installing an extension called Essential Addons.

Why Adding Scripts to Elementor?

When using WordPress, often, you’ll find the need to use custom JavaScript or jQuery. One example can be a Google Analytics tracking code.

Although there are great Google Analytics plugins for that, many website owners prefer to use small scripts instead of installing a plugin.

Using the site kit plugin to inject different scripts is possible, but we can also use the script if we know where to paste it.

Knowing how to use scripts with Elementor is essential because you will need to use it at some point.

Add JavaScript to Elementor

Whether you want to add JavaScript or jQuery, the process is identical, and we can approach it in two different ways.

• With the HTML widget.
• With a plugin.

In this article, we will explore both ways. Let’s start with the first one by using the HTML widget.

Method #1: Add JavaScript with the HTML Widget

Using the HTML widget is my preferred method to add scripts because it’s a default feature of Elementor. You are not required to install any additional plugins.

First, navigate to the page you want to edit and click on Edit with Elementor.

Then, inside the Elementor screen, drag the HTML widget to your desired section.

Next, paste the JavaScript or jQuery script inside the widget editor and click update.

When using the HTML widget, you’ll need to wrap the function inside <script> tags similar to the Gutenberg text editor.

Once updated, revisit the page and verify that the script is executing as expected.

Alternatively, using the Essential Addons plugin, you can inject scripts to any page with their built-in feature.

Method #2: Add Scripts with a Plugin

The Essential Addons plugin for Elementor is a viral plugin used by many.

Although there are many benefits to using this plugin for its extensive widgets library, I don’t recommend you install it only for the scripts option. If you already have it installed on your WordPress website, you can use its benefit to paste scripts on every page.

Navigate to the Essential Addons for Elementor tab inside the WordPress dashboard and into Extensions. By default, the Custom JS option should be turned on, but if it isn’t, activate it.

Once activated, edit your desired page with Elementor and click on the cogwheel icon to open the page settings at the bottom left corner.

Then, click on the Advanced tab and add the scripts into the new Custom JS window.

Unlike the default HTML widget, wrapping the code with <script> tags is unnecessary.

Update the changes and revisit the website to verify that the codes are working as expected.

Essential Addons is only one plugin out of many others that enable you to add JavaScript codes to Elementor. The other plugins are Ultimate Addons and PowerPack.

Conclusion

In this tutorial, you learned how to add scripts to the Elementor page builder in two different ways.

Leave us a comment below and let us know which methods you used.

The post How to Add JavaScript to Elementor (2 Methods) appeared first on PluginsForWP.