What』s The Difference Between PX, EM, REM, %, VW, and VH?

What』s The Difference Between PX, EM, REM, %, VW, and VH?

When designing with Elementor, you may notice that some elements have options for sizing, allowing you to choose PX, EM, REM, %, VW, or VH. But what do those options actually mean, and when should you use one over another?

Let』s start with the basics.

In CSS, you can specify sizes or lengths of elements using various units of measure. The units of measure that you』ll find in some Elementor options include PX, EM, REM, %, VW, and VH, although there are several more available in CSS. Not every Elementor element will offer all of these units. Elementor only presents the options that make the most sense for the given element.

The most important aspect to learn about the different units is that some units, such as PX are absolute units, and some are relative units.

Absolute Units

PX: Pixels (px) are considered absolute units, although they are relative to the DPI and resolution of the viewing device. But on the device itself, the PX unit is fixed and does not change based on any other element. Using PX can be problematic for responsive sites, but they are useful for maintaining consistent sizing for some elements. If you have elements that should not be resized, then using PX is a good choice.

Relative Units

EM: Relative to the parent element

REM: Relative to the root element (HTML tag)

%: Relative to the parent element

VW: Relative to the viewport』s width

VH: Relative to the viewport』s height

Unlike PX, relative units like %, EM, and REM are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element』s size.

Let』s look at a simple example.

In most browsers, the default font size is 16px. Relative units calculate the size from this base. If you change that base by setting a base size for the HTML tag via CSS, then that becomes the basis for calculating relative units throughout the rest of the page. Likewise, if a user adjusts her font size, that then becomes the basis for calculating relative units.

So what do these units mean when dealing with the default of 16px?

The number you specify will multiply that number times the default size.

1em = 16px (1 * 16)

2em = 32px (2 * 16)

.5em = 8px (.5 * 16)

1rem = 16px

2rem = 32px

.5rem = 8px

100% = 16px

200% = 32px

50% = 8px

Ok, great, but what if either you or the user changes the default size? Because these are relative units, the final size values will be based off of the new base size. Although the default is 16px, if you or the user changed it to 14px, then the calculated sizes would end up being:

1em = 14px (1 * 14)

2em = 28px (2 * 14)

.5em = 7px (.5 * 14)

1rem = 14px

2rem = 28px

.5rem = 7px

100% = 14px

200% = 28px

50% = 7px

This gives the user the freedom to adjust her default browser font size, while still maintaining the relative scale of each element that you』ve specified.

What is the difference between EM and REM?

Looking at the chart above, it shows EM and REM looking exactly the same. So how do they differ?

Simply put, they differ based on inheritance. As mentioned, REM is based on the root element (HTML). Every child element that uses REM will then use the HTML root size as its calculation point, regardless of whether or not a parent element has any different sizes specified.

EM on the other hand, is based on the font size of the parent element. If a parent element has a different size than the root element, the EM calculation will be based off of the parent element, and not the root element. This means that nested elements that use EM for sizing can sometimes end up being a size that you didn』t anticipate. On the other hand, it does give you more fine-grained control if you need it to specify the size for a particular area of a page.

So what about %, VW, and VH? What are they all about?

While PX, EM, and REM are primarily used for font sizing, %, VW, and VH are mostly used for margins, padding, spacing, and widths/heights.

To reiterate, VH stands for 「viewport height」, which is the viewable screen』s height. 100VH would represent 100% of the viewport』s height, or the full height of the screen. And of course, VW stands for 「viewport width」, which is the viewable screen』s width. 100VW would represent 100% of the viewport』s width, or the full width of the screen. % reflects a percentage of the parent element』s size, regardless of the viewport』s size.

Let』s look at some examples of where Elementor gives %, VW, and VH options.

Column Widths: If you edit the layout of an Elementor Column, you』ll notice that there is only one width sizing unit available – %. Column widths only work well and responsively when using percentages, so no other option is given.

Margins: A section』s margins can be specified either in PX or %. Using % is usually preferable to ensure the margins don』t get larger than the content when scaling down for a mobile device for instance. By using a percentage of the width of the device, your margins will remain relative to the size of the content, which is almost always preferable.

Padding: A section』s padding can be specified either in PX, EM, or %. As with margins, it is often preferable to use either EM or % so the padding remains relative as the size of the page scales.

Font Size: If you edit the typography of an element, such as a Heading, you』ll see four choices: PX, EM, REM, and VH

Have you ever created a large heading and admired how great it looked on desktop, only to realize it was far too large on mobile? (Admission of guilt: I have, more than once).

The key to solving this elegantly is to use either EM, REM, or VW instead of PX. Which you choose is dependent upon your particular situation. I usually choose EM because I want the size to be relative to the Heading』s parent. But if you prefer to have the size be relative to the root (HTML) size, then choose REM instead. Or, you could set it to be relative to the viewport』s width (VW) if that works better for your case. 

Note that you could also set specific font size PX values per device by using the Device Icons to specify a size for Desktop, Tablet, and Mobile. But that still places limits on responsiveness and accessibility, so keep that in mind if you choose PX.

More About VW and VH

Viewport units represent a percentage of the current browser viewport (current browser size). While similar to % units, there is a difference. Viewport units are calculated as a percentage of the browser』s current viewport size. Percentage units on the other hand are calculated as a percentage of the parent element, which may be different than the viewport size.

Let』s consider an example of a mobile screen viewport that is 480px x 800px.

1 VW = 1% of the viewport』s width (or 4.8px)

50 VW = 50% of the viewport』s width (or 240px)

1 VH = 1% of the viewport』s height (or 8px)

50 VH = 50% of the viewport』s height (or 400px)

If the viewport size changes, the element』s size changes respectively.

When Should You Use One Unit Over Another?

Ultimately, there isn』t a perfect answer for this question. In general, it is often best to choose one of the relative units over PX so that your web page has the best chance of rendering a beautifully responsive design. Choose PX however, if you need to ensure that an element never resizes at any breakpoint and remains the same regardless of whether a user has chosen a different default size. PX units ensure consistent results even if that』s not ideal.

EM is relative to the parent element』s font size, so if you wish to scale the element』s size based on its parent』s size, use EM.

REM is relative to the root (HTML) font size, so if you wish to scale the element』s size based on the root size, no matter what the parent size is, use REM. If you』ve used EM and are finding sizing issues due to lots of nested elements, REM will probably be the better choice.

VW is useful for creating full width elements (100%) that fill up the entire viewport』s width. Of course, you can use any percentage of the viewport』s width to achieve other goals, such as 50% for half the width, etc.

VH is useful for creating full height elements (100%) that fill up the entire viewport』s height. Of course, you can use any percentage of the viewport』s height to achieve other goals, such as 50% for half the height, etc.

% is similar to VW and VH but it is not a length that is relative to viewport』s width or height. Instead, it is a percentage of the parent element』s width or height. Percentage units are often useful to set the width of margins, as an example.

Elementor makes it easy to choose the option that is best suited for your design. Ultimately, it』s your choice.

Popups: Bottom Bar

Popups: Bottom Bar

Bottom Bars can be used for a variety of reasons, including announcements or options. Another common use of a popup bottom bar is to comply with the EU Cookie Consent law. In this example, we』ll quickly create a Cookie Consent banner. The bar will satisfy several requirements:

Show on any page of the site. (Publish Settings > Conditions)Show immediately when the page loads. (Publish Settings > Triggers)Show an overlay to hide the site underneath. (Popup Settings > Settings Tab)Prevent scrolling of the site underneath. (Popup Settings > Advanced Tab)Only close when the user clicks the OK button, making sure to prevent closing when clicking the overlay or pressing ESC. (Popup Settings > Advanced Tab)Only show the popup once, so the user doesn』t have to continually deal with it on subsequent page views. (Publish Settings > Advanced Rules)

To adjust the Popup Settings, click the Popup Settings gear icon in the panel』s bottom toolbar. To adjust the Publish Settings, click the arrow next to the Publish / Update button and choose either Conditions, Triggers, or Advanced Rules.

Create Popup

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』Choose a template from the Library or create your own design

Popup Settings

Settings

Set the Horizontal position to Center and the vertical position to bottom.Show OverlayHide Close Button

Style

Configure style as desired

Advanced

Prevent Closing on Overlay: YesPrevent Closing on ESC Key: YesDisable Page Scrolling: Yes

Publish Settings

Conditions: Include: Entire Site

Triggers: On Page Load: within 0 seconds

Advanced Rules: Show Up To X Times: 1

Considerations for Theme Builder Compatibility

Considerations for Theme Builder Compatibility

Although Elementor Pro』s Theme Builder feature can be used with any WordPress theme that adheres to WordPress coding standards, there are some things to consider which may affect how well any particular theme will integrate with our Theme Builder.

If You Are Unsure If Your Theme Is Fully Compatible, Design Your Headers and Footers Together

If you decide to use Elementor Theme Builder to create a header or a footer, you should ideally use it to create both, rather than one or the other. If you would prefer to use Theme Builder to create just the header but keep your theme』s existing footer, or vice-versa, you want to use Theme Builder to design a new footer, but keep your theme』s existing header, you should send this guide to the developer of your theme.

What Is The Developer Guide All About?

Elementor provides a Theme Locations API for theme developers. Although Elementor can edit headers and footers by default on most themes, it is still necessary for themes to register additional locations to allow users to edit other theme components with Elementor Theme Builder. Theme developers can choose to support all core locations, just some locations or even create their own custom locations. For example, if theme developers want to allow users to edit the sidebars with Elementor, they can simply register the sidebar location via our API.

What Could Happen If You Only Design A Header But Not A Footer With Elementor Theme Builder (Or Vice-Versa)?

WordPress theme developers often tie the header and footer code together by opening a div in the header and then closing that div in the footer. If Theme Builder replaces the header but not the footer, or vice-versa, it is possible that the opening and closing tags will become mis-matched. If a tag is not closed, the structure of the code breaks and the page will break as well.

Summary

Many themes have chosen to fully integrate Elementor locations into their themes. You can see a list of themes that have been specifically designed to work well with Elementor.

Elementor Theme Builder can enable you to replace headers and footers of almost any theme that has been written with WordPress coding standards in place. If these themes haven』t yet used the Elementor Theme API to register Elementor locations, you should probably use Theme Builder to replace the the theme』s header and its footer at the same time. Replacing only one or the other with Theme Builder could cause your page to break.

However, if you design both your header and your footer with Theme Builder, your newly designed header and footer will replace both the theme』s header and its footer code. This ensures that all div tags in the header and footer will be opened and closed appropriately, and your page should not break.

If you prefer to only design the header or only design the footer with Theme Builder, then you should ask the theme developer to use our Theme Locations API to register locations. Likewise, if you would like to use Elementor Theme Builder to design other areas of the theme such as the sidebar, ask your theme developer to register those locations as well, using the Theme Locations API.

How To Make Clickable Phone Links or Mailto Links in Elementor Widgets

How To Make Clickable Phone Links or Mailto Links in Elementor Widgets

Use Smart Links

With Elementor Pro』s Dynamic Contact URL feature, quickly create 「smart」 links, such as clickable phone links or mailto links from any widget that has a Link field, like the Button widget. Many other smart links can be created with this feature as well, including SMS message links, Whatsapp conversation links, Skype call links, Viber call links, Waze navigation links, Facebook Messenger links, and calendar event links. Click to learn how easy it is to use these smart links.

To manually create clickable phone links and mailto links instead of using Smart Links, follow the instructions below:

Clickable Phone Links

To Create a Clickable Phone Link That Opens a Dial Dialog on Smartphones and Mobile Devices:

Enter tel: followed by the complete phone number, without dashes or any other symbols, like this:

tel:9855551212

Mailto Links

Simply enter the appropriate mailto: code into the Link field of any linkable widget.

To Create a Basic Mailto Link, with the TO: field filled out:

Type mailto: followed by the email address to send the email to, as shown in the example below:

mailto:[email protected]

To Create a Mailto Link, with the TO: field and the SUBJECT: field filled out:

Add subject= followed by the text of the email』s subject

mailto:[email protected]?subject=Thank You For Getting In Touch

Or

mailto:[email protected]?subject=Thank%20You%20For%20Getting%20In%20Touch

Note: Spaces between the words of the Subject will probably be okay, but in some cases, it may not work well. The safest way to handle that is to replace the spaces with %20.

Template Widget (Pro)

Template Widget (Pro)

The Template widget inserts a custom global template into your page.

From the Content > Template tab > Choose Template, Select a template that you』ve previously saved in Templates.

After the page is published, an Edit Template button will become available in the widget options. If you need to edit the template, click the Edit Template button to quickly navigate to the template within the Template Library

Note: Editing and updating the template in the Template Library will cause all uses of that template widget across the site to update as well.

Create WordPress Sticky Headers Using Elementor』s Theme Builder

Create WordPress Sticky Headers Using Elementor』s Theme Builder

WordPress Sticky headers make your header or menu visible at all times. 

Click the Edit Section   icon in your Header, and in the panel go to AdvancedClick on Motion Effects, and slide the Sticky Header ONChoose the devices you need (desktop, tablet, mobile)Update and add Conditions. Click to learn about Conditions.

Learn more about Header Design

Note: You have to deactivate  The stretch section feature to be able to use the Scrolling Effect, otherwise the Scrolling Effect tab won』t appear.

WooCommerce Single: Upsell (Pro)

WooCommerce Single: Upsell (Pro)

Set the Upsell Products style in WooCommerce Single template. Make sure to set the Product Upsells in your Product pages > Linked Products > Upsells. This is where the Upsells widget gets the information from.

Content

Upsells

Columns: Set how many columns will be displayed, from 1 to 12, for each device (Desktop, Tablet, Mobile)Order By: Set the order in which the upsells will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu OrderOrder: Select ASC or DESC (ascending or descending) order

Style

Products

Columns Gap: Set the exact gap between the upsell products columnsRows Gap: Set the exact gap between the upsell products rowsAlignment: Align the upsells data to the left, right, or center

Image

Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the upsell product imagesColor: Choose the border colorBorder Radius: Set the radius to control corner roundness of the borderSpacing: Adjust the amount of space between the images and their data

Title

Color: Choose the color of the upsell product titleTypography: Set the typography options for the upsell product titleSpacing: Adjust the amount of space after the upsell product title

Rating

Star Color: Choose the color of a filled starEmpty Star Color: Choose the color of an empty starStar Size: Set the size of starsSpacing: Adjust the amount of space after the Rating Stars

Price

Color: Choose the color of the upsell product PriceTypography: Set the typography options for the upsell product Price

Regular price

Color: Choose the color of the upsell product』s Regular PriceTypography: Set the typography options for the upsell product』s Regular Price

Button

Normal | Hover

The following options can be set independently for both the normal and hover states.

Text Color: Choose the color of the upsell product』s Button TextBackground Color: Choose the background color of the upsell product』s ButtonBorder Color: Choose the border color of the upsell product』s ButtonTypography: Set the typography options for the upsell product』s Button TextBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the upsell product』s ButtonBorder Radius: Control corner roundness of the button』s borderText Padding: Set the padding within the buttonSpacing: Adjust the amount of space above the buttons

View Cart

Color: Choose the color of the View Cart text under the buttonsTypography: Set the typography options for the View Cart text

Heading

Heading: Show or Hide the upsell products heading

Box

Border Width: Control the thickness of the border around the upsell product』s boxBorder Radius: Control corner roundness of the upsell products boxPadding: Change the padding within the upsell products box

Normal | Hover

The following options can be set independently for both the normal and hover states.

Box Shadow: Adjust box shadow optionsBackground Color: Choose the background color of the upsell products boxBorder Color: Choose the border color of the upsell products box

Sale Flash

Sale Flash: Show or HideText Color: Choose the color of the Sale Flash textBackground Color: Choose the background color of the Sale FlashTypography: Set the typography options for the Sale Flash textBorder Radius: Control the corner roundness of the Sale FlashWidth: Control the thickness of the border for the Sale FlashHeight: Set the height of the Sale FlashPosition: Set the position of the Sale Flash, Left or Right, of the upsell products boxDistance: Set the distance of the Sale Flash from the top of the upsell products box

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme』s settings.

Customize the Search Results Archive

Customize the Search Results Archive

Search Results Page is an Archive, displaying your results in an archive template.

In the Dashboard, Templates > Theme Builder > Archive > Add NewUnder Template Type choose Archive, and Create NewChoose a block or design your own archive from scratchTo preview this Archive as a Search Results page,  Click the eye icon  > Click the Settings > Choose the Search Results.Enter an example search term to see what the results page looks like.Click Apply to preview it.

You can customize the message if there are No Results.

Under Content > Advanced, type your 『Nothing Found』 message.Under Style > Nothing Found Message, change the font, text color etc.

To apply the design to your Search Results Page click Publish and in the Conditions window select Search Results.

Fixed Positioning For Widgets

Fixed Positioning For Widgets

Set your widget to have a fixed position and place it in a custom position. The element will stay fixed in that position as the page is scrolled.

Under any Widget > Advanced > Custom Positioning

Position: FixedDrag and drop the widget anywhere on the page using the aqua arrows drag icon

Tip: Confused between Sticky and Fixed? Sticky is a scrolling effect which is relative to the section it』s placed in. Fixed position, however, is relative to the user viewport.

Popups: Full Screen

Popups: Full Screen

Full Screen Popups are great for directing your user』s attention to only one Call To Action or Promotion. In this example, we』ll wait for the user to be inactive for a while, at which time, we』ll display a full screen popup that uses a Countdown widget to help change that user』s inaction to immediate action.

Create Popup

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』Choose a template from the Library or create your own design

Popup Settings

Settings

Set Width to 100 VWSet Height to Fit to ScreenSet the Horizontal position to Center and the Vertical position to Center.Show OverlayShow Close Button

Style

Change text, background image, button, and styling as needed.

Publish Settings

Conditions: Include: Entire Site

Triggers: After Inactivity of 30 seconds