When designing a web page with Divi, it’s a must to make numerous selections that experience to do with length. This might be the width of a row, the dimensions of a font, or how a lot padding so as to add to a module. And to make issues tougher, we will have to make a decision on sizes suitable for all gadgets.
On the earth of CSS, the dimensions (or period) of a component is expressed by way of period devices. Period devices are small letters/symbols that apply a host price (10px, 2em, 100%, and so on.) to ascertain the period of a component.
We use period devices always. And even supposing Divi has made the method so much more uncomplicated, period devices are nonetheless very a lot part of the on a regular basis trade of designing a web page. That’s why these days I’m going to try to come up with a information that can assist you perceive and observe the suitable period devices with Divi.
On this publish, I will be able to be addressing the next components that use a period unit price:
- Width
- Margin
- Padding
- Border
- Textual content (font length, letter spacing, line peak)
Fast Evaluate of Period Devices
Period devices are frequently separated into two primary classes: absolute and relative.
Absolute Period Devices
Absolute period devices are regarded as absolute as a result of they aren’t relative to every other component. Those devices is not going to scale to browser length and can at all times stay the similar length. Those come with the next:
pt – issues
px – pixels
in – inches
cm – centimeters
mm – millimeters
laptop – picas
Pixels are truly the one absolute CSS period unit we must imagine the usage of for the internet. The others are most commonly used for bodily (now not virtual) size (like print). A pixel unit refers back to the length of 1 “dot” of your tool show (which can range rather with every tool). On account of this, pixels are usually used for issues that don’t essentially wish to scale with browser sizes.
Relative Period Devices
Relative Period devices are regarded as relative as a result of they alter/scale relying at the period of different components. One commonplace instance is proportion, which is dependant at the period of the father or mother component.
em – relative to the component’s font-size
rem – relative to the basis component’s font-size
vw – relative to at least one% of your browser’s viewport width
vh – relative to at least one% of your browser’s viewport peak
vmin – relative to at least one% of the smaller of the 2 browser viewport dimensions (peak or width).
vmax – relative to at least one% of the bigger of the 2 browser viewport dimensions (peak or width).
% – relative to at least one/100 of the father or mother component’s width.
All of those devices are used for the internet. For this publish, I received’t be targeting rem, vmin, or vmax as a result of they’re much less commonplace and don’t paintings as smartly with Divi. Even though I would really like to listen to steered use instances.
Divi’s Field Sizing
Divi determines field sizing with the border-box CSS assets. This mainly method the width and peak of a piece, row or module is decided by way of the sum of its content material, padding and border. You probably have constructed web pages with Divi, you already know the way this works. Call to mind a row as a field.
Let’s say you create a row that has a width of 1000px. Including content material to the row (like different containers/modules) is not going to trade the width of the row. Including padding to the row is not going to trade the width of the row both however can be implemented throughout the field. If you happen to upload a border to the row, the border can be implemented throughout the field and won’t impact the set width. In different phrases, including 50px of proper and left padding is not going to lead to a 1100px row simply as including a 10px border round your row is not going to make your row 1020px huge. The one factor that may trade is the peak as you upload extra content material padding or border. Margin is what provides area out of doors of the field and is what’s used to split containers (sections, rows, and modules) at the web page.
I point out this as a result of it’s useful to grasp the construction block (or containers) of ways Divi works so you’ll know what including period unit values (30px, 5em, 50% and so on.) to components in your web page in truth does.
Width
Prompt Period Devices: %, vw, and px (as max width)
The width assets makes use of period devices to set the width of a component.
Divi means that you can simply modify the width of any phase, row, or module.
The usage of px for Width
Hardly must you ever set a component to a pixel width, except you propose on adjusting that width on the essential breakpoints for cellular. That is merely now not just right observe on this planet of responsive, adaptive, and fluid design. It turns out to be useful, then again, to set a max width the usage of a pixel price, so long as the width is ready to a proportion. Extra in this later.
The usage of % and px to Alter Max Width for Responsive Design
As you realize, Divi means that you can modify the width of any module, row, or phase. This width can be adjustable by way of a proportion unit by way of default, however you’ll input a pixel unit price as smartly. However the width price set is technically the max width. The real true css width is 100%. All sections, rows, columns, and modules are inherently 100% in width as a result of they’re all constructed the usage of the div block component. And block components at all times span the whole width of the container (100% width).
What are you aware… Divi is constructed with Divs.
Here’s a little check. Let’s replace the module width to 1000px for this article module within the left column. I’ve given the module a grey background for simple popularity.
Realize that it doesn’t in truth pass the whole 1000px as a result of that is technically a max width. Then again, if I sought after to override the default 100% width and claim a real width of 1000px, I may just pass over to the complex tab and set the primary component to have a width of 1000px.
Now take a look at the module.
The issue is that you’re the usage of an absolute price surrounded by way of components with relative values. So despite the fact that you shrink your browser, the module will stay 1000px.
For this reason Divi adjusts the max width of your components as a substitute of the particular width.
It’s common to make use of pixels together with relative period devices (like proportion) with a view to construct responsive websites. Divi makes use of this strategy to set the content material width for all your pages. If you happen to pass to Theme Customizer > Normal Surroundings > Structure Settings you are going to see the primary content material width is ready to 1080px.
The 1080px is in truth the max width to your content material. The real css width is 80%. This is the reason whilst you building up the width of your browser, the content material width will forestall increasing at 1080px. And when you shrink the browser width beneath 1080px, the content material will proceed to scale in line with 80% of the father or mother component.
Including Customized Width Values within the Divi Builder
When the usage of the Divi builder, your rows are regarded as the web page content material and can inherit a default environment of 80% width and 1080px max width. If you happen to trade the width of a row the usage of the Divi Builder by way of environment a customized width, the brand new width price can be a max width regardless whether it is set as a proportion or a pixel price.
If you happen to trade a row to be fullwidth, each the width and the max width is ready to 89%. Which means the row will at all times have a with of 89% of the father or mother component (the phase) which is 100% of the browser window.
In brief, the Divi builder is sensible sufficient to robotically use max width when adjusting the width of your sections, rows, or modules.
The usage of vw to Alter Width
Viewport Width (vw) is similar to the share price. The variation is that the vw price is at all times relative to the browser viewport/window width. The proportion price is at all times relative the the father or mother component. Watch out of environment your sections to 100vw (in customized css) as a result of this may motive some issues of extending previous the scrollbar that displays up when scrolling down the web page.
Since Divi is constructed on proportion widths, except you might be growing a distinct design that calls for vw, I might persist with proportion values.
Margin
Prompt Period Devices: px, %, and vw
The margin assets makes use of period devices so as to add spacing out of doors of the component. Additionally it is helpful for positioning a component the usage of sure and destructive values.
Divi means that you can modify the margin of any phase, row, or module.
The usage of px for Margins
The usage of pixels for margins and/or padding is okay so long as you keep in mind that the ones period values is not going to modify together with your other display sizes except you assign particular period values for various display sizes.
Steer clear of the usage of pixels for left or proper margin
Basically, it would be best to keep away from the usage of pixels for adjusting margins, particularly for left and proper margins. Having an absolute period for margins is not going to scale correctly together with your content material and can in the end go away you with roughly margin than you wish to have on sure browser widths. There are exceptions to this the place it would be best to have absolute margins for design functions. Simply just remember to modify the margin period for cellular gadgets when wanted.
The usage of pixels for most sensible and backside margin
There are occasions when the usage of pixels for margin is somewhat helpful. As an example, in case you are in need of to transport a component up or down on a web page, giving the component a favorable or destructive pixel price will can help you transfer that component in an exact location vertically. If you happen to have been to make use of a proportion for this, the component will transfer up or down as you convert the browser width.
The usage of Proportion for Margins
The usage of proportion for margins is an effective way to construct websites which are responsive. As discussed previous, proportion values are relative to the period of father or mother components. Divi makes use of percentages for proper margin to make space between columns. This margin proportion is definitely adjusted by way of converting the gutter width throughout the row settings. Gutter width is mainly the share of margin you wish to have between your columns.
With gutter width set to a few, the margin between columns is 5.5%. Realize how the gap scales when adjusting browser width.
So when you ever wish to modify a proper or left margin of a module, take into account that it’s going to be highest to make use of percentages with a view to stay issues scaling as it should be.
Use Proportion Margin for Positioning Items Horizontally
Every now and then sure ingenious designs name for transferring gadgets from left to proper to overlap gadgets or to create asymmetrical designs. On this case you’ll use a destructive proportion price for a proper or left margin. This may increasingly transfer the item over however nonetheless modify to browser widths.
Here’s an instance of the usage of proportion values to overlay a picture with some other symbol. Realize using proportion values for horizontal positioning and using pixels for most sensible and backside positioning. It is because the share price is relative to the width of the father or mother component (the column). So when you have been to position a 30% most sensible margin, the picture would transfer up and down because the column width adjustments. This is the reason in maximum case it would be best to place vertical components with an absolute period price like pixels.
The usage of vw and vh for customized Margin
Like percentages, the vw and vh period devices may also be useful so as to add margins between sections, rows, or modules in some way that scales together with your browser viewport. The variation is that vw and vh are at all times relative to the viewport length, now not the father or mother component (like percentages).
Padding
Prompt Period Devices: px, %, em, vw and vh
Divi means that you can customise the padding for sections, rows, columns, and modules.
The usage of pixels for Padding
There used to be a time after I used pixels for padding for just about the whole lot. However, I’ve come to my senses. Like margin, you’ll use pixels for padding if you wish to have an absolute period of padding it doesn’t matter what the browser length is also. However typically, padding must scale to the dimensions of the browser. So as a substitute, I might recommend the usage of percentages for padding.
It’s common in responsive internet design to make use of pixels for most sensible and backside padding with a view to stay a constant vertical spacing between components whilst the width of the browser adjustments. Divi does this for Sections and Rows. Relying at the phase or row peak you choose (1-10) below the Theme Customizer, your phase and/or rows may have a better or lesser most sensible and backside padding.
However when you take a look at the CSS, you are going to understand that the highest and backside padding is ready to a proportion price at a definite breakpoint and a pixel price for others. As an example, when you go away the default phase peak to the price of four, on better display widths (more than 1350px), the highest and backside padding can be 54px. On display widths between 980px-1350px, the highest and backside padding can be set to 4% (which is 4% of the phase width). On display sizes not up to 980px, the highest and backside padding is ready to 50px. This system is superb for environment a minimal padding price for smartphone and a max padding for enormous displays whilst have the padding scale with the share price for gadgets in between the 2 extremes.
The usage of % for Padding
Every now and then it is only so much more uncomplicated to make use of a proportion price (now not pixels) for padding with a view to stay issues scaling well with no need so as to add any further values at sure breakpoints. And, for the ones of you curious about protecting necessary content material “above the fold”, the usage of percentages as a substitute of pixels for most sensible and backside padding will assist simplify this procedure.
Here’s an instance of a piece with a most sensible padding set to 50px. Realize how the similar 50px padding doesn’t glance as just right on smartphones because it does on desktop as a result of there may be an excessive amount of area between the sections.
Here’s an instance of a piece with a most sensible padding set to 4%. Realize how well it scales from Desktop to smartphone. In a browser window this is 1920px huge, the highest padding is 76px (0.04 occasions 1920). However whilst you scale the browser window right down to 375px huge, the 4% padding equates to 15px (0.04 occasions 375).
NOTE: It is very important needless to say most sensible and backside proportion values will at all times be relative to the width of the component, now not the peak.
The usage of em for Padding
The usage of the em period price for padding is suprisingly helpful. Let’s say you may have a textual content module with a frame textual content length of 22px for desktop, 18px for pill, and 14px for smartphone. 1em could be equivalent to 22px on desktop, 18px on pill, and 14px on smartphone. Stick with me. Including a padding of 2em for the textual content module will modify in line with the textual content length. On desktop, the padding can be 44px as a result of 2em could be 2 occasions 22px. On pill, the padding can be 36px. And on smartphone, the padding can be 28px. This is helping to scale the padding in line with the font length which matches truly smartly for responsive design.
The usage of vh and vw for Padding
You’ll use vh and vw for padding in a lot the similar approach as you possibly can proportion. The variation is that vh and vw are
at all times relative to the viewport length. Proportion is at all times relative to the father or mother component.
On this instance, I took out all of the padding from the phase and row and gave every textual content module the next padding:
2vh Best, 5vw Proper, 2vh Backside, 5vw Left
Realize how adjusting the browser peak will lower or building up the highest and backside padding of every module.
Borders
Prompt Period Devices: px, em, and vw
The usage of pixels for borders
The usage of pixels for borders is moderately commonplace and is really useful except you wish to have the border to scale in line with the dimensions of the father or mother font length (em), or the browser viewport(vh,vw).
Borders don’t improve the % unit
You might have spotted within the header above that I didn’t come with proportion as an possibility. It is because the share price isn’t a supported unit for borders. However you’ll have your borders scale by way of the usage of the opposite relative period devices (em,vh,vw).
The usage of em for borders
The usage of em for borders is very similar to the speculation of the usage of padding round textual content modules. The em price can be relative to the father or mother font length and can modify because the font length adjustments.
Here’s an instance of a textual content module with a border of 1em. I additionally give the module a padding of 1em. Realize what occurs whilst you modify the font length. The border (and padding) will trade because the font length will increase and reduces.
This additionally works with button borders. Here’s an instance of a button with a border width of 0.5em. Realize the way it scales with the dimensions of the button textual content.
The usage of vw and vh for Borders
If you’re in need of to scale your border width in accordance the dimensions of your browser viewport, you’ll use the vw or vh period unit. I haven’t observed this finished a lot, however it’s fascinating to take into consideration.
Textual content
Prompt Period Devices: px, em, and perhaps vw
The Divi Builder Lets you upload customized period values to customise your textual content. Those choices come with textual content length, letter spacing, and line-height.
You’ll use any of the CSS period values for those textual content choices, however for this publish I’m going to hide the commonest – px, em, and vw.
The usage of px for Textual content Dimension
It’s common to set your font sizes to a pixel price as a result of you wish to have the ones sizes to stay constant. You’ll nonetheless trade the font length in line with browser width the usage of media queries. Divi makes this truly simple to do by way of permitting you to go into 3 other tool font sizes inside all Divi modules.
The usage of px for Letter Spacing
It’s common to make use of px for letter spacing. Simply be aware that when you plan on converting the dimensions of your font significantly between gadgets, you are going to most certainly have to regulate the letter spacing as smartly. To make letter spacing scalable together with your textual content length, it is advisable to use the em period price as a substitute.
The usage of px for Line Peak
The px unit isn’t the most suitable option for line peak as it turns into a bother to switch the road peak whenever you trade the font length. This is the reason em is typically used (extra in this later).
The usage of em for font sizes
You’ll use em for customized font sizes. The price of 1em will equivalent the font length of probably the most rapid father or mother tag. When including an em price to a textual content component in a module, probably the most rapid father or mother tag font length is no matter you may have set within the theme customizer. So, in Divi, in case you have your frame font set to 16px, 1em is the same as 16px, 2em is the same as 32px, and so forth.
The usage of em for Line-Peak
Let’s say you might be the usage of a textual content module and alter the frame font to 18px. Since em is at all times relative to probably the most rapid father or mother tag, the price of em adjustments for that module and now 1em equals 18px. That is useful to grasp why Divi units the line-height to an em period price. Surroundings your textual content font of 18px to have a 1.5em price will set the line-height to 27px (1.7 occasions 18px). So if making a decision to switch the font length afterward, the em line peak will modify accordingly.
The usage of em for letter spacing
The usage of em for letter spacing may also be helpful and I might certainly counsel it. The primary reason why to make use of em for letter spacing is in order that the gap will building up and reduce relying at the length of your textual content.
Take a look at the letter spacing within the following symbol. Realize how the 5px letter spacing doesn’t trade as you convert the dimensions of the header textual content.
Now take a look at the similar instance textual content the usage of 0.1em for the letter spacing. If the font length is 50px, 0.1em goes to equivalent 5px. However when you lower the font length right down to 25px, 0.1em goes to equivalent 2.5px.
The usage of rem for Textual content Components
The usage of rem is typically extra predictable than the usage of em as a result of it’s at all times relative to the basis font length. The basis component on your html tag. That is the tag that wraps all of your web page. In Divi the html is in truth set to have a font-size of 100%. This may occasionally appear somewhat abnormal. I imply, 100% of what precisely? In reality, that is lovely commonplace observe. You would possibly not know this however environment your root/html font length to 100% is a option to claim the similar font length as your browser. Maximum browsers have a default font length of 16px, so, in Divi, the price of 1rem is in truth 16px (or the font length set on your browser settings). It isn’t what you may have set because the default frame textual content within the theme customizer.
As an example, Realize what occurs after I upload 1rem to the frame textual content length of a textual content module. The textual content in truth will increase in length from 14px (what I’ve set as theme frame font within the theme customizer) to 16px (my default browser font length).
Now if I modify my browser font length to one thing better, the textual content in that textual content module can even building up.
So if you have an interest in having textual content that adjusts to the customers browser settings, the rem price is also useful. However, for probably the most phase, the usage of rem in Divi will simply be extra bother than it’s price except you wish to have to begin converting the elemental framework of the Divi Theme (ie. trade the basis font-size to one thing else).
The usage of vw for Textual content Components
That is possibly probably the most fascinating period price to make use of for textual content. I’m now not going to enter nice element at the probabilities right here, however I will be able to introduce you to the speculation.
The usage of vw for font length means that you can utterly scale your textual content together with your browser window. This may also be helpful if need the road period to stay consistent.
Glance what occurs to this identify textual content after I modify the dimensions of my browser viewport/window. The identify has a textual content length of 15vw (which is 15% of the broswer viewport).
If you happen to sought after to take this a step additional, you’ll set a customized em padding for the identify that may robotically scale with the identify textual content. This may increasingly best paintings when you observe the em padding to the identify tag so you would have to upload it to the customized CSS identify field below the complex tab.
Realize how the padding above and beneath the identify scales with the identify.
Particular Use Instances
The usage of vh to Create Complete Peak Headers
The Fullwidth Header Module has an technique to trade the format of your header to fullscreen. This makes certain your header takes up all the display when the web page a lot, regardless of the display length.
You’ll accomplish this identical impact with any phase the usage of the divi builder. All it’s a must to do is pass to the Segment Settings complex tab and input the next customized CSS within the Primary Part enter field:
peak: 100vh;
If you happen to haven’t guessed already, this makes certain your phase spans the whole peak of the browser viewport.
The usage of vw and em to Create Huge Scalable Buttons
If you happen to don’t already know, the default padding for Divi’s buttons is as follows:
0.3em Best, 1em Proper, 0.3em Backside, 1em Left
However you’ll trade this by way of adjusting the padding of the button module to one thing like this:
0.5em Best, 2.5em Proper, 0.5em Backside, 2.5em Left
Your customized padding will scale with the dimensions of your button font.
Then you’ll trade your font length to a price of 4vw.
This may increasingly show a truly massive button on massive displays and scale well as you modify your browser window. So as to stay the button from scaling too small on telephones, you’ll set a pixel price for your button for smartphones.
Different Useful Sources
- CSS Length Units
- The Lengths of CSS
- Custom CTA Sections Using vw
- Better Mobile Design
- Responsive and Fluid Typography with vh and vw units
Let’s Evaluation. Shall We?
Width – Use percentages for customized widths. Additionally, pixels are applicable within the Divi builder as a result of it is a max width price and can deal with responsiveness on cellular.
Margin – Since Divi makes use of percentages already so as to add margins between columns on your topics grid, it might make sense to stay the usage of percentages except you may have a selected reason why to not. You’ll additionally use vw and vh for margins so long as you recognize what you might be doing.
Padding – You’ve numerous choices that paintings smartly for padding. Basically, I might use percentages for padding rows and sections for consistency. However I might use em for module padding with a view to scale with font sizes. Pixels are at all times just right for padding however in my view must be have shyed away from except you may have a selected design reason why to take action.
Font Dimension – Use pixels for customized font length. Em may be applicable in case you are in need of the font length to be relative to the father or mother font length, making it more uncomplicated to switch all font sizes by way of converting the father or mother. The usage of vw for font length is a pleasing possibility for headers or for the ones designs that want textual content to scale with the browser viewport.
Letter Spacing – Use em for letter spacing with a view to make it scale when converting the font length afterward.
Line Peak – Use em for line peak in order that it adjusts to the font length.
Borders – You’ll’t pass incorrect the usage of pixels for borders, however don’t forget about the opposite choices. The usage of em will modify your border to the local font length (helpful for buttons). And the usage of vw for borders is an engaging idea.
Ultimate Ideas
Fortunately, the Divi builder has a ton of integrated options that can help you construct gorgeous responsive web pages with no need to be a professional in CSS period devices. However, it’s useful to grasp what period devices to make use of each time you do make a decision to make customizations for your web page. Having your web site glance nice on all display sizes is an absolute will have to and the usage of the suitable period values will make your task so much more uncomplicated down the street.
I am hoping this information used to be useful. And as at all times, I sit up for listening to from you within the feedback.
Cheers!
The publish A Guide to Understanding and Applying CSS Length Units in Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design