{"id":26308,"date":"2021-07-06T15:00:52","date_gmt":"2021-07-06T13:00:52","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=26308"},"modified":"2023-05-25T10:39:15","modified_gmt":"2023-05-25T08:39:15","slug":"how-to-create-text-marquee-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-text-marquee-in-wordpress\/","title":{"rendered":"How to Create a Text Marquee in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]The text marquee element can be a welcome addition to any web designer\u2019s 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\u2019s design.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve gathered all the best things about text marquees \u2013 the versatility, ease of use, and stylish looks \u2013 and brought it to you in a simple <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/text-marquee\/\">Text Marquee widget<\/a>. It\u2019s one of the sixty widgets that make up <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/text-marquee\/\">Qi Addons for Elementor<\/a>, the biggest free collection of custom-made widgets for Elementor.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While you\u2019re more than welcome to explore all the amazing widgets in the plugin, we\u2019ll 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And if you prefer working with the Gutenberg editor, don\u2019t worry &#8211; we got you covered. Our <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg<\/a> plugin has a <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/text-marquee\/\" target=\"_blank\" rel=\"noopener\">Text Marquee block<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text] In the article, you\u2019ll read about:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-a-text-marquee-in-wordpress\">Creating a Text Marquee with Qi Addons for Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-the-content-of-the-marquee\">Editing the Content of the Marquee<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-marquee\">Styling the Marquee<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#applying-the-final-touches\">Applying the Final Touches<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-a-text-marquee-qi-blocks\">Creating a Text Marquee with Qi Blocks for Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"creating-a-text-marquee-in-wordpress\"><\/a>Creating a Text Marquee with Qi Addons for Elementor<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1889\" height=\"793\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gif.gif\" class=\"attachment-full size-full\" alt=\"Text Marquee Gif\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Because the widget only works with <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a>, you should first make sure you install and activate this popular page builder. Our <a href=\"https:\/\/wordpress.org\/plugins\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin works equally awesome with either the free or the pro version of Elementor.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Quick note: if you prefer watching to reading, here\u2019s a video covering more or less the same points as this part of the guide.[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/Q4-2PHcCAj0\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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\u2019re editing it with Elementor, simply use the left-hand side menu to search for the Text Marquee widget. <strong>Dragging it to the first free section will get us started.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Add-Text-Marque-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Add Text Marque Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Add-Text-Marque-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Add-Text-Marque-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Add-Text-Marque-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Add-Text-Marque-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will be the field where we\u2019ll show you how we made an example like the one from the addon\u2019s page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-the-content-of-the-marquee\"><\/a>Editing the Content of the Marquee<\/h2>\n<p>[\/vc_column_text][vc_column_text]Editing the content of the marquee is fairly straightforward. The text of the marquee is made out of several sections \u2013 the items you\u2019ll 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 \u201cx\u201d next to every item. <strong>We chose to reduce the number of items to two. <\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Widget-2-Items.jpg\" class=\"attachment-full size-full\" alt=\"Text Marquee Widget 2 Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Widget-2-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Widget-2-Items-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Widget-2-Items-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Widget-2-Items-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To change the text of the item, you just need to click on it. You\u2019ll 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. <strong>We\u2019ve changed both of ours to \u201cAuto-scroll.\u201d<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Item-Text.jpg\" class=\"attachment-full size-full\" alt=\"Text Marquee Item Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Item-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Item-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Item-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Item-Text-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Now that the content of the marquee is set, we can move on to styling it.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-the-marquee\"><\/a>Styling the Marquee<\/h2>\n<p>[\/vc_column_text][vc_column_text]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\u2019s where we can choose the font, size, weight, style, as well as line height and spacing.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"670\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Item-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Text Marquee Item Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Item-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Item-Style-Tab-300x207.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Item-Style-Tab-768x531.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Item-Style-Tab-620x429.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>We\u2019ve changed several options there. We switched the font to Montserrat, changing the size of the letters to 160 pixels. We\u2019ve made the title bold by putting the weight option to 700 and transformed it to uppercase.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"534\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Text Marquee Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Typography-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Typography-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Typography-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next interesting option is the text stroke effect \u2013 <strong>we changed it to \u201cyes,\u201d making our text an outline.<\/strong> This opened additional options to change the text stroke color \u2013<strong> we changed ours to #dbdbdb<\/strong> \u2013 and the text stroke width, which we didn\u2019t change. The final option allows you to change the space between the items \u2013 <strong>we changed ours to 30<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Stroke-Effect.jpg\" class=\"attachment-full size-full\" alt=\"Text Marquee Stroke Effect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Stroke-Effect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Stroke-Effect-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Stroke-Effect-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Stroke-Effect-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"applying-the-final-touches\"><\/a>Applying the Final Touches<\/h2>\n<p>[\/vc_column_text][vc_column_text]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. <strong>We\u2019ve 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.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"507\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Elementor-Section-Full-Width.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Section Full Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Elementor-Section-Full-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Elementor-Section-Full-Width-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Elementor-Section-Full-Width-768x402.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Elementor-Section-Full-Width-620x324.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the image and the text, we\u2019ve added a two-column section, one with the section title widget and the other with the image widget. <strong>We\u2019ve then taken the whole section and in its advanced options set the top margin to -90.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1889\" height=\"811\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gif-Margin.gif\" class=\"attachment-full size-full\" alt=\"Text Marquee Gif Margin\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that, our work was done \u2013 <strong>we\u2019ve created the example we\u2019ve set out to make.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"creating-a-text-marquee-qi-blocks\"><\/a>Creating a Text Marquee with Qi Blocks for Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"393\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg.jpg\" class=\"attachment-full size-full\" alt=\"Text Marquee Gutenberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-300x122.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-768x311.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-620x251.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let\u2019s see how you can make a text marquee on your WordPress website using the Gutenberg editor and the Qi Blocks plugin. <strong>We\u2019ll use one of the designs from the block\u2019s web page to demonstrate how easy it is to add a text marquee in Gutenberg with the Text Marquee block.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We prepared a page using our <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/advanced-columns\/\" target=\"_blank\" rel=\"noopener\">Advanced Columns block<\/a> to create a background image. <strong>It was as easy as setting the block to show a single column full width and choosing a background image.<\/strong> For the image\u2019s settings, we chose <em>Center Center<\/em> as the position, <em>No-repeat<\/em> as the background repeat rule, and <em>Cover<\/em> as the size. We also added some padding on the top and the bottom.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Advanced-Columns-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Advanced Columns Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Advanced-Columns-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Advanced-Columns-Settings-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Advanced-Columns-Settings-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Advanced-Columns-Settings-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We changed the text in the existing three items and added a fourth.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"560\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-Four-Items.jpg\" class=\"attachment-full size-full\" alt=\"Text Marquee Gutenberg Four Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-Four-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-Four-Items-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-Four-Items-768x444.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-Four-Items-620x358.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The options for styling the marquee include choosing the text color and typography, enabling text stroke effects, and setting text side spacing.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We set the color to #ffffff and the font size to 120px. We also set the text spacing to 67px.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"684\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-Style.jpg\" class=\"attachment-full size-full\" alt=\"Text Marquee Gutenberg Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-Style-300x212.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-Style-768x542.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Text-Marquee-Gutenberg-Style-620x438.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s how easy it is to add a text marquee in WordPress using the Gutenberg editor and the Qi Blocks for Gutenberg plugin.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]WordPress comes with endless customization options thanks to page builders like Elementor and plugins like Qi Addons for Elementor. We\u2019ve shown you how you can create a great text marquee with a couple of clicks \u2013 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. <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-drop-caps-in-wordpress\/\">Adding drop caps in WordPress<\/a> 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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-highlight-text-in-wordpress\/\">adding a highlight effect<\/a>, a modern and engaging solution for creating dynamic textual posts.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to add a text marquee to your WordPress website? With Elementor and our Qi Addons for Elementor plugin, you&#8217;ll have your marquee up in a jiffy!<\/p>\n","protected":false},"author":9295,"featured_media":26557,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,114,4,13],"class_list":["post-26308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-qi-addons-for-elementor","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=26308"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26308\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/26557"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=26308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=26308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=26308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}