Selecting measurement units

Introduction

Elementor supports a wider range of measurement units giving you immense design flexibility. For more details about some of the commonly used units, check out our article – What’s The Difference Between PX, EM, REM, %, VW, and VH? 

Choosing a unit

Any option requiring a measurement unit, includes a unit it is measured by (e.g. PX for pixels). 

The unit of measurement
Click here to open up the unit measurement menu.

Click this unit of measurement to open a menu letting you to switch measurement units.

The dropdown allowing you to choose measurement units.
Select the measurement unit you want to use.

Custom measurements

Some web creators prefer to use CSS math functions to set measurements.

Example: The headline on Alex’s site is set to 4 EM. Drew prefers to use CSS math functions and so sets the font size to: calc(2.5EM + 2vw). This means the header on Drew’s site will be 2.5 EM plus 2% of the viewport width (the width of the browser screen). By using a math function dependent on viewport width, Drew’s design will be fine-tuned to any screen size.

CSS math functions can make your site more accurate, more responsive and allows you to combine units of measurement (e.g. pixels and VH)

Elementor supports use of custom CSS math functions for a number of elements – containers, sections, columns, as well as typography controls.

How to add custom measurements

  1. Open the unit selection dropdown as described above.
  2. Select the pencil icon.
The custom unit icon
Select the pencil icon to use a CSS math function.
  1. Enter the CSS math function in the text box (e.g. calc(2.5em + 2vw))
Text box to enter a CSS math function.
Enter the CSS math function. This menu will be slightly different depending on the element you’re working with.

When entering CSS math functions, please keep in mind:

  • You must include the unit of measurement (e.g. 50PX not 50)
  • Make sure there are no spaces between value and the unit (50PX not 50 PX)

在社交網絡上分享它

今天開始使用Elemenor

加入數百萬專業人士,使用Elementor更快、更好地構建WordPress網站

本頁內容