How to Create Sliding and Fading Headings with Elementor's Free Version

Creating dynamic, attention-grabbing headings can significantly enhance your website’s user experience. In this guide, we’ll show you how to create sliding and fading headings using Elementor’s free version, along with custom CSS and JavaScript. Follow these steps to add a sleek, professional touch to your website.

Step 1: Add Headings in Elementor

First, we need to add the headings you want to rotate through.

Edit Your Page with Elementor:
- Open the page where you want the rotating headings in Elementor.
Add Heading Widgets:
- Add multiple Heading widgets to the section, each with the respective text you want to display. For example:
  - Heading 1: “the heading that you wanted to slide and fade “
  - Heading 2: “the heading that you wanted to slide and fade “
  - Heading 3: “the heading that you wanted to slide and fade “
  - Heading 4: “the heading that you wanted to slide and fade “
  - Heading 5: “the heading that you wanted to slide and fade “
Assign a Common Class:
- Click on each heading widget.
- Go to the “Advanced” tab.
- In the “CSS Classes” field, add rotating-heading.

Step 2: Add Custom CSS

Now, we need to style the headings and manage their transitions.

Go to WPCode (Code Snippets Plugin):
- If you don’t have WPCode installed, install and activate it from the WordPress plugin repository.
- Go to Snippets > Add New.
Create a New CSS Snippet: ( install it , it is completly free )
- Name your snippet (e.g., “CSS for Sliding and Fading Headings”).
- Paste the following CSS code:

				
					/* Ensure the main container hides overflow */
.Main11 {
  overflow: hidden;
  position: relative; /* Ensure positioned children can be absolutely positioned within */
}

/* Common heading styles */
.rotating-heading {
  font-family: 'Syncopate', sans-serif;
  font-size: 60px;
  line-height: 67px;
  font-weight: 500;
  color: white;
  text-transform: uppercase;
  position: absolute;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  white-space: nowrap; /* Prevent text from wrapping */
}

/* Active state */
.rotating-heading.active {
  opacity: 1;
  transform: translateX(0);
}

/* Inactive state */
.rotating-heading.inactive {
  opacity: 0;
  transform: translateX(100%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .rotating-heading {
    font-size: 40px;
    line-height: 45px;
    white-space: normal; /* Allow text to wrap on small screens */
  }
}

@media (max-width: 480px) {
  .rotating-heading {
    font-size: 30px;
    line-height: 35px;
    white-space: normal; /* Allow text to wrap on small screens */
  }
}

Step 3: Add Custom JavaScript

Next, we need to add the JavaScript that will handle the rotation of the headings.

Create a New JavaScript Snippet:
- Go to Snippets > Add New.
- Name your snippet (e.g., “JS for Sliding and Fading Headings”).
- Paste the following JavaScript code:

				
					document.addEventListener('DOMContentLoaded', function () {
  let currentIndex = 0;
  const headings = document.querySelectorAll('.rotating-heading');
  const totalHeadings = headings.length;

  function showNextHeading() {
    headings.forEach((heading, index) => {
      heading.classList.remove('active', 'inactive');
      if (index === currentIndex) {
        heading.classList.add('active');
      } else {
        heading.classList.add('inactive');
      }
    });

    currentIndex = (currentIndex + 1) % totalHeadings;
  }

  // Initial display
  showNextHeading();

  // Rotate headings every 3 seconds
  setInterval(showNextHeading, 3000);
});

Set the Code Type to “JavaScript”.
Choose “Run snippet everywhere”.
Save and activate the snippet.

Step 4: Apply the Main Container Class

To ensure the headings are within the container that hides overflow:
1. Assign the Main Container Class:
  - Edit the section or container where the headings are placed.
  - Go to the “Advanced” tab.
  - In the “CSS Classes” field, add Main11.

Step 5: Publish and Test

Finally, save your changes and publish your page.

Save and Publish Your Page:
- Ensure all your changes are saved.
- Publish the page.
Test on Different Devices:
- Test your site on various devices (desktop, tablet, and mobile) to ensure the headings display correctly without causing horizontal scrolling.

MORE BLOGS

The Best Code Snippets For WordPress

Using WordPress plugins can enhance your website by adding new