To open the row settings panel, click on the edit pencil icon on your Salient VC row

Row Type

Controls how the row will display in the flow of the your website.

This is a row set to the “In container” type with a background color to show where the content box is constrained to. Notice how there’s a gap between this row and the next two – that’s because the “In container” type always adds some bottom margin. If you’re trying to get elements to sit flush against each other from row to row, make sure you’re using one of the other two row types

This is a row set to the “Full Width Background” type with a background color. 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. In this example the column holding this content also has slight padding set on it to prevent the text from hitting the edges of the top/bottom of the row.

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 of it to display the full width of the browser window. In this example the column holding this content also has slight padding set on it to prevent the text from hitting the edges of the window

Equal Height

Allows you to keep the columns within your rows 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). The example below is set to “top”. See the difference with using and not using this option below.

With

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. Sed viverra, nulla in viverra egestas, diam augue placerat sem, id ultricies felis tellus id est. Phasellus mattis libero a ligula gravida mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sollicitudin nisl vitae efficitur egestas. Donec erat tellus, mattis nec ullamcorper sed, consectetur vitae magna. Nullam interdum non tortor in malesuada. Quisque porttitor finibus quam nec aliquet.

Duis sit amet placerat sapien. Sed sit amet orci nec leo ullamcorper condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin lorem sem, efficitur ac blandit sed, maximus eget lorem. Maecenas arcu enim, commodo eu elit vitae, porta maximus erat. Nullam ut semper libero. Pellentesque at tincidunt sem.

Without

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. Sed viverra, nulla in viverra egestas, diam augue placerat sem, id ultricies felis tellus id est. Phasellus mattis libero a ligula gravida mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sollicitudin nisl vitae efficitur egestas. Donec erat tellus, mattis nec ullamcorper sed, consectetur vitae magna. Nullam interdum non tortor in malesuada. Quisque porttitor finibus quam nec aliquet.

Duis sit amet placerat sapien. Sed sit amet orci nec leo ullamcorper condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin lorem sem, efficitur ac blandit sed, maximus eget lorem. Maecenas arcu enim, commodo eu elit vitae, porta maximus erat. Nullam ut semper libero. Pellentesque at tincidunt sem.

Background Image

Supplying an image for this will unlock other options related to it including:

  • Background Repeat define whether or not the background image will repeat – useful when using a pattern which is a small image meant to repeat
  • Background Position Lets you pick where the background will align relative to the row
  • Parallax Background Toggles the parallax effect for your BG image. (You have multiple speeds available to you for this effect)

Row with a BG image set and Parallax Background enabled. Parallax Background Speed set to “fast”.

Mouse Based Parallax Scene

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

Mouse Based Parallax Video Tutorial

Video Background

Adds a video background to your row

  • Video Color Overlay Allows you to specify a color overlay that will go on top of your video background
  • Youtube Video URL You can supply a URL from youtube to populate your video BG if you don’t want to self host it
  • 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
  • Mute Video Allows you to specify if you’d like to mute your self hosted video BG

If your self hosted video backgrounds are not playing on a desktop browser

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

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

https://www.youtube.com/watch?v=6oTurM7gESE

Video Background Using Black Color Overlay
& Populated With Youtube Source

Text Color

This allows you to set the row to display as dark (default) for light for the text color. Note this setting is also tied to some other theme features – for example, the permanent transparent header will change its color based on what your row color is set to

A row set to dark for the text color

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. Sed viverra, nulla in viverra egestas, diam augue placerat sem, id ultricies felis tellus id est. Phasellus mattis libero a ligula gravida mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sollicitudin nisl vitae efficitur egestas. Donec erat tellus, mattis nec ullamcorper sed, consectetur vitae magna. Nullam interdum non tortor in malesuada. Quisque porttitor finibus quam nec aliquet.

A row set to light for the text color

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. Sed viverra, nulla in viverra egestas, diam augue placerat sem, id ultricies felis tellus id est. Phasellus mattis libero a ligula gravida mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sollicitudin nisl vitae efficitur egestas. Donec erat tellus, mattis nec ullamcorper sed, consectetur vitae magna. Nullam interdum non tortor in malesuada. Quisque porttitor finibus quam nec aliquet.

Text Alignment

Defines how the text will be aligned in your row. If you’re trying to center the content (elements) in your row in addition to the text, there’s an option in Salient Visual Composer Columns called “Centered Content Alignment” which would needed instead of this.

Left Aligned

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. Sed viverra, nulla in viverra egestas, diam augue placerat sem, id ultricies felis tellus id est. Phasellus mattis libero a ligula gravida mattis.

Center Aligned

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. Sed viverra, nulla in viverra egestas, diam augue placerat sem, id ultricies felis tellus id est. Phasellus mattis libero a ligula gravida mattis.

Right Aligned

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. Sed viverra, nulla in viverra egestas, diam augue placerat sem, id ultricies felis tellus id est. Phasellus mattis libero a ligula gravida mattis.

Padding Top/Bottom

Lets you set the amount of padding you would like on your row. Write your desired amount as a number (will be taken as pixels). For example “50” would set a 50px padding. By default none is set. Also accepts % values i.e. 10%. Percent values are great for responsive design – see the examples below and resize your browser window

100 set for the top and bottom

7% set for the top and bottom

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

The rest of the page options will be in the color options tab.

Enable Gradient

Will unlock a second color overlay picker for you. This will allow you to choose two colors, creating a gradient which will be used as the color overlay.

Gradient Direction

Select the direction your gradient will go

Left to Right

Left Top to Right Bottom

Left Bottom to Right Top

Bottom to Top

Overlay Strength

Defines how much opacity will have.

  • Light 0.3 opacity
  • Medium 0.5 opacity
  • Heavy 0.8 opacity
  • Very Heavy 0.95 opacity
  • Solid Full opacity

Can't find what you need?

Open a ticket