In the Editor you can add various types of backgrounds and effects to a column as well as modify its general settings and functionality.
What is a column?
Columns go inside rows and are placeholders for modules. Inside a row you can have up to 12 columns for organizing your content. Columns help you better structure and align content elements on your pages. Read more about rows, columns and modules in this article.
How do I modify a column?
When working in the Editor, hover on the column you want to modify and the green "Column" label will appear in the top left corner of the column. Hover over the label and a number of settings appear in the dropdown.
Background color and image
A column background can have various elements added to it.
Background color: Add a single color as the column background. You can adjust the degree of transparency if you wish.
Background image: Add an image as the column background. You can choose whether you want to use your cover image from Global Data or upload a new one directly on the column. You can adjust how you want the image to repeat within the column, its size and position to make sure you find the best way of displaying the image to your visitors.
Apart from the standard image settings, you can also determine how the background image should behave within the column when a visitor scrolls down the page. If you enable Fixed position, the image won't move when a visitor scrolls down.
Clip background to padding: With this option enabled, the background color or image will only extend as far as the padding inside the column. If it's not enabled, the background color or image always covers the entire content area up until where the border begins. Clipping background to padding allows you to create a transparent gap between border and background as you can see in the example below.
Example: with clip background to padding enabled (notice the gap between background and border inside the column; padding is set to 40 on all sides of the column)
Example: with clip background to padding disabled (notice that the column background extends all they way to the border)
Add a background filter on top of your column background color or image in order to dim down very colorful images or images with sharp contrasts. It's also a good way of making sure that any text you have on the column is easy for visitors to read. Remember you can also adjust the degree of transparency on your background filter.
Example of background filter in use on top of an image:
If you're familiar with image editing software, you can also add a background image as a filter. Uploading transparent overlays created with an image editing software enables the creation of multi-colored or pixel pattern overlays that add vibrance and complexity to your image.
Here are a few examples of image overlays created in image editing software and uploaded to the Editor as a background filter image:
Add one of four animation types to a column which trigger once the visitor views the column in their browser.
Type 1: Fade in left
Type 2: Fade in right
Type 3: Zoom in
Type 4: Bounce in