Styling general elements (spacing, border, background)

When it comes to styling options, the Editor allows you to work with three main, high-level elements that differentiate the overall website design - Spacing, Border and Background. These are the variables that will determine the general look and feel of your website.

 

Spacing

Padding and margin add space to the inside or outside of an element. Padding creates space on the inside of an element, while margin creates space on the outside of an element, pushing other elements away. These spacing options make it possible to refine your layout to your exact needs.

1__padding_and_margin.png

 

Example of padding

The button has additional left, right, top and bottom padding applied, affecting the inside spacing of the element.

2__Padding_example.gif

Example of margin

The first button has bottom margin applied, pushing the button directly below it further away.

3__Margin_example.gif

Adding spacing to individual sides

To adjust the margin or padding on one side of an element, you are able to click in the field you want to adjust and drag the slider to the desired value. To do so, you must ensure the fields are unlocked as you can see in the visual below.

You can also click into a padding or margin field and type in the value manually.

4__Unlocked-Padding-and-Margin.png

 

Adding spacing to all sides

To adjust the margin or padding on all sides of an element, you are able to click the lock icon which will initiate an overlay, asking you to set the value for all four fields (left, top, bottom and right).

5__Set-Value-for-all-sides.png

 

Border

There are multiple elements in which you can customize borders, including rows, columns, and modules like Text modules, Button modules or Image modules. When customizing borders, the following options are available: style, color, thickness and radius. The style of these options can be applied uniquely to normal and hover state.

 

Style

There are 3 different border styles that can be applied to elements - solid, dashed and dotted.

 

Color and thickness

These options allow the alteration of the color and pixel width of the border. The border thickness can be applied to any and all sides of the element.

 

Radius

This option allows you to round the corners of the element. The border radius can be applied to any and all sides of the element.

 

Background

There are two options when changing an element's background - choose a background color or upload an image. After an image is uploaded, more options present themselves and there are variables to take into account depending on the image's composition, size, type, etc.

 

Image repeat

You can use this option to repeat a background image, vertically, horizontally or both ways. Bear in mind if your background is set to cover, contain, or is larger than the area of the container, then you may not see the background repeating.

 

Size

Regarding size, there are three options:

  • Normal - keeps the picture at its normal size.
  • Contain - the image will scale and repeat to fill the container.
  • Cover - the image will expand to fill the container but not repeat itself.

 

Positioning

Positioning allows the placement of the picture as desired, making visible the portion of the image that is intended.

 

Fixed position

When Fixed position is enabled, the background image won't move while a user is scrolling on the page, creating a layered effect.

 

Clip background to padding

This option is only available on columms. Enabling this option will clip the background image based on the padding settings. The larger the padding, the more the background image will be clipped. Read more about this setting here.

 

Background filter

Background filter can be applied to any row or column. Enabling this option will allow you to apply a color, image or both over the background style. Often times repeating patterns or a semi-transparent color are used to create unique styling effects. Read more about this setting here.

 

Video background

It is possible to have a video automatically playing (set to repeat/loop) as the background of a row. Read more here.

Was this article helpful?
0 out of 0 found this helpful