Margins, Paddings, Borders
Jupiter X customizer lets you add custom margin, padding, and border to elements in various pages and places. In this article, we’ll explain each option and show an example of each of those options.
All of the settings below can be found in WordPress left menu, Appearance > Customize.
In this article
What is Margin?
The margin option is used to create space around elements, outside of any defined borders.
With customizer, you have full control over the margins. There are options for setting the margin for each side of an element (top, right, bottom, and left).
Where can I see the Margin option in Jupiter X?
It’s available everywhere you need to set margins. In customizer, the option to add margin will look like this:
One thing to mention here is that the elements you see on your website are divided into two parts:
- Theme parts.
- Elementor elements.
Here we are only explaining the margins which you can set via the Theme Customizer. If you are looking for Element margins, you need to follow up the Elementor tutorial on how to set margins.
Remember that the default value may not be 0 all the times and in case you want to have no margins, you may need to set 0 manually in the value box.
How can I set margin only for mobile devices?
Sometimes you need to set margins differently on different devices. In Customizer, there is a tool which let’s you do it. But it’s only available only for the places that it needs different margins. So, whenever you saw this icon in front of margins pane, it means that you can choose different devices and set different margin sizes in those devices.
Example: Adding Margin to the logo
To add margin through customizer:
The padding option is used to generate space around an element’s content, inside of any defined borders.
Like Margins, you have full control over the padding using Customizer. There are options for setting the padding for each side of an element (top, right, bottom, and left).
In customizer, the option to add padding will look like this:
Almost all of the elements in your website can have customized padding.
Like Margins, Paddings are also having the responsive options. So you can simply set different paddings for different devices.
Example: Set Padding to the whole page
The border option allows you to specify the style, width, and color of an element’s border.
In which places I have the Border option?
It is available on every container. So, for example, you have it on Author Box, Featured Images, Sidebar and etc.
There are options for setting the border width, radius (to make rounded corners), color and style.
In customizer, the option to add border will look like this:
But in this picture, we only have the Border Width, Border Radius, and Border color options. We also have Border Style option in few places such as Sidebar Divider option.
Body Border is also one kind of Border which applies to the whole website, Making a “frame” kind of look.
In order to add a Body Border:
How can I create a rounded corners?
You can set the Border Radius value to a higher value rather than 0. That’s the only trick which will help you create a rounded corner.
How can I set 50% of border-radius?
Using the Unit Selector, you can switch between the units. So, not only you can set a constant value in pixels, but you can set them by percent and rem as well. This is good when you want to make a cycled border around your objects.
Can I select different Border options for mobile devices?
Actually no. It’s not available for all the options. In case you needed to specify a border for a specific resolution, you need to do it using Custom CSS. Anyway, you can set responsive borders in Elementor, but not in the Theme Customizer. Feel free to search for similar examples into community forums or contact our support team for the further assistance.
Can I have only the Border Right or Border Left?
It’s possible to do it for the Elementor elements but not in the Theme Customizer. So if you are looking for a way to adjust the border of a theme container only to the left, or right, you can not do it in the Customizer, but if it was an Element in your page content which was created by Elementor, you can simply do it by providing the borders like this: