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

Visual Editor Help
1

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.

image
image977Ă—625 74.7 KB

I would love to create something similar to this text:
image

2

To implement a rotating text box within one of your columns in Builder.io, 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 Builder.io:
  • 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 Builder.io 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 Builder.io’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 Builder.io */
@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:


javascript
export default function RotatingTextBox() {
return (

{/* Background Image Here */} ![Background](https://builderio.zendesk.com/agent/path-to-your-image.jpg) {/* Rotating Text Box */}
Rotating Text

);
}

Putting It All Together in Builder.io

  1. Add Custom CSS in Builder.io:
  • Go to the custom code section or CSS section in your Builder.io project.
  • Paste the CSS snippet provided above.
  1. Configuring the Text Box in Builder.io:
  • 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 Builder.io

  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 Builder.io’s powerful visual editing tools allows for dynamic and visually engaging content creation.