{"id":4129,"date":"2026-10-28T04:04:17","date_gmt":"2026-10-28T04:04:17","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/horizontal-scroll\/"},"modified":"2026-11-04T05:18:00","modified_gmt":"2026-11-04T05:18:00","password":"","slug":"horizontal-scroll","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/horizontal-scroll\/","title":{"rendered":"Horizontal Scroll"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Horizontal Scroll Block shows a row of items that moves sideways as the page scrolls down, and back on the way up. Each block you put in the row is one item: an image, a group, a card, or any other block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On tablets and phones, visitors swipe the row instead. Use it for portfolios, project galleries, timelines, and product lines.<\/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 Create a Horizontal Scroll Section in WordPress Gutenberg | ShapeBlock Pro\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JYwojLk5Wkg?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 Horizontal Scroll Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add and configure the Horizontal Scroll Block in the Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Horizontal Scroll 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>Horizontal Scroll<\/strong> under ShapeBlock.<\/li>\n\n\n\n<li>Insert the Horizontal Scroll 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>Add images or other blocks inside the row. Each block is one item.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"267\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-1.webp\" alt=\"Horizontal Scroll block in the block inserter\" class=\"wp-image-4125\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-1.webp 350w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-1-300x229.webp 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Horizontal Scroll Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Horizontal Scroll 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 how items line up, the image shape, and the scroll length.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Set the item width, the space between items, and the space at the ends.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Configure the block padding, margin, and background.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In the editor, the row moves while the block is not selected. Click <strong>Preview Scroll<\/strong> in the block toolbar to run it while the block is selected, and <strong>Stop Preview<\/strong> to stop it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"861\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-2.webp\" alt=\"Horizontal Scroll block selected in the editor with its settings sidebar\" class=\"wp-image-4177\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-2.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-2-600x359.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-2-300x179.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-2-1024x612.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-2-768x459.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>Row<\/strong> and <strong>Animation<\/strong> panels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Row<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Line Up Items:<\/strong> Choose how items of different heights line up: <strong>Middle<\/strong>, <strong>Top<\/strong>, <strong>Bottom<\/strong>, or <strong>Same Height<\/strong>.<\/li>\n\n\n\n<li><strong>Image Shape:<\/strong> Cut all images in the row to one shape so they line up: Each Its Own, Square (1:1), 4:3, 3:2, Wide (16:9), or Tall (3:4).<\/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>Scroll Length (%):<\/strong> Set how far the page scrolls while the row moves, compared with how far the row moves. A higher number makes the row move more slowly.<\/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=\"885\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-3.webp\" alt=\"Horizontal Scroll block, Settings tab in the sidebar\" class=\"wp-image-4127\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-3.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-3-95x300.webp 95w\" 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>Items<\/strong> panel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Items<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Item Width:<\/strong> Set the width of each item. When empty, an item is 40% of the screen (at most 560px), and 80% on tablets and phones.<\/li>\n\n\n\n<li><strong>Space Between:<\/strong> Set the space between items. When empty, the space is 24px.<\/li>\n\n\n\n<li><strong>Space at the Ends:<\/strong> Set the space before the first item and after the last one. When empty, it is 4% of the screen.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">All three controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"654\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-4.webp\" alt=\"Horizontal Scroll block, Style tab in the sidebar\" class=\"wp-image-4128\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-4.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-horizontal-scroll-4-128x300.webp 128w\" 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 Horizontal Scroll 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 Horizontal Scroll 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 Horizontal Scroll 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 Horizontal Scroll 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 Horizontal Scroll Block in action on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/horizontal-scroll\/\">Horizontal Scroll demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Horizontal Scroll Block shows a row of items that moves sideways as the page scrolls down, and back on the way up. Each block you put in the row is one item: an image, a group, a card, or any other block. On tablets and phones, visitors swipe the row instead. Use it for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[30,19],"doc_tag":[],"class_list":["post-4129","docs","type-docs","status-publish","hentry","doc_category-pro-blocks","doc_category-showcase-block"],"year_month":"2026-11","word_count":563,"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":"Pro Blocks","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/pro-blocks\/"},{"term_name":"Showcase Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/showcase-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4129","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=4129"}],"version-history":[{"count":2,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4129\/revisions"}],"predecessor-version":[{"id":5520,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4129\/revisions\/5520"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4129"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4129"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}