{"id":5650,"date":"2026-11-05T10:05:13","date_gmt":"2026-11-05T10:05:13","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/marquee\/"},"modified":"2026-11-08T03:41:02","modified_gmt":"2026-11-08T03:41:02","password":"","slug":"marquee","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/marquee\/","title":{"rendered":"Marquee"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Marquee Block moves text, logos, icons or any other blocks in an endless line. It runs left, right, up or down, without a gap and without a jump where the line starts again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use it for a client logo strip, a big moving headline, an announcement bar, a row of customer cards or a photo strip. See it working on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/marquee\/\">Marquee demo page<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Add a Marquee in WordPress Gutenberg: Text and Logos | ShapeBlock Pro Marquee\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ag0c_jlVdjk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add a Marquee Block<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Marquee Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n<li>Click the <strong>+<\/strong> button to open the block inserter.<\/li>\n\n\n<li>Search for <strong>Marquee<\/strong> under ShapeBlock Pro.<\/li>\n\n\n<li>Insert the block. It starts with five words and moves at once, in the editor as on the site.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"620\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-1.webp\" alt=\"Marquee block in the block inserter\" class=\"wp-image-5646\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-1.webp 350w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-1-169x300.webp 169w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Change the Items<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Select the block, then click an item in the block. Its settings open right there and the line stands still while you edit.<\/li>\n\n\n<li>Change the text, pick a logo or an icon, and press <strong>Done<\/strong>.<\/li>\n\n\n<li>Use <strong>Add Text<\/strong>, <strong>Add Logos<\/strong> and <strong>Add Icon<\/strong> in the block toolbar for more. Add Logos picks several from the Media Library at once.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Configure the Marquee Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open the settings in the right-hand sidebar. The tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> What moves, the items, the motion and the mark between items.<\/li>\n\n\n<li><strong>Layout:<\/strong> Spacing, sizes, alignment and faded edges.<\/li>\n\n\n<li><strong>Style:<\/strong> Colors, borders and typography for the strip, text, logos, icons and item boxes.<\/li>\n\n\n<li><strong>Advanced:<\/strong> Spacing, background and position of the whole block, plus the shared ShapeBlock Pro options.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"1370\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-2.webp\" alt=\"Marquee Settings tab\" class=\"wp-image-5647\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-2.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-2-209x1024.webp 209w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">1. Content<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What Moves:<\/strong> Text, Logos and Icons, or Any Blocks.<\/li>\n\n\n<li><strong>Items:<\/strong> Click an item in the list to open it. Each has a Type (Text, Logo or Image, Icon), its text, logo or icon, an icon before the text, its own color and a link. The arrows move it, and you can duplicate or remove it.<\/li>\n\n\n<li><strong>Link:<\/strong> Any item can link somewhere, with Open in New Tab and Add nofollow.<\/li>\n\n\n<li><strong>Any Blocks:<\/strong> Each block inside is one item: a heading, an image, a card, anything. While the block is selected they stand in a row to edit. Click outside it, or use Preview in the toolbar, to see them move.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Motion<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Direction:<\/strong> Right to Left, Left to Right, Bottom to Top or Top to Bottom.<\/li>\n\n\n<li><strong>Speed:<\/strong> In pixels per second, per device. A long line and a short line move at the same pace.<\/li>\n\n\n<li><strong>On Hover:<\/strong> Pause, Slow Down or Keep Moving. On touch screens a tap never stops the line.<\/li>\n\n\n<li><strong>Rows:<\/strong> One to four lines of the same items. With up and down they are columns.<\/li>\n\n\n<li><strong>Opposite Directions:<\/strong> Every second line moves the other way.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Separator<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Between Items:<\/strong> None, Text or Symbol (such as \u2726 or \/), or Icon.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"1370\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-3.webp\" alt=\"Marquee Layout tab\" class=\"wp-image-5648\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-3.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-3-209x1024.webp 209w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Space Between Items:<\/strong> Per device.<\/li>\n\n\n<li><strong>Space Between Rows:<\/strong> With more than one line.<\/li>\n\n\n<li><strong>Height:<\/strong> With up and down: how tall the strip is, per device.<\/li>\n\n\n<li><strong>Item Width:<\/strong> Per device. Empty, each item is as wide as its content. Set it for cards.<\/li>\n\n\n<li><strong>Content Alignment:<\/strong> Left, Center or Right inside an item wider than its content. Per device, centered by default.<\/li>\n\n\n<li><strong>Line Up Items:<\/strong> Middle, Top, Bottom or Stretch. Stretch makes cards one height.<\/li>\n\n\n<li><strong>Logo Height, Image Size and Icon Size:<\/strong> How big logos and icons appear, and which image file is loaded.<\/li>\n\n\n<li><strong>Fade Edges and Fade Width:<\/strong> Items fade out at both ends.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"1370\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-4.webp\" alt=\"Marquee Style tab\" class=\"wp-image-5649\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-4.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/11\/doc-marquee-4-209x1024.webp 209w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Strip:<\/strong> Background (color or gradient), border, border radius and box shadow.<\/li>\n\n\n<li><strong>Text:<\/strong> Color, hover color and typography per device. Outline Text draws only the edge of the letters, with its own color and width, and the hover color fills them.<\/li>\n\n\n<li><strong>Logos:<\/strong> Opacity, opacity on hover, and Grayscale, which shows their colors on hover.<\/li>\n\n\n<li><strong>Icons:<\/strong> Color and hover color.<\/li>\n\n\n<li><strong>Item Box:<\/strong> Hover effect (Zoom or Lift), background, border, shadow and hover states, padding and border radius.<\/li>\n\n\n<li><strong>Separator:<\/strong> Color and size.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Tips<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For a line that runs edge to edge, set the Row around it to Full Width content and the block to Full Width.<\/li>\n\n\n<li>For outline text pick a plain font such as Arial. Variable fonts can show lines inside the letters.<\/li>\n\n\n<li>Visitors who turn off animations on their device see the items standing still, and can scroll them by hand.<\/li>\n\n\n<li>Screen readers read the items once, and the keyboard stops at each link once.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Marquee Block moves text, logos, icons or any other blocks in an endless line. It runs left, right, up or down, without a gap and without a jump where the line starts again. Use it for a client logo strip, a big moving headline, an announcement bar, a row of customer cards or a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16,30],"doc_tag":[],"class_list":["post-5650","docs","type-docs","status-publish","hentry","doc_category-content-block","doc_category-pro-blocks"],"year_month":"2026-11","word_count":712,"total_views":"7","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"},{"term_name":"Pro Blocks","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/pro-blocks\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/5650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=5650"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/5650\/revisions"}],"predecessor-version":[{"id":5711,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/5650\/revisions\/5711"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=5650"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=5650"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=5650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}