Add Subscript & Superscript text in Elementor

Elementor is an amazing page builder with tons of design and customization options. But it’s text editor does not have all the options as there are in a typical word editor such as Microsoft word. And one of those option is the ability to add Superscript and Subscript text. Also there is no option in Elementor to highlight text, but for highlighting text you can read my other blog here.

In this blog post we are mainly going to focus on how to add subscript and superscript text in the Elementor text editor, just like we can add in microsoft word. When we have a closer look, Elementor does not have a lot of text editor options. Please have a look at the image below. These are the only text editing options we get from Elementor.

elementor text editor options

What is Superscript & Subscript text?

Please refer to the image below. The Superscript text is the small text in the upper right corner. It is mainly used in mathematical terms, scientific terms, references etc. In the image below, the superscript text is representing the power of X, or X square.

The subscript text is the small text in the lower right corner, it is also used for mathematicla, scientific and referencing.  In the image below, subscript text is used to write down the formula of Carbon dioxide.

subscript and superscript text in elementor

How to add Superscript & Subscript text in Elementor?

I have found two ways you can do this, firstly write down your texts with superscripts/subscript in a word editor such as Microsoft word, by selecting the text and then pressing Ctrl/CMD + C and then paste it directly in the Elementor text editor by pressing Ctrl/CMD + V . You cannot paste it as plain text, otherwise the subscript/superscript part would be removed. It works, but there is a problem, when you paste it directly from the word editor, the formatting of the text does not match with the text formatting of Elementor.

Another way is by wrapping around the subscript/superscript with <sup> or <sub> HTML tags in the the text editor of Elementor. Please have a look at the video below in which I explain these two method in detail.

HTML Tags used in the video

For Subscript: <sub></sub>

For Superscript: <sup></sup>

My Elementor Pro Services

  • Desiging Websites & Landing pages with Elementor
  • Making full websites, or rebuilding existing websites with Elementor
  • Making custom header, footer, blog page & custom blog posts with Elementor
  • Making existing Elementor landing pages mobile responsive