Divi header news scrolling

You're looking to create a scrolling news header using Divi!

Here's a step-by-step guide to help you achieve this:

Step 1: Create a new section

• Go to the Divi Builder and create a new section.
• Name it something like "News Header".

Step 2: Add a row

• Inside the section, add a new row.
• Set the row's layout to "Full Width" and the row's height to "Auto".

Step 3: Add a column

• Inside the row, add a new column.
• Set the column's width to "1/1" (full width) and the column's padding to "0".

Step 4: Add a text module

• Inside the column, add a new text module.
• Set the text module's content to the news headlines you want to display.
• Use the "Advanced" tab to set the text module's font size, color, and other styling options.

Step 5: Add a scrolling effect

• To create the scrolling effect, you'll need to add a CSS animation to the text module.
• In the Divi Builder, click on the three dots next to the text module and select "Advanced" > "Custom CSS".
• Add the following CSS code:

  
  .text-module {
  animation: scroll 10s linear infinite;
  }

@keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }

This code will create a scrolling effect that moves the text module up and down.

**Step 6: Add a loop**

* To make the scrolling effect loop continuously, you'll need to add a JavaScript loop to the text module.
* In the Divi Builder, click on the three dots next to the text module and select "Advanced" > "Custom JavaScript".
* Add the following JavaScript code:
```javascript
$(document).ready(function() {
  var textModule = $('.text-module');
  var textContent = textModule.html();
  var textArray = textContent.split('\n');
  var textIndex = 0;

  function scrollText() {
    textModule.html(textArray[textIndex]);
    textIndex = (textIndex + 1) % textArray.length;
  }

  setInterval(scrollText, 10000); // update every 10 seconds
});

This code will loop through the text array and update the text module every 10 seconds.

Step 7: Style the scrolling effect

• To style the scrolling effect, you can add additional CSS code to the text module.
• For example, you can add a background color or image to the text module, or adjust the font size and color.

That's it! With these steps, you should now have a scrolling news header using Divi.

Remember to customize the code to fit your specific needs and design requirements. Happy building!