1. Home
  2. Docs
  3. Content Elements
  4. Number

Number SA Element

The number is really an efficient element to display the ordered list in a very stylish manner. You can insert some custom styled numbers in your list by using this lightweight element in Elementor Page Builder. Here in this tutorial, you’re going to explore all about the Number and see how to work with this incredibly important element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Number Element

 

»Content

 

Number

⇒Text: Input the number you want to display in your own language and preference.

 


»Style

 

Text

⇒Text Color: Customize the color of the Number text from here.

⇒Typography: Set the typography options for the Number text.

⇒Text Shadow: Add the text-shadow to the Number text. Customize the shadow color, blur radius, horizontal and vertical shadow manually.

⇒Text Rotate: Rotate the Number text manually as you want.

General

⇒Width & Height: Customize the width and height of the number for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the number. You can link the values together or customize them individually.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the number for different dimensions.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the number for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the number border.

⇒Background Type: Set the background type either Classic or Gradient of the number. And then customize the style according to your preference.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Alignment: Set the number alignment either left, center or right.

 

Background Overlay

⇒Background Type: Set the background type either Classic or Gradient of the number background overlay. And then customize the style according to your preference.

⇒Blend Mood: Set a Blend mood for the background overlay.

⇒Opacity: Customize the opacity of the number background overlay.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Number Element.


Was this article helpful to you? Yes No

How can we help?