Skip to main content

Page Builder Row

To open up the row settings, click on the pencil icon.

Structure

Row Type

The row type will control the sizing of your row content and row background layers. Below we will compare each of the available row types. The red highlight is a representation of the content area.

Row Type: In Container

The “in container” row type will constrain the background layer as well as the content. This row type also adds a small bit of bottom margin by default, so if you’re looking to make your rows flush against each other, use one of the other two types.

Row Type: Full Width Background

This row type allows the background supplied for the row to stretch to the edges of the browser window, but keeps the content inside constrained in the main content container.

Row Type: Full Width Content

This is a row set to the “Full Width Content” type with a background color. It allows both the row background and any content inside it to display the full width of the browser window.

Column Margin

The column margin allows you to define the amount of spacing between each of the columns in your row.

20px Margin

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

20px Margin

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

20px Margin

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

50px Margin

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

50px Margin

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

50px Margin

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

80px Margin

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

80px Margin

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

80px Margin

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

Equal Height

Allows you to keep the columns within your row at an equal height regardless of how much content is in them. To make this noticeable, a background of some sort would need to be set on the column. You can also choose how the shorter content will be aligned (top,middle,bottom).

Equal Height Enabled

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, ac luctus purus fringilla. Sed accumsan tristique nunc eget tincidunt. Phasellus tincidunt elementum pharetra. In et tincidunt lorem.

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,

Equal Height Disabled

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, ac luctus purus fringilla. Sed accumsan tristique nunc eget tincidunt. Phasellus tincidunt elementum pharetra. In et tincidunt lorem.

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,

Column Direction

Allows you to control the direction in which your columns will flow in the document. This option can be set to a different value for desktop/tablet/smartphone displays, which opens up powerful layout possibilities.

Standard Direction

1

First Column

2

Second Column

3

Third Column

Reversed For All Viewports

1

First Column

2

Second Column

3

Third Column

Reversed For Mobile Only (Shrink your browser window)

1

First Column

2

Second Column

3

Third Column

Full Height Row

This will cause your row to automatically scale to the height of the browser window. When using this option, there’s no need to set any padding for the top/bottom of your row, as doing so will increase the height of your row beyond the height of the browser window.

Spacing & Content

Padding

The padding fields will accept standard numerical values such as “100” to use a px, or will accept % based values, such as 10%. Using padding will help give the content nested inside the row breathing room and allow the background layer of your row 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.

Lock Icon

Locking the top/bottom or left/right fields together will ensure that their values remain the same for easy proportional editing.

No padding added

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, ac luctus purus fringilla. Sed accumsan tristique nunc eget tincidunt. Phasellus tincidunt elementum pharetra. In et tincidunt lorem.

10% padding top/bottom, 20% padding left/right

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, ac luctus purus fringilla. Sed accumsan tristique nunc eget tincidunt. Phasellus tincidunt elementum pharetra. In et tincidunt lorem.

Transform

Allows you to move the row from its current position (according to the parameters given for the X-axis and the Y-axis). Translating X or Y does not affect the flow of the rest of the document. Similar to padding, these values can be set separately for the desktop/tablet/smartphone viewports.

Above is an example of a row using 30px for the X and 30px for the Y transforms. The dimmed version of the row denotes the original position, before using transforms.

Text Color

This allows you to set the row text to display as dark (default) or light for the text color.

This setting is also tied to the permanent transparent header theme option. When using that theme option, the transparent header navigation color will change its color based on what your row color is set to. Example below.

“Permeant Transparent” header passing by a row with light text color
“Permeant Transparent” header passing by a row with dark text color

Background

Background Layers

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

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

Background Image

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

  • Background Image Mobile Hidden: Allows you to optionally remove the background image from displaying on mobile devices (when the browser window is less than 1000px wide). This can be useful if you wish to simply your row styling to only use a background color, when the users screen size is smaller.
  • 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.
  • Background Repeat: If you’re trying to use a pattern that is meant to repeat, you change this option to “repeat”. If a standard image is uploaded, leave this as no-repeat. When no-repeat is selected, the background size of your row will use the CSS value “cover” to automatically scale image to fit your row and leave no excess space.

Video Background

  • Video Color Overlay: (Legacy option). Allows you to specify a color overlay that will go on top of your video background. For users above version 9 of Salient, you can use the more powerful color overlay tab in the row options instead.
  • YouTube Video URL: You can supply a URL from YouTube to populate your video BG if you don’t want to self host it. However, note that with this option, there is no possibility of mobile playback. If you would like your video background to also play on mobile, you must use the self hosted option instead.
  • 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

Videos won't play on desktop or mobile

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 at 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:
https://themenectar.com/videos/video-test.mp4

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

Videos won't play on mobile or Safari only

Ensure that a power-saving or data-saving mode is not on: If a power-saving mode is active, it will prevent ANY video from auto-playing. Because of this, it’s recommended to still supply a fallback image for these instances.

Mouse Based Parallax

Allows you to add multiple background layers to your row which will respond at different sensitivity to mouse movement, creating a parallax effect. When activating this option new inputs will open up for you to configure the effect.

  • Scene Positioning: The general alignment of the parallax images.
  • Scene Parallax Overall Strength: How much the scene will respond to mouse movement.
  • Scene Layers One-Five: The inputs to upload the images for each scene.
Play Video

Video Tutorial

Shape Divider

Shape Divider Type

Shape Dividers are optional parts of the row background layer which can add exciting design possibilities. A shape divider will not display in your row background unless the “Enable Shape Divider” option is activated.

The shape divider selection icons demonstrate the shape that will be applied to your row backed. The white area within the icon represents the actual SVG shape to be applied, and the blue represents the row background.

Shape Divider Position

This determines whether the shape divider layer will be added to the top or the bottom of your row.

The shape divider layer does not contribute to the height of your row. The height that you set for it should be based on the existing height of your row.

Bottom Position
Top Position

Bring to Front

By default, the shape divider will positioned underneath the content in your row. If you would like to bring it to the front of your row, and have it clip everything inside the row, you can use this option.

Below is an example of the “bring to front” option being toggled on a row that uses a text block and an image element its content.

Bring to Front Disabled
Bring to Front Enabled

Video Tutorial

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 row 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

Parallax Background

Enabling this will cause your background image layer to move at a different speed than the user scrolls, causing a parallax effect.

Parallax Speed

The faster speed you choose, the closer your background image will scroll relative to the regular scroll speed. This means that “Slow” will create a more dramatic parallax, while “fast” will create a subtle parallax. We use “fast” for almost all the parallax rows seen in the live demos.

Enabling the parallax option will also cause your row background image to scale larger to accommodate the effect. The “fast” speed will have the least impact on sizing, so if it’s important to you to maintain your current row background image sizing, choose that speed.

Advanced

Minimum Width

Available to inner rows only, the minimum width field allows you to define a custom width that the row will display at. This can be set to be larger than the parent column, resulting in “breaking out” of the container for more interesting designs.

The minimum 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 borders denote page builder rows, and the yellow borders denote page builder columns.

Inner row minimum width  left blank (default)
Inner row minimum width set to 40vw

Z-Index

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

Extra Class Name

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

Row ID

Allows you to define a custom ID for your row. This field is most used when creating anchor links to specific rows on a page. For example, you could add an ID onto your row named “about”, and then set a link URL to “http://domain/page/#about” from a menu item or a button on the page. The link added will now lead directly to that row when navigated to.

For more detailed information on anchor linking, check out the video tutorial below.

Play Video

Disable Row

Removes the row from displaying on the front of your website, but keeps the row content in the backend. A fast way to see what your design would look like without a specific row without actually having to delete it or move it elsewhere.

Can’t find what you’re looking for?

Open a ticket