Column Element
The Column Element sits inside a container and holds the actual content: titles, text, images, buttons and every other element. A container can hold as many columns as you like; their widths decide how many sit side by side, and the container’s flex settings decide how they line up and how much space is between them.
Each column has its own layout for the elements inside it, its own width per screen size, spacing, background, border and shadow. A whole column can become a link or get a hover effect, and on the Extras tab it can stick while the page scrolls, be positioned absolutely, or get filters, transforms and motion effects.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Column Element
Add columns to a container and set each one’s Width on the Design tab. The width is set per screen size: large, medium and small. Pick a fraction such as 1/3, or enter a percentage, a pixel value, a calc() expression or auto. When you leave medium or small empty, the Column settings in Global Options decide: by default a column keeps its large width on medium screens and becomes full width on small screens. Order changes the sequence of the columns on medium and small screens, for example to show an image above its text on phones. Flex Grow and Flex Shrink let a column take up remaining space or give some up when space runs short, and Maximum Height caps its height.
Spacing works in three layers. The container’s Column Spacing is split between the left and right side of every column; the column’s own Column Spacing on the Design tab overrides the left and right side per screen size. Margin adds space above and below (the default comes from the column margins in Global Options), and Padding adds space inside the column, again per screen size. The Background tab offers a color, gradient, image or a background slider, with color and image settable per screen size.
On the General tab, Content Layout decides how the elements inside the column are arranged. Column stacks them from top to bottom, Row places them side by side, and Block switches flex positioning off so floated elements work. Content Alignment distributes the elements when the column is taller than its content. With Row, Content Vertical Alignment and Content Wrap become available. Gap sets the space between the elements. Alignment overrides the container’s Column Alignment for this column only. Link URL turns the whole column into a link. Position Sticky on the Extras tab keeps the column in view inside its container while the page scrolls, using the browser’s own sticky positioning.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Alignment | Defines how the column should align itself within the container. Overrides what is set on the container. |
| Content Layout | Defines how the column content should be positioned. If block is selected it will not use flex positioning and will instead allow floated elements. |
| Content Alignment | Defines how the column content should align. Works only with full height columns. |
| Content Vertical Alignment | Defines how the column content should vertically align. |
| Gap | Enter values including any valid CSS unit, for example 20px. |
| Content Wrap | Defines whether elements are forced onto one line or can wrap onto multiple lines. |
| Column Spacing | Controls the column spacing between one column to the next. Enter value including any valid CSS unit, for example 4%. |
| Center Content | Set to “Yes” to center the content vertically. Equal heights on the parent container must be turned on. |
| Column HTML Tag | Choose column HTML tag, default is div. |
| Link URL | Add the URL the column will link to, for example http://example.com. IMPORTANT: This will disable links on elements inside the column. |
| Link Target | _self = open in same browser tab, _blank = open in new browser tab. |
| Link Description | Add descriptive text to the link to make it easier accessible. |
| Ignore Equal Heights | Choose to ignore equal heights on this column if you are using equal heights on the surrounding container. |
| Column Visibility | Choose to show or hide the column on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
| Attributes | Add custom HTML attributes to the element. |
Design
| Heading | Description |
|---|---|
| Width | Column width on respective display size. Enter values including any valid CSS unit, for example 4%. |
| Maximum Height | Set a maximum height for the column. Leave empty or set to “none” for automatic sizing. |
| Flex Grow | Flex grow specifies how much of the remaining space in the container should be assigned to the column. |
| Flex Shrink | Flex shrink specifies how much the column may shrink within the container if not enough space is available. |
| Order | Column order on respective display size. |
| Column Spacing | Enter values including any valid CSS unit, for example 4%. Leave empty to inherit from container or Global Option. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Padding | Enter values including any valid CSS unit, for example 4%. |
| Hover Type | Select the hover effect type. IMPORTANT: For the effect to be noticeable, you’ll need a background color/image, and/or a border enabled. This will disable links and hover effects on elements inside the column. |
| Column Border Size | Controls the border size of the column element. |
| Column Border Color | Controls the border color of the column element. |
| Border Style | Controls the border style. |
| Border Radius | Enter values including any valid CSS unit, for example 10px. IMPORTANT: In order to make border radius work in browsers, the overflow CSS rule of the column needs set to hidden. Thus, depending on the setup, some contents might get clipped. |
| Box Shadow | Set to “Yes” to enable box shadows. |
| Box Shadow Position | Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px. |
| Box Shadow Blur Radius | Set the blur radius of the box shadow. In pixels. |
| Box Shadow Spread Radius | Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels. |
| Box Shadow Color | Controls the color of the box shadow. |
| Box Shadow Style | Set the style of the box shadow to either be an outer or inner shadow. |
| Z Index | Value for the z-index CSS property of the column, can be both positive or negative. |
| Overflow | Value for column’s overflow CSS property. |
Background
| Heading | Description |
|---|---|
| Background Type | Use filters to see specific type of content. |
| Background Color | Controls the background color. |
| Gradient Start Color | Select start color for gradient. |
| Gradient End Color | Select end color for gradient. |
| Gradient Start Position | Select start position for gradient. |
| Gradient End Position | Select end position for gradient. |
| Gradient Type | Controls gradient type. |
| Radial Direction | Select direction for radial gradient. |
| Gradient Angle | Controls the gradient angle. In degrees. |
| Background Image | Upload an image to display in the background. |
| Skip Lazy Loading | Select whether you want to skip lazy loading on this image or not. |
| Background Position | Choose the position of the background image. |
| Background Repeat | Choose how the background image repeats. |
| Background Size | Choose the size of the background image or set a custom size. |
| Background Custom Size | Set the custom size of the background image. |
| Background Blend Mode | Choose how blending should work for each background layer. |
| Slider Images | Upload background slider Images. |
| Random Order | Select whether you want to order the selected images randomly. |
| Loop | Enable background slider Loop. |
| Pause On Hover | Enable to pause background slider on hover. |
| Slideshow Speed | Controls the speed of the slideshow. 1000 = 1 second. |
| Animation | Select background slider animation. |
| Slider Direction | Select slide animation direction. |
| Animation Speed | Controls the speed of slide transition from slide to slide. 1000 = 1 second. |
| Blend Mode | Choose how blending should work for background slider. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Position Sticky | Turn on to have the column stick inside its parent container on scroll. NOTE: this feature uses the browser native sticky positioning. Depending on the browser and specific setup the feature may not be available. |
| Responsive Position Sticky | Choose at which screen sizes the container should be sticky. |
| Sticky Column Offset | Controls how far the top of the column is offset from top of viewport when sticky. Use either a unit of measurement, or a CSS selector. |
| Position Absolute | Turn on to have the column in absolute position. |
| Absolute Offset | Enter values including any valid CSS unit, for example 4%. |
| Filter Type | Use filters to see specific type of content. |
| Hover Element | Select which element should be hovered to apply the filter hover options. |
| Hue | Filter hue. |
| Saturation | Filter saturation. |
| Brightness | Filter brightness. |
| Contrast | Filter contrast. |
| Invert | Filter invert. |
| Sepia | Filter sepia. |
| Opacity | Filter opacity. |
| Blur | Filter blur. |
| Transform | Use transform options to scale, translate, rotate and skew the element. |
| Scale X | Set the scale in the horizontal direction. |
| Scale Y | Set the scale in the vertical direction. |
| Translate X | Set the translate in the horizontal direction. in pixels. |
| Translate Y | Set the translate in the vertical direction. in pixels. |
| Rotate | Set the rotation of the element. |
| Skew X | Set the skew in the horizontal direction. |
| Skew Y | Set the skew in the vertical direction. |
| Transform Origin | Set the location of origin point for transform. |
| Transition Duration | Set transition duration in milliseconds. |
| Transition Easing | Select transition easing. |
| Transition Custom Easing | Set transition custom easing, use this website to create custom easing. |
| Motion Effects | Add Motion Effects for the element. |
| Apply Motion Scroll Effects On | Choose which devices the scroll effects will be applied to. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- A column link covers the whole column and switches off links on the elements inside it; the same happens with a Hover Type. Fill in Link Description, because it is the only text screen readers get for that link.
- A sticky column needs room to move: it has to be shorter than its container. Set the column’s Alignment to Flex Start rather than Stretch, otherwise it fills the full height and cannot stick.
- Position Absolute is ignored while Position Sticky is on.
- A Border Radius sets the column’s overflow to hidden unless you choose an Overflow value, so content that sticks out can be clipped.
- If you combine a semi-transparent background color with a background image and leave Background Blend Mode untouched, the column uses the Overlay blend mode so the color tints the image.
- Element Sticky Visibility shows or hides the column depending on whether its sticky parent container is currently stuck, for example a smaller logo in a sticky header.