Skip to main content

Page Builder Columns

Columns divide a row into the slots that elements sit in. Each one carries its own padding, background, shadow, animation and responsive rules, which is why most of the styling in a Salient layout happens on the column rather than on the row or the element.

Click the pencil icon in the middle of a column to open its settings. The sections below follow the order of the tabs and groups in that panel.

  1. Click the pencil icon in the middle of a column to open its settings.

Structure​

Column Padding​

Padding Type decides which set of fields you get.

  • Simple A single percentage from the dropdown, 1% to 20% or None, applied through Column Padding Position. Percentages scale with the column, so the spacing stays proportional at every width.
  • Advanced Four numeric fields, top, right, bottom and left, with a lock icon to constrain a pair to the same value.

Either way, the three icons beside the field switch between desktop, tablet and phone, and each device keeps its own value.

The Salient Column Padding dropdown set to 5%, with the desktop icon selected among the three device icons

Simple padding, with the desktop device icon selected.

Column Padding Position narrows Simple padding to one side or a pair: All Sides, Top, Right, Bottom, Left, Left + Right, Top + Bottom, or any of the four corners such as Top + Right.

Margin​

Margin adds space outside the column, on all four sides, per device, with the same lock icons as Advanced padding. Negative values are accepted, which is how a column is pulled outside its normal flow to overlap the row above.

The Salient column Margin fields with device icons, Top set to negative 80px and the other three sides empty

A negative top margin, pulling the column up over the row above it.

Transform​

Translate Y, Translate X and Scale move and resize the column without affecting the layout around it, so nothing reflows to follow. Each is set per device.

How elements sit inside the column​

  • Column Element Direction Whether the elements in the column run Stacked Vertically, the default, or Inline Horizontal. Set per device, so a row of inline items can stack on a phone.
  • Column Element Alignment For inline columns only: aligns the elements to Center, Top or Bottom of the column.
  • Column Element Spacing The gap between elements in the column: Default, None, or a preset from 5px to 50px. A faster way to even out spacing than setting a margin on each element.
  • Centered Content Centers all text and inner elements in one move. Some elements carry their own alignment setting and ignore it; set those individually.
  • Text Align Left, center or right for the column's text, per device.

Sticky Content​

Sticky Content pins the column in place while the rest of the row scrolls past it, which is how a caption stays beside a long list of images.

  • Sticky Functionality CSS Powered or JavaScript Powered. CSS performs better and is the one to reach for first; the JavaScript method handles tall content better.
  • Sticky Alignment Where the column pins: Top, Middle or Bottom.
  • Sticky Column on Mobile Keeps the behavior on phones, where it is off by default.

Responsive Options​

The Responsive Options tab decides the size and position of the column in each viewport. A column displays at 1/1, the full width, on tablet and phone unless you say otherwise.

The column settings Responsive Options tab with Offset, Width and Hide on device controls for four color coded breakpoints

The Responsive Options table, one row per breakpoint.

Width​

Width sets the column to a new fraction on a given device. Three columns that are 1/3 on desktop and should stay 1/3 on a phone need 1/3 setting on every viewport, not just the first.

The responsiveness table, Width column outlined in blue: 1/3 for desktop, small desktop and phone, no dropdown for tablet

Width set on every viewport that offers it.

The tablet viewport has no width dropdown of its own. That is a WPBakery limitation rather than a Salient one, so Salient adds a way around it: Tablet Column Width Inherits From, directly under the table, chooses which viewport tablet copies.

Offset​

Offset shifts the column sideways from where it would otherwise land. You need it less often than Width, in two situations:

  • A column in the row is hidden on some device, and the ones still showing need nudging to sit centered.
  • The widths you set add up to more than 1/1, so a column wraps onto a line of its own and sits left aligned.

The second case is the common one. Three 1/3 columns set to 1/2 on tablet push the third onto its own line; a 1/4 offset centers it there.

Three 1/3 desktop columns set to 1/2 on tablet landscape, the third wrapping to a second line, left aligned

Without an offset The third column wraps to its own line and sits left aligned.

The third 1/2 column centered on its own tablet landscape line, connected to Offset 1/4 and Width 1/2 dropdowns

Offset 1/4 Alongside Width 1/2, it centers on the line.

Hide On Device​

Hides the column on the chosen viewport. It is hidden with CSS and stays in the HTML, so it still downloads: use it for layout, not to keep something off a phone entirely.

Background​

Background layers​

A column's background is a stack.

1Elements2Color overlay3Background color4Image or video

Note the order: in a column the background color sits above the image, which is the opposite of a row. That is what makes the hover tint below possible.

Background Color​

Because the color sits over the image, its opacity can be animated on hover.

Set Opacity to 0.8 and Hover Opacity to 0.4 and the tint starts at 80%, then thins to 40% under the pointer so more of the photo shows through. Matching values, such as 0.5 and 0.5, hold the tint steady. Background Color Hover changes the color itself on hover rather than just its opacity.

Background Image​

Upload an image with the Upload image button in the column's Background tab.

  • Preload Image Preloads the image so it arrives sooner. Worth it for a column above the fold, not for the rest.
  • Background Image Type CSS Background Image or Image Tag. An image tag lets the browser pick a responsive size, so it is the better choice above the fold.
  • Background Image Position Where the image anchors inside the column. The default is left top.
  • Background Image Stacking Order Behind Background Color, the default, or In Front of Background Color.
  • Scale Background Image To Column Scales the image to fill the column. Leave it on unless you are using a pattern meant to tile.
  • Background Image Loading Default, Lazy Load or Skip Lazy Load. Anything above the fold wants Skip Lazy Load. See the performance guide.

Video Background​

  • MP4 File URL Required when self hosting.
  • WebM File URL Also required, for cross browser coverage.
  • OGV File URL Optional third format.
  • Video Preview Image The still shown in place of the video on mobile. Used when the theme option Disable Video Backgrounds On Mobile Devices is on, under Theme Options > General Settings > Functionality.
  • Self Hosted Background Video Loading Default or Lazy Load.
If the video does not play

Nothing plays, on any device. Some hosts will not serve video files until the media types are declared. Add this to the .htaccess file at the root of your WordPress install:

AddType video/mp4 .mp4
AddType video/mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm
AddType video/webm .webmv

To tell your files apart from your server, point the column at a video we host and see whether that plays: https://themenectar.com/videos/video-test.mp4. If it does, the server is fine and your own files need re-encoding, through online-convert to MP4 and to WebM.

It plays on desktop but not on mobile. Power saving and data saving modes block autoplay outright, on any video, on any site. Nothing overrides it, so always supply a Video Preview Image for those visitors.

Backdrop Filter​

Backdrop Filter applies an effect to whatever sits behind the column rather than to the column itself. Set it to Blur and give it a Blur Amount, and a semi-transparent column blurs the row background showing through it, the frosted glass effect.

Mask​

The foot of the Background tab cuts the column's background layer to a shape rather than a rectangle, or fades it out under a blur. It masks the background only; the elements in the column are untouched. See Mask.

Color Overlay​

The color overlay sits above the background image or video and below the column's content. Color Overlay Type decides how you build it, and the two modes share nothing: each shows its own set of fields.

Advanced​

Advanced is the mode to build with. The overlay is a gradient you edit directly: drag a stop along the bar to move it, click the bar to add one, click a stop's cross to remove it, and give each stop its own color and opacity.

The Salient column settings Color Overlay tab in Advanced mode: a gradient editor with a draggable blue stop at the left and an orange stop at the right, with Gradient Type set to Linear and a Gradient Angle dial

Advanced mode. The stops under the preview are the overlay.
  • Gradient Type Linear or Radial.
  • Gradient Angle Linear gradients only. Set it on the dial or as a number of degrees, read the way CSS reads them: 90 runs the gradient left to right.
  • Gradient Position Radial gradients only. Where the center of the radial sits: Center, any of the four sides, or any of the four corners.

Advanced has no Overlay Strength, because opacity belongs to the individual stops.

Simple​

Simple came before the gradient editor and is kept for columns built against it. It gives you one color, or two with Enable Gradient ticked, running in one of five fixed directions.

  • Color Overlay and Color Overlay 2 The two colors. The second appears only with Enable Gradient on.
  • Overlay Strength How opaque the overlay sits over the layers beneath it: Light 0.3, Medium 0.5, Heavy 0.8, Very Heavy 0.95, Solid 1.0. One value for the whole overlay.
  • Gradient Direction Left to Right, Left Top to Right Bottom, Left Bottom to Right Top, Bottom to Top, or Radial.
Build new columns in Advanced

Anything Simple produces, Advanced produces too, with control over where the colors sit and how opaque each one is. Existing columns keep working on Simple; switching one over replaces its settings rather than carrying them across.

Shadow and Rounded Edges​

  • Box Shadow None, Small Depth, Medium Depth, Large Depth, Very Large Depth, or Custom, which opens a generator for offset, blur, spread and color.
  • Border Radius Rounds the column's corners.

Puts a link over the whole column. Anything in the column becomes part of one clickable target, which is how a card built from separate elements behaves as a single card.

  • Column Link Screen Reader Text What a screen reader announces for the link. Worth filling in: without it, a link wrapping a heading and an image can read as an unlabeled link.
  • Column Link Functionality Open in same window or Open in new window.
Hover effects stop working

With a column link set, hover effects on the elements inside the column no longer fire, because the column's own link takes the pointer. Build the hover state on the column instead, with Background Color and Hover Opacity.

Animation​

Column Animation Type​

Animates the whole column, its layers and everything in it.

  • Triggered Once When Visible Plays the animation once, as the column scrolls into view.
  • Scroll Position Animation Ties the movement to scroll position, so it tracks the visitor rather than playing through. Movement picks Move Y Axis or Move X Axis, and Movement Intensity sets how far.
  • Scroll Position Advanced The same idea with explicit start and end states. Animation State switches between Start and End, and each gets its own Translate Y, Translate X and Scale.

Persist Movement On Mobile keeps scroll-driven movement on phones, and Viewport Trigger Offset sets, as a percentage of the viewport, where the animation begins and ends.

Background Layer Animation​

Animates the column's background layer alone, once, as the column scrolls into view. The content of the column is not affected.

Column Animation Delay​

Delays the column's animation by a number of milliseconds. Give three columns delays of 0, 150 and 300 and they arrive in sequence rather than together, which is how the demos stagger a row of cards.

The overall speed is a theme option rather than a column one: Column/Image Animation Timing, under General Settings.

Animating on mobile​

Added in Salient v12

Element animations are off on phones by default. Turn them on with Page Builder Element Animations On Mobile Devices, under Theme Options > General Settings > Functionality.

Be deliberate about it. Animation on anything visible when the page loads is the most common cause of a poor mobile PageSpeed score, so leave the top of the page still. See Above the fold.

Advanced​

Maximum Width​

Caps how wide the column will ever draw, in pixels, percentages or viewport units. The usual reason is to stop a line of text running too long to read comfortably in a wide column.

In the pair below, the red border marks the row and the yellow borders mark the columns.

RowColumnColumn

Left blank The text column fills its half of the row.

RowColumnColumnMaximum width

Set The text column stops short, shortening the line length.

The rest​

  • Z-Index A custom stacking order, for deciding which column sits on top where columns overlap.
  • Position Default or Static, per device.
  • Overflow Visibility Visible or Hidden. Hidden clips anything reaching past the column's edges, which is what you want when a transform or a negative margin pushes content out.
  • Extra Class Name Custom CSS classes on the column, for targeting it from your own stylesheet.
  • Boxed Column Legacy. Sets a background color and shadow in one move. New work should use Background Color and Box Shadow instead, which give you the actual values.