Rotating and mirroring elements

If you want to rotate or mirror an element on your landing page, you can do this in two ways:

• mirror and rotate (by 90, 180, or 270 degrees) images directly in the editor;
• mirror and rotate icons & custom-rotate images by adding your own CSS code.

Set images rotation and mirroring in the editor

With this method, you can also rotate and mirror images in a pop-up editor.

1. In the editor, add an Image (1) widget and upload your image (2).

2a. By using the Upload images option, you go to image editing right away – click Edit image.

2b. If you use one of the other options, the image will be added to your gallery first. In a gallery, hover over the image and click Edit.

3. In the editing window, you can rotate (1), mirror (2), or flip (3) the image. To save the changes, click Add.

The edited image will be saved in your gallery as a copy. Now, you can use it on your page.

Custom rotating and mirroring

1. Go to the editor of your landing page.

2. Click on a chosen element and find its ID in the Other tab in a right-side toolbar. Copy the ID.

2. Go to Page Settings and click Add custom CSS.

When editing, you can go back to Page Settings by clicking on the arrow:

3. Copy the CSS code indicated below and paste it in the Main page tab. Change elementID with the copied ID number.

NOTE: To see the rotation or mirroring, publish the landing page.

Rotating elements

• The value rotate(45deg) means the element will rotate 45 degrees clockwise. If you want to change this value, enter a different degree range in brackets, e.g., rotate(90deg).
• If you would like to rotate the element counterclockwise, enter the minus symbol “-” in brackets next to the degree value, e.g., rotate(-30deg).

#elementID {
transform: rotate(45deg);
}

Mirroring elements

#elementID {
transform: scaleX(-1);
}

4. Save & close. Then publish your landing page.