The Fancy Box element is a Salient exclusive & beautiful way to feature arbitrary text content and optionally link it all to your desired destination. Useful for service listings, product categories, featured grouped content, or anything you can think to link. This component works best in columns as displayed in the examples below. You can display in animated columns at any width, full width or non full width.
Fancy Box Styles include: Bottom Color Bar Hover Effect, Color Box Hover Effect, Color Box Basic, Parallax Hover Effect, Description on Hover, & Image Above Text.
Because the Box Content field is a WYSIWYG editor, it means you can use any Heading style you’d like, H1 - H6, as well as paragraphs, bold text, or italic text.
For the optional Icon field, you can upload a custom icon image file. SVG or PNG files are best for these.
Animation options include: Fade In, Fade in Right, Fade in Left, Fade in from Bottom, Grow In, Flip In Horizontal & Flip In Vertical.
It's important to note that all variations of the Fancy Box element can be adjusted or styled differently fairly easily, as long as basic functionality remains the same.
Note: Other elements & components found in the examples below include Sticky Column Content, Split Line Headings, Icons, Sticky Vertical Tabs, Carousels, Buttons & Call to Action Elements, and Parallax Backgrounds.
Fancy Box Styles
Bottom Color Bar Hover Effect Fancy Box Style
Only the Bottom Color Bar Hover Effect contains the option for a text CTA which will display directly on the element. You can set the CTA text to display whatever text you would like, and it will be accompanied by the default theme long arrow. On all other styles, the entire block will be the CTA link. You'll also set the Box Color, which is the color the Color Bar at the bottom of the element will be on hover. In this style, the Overlay is not customizable out of the box, BUT it can be altered with custom CSS which is not very difficult to do or a high level of effort.
Default Fancy Box fields Box Content, Image, (Optional) Icon, Link URL, Link Target, Minimum Height, Animation & Border Radius are also included.
Color Box Hover Effect Fancy Box Style
Fresh Ingredients
Phasellus imperdiet, lectus ut fermentum pulvinar, nulla neque ornare lectus.
On the Color Box Hover Effect style, you can set a minimum height. You can also set the Box Color, which is essentially the Hover color. Color options are: one of the theme set accent colors or theme set gradients, or a custom box color. You can also control the Hover Overlay Opacity, the Content Alignment (Left, Middle, Right), and have the option to set a simple border. The simple border is just a slight light colored border, but this can be easily altered using custom CSS.
Default Fancy Box fields Box Content, Image, (Optional) Icon, Link URL, Link Target, Minimum Height, Animation & Border Radius are also included.
Color Box Basic Fancy Box Style
Fresh Ingredients
Phasellus imperdiet, lectus ut fermentum pulvinar, nulla neque ornare lectus.
On the Color Box Basic, you can specific the Box Overlay Color and Content Color, as well as the Box Overlay Color Opacity & Content Alignment (Left, Middle, Right.)
Default Fancy Box fields Box Content, Image, (Optional) Icon, Link URL, Link Target, Minimum Height, Animation & Border Radius are also included.
Parallax Hover Effect Fancy Box Style
On the Parallax Hover Effect option, you can control the Overlay color and strength, both for the initial state and the hover state. But the Overlay Color must be the same in both states. You can also specifiy the Content Alignment - Top, Middle, or Bottom.
Default Fancy Box fields Box Content, Image, (Optional) Icon, Link URL, Link Target, Minimum Height, Animation & Border Radius are also included.
Description on Hover Fancy Box Style
Fresh Ingredients
On the Description on Hover option, you will need to set the Box Hover Content, which is a simple text field, meaning it can only contain simple paragraph text copy. You also can set the Minimum Height. You’ll also set the Hover Color, as well as the Overlay Opacity for the initial state and the Hover state. You also have the option to make the image display in a parallax effect. You can specific the Icon Position (Bottom or Top), Content Alignment (Left, Middle, Right), & the Background Image Animation (Long Zoom or Slow Zoom.)
Default Fancy Box fields Box Content, Image, (Optional) Icon, Link URL, Link Target, Minimum Height, Animation & Border Radius are also included.
Image Above Text Fancy Box Style
Fresh Ingredients
Phasellus imperdiet, lectus ut fermentum pulvinar, nulla neque ornare lectus.
On the Image Above Text option, the Image will display above the WYSIWYG Box Content text. You should use a Heading in the Box Content, and this Heading will become the link as shown in the example. For the Image, you can select from various Image Aspect Ratios. 1:1 is default and displays as a square. Additional Image size options displayed below.
Icons are NOT available in this Fancy Box option.
Default Fancy Box fields Box Content, Image, Link URL, Link Target, Minimum Height, Animation & Border Radius are also included.
Image Aspect Ratio Options
1:1
16:9
3:2
4:3
4:5
Fancy Box Examples
Description on Hover
If you're ready to ditch the dated office cubicle paradigm, we have the solution
Well thought out, balanced spaces
State of the art, modern buildings
875+ unique office locations
Blazing fast wireless internet
Parallax Hover Effect (with fade in animations applied)
Color Box Basic
Home Services & Premium Landscaping
Residential & Corporate Landscaping
Sed vulputate purus sed facilisis dignissim erat. Mauris vel dui ac quam volutpat posuere id ut sapien. Aliquam quis nulla vitae libero auctor accumsan eget vitae lorem.
Tree Trimming & Shrub Maintenance
Mauris vel dui ac quam volutpat posuere id ut sapien. Aliquam quis nulla vitae libero auctor accumsan eget vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lawn Mowing & Weed Control
Sed vulputate purus sed facilisis dignissim erat. Mauris vel dui ac quam volutpat posuere id ut sapien. Aliquam quis nulla vitae libero auctor accumsan eget vitae lorem.
Custom Grading & Drainage
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel dui ac quam volutpat posuere id ut sapien. Aliquam quis nulla vitae libero auctor accumsan eget vitae lorem.
Image Above Text (inside carousel)
Featured Products
Quality ingredients. Real results.
Featured Products
Quality ingredients. Real results.
Featured Products
Quality ingredients. Real results.
Bottom Color Bar Hover Effect
Parallax Hover Effect
Our Restaurant Offers Only the Best
Meals curated by the best chefs Kansas City has to offer. And all at affordable prices. Stop in today to view our menu!
Bottom Color Bar Hover Effect
Color Box Hover Effect
An exceptionally unique experience tailored to you
Fast Turnaround
I throw myself down among the tall grass by the stream as I lie close to the earth.
Elegant Design
And the meridian sun strikes the upper surface of the impenetrable foliage.
Super Fresh
I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence.
Award Winning
As I lie close to the earth, a thousand unknown plants are noticed by me.