Create a Scrolling Text Box in Elementor WordPress

Creating a scrolling text box in Elementor is an excellent way to present information dynamically and save space on your WordPress site. Whether you want to display client testimonials, announcements, or lengthy content, a scrollable text box is a practical solution. Here’s a step-by-step guide on how to set one up in Elementor.

Step 1: Open the Page in Elementor Editor

1. Log in to your WordPress dashboard.
2. Go to Pages > All Pages and choose the page where you want to add the scrolling text box.
3. Click Edit with Elementor to open the page in the Elementor editor.

Step 2: Add a New Section and Text Widget

1. In the Elementor editor, click on the + icon to add a new section.
2. Select a one-column layout or your preferred structure.
3. From the Elementor widget panel, drag and drop a Text Editor widget into the section.

Step 3: Customize the Text Content

1. Enter the content you want to display inside the text box.
2. Format the text as desired, including font style, color, and alignment using the Text Editor toolbar.

Step 4: Add Custom CSS for Scrolling

To make the text box scrollable, you’ll need to add a small CSS code snippet. Follow these steps:

1. Click on the Advanced tab of the Text Editor widget.
2. Under Custom CSS (Note: this option is available in Elementor Pro), add the following CSS code:

selector {
    max-height: 200px; /* Set the maximum height */
    overflow-y: scroll; /* Enable vertical scrolling */
}

Extra CSS Code: If you need then you can use

selector{
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

selector::-webkit-scrollbar{
width: 14px;
}

selector::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0.1);
}

selector::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
}

Feel free to adjust the max-height value to control the size of the text box.

Step 5: Save and Preview the Page

1. Once you’ve added the CSS, click on Update to save the changes.
2. Preview the page to make sure your text box scrolls as expected.

Additional Tips for Scrolling Text Boxes:

• Responsive Design: Make sure to check how the scrolling text box looks on mobile and tablet views.
• Scrollbar Style: If you want to customize the scrollbar’s appearance, you can use more advanced CSS.
• Background Color: Consider setting a background color for your text box for better visibility.

Conclusion

Adding a scrolling text box in Elementor is a great way to present long content sections without overwhelming your page layout. By following these steps, you’ll be able to enhance user experience on your WordPress site with scrollable text areas.