Intro to Styling

When it comes to styling options, the editor allows you to work with four main high-level elements that differentiate overall website design - Spacing, Border, Background and Typography. These are the variables that will determine the general look and feel of your website. Watch the video below for a quick tutorial on the topic.

 


1. Styling - Spacing

When styling rows, column or modules, there are two spacing settings available - Margin and Padding. To change the spacing, go to the menu of the element you are working on and find the Spacing option.

 


1.1. Spacing - Margin

Margin adjusts the space outside of an element.

 


1.2. Spacing - Padding

Padding adjusts the space inside of an element.

 


2. Styling - Borders

There are multiple elements in which you can customize borders, including rows, columns, and modules like text, buttons or images. To add or change borders, click on the element, choose Edit and find the Border option under the Styling tab. When customizing borders, the following options are available: color, width, style and radius.

 

2.1. Color and width

These options allow the alteration of the color and pixel width of the border.

 

2.2. Style

There are 8 different border styles which can be chosen from the drop down menu - solid, dotted, dashed, double, groove, ridge, inset and outset. 

 

2.3. Radius

This option allows you to round the corners of the element.

 

3. Styling - Background

There are two options when changing an element's background - choose a solid color or upload an image from the library. To change the background, select the menu of the element, choose Edit and find the Background option.

 

3.1. Background Media

When choosing an image as a background, there are a lot of variables to take into account depending on the image's composition, size, type, etc.

 

3.1.1. Repeat

You can use this 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.

 

3.1.2. Size

Regarding size, there are three options:

Normal - keeps the picture at its normal size.

Cover - the image will expand to fill the container but not repeat itself.

Contain - the image will scale and repeat to fill the container.

 

3.1.3. Positioning

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

 

3.1.4. Fixed Position & Parallax Scrolling

When Fixed Position is enabled, the picture won't move while a user is scrolling on the page. When Parallax Scrolling is enabled, the picture will 'move' (different areas of the image become visible) as the user is simultaneously scrolling, following the scrolling direction but moving at a different rate to the scroll speed.

 

3.1.5. Background Clip

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.

 

3.2. Background Video

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

 

3.2.1. Enable Background Video

You should select this option if you want to display a video as the background for the row or column. The video won't play unless you enable this option.

 

3.2.2. Video URL

Paste the link of the video you wish to add as a row background. Please note that the only accepted URLs are: MP4, WEBM, OGG, YouTube and Vimeo.

 

4. Styling - Typography

The customization of text can be done both globally and at the page level. The customization options include font color, size, family and weight, and also letter spacing and text alignment. To learn more about text alterations, please click here.

 

Anything we’ve not covered?

Contact Us