Rotated Side Text

I’m not sure when I’ll get tired of this, but rotated side text is my favorite way to add some pizazz to a website.

---

Code for 7.1 & 7.0:

1. Add HTML into the Footer

• Go to Pages > Website Tools > Code Injection > Footer

• Copy and paste this HTML into the Footer

<div class="sidetext-left"> 
  <h3>This is — <a href="https://www.google.com" target="_blank">the left side text</a></h3> 
</div> 

<div class="sidetext-right">
  <h3>This is — <a href="https://www.google.com" target="_blank">the right side text</a></h3>
</div>

• Update the text and URL

2. Add CSS

• Go to Website Tools > Custom CSS

• Copy and paste this CSS

/* Rotated sidetext */

.sidetext-left h3,.sidetext-right h3 {
  font-size: 0.8em;
}

.sidetext-left, .sidetext-right {
  position: fixed;
  z-index: 9999;
  bottom: 50%;
  height: 1.5em;
  margin: auto;
}

.sidetext-left {
  left: 25px;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: rotate(-90deg) translate(-50%, 50%);
  -moz-transform: rotate(-90deg) translate(-50%, 50%);
  -ms-transform: rotate(-90deg) translate(-50%, 50%);
  -o-transform: rotate(-90deg) translate(-50%, 50%);
  transform: rotate(-90deg) translate(-50%, 50%);
}

.sidetext-right {
  right: 25px;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: rotate(90deg) translate(50%, 50%);
  -moz-transform: rotate(90deg) translate(50%, 50%);
  -ms-transform: rotate(90deg) translate(50%, 50%);
  -o-transform: rotate(90deg) translate(50%, 50%);
  transform: rotate(90deg) translate(50%, 50%);
}

@media only screen and (max-width: 1000px) {
  .sidetext-left,
  .sidetext-right {
    display: none;
  }
}