Create Rotated Text using Elementor

Word Count: 190

Introduction

Create an Inner Section to contain 2 columns and added with a Heading element at each column for the corresponding left and right sided rotated vertical text.

Left Vertical Text

Select the Heading element, then goto Advanced > Positioning to set these options:

  • Width = Custom,
  • Custom Width (px) = adjust accordingly,
  • Position = Absolute,
  • Horizontal Orientation = Left,
  • Horizontal Offset = 0 (to be adjusted by CSS),
  • Vertical Orientation = Top,
  • Vertical Offset = adjust accordingly

Apply the following CSS

selector {
     transform: rotate(-90deg);
     left: -407px !important;  /* fixed at this value for width >= 1920px */
 }

 @media (min-width: 1400px) and (max-width: 1920px) {
     selector {
       left: calc(-0.3846*100vw + 331.46px) !important;
     }
 }  /* @1400-1920 */

 @media (max-width: 1399px) {
     selector {
      display: none;
     }
 }  /* @1399 */

Right Vertical Text

Select the Heading element, then goto Advanced > Positioning to set these options:

  • Width = Custom,
  • Custom Width (px) = adjust accordingly,
  • Position = Absolute,
  • Horizontal Orientation = Right,
  • Horizontal Offset = 0 (to be adjusted by CSS),
  • Vertical Orientation = Top,
  • Vertical Offset = adjust accordingly

Apply the following CSS

selector {
     transform: rotate(-90deg);
     left: -407px !important;  /* fixed at this value for width >= 1920px */
 }

 @media (min-width: 1400px) and (max-width: 1920px) {
     selector {
       right: calc(-0.3846*100vw + 253.46px) !important;
     }
 }  /* @1400-1920 */

 @media (max-width: 1399px) {
     selector {
      display: none;
     }
 }  /* @1399 */

Tags: , ,