Page Builder Row

A row is the horizontal band every Salient layout is built from. It spans the page, holds the columns, and carries the width, height, background, spacing and scroll effects for everything inside it. Most of what makes a Salient page look the way it does is set here rather than on the elements.

Hover a row in the page builder and click the pencil icon to open its settings. The sections below follow the order of the tabs and groups in that panel.

1. Click the pencil icon to open the row settings.

Structure

Type

Type is the first decision on any row, because it sets how wide the background goes and how wide the content goes. They are two separate things, which is what the three options are for. In the comparison below, the blue band is the row and the dashed lines mark the site container.

In Container Background and content both stay inside the site container. Adds bottom margin by default.

Full Width Background Background runs edge to edge, content stays in the container. The usual choice.

Full Width Content Background and content both run the full width of the window.

In Container adds a small bottom margin, so rows set to it never sit flush against each other. If you want two colored bands touching, use one of the other two types.

Full Height Row

Full Height Row scales the row to the height of the browser window. With it on, leave the top and bottom padding empty: padding is added to the window height rather than absorbed by it, so the row ends up taller than the screen.

• Fullscreen Row Position Where the content sits in the full height row: Middle, Top, Bottom or Full Height. Choosing Full Height also stretches the columns to the full screen height.
• Row Name The label this row shows in the dot navigation, which appears when the page uses full height rows.

Column layout

• Column Margin The gap between the columns in the row. Default, None, a preset from 5px to 100px, or Custom for a value of your own.
• Equal Height Columns Holds every column in the row at the same height however much content each one has. The effect only shows once the columns have a background or a border.
  • Column Content Alignment: where the content sits inside a column that is now taller than its content. Top, Middle, Bottom or Stretch.
• Vertically Center Columns Centers all columns in the row vertically. Available on Full Width Content rows.
• Column Direction The order the columns flow in, set separately for desktop, tablet and phone, so one row can stack differently on each. Desktop offers Default and Row Reverse; tablet and phone add Column Reverse.

Which reverse to use

Pick Row Reverse when the columns are still side by side, and Column Reverse when they have stacked on top of each other. Stacked is the usual case on a phone, so Column Reverse is the one you want most of the time.

Spacing and Transform

Padding

Padding gives the content inside the row breathing room and lets more of the row's background show. The fields take a plain number for pixels, such as 100, or a percentage, such as 10%.

Two controls sit next to the fields:

• Device icons The three icons beside the field name switch between the desktop, tablet and phone values. Each device keeps its own number.
• Lock icon Links top with bottom, or left with right, so the pair stays equal while you edit.

The Padding fields, with Top and Bottom locked together.

Margin

Margin adds space outside the row, in the same four fields and with the same per-device and lock controls as padding. Negative values are accepted, which is how rows are made to overlap the one above or below.

Transform

Translate X and Translate Y move the row from where it would otherwise sit, and Scale resizes it. None of the three affect the flow of the rest of the page, so the space the row originally occupied stays where it was. All three can be set per device.

Above, the row uses 30px for both X and Y. The dashed outline is where it would otherwise have sat.

Content

Text Color

Sets the row's text to Dark (the default) or Light, with Custom Text Color if you need a specific value. Text Alignment sets left, center or right for the row as a whole.

Text Color also drives the permanent transparent header. With that theme option on, the transparent header recolors itself as it passes each row, following that row's text color setting.

Light text color The header turns white as it passes the row.

Dark text color The header turns dark over the same header markup.

Rounded Edges

• Border Radius Rounds the row's corners: 0px, 5px, 10px, 15px, 20px or Custom.
• Applies To Which part gets rounded: Row Background, Inner Content or Both. Rounding the background alone is usually what you want, since rounding the inner content clips anything that overflows it.

Background

Background layers

A row's background is a stack, not a single setting.

Knowing the order is what makes the settings predictable. A color overlay tints the image but not the elements; a background color shows only where the image does not cover.

Background Image

Upload an image with the Upload image button in the row's Background tab. More options appear once one is set.

• Preload Image Preloads the image so it arrives sooner. Worth enabling for a hero row and not much else, since preloading everything defeats the purpose.
• Background Image Type CSS Background Image or Image Tag. An image tag gives the browser responsive sizes to choose from, so it is the better choice above the fold; a CSS background is more flexible for design work.
• Background Image Loading Default, Lazy Load or Skip Lazy Load. Set anything above the fold to Skip Lazy Load so it does not wait on JavaScript. See the performance guide.
• Background Image Mobile Hidden Drops the background image below 1000px wide, leaving the background color behind it. Useful for simplifying a busy row on a phone.
• Background Position Where the image anchors inside the row, with separate Background X Position and Background Y Position fields for finer control. The default is left top.
• Background Repeat Set to repeat for a tile or a pattern. Leave it on no-repeat for a photograph: no-repeat also switches the sizing to CSS cover, which scales the image to fill the row with no gaps.

Video Background

• Youtube Video URL A YouTube URL to use instead of self hosting. YouTube backgrounds do not play on mobile; use the self hosted fields if you need mobile playback.
• MP4 File URL Required when self hosting.
• WebM File URL Also required when self hosting, 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. Lazy loading holds the video back until the row is near the viewport.
• Video Color Overlay Legacy. On Salient 9 and later use the Color Overlay tab instead, which has far more control.

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 row 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 or in Safari. 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.

Animated Gradient

Animated Gradient fills the row background with slowly moving blurred blobs, along the lines of a lava lamp. It takes Animated Color and an optional Animated Color 2, plus Animated Gradient Speed and Animated Gradient Color Mix.

Mouse Based Parallax Scene

Stacks up to five background layers that respond to the pointer at different sensitivities, which reads as depth. Turning it on reveals the layer inputs.

• Scene Positioning How the scene aligns within the row.
• Scene Parallax Overall Strength How far the whole scene moves with the pointer.
• Scene Layer One to Scene Layer Five The image for each layer, each with its own Layer Strength, which is what separates the layers in depth.

Color Overlay

The color overlay sits above the background image or video and below anything in the row. 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. Salient writes the result out as a CSS gradient, so the bar is the overlay rather than a preview of one.

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, as in the capture above.
• 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. That is the point of it: an overlay can fade out across the row instead of sitting at one flat value over all of it.

Simple

Simple came before the gradient editor and is kept for rows 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 rows in Advanced

Anything Simple produces, Advanced produces too, with control over where the colors sit and how opaque each one is. Existing rows keep working on Simple; there is no need to convert them, and switching a row over replaces its settings rather than carrying them across.

Shape Divider

A shape divider replaces the row's straight horizontal edge with a shaped one. Nothing appears until Enable Shape Divider is ticked. For the full picture, including how to pick a color that reads as a boundary, see Shape Divider.

Shape Type

Fifteen shapes, shown as icons. In each icon, the white area is the SVG shape and the blue is the row background, so the icon previews the cut.

The shape picker in the row's Shape Divider tab.

• Shape Divider Color The flat color the shape is drawn in. Set it to the color of the section the shape points into, not the row it belongs to.
• Shape Divider Height How tall the shape is, per device.

Shape Divider Position

Whether the shape is cut into the top of the row or the bottom. The divider adds no height of its own, so size it against the height the row already has.

Bottom The shape cuts into the foot of the row.

Top The shape cuts into the head of the row.

Bring to front

By default the shape divider sits under the row's content. Bring to front? moves it above, where it clips everything in the row rather than passing behind it.

Off The card passes over the divider.

On The divider cuts across the card.

Animation

Background Layer Animation

Animates the row's background layer alone, once, as the row scrolls into view: Fade In, Zoom Out, Zoom Out Reveal, Slight Zoom Out Reveal, Zoom Out Slowly or Clip Path Inset.

Choosing Clip Path Inset adds two more:

• Clip Path Animation Type Triggered Once, which plays the reveal as the row arrives, or Scroll Position, which ties the reveal to how far the visitor has scrolled.
• Clip Path Applies To Whether the clip affects the background layer or the whole row.

Parallax Background Media On Scroll

Scrolls the background layer at a different speed from the content.

Parallax Background Layer Speed runs Subtle, Regular, Medium, High, then Fixed In Place. The more dramatic the setting, the larger Salient has to scale the background image to have something to move, so Subtle is both the gentlest effect and the one that leaves your image sizing closest to untouched. It is what the live demos use for nearly every parallax row. Fixed In Place pins the layer to the window and has no effect on a video background.

The row's Animation tab. Turning Parallax Background Media On Scroll on reveals the speed dropdown.

Color Change Section

Lets the row animate the color of the page background as it scrolls into view, so the whole page shifts color behind a section rather than the section carrying a band of its own. See Color Changing Sections for the setup.

Advanced

Sticky Row

Sticky Row pins the row to a fixed place in the window while the visitor scrolls past it.

• Sticky Alignment Top of Window, Bottom of Window, or Top of Window Below Nav Bar, which is the one to use when a fixed header would otherwise cover the row.
• Sticky Row on Mobile Keeps the behavior on phones, where it is off by default.

Minimum Width

Available on inner rows only. Minimum Width sets a width for the row that can be larger than the column holding it, which is how an inner row breaks out of its container. It accepts pixels, percentages or viewport units.

In the pair below, red borders mark page builder rows and yellow borders mark columns.

Left blank The inner row stays inside its column.

Set wider than the column The inner row breaks out past both the column and the outer row.

Row ID

Gives the row a custom ID, which is what anchor links point at. Set an ID of about on a row and a link to https://example.com/page/#about jumps straight to it, whether that link is on a menu item, a button or another page.

The rest

• Z-Index A custom stacking order, for deciding which row sits on top where rows overlap.
• Position Default or Static, per device. Static takes the row out of the positioning context, which is occasionally needed to stop a sticky or absolutely positioned child being trapped inside it.
• Overflow Visibility Visible or Hidden. Hidden clips anything that reaches past the row's edges, which is what you want when a transform or a negative margin pushes content out.
• Device Visibility Hides the row on desktop, tablet or phone. The row is hidden with CSS and stays in the HTML.
• Extra Class Name Custom CSS classes on the row, for targeting it from your own stylesheet.
• Disable Ken Burns BG effect Stops the slow background zoom on this row when the effect is on site-wide.
• Disable row Keeps the row and its content in the editor but stops it rendering on the site. The quickest way to see a page without a section before deciding to delete it.