---
title: Horizontal Scroll
description: "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…"
url: "https://shapekode.com/product/shapeblock/docs/horizontal-scroll/"
updated: "2026-11-04"
category: Pro Blocks
---

# Horizontal Scroll

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 portfolios, project galleries, timelines, and product lines.

[How to Create a Horizontal Scroll Section in WordPress Gutenberg | ShapeBlock Pro](https://www.youtube.com/embed/JYwojLk5Wkg?feature=oembed)

## How to Add a Horizontal Scroll Block

Follow these steps to add and configure the Horizontal Scroll Block in the Gutenberg editor.

### Step 1: Add the Horizontal Scroll Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Click the **+** button to open the block inserter.
3. Search for **Horizontal Scroll** under ShapeBlock.
4. Insert the Horizontal Scroll Block into your page.
5. Select the block to access its settings in the right-hand sidebar.
6. Add images or other blocks inside the row. Each block is one item.

![Horizontal Scroll block in the block inserter](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-horizontal-scroll-1.webp)

### Step 2: Configure the Horizontal Scroll Block

Select the Horizontal Scroll Block and open its settings in the right-hand sidebar. The available tabs are:

- **Settings:** Set how items line up, the image shape, and the scroll length.
- **Style:** Set the item width, the space between items, and the space at the ends.
- **Advanced:** Configure the block padding, margin, and background.

In the editor, the row moves while the block is not selected. Click **Preview Scroll** in the block toolbar to run it while the block is selected, and **Stop Preview** to stop it.

![Horizontal Scroll block selected in the editor with its settings sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-horizontal-scroll-2.webp)

## Settings Tab

The Settings tab contains the **Row** and **Animation** panels.

### 1. Row

- **Line Up Items:** Choose how items of different heights line up: **Middle**, **Top**, **Bottom**, or **Same Height**.
- **Image Shape:** 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).

### 2. Animation

- **Scroll Length (%):** 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.

**Note:** Each Animation setting starts on **Default**, which uses the value set for the whole site under **ShapeBlock > Animation**. The current site value is shown in the control. Change a setting here to use a different value for this block only.

![Horizontal Scroll block, Settings tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-horizontal-scroll-3.webp)

## Style Tab

The Style tab contains the **Items** panel.

### 1. Items

- **Item Width:** Set the width of each item. When empty, an item is 40% of the screen (at most 560px), and 80% on tablets and phones.
- **Space Between:** Set the space between items. When empty, the space is 24px.
- **Space at the Ends:** Set the space before the first item and after the last one. When empty, it is 4% of the screen.

All three controls support responsive settings for desktop, tablet, and mobile devices.

![Horizontal Scroll block, Style tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-horizontal-scroll-4.webp)

## Advanced Tab

The Advanced tab provides additional spacing and background controls for the Horizontal Scroll Block. These settings apply to the entire block.

### 1. Spacing

- **Padding:** Set the inner spacing around the entire Horizontal Scroll Block. Configure the top, right, bottom, and left values separately.
- **Margin:** Set the outer spacing around the entire Horizontal Scroll Block. Configure the top, right, bottom, and left values separately.

Both controls support responsive settings for desktop, tablet, and mobile devices.

### 2. Background

- **Background:** Customize the background of the entire Horizontal Scroll Block using a background color or gradient.

**Note:** The background applies to the whole block area.

**Live demo:** see the Horizontal Scroll Block in action on the [Horizontal Scroll demo page](https://shapekode.com/product/shapeblock/horizontal-scroll/).