Page Editor: Units

This article will talk about Page Editor Units. In ClickFunnels, the Page Editor Units, also known as CSS units, are attributes that are used to define the visual properties of elements on a page. CSS is a stylesheet language that’s used to control the visual appearance of a page; with ClickFunnels, you can edit your page elements from our editor without requiring technical knowledge.

Important Note: Depending on the type of attribute you are working on, you might see different options of units available. Please select the one that works best for your design.

Requirements: 

• An active ClickFunnels 2.0 account
• A  ClickFunnels page
• Any element with a setting that uses units

TABLE OF CONTENTS

• Units and Values
• Pixel Value
• Percentage Value
• Root Element Value
• Millisecond Value

Units and Values

Depending on the feature you are working with, you might see a size bar next to a manual input field, with the option to select from different units, like PX, %, REM, or MS, as you can see in the image below.

We will call whatever your selection is a “Value”, and the attribute used to measure it a “Unit”. For example, 10 px. 10 is the value, and PX (pixel) is the unit used.

It’s a good idea to test each option and preview how it looks, making changes and selecting the options available to see which one works the best for your design. Remember, it’s not only about the element itself but also about its placement on your page, the size of its container, and the role it plays in your page design.

Back to Top

Pixel Value

The Pixel Value is represented with “px”. The Pixel Value is a unit of measurement commonly used in web design. Pixels are the smallest unit on a digital screen and are used to determine the size and dimension of elements on a web page.

By selecting “px” as your unit of measurement, you are setting that feature to be “X” pixels.

As you can see in the image above, we have set 25 pixels of margin to our element to its left and right. 

Back to Top

Percentage Value

The Percentage Value is represented with “%”. It’s a unit of measurement used to define proportions and sizes relative to the parent element.

When you use “%” as a unit in ClickFunnels, you are specifying a percentage of a particular reference value, take for example the image below, we’ve added a 15% Top Margin to this element in relation to its parent container row, meaning that the space between the top of the container row and this element represents 15% of the total size of the row.

Back to Top

Root Element Value

The Root Element Value is represented with “rem”. The Root Element Value is a relative unit of measurement based on the root element’s font size. REM is relative to the font size defined under the Style Guide of your page, and it will automatically adjust based on the size set there.

For example, in the image below, we can see a value of 1.5 “rem”, which means it represents 1.5 of the Style Guide’s defined font size.

Back to Top

Millisecond Value

The Millisecond Value is represented with “ms”. It is used to specify durations of time related to animations, transitions, and other timing-related effects.

Back to Top