Join our Affiliate Program to earn 30% from each sale! Earn now

Columns are located inside the rows, divide them vertically, and they are containers for your blocks. Columns can have different widths and vertical alignment. Columns also can have background color or image.

This is a sample row that contains 3 columns and the second and the third column have some background colors applied.

Row with 3 columns

Cog Column Settings

Access the Column Settings window by clicking the smaller cog (titled Column Settings). Each column has its own independent settings.

Column settings

Explanations of each of the options from the screen above are following.

Background Image

You can select or upload a background image for the column. To use this in front-end, you must enable option Content > Articles > Options > Editing Layout > "Frontend Images and Links".

Background Color

Select a background color for the column.

Background Image Repeat

The column background image will be repeated if it's smaller than the row width. You can also select not to repeat it, or to repeat it only horizontally or only vertically.

Background Image Position

The column background image is positioned top left by default. You can also select a different positioning for the background image.

Background Image Size

Column background image size depends on the image size by default. You can also select to cover the row with a background image or to contain the image.

Background Image Attachment

By default, the column background image will be scrolled with the rest of the content when the user scrolls the page. However, it's also possible to make the background image fixed.

Margin

Explicitly sets the margin values to the column. You should enter a value and units. For example, valid values are 15px, 1%, 1em, etc.

Padding

Explicitly sets the padding values to the column. You should enter a value and units. For example, valid values are 15px, 1%, 1em, etc.

Vertical Align

This option has effects if you have two or more columns in a row. By default, the columns are vertically aligned to the top. You can also align them to the center or to the bottom. There are also options related to the spacing of the blocks inside a column. "Space Around", "Space Between" and "Space Evenly" options have an effect if you have two or more blocks in a column.

Animation Type

If you want to add an entrance animation to the column, select animation type here.

Animation Delay

Enter animation delay in milliseconds here. For example, if you enter 1000, the column entrance animation will start 1 second (1000 milliseconds) after the column entered the screen.

IncreaseDecrease Increase/Decrease Column Width

Using the increase and decrease icons, you can increase or reduce the width of the column. Sparky Page Builder uses a 12-column grid. This means that a column has a minimum width of 1/12 of the row width. This also means that each row can contain up to 12 columns.

ArrowArrow Move Column

You can move the column and its contents to the left and to the right inside a row. Just click on one of the icons titled Move Left and Move Right. You can also drag a column and drop it to the new position. You can't move the columns from one row to another.

Trashcan Delete Column

Clicking the trashcan icon will delete the column and also its contents (blocks). So, be careful with this operation! If you want to keep some of the blocks from column you are about to delete, move them to another column first.