top of page

Wix Fix

CREATED BY

10:24

Scrolling Text in Editor X | Wix Fix

Scrolling Text in Editor X | Wix Fix


Hey there, and welcome back to our blog! This month, we're taking on a cool design challenge – creating a scrolling text effect in Editor X. So, let's dive right in.


We stumbled upon this fantastic video tutorial by Extreme (an Editor X employee) on how to create a scrolling text effect in Editor X. The tutorial requires a bit of code and you can watch the complete video here for a step-by-step guide. Also, make sure to check out Extreme's YouTube channel for more cool tricks and Editor X genius.


So, why is a scrolling text effect important? Scrolling text can be an eye-catching element for your website, keeping your visitors engaged with your content. Whether you want to showcase your services or share your success stories, indulge your readers with this interactive and cool scrolling text effect. But, before we create this effect, don't forget to join our community at Live Learning Editor X for monthly NoCode Design Challenges with Prizes, mentoring on building design businesses, and furthering your career.


Creating a Scrolling Text Effect in Editor X


Alright, let's say you have a website or a section where you want to include a scrolling text effect. To achieve this, follow these steps:


Step 1: Add a container


Go to the section where you want the scrolling text effect and add a container.


Step 2: Adjust container settings


Make your container take up the full width of the section by setting it to 100% width. Also, set the container's alignment to the left and middle. Set the height to 100 pixels and remove the container's background color. Keep the magic happening by removing the section's height.


Step 3: Add your desired text


With your container ready, add the text that you want to scroll. Line up the text to the left and middle of the container. You can play around with the text settings, but for this example, we'll use the Barlow Medium font at 21 pixels. Ensure the text takes up the entire width of the screen.


Step 4: Add the code


As we mentioned earlier, this scrolling text effect requires a bit of code. Don't worry, though – we got you covered! Simply follow the video tutorial by Extreme and copy the code he provides.


With this code, your text will now scroll smoothly in your container, providing an eye-catching interactive element for your website's visitors.


And there you have it! With a bit of coding magic and some Editor X know-how, you've now created a scrolling text effect for your website. So, go ahead, give yourself a pat on the back – you deserve it!


Wrap Up


We hope this tutorial on creating a scrolling text effect in Editor X has been helpful. Don't forget to check out Extreme's YouTube channel for more Editor X tips and tricks. And remember, the only way to get better at anything is by practicing and taking up challenges. Join our community over at Live Learning Editor X for monthly NoCode Design Challenges with Prizes, mentoring on building design businesses, and furthering your career.


If you're looking for more inspiration on creating interactive designs, make sure to follow our blog for an informal yet conversational writing style that provides value to the reader. Stay tuned for more content. Cheers!

Join over 5,000+ people learning, helping each other to scale their freelance/design business, taking no-code challenges, collaborating, talking about their projects, and more!

Join Designers & Creatives From All Over The World!

Supported by our partners and affiliates

More Like This #Tag

Brad Hussey | Freelancing As A Web Designer & Creating Online Courses That Sell (Passive Income)

Editor X TV | With Brandon Groce

1:12:35

Design a Landing Page Fast with Editor X

Creative X

22:22

Top 5 Editor X Site of 2021 | Wix Fix

Wix Fix

9:42

Docking your Elements in Editor X

Codex Community

0:39

Breakpoints in Editor X

Codex Community

0:39

Overflowing content in Editor X

Codex Community

0:40

Editor X by Wix Review | FIRST REACTIONS | Responsive Wix Editor

Wix Training Academy

13:47

Introducing Editor X | Editor X

Editor X

2:52

Why leading designers are creating on Editor X

Editor X

0:58

Anchors in Editor X | Wix Fix

Wix Fix

1:54

Glassmorphism Web Design Trend inside Editor X

Codex Community

8:38

Recreating Radial in Editor X | Wix Fix

Wix Fix

19:29

bottom of page