---
title: Rotating Text
description: "The Rotating Text Block shows text that turns around in a circle, with an icon in the middle. The circle can also link to another page. It works well as a badge next to a heading or a \"scroll down\"…"
url: "https://shapekode.com/product/shapeblock/docs/rotating-text/"
updated: "2026-11-04"
category: Content Block
---

# Rotating Text

The Rotating Text Block shows text that turns around in a circle, with an icon in the middle. The circle can also link to another page.

It works well as a badge next to a heading or a "scroll down" or "contact us" button in a hero section.

[How to Create Rotating Circular Text in WordPress Gutenberg | ShapeBlock Pro Rotating Text](https://www.youtube.com/embed/LVAm3m_Ephc?feature=oembed)

## How to Add a Rotating Text Block

Follow these steps to add and configure the Rotating Text Block in the Gutenberg editor.

### Step 1: Add the Rotating Text Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Click the **+** button to open the block inserter.
3. Search for **Rotating Text** under ShapeBlock.
4. Insert the Rotating Text Block into your page.
5. Select the block to access its settings in the right-hand sidebar.

![Rotating Text block in the block inserter](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-rotating-text-1.webp)

### Step 2: Configure the Rotating Text Block

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

- **Settings:** Enter the circle text, choose the middle icon, add a link, and set the rotation.
- **Style:** Customize the circle, text, and icon.
- **Advanced:** Configure the block padding, margin, and background.

![Rotating Text block selected in the editor with its settings sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-rotating-text-2.webp)

## Settings Tab

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

### 1. Content

- **Text:** Enter the text that goes around the circle. It is spread evenly around the whole circle: a short text is repeated, and a long text is made smaller. A separator such as • between words looks good.
- **Icon in the Middle:** Choose the icon shown in the center of the circle.
- **Link:** Enter a URL to make the circle clickable.
- **Open in a New Tab:** Open the link in a new browser tab. This option appears when a link is entered.
- **Position:** Place the circle on the **Left**, **Center**, or **Right**.

### 2. Animation

- **Time for One Turn (s):** Set how many seconds the text takes to go around once. A higher number turns more slowly.
- **Direction:** Choose **Clockwise** or **Anticlockwise**.
- **Stop While the Mouse Is Over It:** Choose **Yes** to pause the rotation while a visitor points at the circle.

**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.

![Rotating Text block, Settings tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-rotating-text-3.webp)

## Style Tab

The Style tab contains the **Circle**, **Text**, and **Icon** panels.

### 1. Circle

- **Size:** Set the width of the circle. When empty, the circle is 160px. Responsive settings are available.
- **Background:** Set a background color or gradient for the circle.

### 2. Text

- **Colour:** Set the color of the rotating text.
- **Typography:** Customize the font family, size, weight, style, text transform, line height, and letter spacing. Responsive settings are available.

### 3. Icon

- **Middle Background:** Set a background color or gradient for the center area behind the icon.
- **Colour:** Set the icon color.
- **Size:** Set the icon size. Responsive settings are available.

![Rotating Text block, Style tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-rotating-text-4.webp)

## Advanced Tab

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

### 1. Spacing

- **Padding:** Set the inner spacing around the entire Rotating Text Block. Configure the top, right, bottom, and left values separately.
- **Margin:** Set the outer spacing around the entire Rotating Text 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 Rotating Text Block using a background color or gradient.

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

**Live demo:** see the Rotating Text Block in action on the [Rotating Text demo page](https://shapekode.com/product/shapeblock/rotating-text/).