Text marquees turn static content into captivating visuals.
Follow along to create a bold section with this fun element!
Let's kick things off by setting the section to Fit to screen. This way, the section will perfectly match the height of any screen, making sure your design looks great on any device!
Now let’s apply a rows layout— I chose to split the section into five rows to neatly organize all the elements.
Make sure the rows are equal in height to keep a consistent look. Nice.
Now it’s time to add our first text marquee element to the top row, and align it to the center
Let’s switch the color to blue so that it complements the frame. I’ll also add my own text.
To get a more polished look, I'll pick a different font, adjust the size, and slightly reduce the character spacing.
Text marquees are a chance to add some playfulness to a site—let's do just that by adding a smiley icon as a separator.
I’ll bump up the icon's size to 88% so that it’s more visible, and set the text movement to flow from right to left.
Finally, set the width to 100 viewport width to make the text cover the entire section. You can also just click on Stretch for the same effect. Looks good!
To create the text in the row below, I’ll duplicate this element and drag it down.
Align the element to center just like we did before.
Now we can customize its content. Adjust the text and the separator to create a unique look and feel, different from the one above.
Let’s make it interesting and set the text movement to the opposite direction—moving from left to right this time.
To finish off the design, I'll repeat the process for the remaining rows—duplicate the text marquee...customize the text... adjust the design... and switch up the movement directions for an immersive experience.
And there you have it—our text marquee section in action.
For more tips and tutorials, check out the Wix Studio Academy.
