Gradient Scrolling Text in Editor X | Wix Fix

Hey there, Wix enthusiasts and Editor X fanatics! It's time for another exhilarating design tutorial that showcases the beauty of scrolling gradient text. Today, we're going to dive into an Editor X technique that breathes new life into your website's text game, all inspired by 💥Apple's iPhone 14 Pro page!💥 If you're excited to learn how to create stunning scrolling gradient text for your Editor X projects, you've come to the right place.

Before we jump in, don't forget to check out livelearning.editorx.io for our amazing Monthly NoCode Design Challenges with exciting prizes, and join our thriving community of design enthusiasts, web builders, and Editor X pros. We offer top-notch mentoring to help you build your design business and further your career. Now, let's get this scrolling text party started!

Step 1: Create Your Text Shape in Adobe Illustrator

First things first, let's hop over to Adobe Illustrator to create a design that will make the scrolling gradient text animation possible in Editor X. Open up a new document set to your preferred artboard size (our example uses 1920 by 1080). Follow these simple steps:

1. Draw a large rectangle shape with the same dimensions as your artboard.

2. Center the shape on the artboard.

3. Add text to the shape using the Text tool. In this example, we'll use the phrase "Making Scrolling Gradient Text in Editor X."

4. Set your text color to white and adjust the size and placement as desired.

5. Once satisfied with the text, press Command+Shift+O (or go to Object > Expand) to convert the text into a shape.

6. Center the text shape on the artboard and adjust the positioning if needed.

7. To create spacing between each letter, grab the corners of each character and bump it up around 30 times (for both top and bottom).

!Illustrator Text Shape

Step 2: Design the Gradient Portion

Now that we have our text nicely spaced out, let's create the gradient portion of the animation. Follow these steps to design your gradient:

1. Draw a rectangle shape over your text that covers about half of the characters.

2. Set the fill of the rectangle to a linear gradient style.

3. Choose a gradient color scheme that complements your design. For our example, we'll use vibrant shades of blue and pink.

4. Modify the gradient angle and intensity to achieve the desired effect. Don't be afraid to experiment until you find a combination that suits your taste.

!Gradient Over Text

Step 3: Implement the Gradient Scrolling Text in Editor X

Once you've nailed down your gradient design in Adobe Illustrator, it's time to bring it all together in Editor X. Here's how to implement the gradient scrolling text in your Editor X project:

1. Export the individual parts of your design from Adobe Illustrator — the text shape, and the gradient rectangle.

2. Create a new section/container in your Editor X project where you want to display the scrolling gradient text.

3. Add the text shape and gradient rectangle images as separate layers within the section/container.

4. Align your images correctly so that the gradient rectangle overlays the text shape.

5. In the Properties Panel on the right side of the Editor X interface, find the Overflow setting and set it to Hidden for both the text shape layer and the gradient rectangle layer. This step will ensure that only the desired part of the gradient rectangle is visible on the text shape.

6. Add a Scroll Effect to your gradient rectangle layer. Choose the Horizontal Scroll effect and adjust the settings to control the scrolling speed and direction. For our example, we'll set the speed to -50 and the direction to left.

!Editor X Scroll Effect

And voilà! You've successfully created a mesmerizing scrolling gradient text effect in Editor X. This technique is a fantastic way to add a touch of flair to your website and capture the attention of your visitors.

!Scrolling Gradient Text Result

Don't forget to check out the Monthly NoCode Design Challenges at livelearning.editorx.io, where you can not only win amazing prizes but also be a part of a vibrant community that learns and grows together. Receive quality mentoring and the support you need to build your design business and boost your career. What are you waiting for? Level up your Editor X game today! 🚀