Salient offers a power & fully responsive column system with tons of design options. Control things such as background images/colors, hover effects, borders, animation, positioning & much more. Each of the sections below focuses in on specific column features so take a look to learn more. Keep in mind all of these options can be used in isolation or combined.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Far away, behind the words there live.
This option will cause your column to animate in when it reaches the users view on screen. There are many options to select from for animating, scroll down this page slowly so you can pay attention to each one firing
Fade In
Fade In From Left
Fade In From Right
Fade In From Bottom
Grow In
Flip In Vertical
Reveal From Right
Reveal From Bottom
Reveal From Left
Reveal From Top
The animation delay input allows you to delay the column animation by a specified duration in milliseconds. E.g. “500” would delay the animation by 500ms, or 0.5 seconds. This field is extremely useful for creating staggered animations with your columns. See an example below (the value used is written in the column)
You can easily add a border to any of your columns for an added highlight. The color, border width, style are defined by you – they can also be animated as well.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Just another one of the many ways Salient goes the extra mile to give you more design possibilities.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at.
Customize the border width, animation timing, color & more! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at.
A great way to draw attention to a specific column in a modern way.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Checking the box to enable this option will add a white BG color to your column and give a slight hover effect
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius tristique nunc, non blandit odio vulputate at. Aliquam porttitor augue at lorem ultricies, vel porta magna varius. Pellentesque auctor, eros sit amet lacinia consequat.
Useful for when you have columns of differing heights and you’re using a background color/image. This will allow a cleaner overall look – can align the content to the top (shown below), middle or bottom.
orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus.
Nulla elementum quis justo ut consectetur. Ut sagittis libero et augue euismod maximus. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis leo sed felis tincidunt suscipit. Ut vitae lorem lacus. Donec nec odio in justo tristique interdum. Nunc vel dolor sed ipsum tempor aliquet. Lorem ipsum dolor sit amet.
Sets the background color of your column to any color of your choosing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Setting the background opacity to anything other than 1 will have it overlay on top of the BG image set on the column or anything behind the column.
Background color set to a blue with the background opacity set to 0.6
Background color set to black with the background opacity set to 0.3
Background color set to pink with the background opacity set to 0.8
You can also change the background color and opacity of the background color of any column when hovering over it. See some examples below
Setting the background hover color to the same as the background color and changing the opacity to 1
Setting the background hover color to the same as the background color and changing the opacity slightly
Keeping the opacity the same for the background and the hover but changing the color
