How can I rotate a text 90 degrees in a box on a image?

I am still quite a newbie in the visual editor, so I need some guidance on how to solve this :slight_smile:

I have a box with columns in it. The first column contains an image and on top of that is a box with a text. I would like to have this box to rotate with the text in.

I would love to create something similar to this text:

To implement a rotating text box within one of your columns in, you can use CSS for the rotation effect and ensure the proper stacking and positioning with your columns. Here’s how you can achieve this:

Step-by-Step Guide

  1. Ensure Proper Structure in
  • Make sure your column structure is set up so that the image is the background of the first column, and the text box is positioned on top of it.
  1. Add Custom CSS for Rotation:
  • Add custom CSS to enable the rotation effect.

Example Implementation

Here’s how you can do this step-by-step:

1. Structure Your Columns

In the interface, set up your columns as follows:

  • Column 1:
  • Image as the background (or an image component)
  • Text box as a separate component overlaid on the image
  • Column 2:
  • Any other content you need

2. Add Custom CSS for the Rotating Text Box

You can add custom CSS directly within’s Visual Editor or in your stylesheet if you’re managing styles externally.

Custom CSS Example :

/* Add this CSS to your global styles or within */
@keyframes rotate {
from {
transform: rotate(0deg);
to {
transform: rotate(360deg);

.rotating-box {
position: absolute; /* Ensure it overlays on the image */ top: 50%; /* Adjust as needed */ left: 50%; /* Adjust as needed */ transform: translate(-50%, -50%); /* Center the box */ animation: rotate 5s infinite linear; /* Adjust duration and easing as needed */

Example in Component:

export default function RotatingTextBox() {
return (

{/* Background Image Here */} ![Background]( {/* Rotating Text Box */}
Rotating Text


Putting It All Together in

  1. Add Custom CSS in
  • Go to the custom code section or CSS section in your project.
  • Paste the CSS snippet provided above.
  1. Configuring the Text Box in
  • Ensure the text box has a class name rotating-box. If adding via the Visual Editor, go to the element’s Styling and add a custom class.

Example How to Add Custom CSS in

  1. Navigate to your page or section: Open the page or section where you want the rotating text box.
  2. Add Custom CSS:
  • Click on the “Custom CSS” tab in the right-hand toolbar.
  • Paste the CSS code provided above.
  1. Assign the Class to Your Text Box:
  • Select the text box element.
  • In the styles or custom class section, add rotating-box as the class.

By following these steps, you’ll ensure that your text box rotates within its column, overlaying on the image as intended. This blend of custom CSS with’s powerful visual editing tools allows for dynamic and visually engaging content creation.