The text marquee element can be a nice addition to any web designer’s bag of tricks. It adds some movement to a page, preventing 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 fit the design of the website.
We’ve gathered the best things about text frames like versatility, ease of use and stylish looks and brought them to you in a simple Text Frame widget. It is one of the sixty widgets that make up Qi Addons for Elementor, the largest free collection of custom-made widgets for Elementor.
You are welcome to explore all the great widgets in the plugin, but we will take this opportunity to show you some of the things the Text Frame widget can be used for. Hopefully, it prompts you to create your own awesome frames. In the article you will read:
If you’d rather watch than read, here’s a video that covers more or less the same points. So choose your environment and let’s go!
Because the widget only works Workman, you must first make sure that you have installed and activated this popular page builder. Ours Qi Plugins for Elementor The plugin works equally great with the free or professional version of Elementor.
After installing and activating Elementor and Qi Plugins, go to a post or page. It can be an existing post or page, or you can create a new one to play with. When the page or post is opened and you are editing it with Elementor, use the left side menu to search for the Text. Frame widget. Dragging it to the first empty partition will launch us.
This will be the area on the plugin page where we will show you how we made an example.
Editing the content of the marquee is pretty simple. The text of the marquee consists of several parts – items that you can see in the left-hand 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 an “x” next to each item. We chose to reduce the number of products to two.
To change the text of the item, simply click on it. In the Style menu you will have many options for styling the text, but for now all you can do here is change what the elements say. We changed both to “Auto scroll”.
Now that the content of the frame is set, we can move on to styling it.
Style options open with a color picker where you can select or enter a hexadecimal code for the color you want. We are much more concerned with typography options, but this is where we can choose the font, size, weight, style, as well as line height and spacing.
We changed a few options there. We changed the font to Montserrat, changed the size of the letters to 160px. We made the title bold and capitalized by setting the Weight option to 700.
The next interesting option is the text stroke effect – We changed our text to “yes” by making it a draft. This opened up additional options to change the text stroke color – we changed ours to #dbdbdb – and the text stroke width that we did not change. The last option allows you to change the spacing between items – we changed ours to 30.
The example we created includes an overlap where our marquee text goes under an image and over some text. The marquee itself is full width, not boxed. We changed this 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 image and text, we have added a section with two columns, one with the section title widget and the other with the image widget. We then took the whole section and set the top margin to -90 in the advanced options.
With that, our job is done – We created the example that we set out to do.
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 showed you how you can create a great text frame in a few clicks and even create it with a picture in general. However, you will undoubtedly find a different way to use this widget and make it truly your own.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
