{"id":4114,"date":"2026-10-28T04:04:03","date_gmt":"2026-10-28T04:04:03","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/scroll-text\/"},"modified":"2026-11-04T05:17:51","modified_gmt":"2026-11-04T05:17:51","password":"","slug":"scroll-text","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/scroll-text\/","title":{"rendered":"Scroll Text"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Scroll Text Block shows a line of large text that slides sideways as the page scrolls. The text repeats along the line, so the line is always full.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use it between sections as a large moving title, a list of services, or a brand statement.<\/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 Scrolling Text (Marquee on Scroll) in WordPress Gutenberg | ShapeBlock Pro\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/fgKL8IabCPc?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 Scroll Text Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add and configure the Scroll Text Block in the Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Scroll Text 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\n<li>Click the <strong>+<\/strong> button to open the block inserter.<\/li>\n\n\n\n<li>Search for <strong>Scroll Text<\/strong> under ShapeBlock.<\/li>\n\n\n\n<li>Insert the Scroll Text Block into your page.<\/li>\n\n\n\n<li>Select the block to access its settings in the right-hand sidebar.<\/li>\n\n\n\n<li>Type your text directly on the block. Scroll the editor to see the line move.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"260\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-1.webp\" alt=\"Scroll Text block in the block inserter\" class=\"wp-image-4110\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-1.webp 350w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-1-300x223.webp 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Scroll Text Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Scroll Text Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Set the HTML tag and the scroll direction and distance.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Set the text color, outlined letters, and typography.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Configure the block padding, margin, and background.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"640\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-2.webp\" alt=\"Scroll Text block selected in the editor with its settings sidebar\" class=\"wp-image-4170\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-2.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-2-600x267.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-2-300x133.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-2-1024x455.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-2-768x341.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains the <strong>Text<\/strong> and <strong>Animation<\/strong> panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Text<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML Tag:<\/strong> Choose the tag used for the line, such as a heading tag, P, or DIV.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Animation<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Direction:<\/strong> Choose whether the line <strong>Moves Left<\/strong> or <strong>Moves Right<\/strong> as the page scrolls down.<\/li>\n\n\n\n<li><strong>Distance (%):<\/strong> Set how far the line moves, as a share of the text width. A text wider than the block always moves far enough for all of it to be read.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> Each Animation setting starts on <strong>Default<\/strong>, which uses the value set for the whole site under <strong>ShapeBlock &gt; Animation<\/strong>. The current site value is shown in the control. Change a setting here to use a different value for this block only.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"725\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-3.webp\" alt=\"Scroll Text block, Settings tab in the sidebar\" class=\"wp-image-4112\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-3.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-3-116x300.webp 116w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Style tab contains the <strong>Text<\/strong> panel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Text<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Colour:<\/strong> Set the text color.<\/li>\n\n\n\n<li><strong>Outlined Letters:<\/strong> Show the letters as outlines only, with no fill.<\/li>\n\n\n\n<li><strong>Outline Colour:<\/strong> Set the color of the letter outlines. This option appears when Outlined Letters is on.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the font family, size, weight, style, text transform, line height, and letter spacing. Responsive settings are available.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"416\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-4.webp\" alt=\"Scroll Text block, Style tab in the sidebar\" class=\"wp-image-4113\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-4.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-scroll-text-4-202x300.webp 202w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Advanced tab provides additional spacing and background controls for the Scroll Text Block. These settings apply to the entire block.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> Set the inner spacing around the entire Scroll Text Block. Configure the top, right, bottom, and left values separately.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the entire Scroll Text Block. Configure the top, right, bottom, and left values separately.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Both controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Customize the background of the entire Scroll Text Block using a background color or gradient.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> The background applies to the whole block area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Live demo:<\/strong> see the Scroll Text Block in action on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/scroll-text\/\">Scroll Text demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Scroll Text Block shows a line of large text that slides sideways as the page scrolls. The text repeats along the line, so the line is always full. Use it between sections as a large moving title, a list of services, or a brand statement. How to Add a Scroll Text Block Follow these [&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-4114","docs","type-docs","status-publish","hentry","doc_category-content-block","doc_category-pro-blocks"],"year_month":"2026-11","word_count":484,"total_views":"6","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\/4114","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=4114"}],"version-history":[{"count":2,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4114\/revisions"}],"predecessor-version":[{"id":5514,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4114\/revisions\/5514"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4114"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4114"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}