To open up column settings, click on the pencil icon located in the middle of a column.

Structure

Padding

Allows you to define how much padding you would like from a percentage dropdown. Percentage values are used to keep everything responsive. Using padding will help give the content nested inside the column breathing room and allow the background layer of your column to show more.

Device Groups

The three icons next to the field name allow you to define separate values for the desktop/tablet/smartphone views.

Padding Position

The padding position dropdown allows you to add the padding to a specific side, or combination of sides on the column.

All Sides

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget eros molestie, iaculis.

Top/Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget eros molestie, iaculis.

Left Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget eros molestie, iaculis.

Margin

Allows you to create space around a column by a specific margin (top,bottom,left,right) of your choosing. Negative values are also accepted and can be used to pull columns outside their default flow.

60px Top Margin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ex a enim dapibus imperdiet. Morbi laoreet ipsum vitae suscipit consectetur. Suspendisse varius nulla id augue imperdiet,

No Margin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ex a enim dapibus imperdiet. Morbi laoreet ipsum vitae suscipit consectetur. Suspendisse varius nulla id augue imperdiet,

Centered Content

The centered content option is a fast way to center all text and inner elements of a column. Note: Certain elements will not respond to this option – in those cases, the elements will have their own settings for alignment.

Centered Content Enabled

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Button

Centered Content Disabled

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Button

Responsive Options

Overview

The Responsive Options tab allows you to define the size/position you want your column to display at in each viewport. By default, a column will display at 1/1 (100%) in tablet/phone viewports. You can easily override this to create the column setup desired by using the following options.

Width

The width field will set your column to a new width on the specified device. Let’s use an example of having three columns (1/3) on desktop and assume that we want them to remain as 1/3 for mobile viewports as well. To accomplish that, we simply set the width to be 1/3 on all viewports.

You may have noticed that the tablet viewport does not allow you to define a custom width – This is a default limitation within WPbakery. However, we’ve added an option specific to Salient that allows you to work around it. To specify where your column width inherits from on tablet, you can use the dropdown labeled “Tablet Column Width Inherits From“, which is located directly under the responsive options table.

Offset

The offset field allows you to move your column from its default position by a specified amount. While it’s not used as frequently as the “width” dropdown, there are two scenarios in which you’ll find yourself using this field.

  • You’ve set one of the columns in your row to hide on a specific device, and need to offset a column that’s still visible in order to center it.
  • You’ve specified column widths that equal larger than 1/1 and are pushing a column onto a new “row”. For example, let’s say you had three columns (1/3) on desktop, and on tablet you set each of the widths to a new custom value of 1/2. This would push the third column onto a new row, which could be centered by using a 1/4 offset.
The third column in the row is now left aligned, but what if we would like it to display centered?
With a column offset added, the third column can now remain centered

Hide On Device

This option allows you to hide a column from displaying on a given viewport. The column will be hidden using CSS and still exist within the HTML  structure.

Background

Background Layers

The stacking order for the background layer can be seen in the illustration below.

  • Elements place inside the column (top)
  • Color Overlay Layer
  • Background Color
  • Background Image/Video Layer (bottom)

Background Image

You can add a background image to any column by using the “Upload image” button in the background tab of your column settings. Once an image is supplied, some new options will appear which relate to the display of your background image.

  • Background Position: Define an alignment for your background image within the row. By default, the image will be anchored to the left top of the row.
  • Scale Background Image To Column: Automatically adjusts the image to fit the size of your column. This option is recommended in most cases, unless If you’re trying to use a pattern that is meant to repeat.

With Scale Background Image Disabled

With Scale Background Image Enabled

Video Background

  • WebM File URL: If you’re self hosting, you must supply this format to ensure cross browser compatibility.
  • MP4 File URL: If you’re self hosting, you must also supply this format to ensure cross browser compatibility.
  • OGV File URL: Optional file format to supply for self hosting
  • Video Preview Image: The image that will be used in place of your video BG on mobile devices. This is only used when you have the Salient theme option “Disable Video Backgrounds On Mobile Devices” activated.  (Salient options panel > general settings > functionality tab).

Troubleshooting self-hosted video background playback

1. Ensure that your server is capable of parsing video files. Some servers require you to add the media types supported in the .htaccess file in order for them to parse the files. Open up your .htaccess file located in the root of your WordPress install and add this in:

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

If unsure that your server is configured to playback videos correctly, try inputting a video hosted from ThemeNectar and test playback:
http://themenectar.com/videos/video-test.mp4
2. Ensure that your videos are correctly encoded for web playback. If you’ve added the media types to your server and are still running into difficulty, please run your videos through these converters:

http://video.online-convert.com/convert-to-mp4
http://video.online-convert.com/convert-to-webm

Background Color

In columns, the background color layer sits on-top of the background image. This is to provide the ability to animate the opacity on hover over the image.

Background Color

  • Opacity: 1.0
  • Hover Opacity: 1.0

Background Color

  • Opacity: 0.5
  • Hover Opacity: 0.5

Background Color

  • Opacity: 0.8
  • Hover Opacity: 0.4

Color Overlay

Gradient Overlay

Enable this to cause the color overlay layer to use both the “Color Overlay” and “Color Overlay 2” color pickers. A gradient will be formed in between the colors in the direction that you specify via the “Gradient Direction” dropdown.

Overlay Strength

Controls the opacity in which your overlay will show on top of the lower background layers (image/video).

  • Light: Opacity 0.3
  • Medium: 0.5
  • Heavy: 0.8
  • Very Heavy: 0.95
  • Solid: 1.0

Gradient Direction

Controls which way to render the gradient – A preview will be shown in the overlay tab.

Left to Right
Left Bottom to Right Top
Left Top to Right Bottom
Bottom to Top

Animation

Background Image Animation

The background image animation option allows you to define an animation that will apply only to the image you’ve specified for your column background image. The animation selected will only trigger one time, when the user scrolls the row into the viewport.

Fade In

Zoom Out

Zoom Out Reveal

Zoom Out Slowly

Entire Column Animation

As the name implies, this option will animate the entire column, including all layers its contents. This animation will also only trigger one time, when the user scrolls the row into the viewport.

Enabling animations on mobile devices

As of Salient version 12, you can now have your elements animate on mobile as well. To enable this functionality, head to the Salient options panel > general settings > functionality tab, and change the option titled “Page Builder Element Animations On Mobile Devices” to “Enable.

Fade In

Fade In From Left

Fade In From Right

Fade In From Bottom

Grow In

Zoom Out

Slight Twist

Flip In Horizontal

Flip In Vertical

Reveal From Right

Reveal From Left

Reveal From Bottom

Reveal From Top

Column Animation Delay

The animation delay property will delay your column animation from occurring for the specified amount of time in milliseconds. This can be used to create staggering animations.

Delay: 0

Delay: 250

Delay: 500

Delay: 750

Delay: 1000

Delay: 1250

Advanced

Maximum Width

The maximum width field allows you to define a custom width that the column will not display greater than. This can be useful in limiting the amount of space text can flow.

The maximum width attribute allows you to define values based in pixels (px), percent (%), or viewport (vw). Take a look at the illustrated example below. The red border denotes a page builder row, and the yellow borders denote page builder columns.

Column maximum width left blank (default)
Column maximum width set to 300px

Z-Index

Allows you to define a custom stacking order for your column. This can come in handy when you have a setup in which columns overlap and you want to specify which column will display on top.

Extra Class Name

Allows you to specify custom CSS class names that will be applied to your column. This is useful for when you need to target a specific column in your setup for additional CSS tweaking.

Can't find what you need?

Open a ticket