How to Create a Text Marquee in WordPress
The text marquee element can be a welcome addition to any web designer’s bag of tricks. It adds some movement to a page, keeping it from being completely still. It works well with other elements including images, static text, and buttons. Finally, with the right plugin, it can be incredibly easy to add and stylize to match the website’s design.
We’ve gathered all the best things about text marquees – the versatility, ease of use, and stylish looks – and brought it to you in a simple Text Marquee widget. It’s one of the sixty widgets that make up Qi Addons for Elementor, the biggest free collection of custom-made widgets for Elementor.
While you’re more than welcome to explore all the amazing widgets in the plugin, we’ll use this opportunity to demonstrate some of the things the Text Marquee widget could be used for. Hopefully, it should prompt you to create awesome marquees of your own.
And if you prefer working with the Gutenberg editor, don’t worry – we got you covered. Our Qi Blocks for Gutenberg plugin has a Text Marquee block.
In the article, you’ll read about:
Because the widget only works with Elementor, you should first make sure you install and activate this popular page builder. Our Qi Addons for Elementor plugin works equally awesome with either the free or the pro version of Elementor.
Quick note: if you prefer watching to reading, here’s a video covering more or less the same points as this part of the guide.
After installing and activating Elementor and Qi Addons, navigate to a post or a page. It can be an existing post or page, or you can create a new one to play around in. Once the page or post is open and you’re editing it with Elementor, simply use the left-hand side menu to search for the Text Marquee widget. Dragging it to the first free section will get us started.
This will be the field where we’ll show you how we made an example like the one from the addon’s page.
Editing the content of the marquee is fairly straightforward. The text of the marquee is made out of several sections – the items you’ll be able to see in the left-hand side menu. If you want to add more text sections, press the Add Item button. Removing an item is as simple as pressing the button marked with “x” next to every item. We chose to reduce the number of items to two.
To change the text of the item, you just need to click on it. You’ll have plenty of options for styling the text in the Style menu, but for now, all you can do here is change what the items say. We’ve changed both of ours to “Auto-scroll.”
Now that the content of the marquee is set, we can move on to styling it.
The styling options open with a color picker, a place where you can choose or enter a hex code for the color you want. We are much more interested in the Typography options, however, as that’s where we can choose the font, size, weight, style, as well as line height and spacing.
We’ve changed several options there. We switched the font to Montserrat, changing the size of the letters to 160 pixels. We’ve made the title bold by putting the weight option to 700 and transformed it to uppercase.
The next interesting option is the text stroke effect – we changed it to “yes,” making our text an outline. This opened additional options to change the text stroke color – we changed ours to #dbdbdb – and the text stroke width, which we didn’t change. The final option allows you to change the space between the items – we changed ours to 30.
The sample we created includes an overlap where our marquee text passes under an image and over some text. The marquee itself is full-width, not boxed. We’ve changed that by pressing the Edit Section button for the section containing the marquee and then setting the content width to full width in the Layout options.
As for the image and the text, we’ve added a two-column section, one with the section title widget and the other with the image widget. We’ve then taken the whole section and in its advanced options set the top margin to -90.
With that, our work was done – we’ve created the example we’ve set out to make.
Let’s see how you can make a text marquee on your WordPress website using the Gutenberg editor and the Qi Blocks plugin. We’ll use one of the designs from the block’s web page to demonstrate how easy it is to add a text marquee in Gutenberg with the Text Marquee block.
We prepared a page using our Advanced Columns block to create a background image. It was as easy as setting the block to show a single column full width and choosing a background image. For the image’s settings, we chose Center Center as the position, No-repeat as the background repeat rule, and Cover as the size. We also added some padding on the top and the bottom.
With that, we were ready to add the Text Marquee block. In the right-hand side options panel, the content options come up first. They include several items used to add the text for the marquee, set a separator icon, select the duration of the animation, and reverse the direction of the text.
We changed the text in the existing three items and added a fourth.
The options for styling the marquee include choosing the text color and typography, enabling text stroke effects, and setting text side spacing.
We set the color to #ffffff and the font size to 120px. We also set the text spacing to 67px.
And that’s how easy it is to add a text marquee in WordPress using the Gutenberg editor and the Qi Blocks for Gutenberg plugin.
Let’s Wrap It Up!
WordPress comes with endless customization options thanks to page builders like Elementor and plugins like Qi Addons for Elementor. We’ve shown you how you can create a great text marquee with a couple of clicks – and even have it overall with an image. But you will, undoubtedly, find a different way to use this widget and make it truly your own. Text marquee can be combined with other exciting textual effects to truly make your content stand out. Adding drop caps in WordPress is really as simple as it can be, and it helps create a beautiful, elegant look. If you have bits of text or information that you want to make stand out from the rest, consider adding a highlight effect, a modern and engaging solution for creating dynamic textual posts.
