Features shortcode

Displays a feature element to your web page. It gives you extreme flexibility in how you present your button elements - from simple and unobtrusive call to action, to gigantic attention grabber. You can choose the size, color, position and padding of text and icon, the shape and size of the background, the type of the link, and even set the button to 100% width of the column.

Examples of the features shortcode usage

We tried to cover all the basic and
advanced uses for the features shortcode

A couple of examples of feature styles and hover effects

Pyrrhic Panacea


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Opulent Nemesis


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ephemeral Demesne


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ebullience

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Fetching

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Ripple

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Serendipity

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Gossamer

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Halcyon

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Eloquence

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Imbue

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

An example of features elements coupled with color background.

MELLIFLUOUS OFFING

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. n

CONFLATE RAVEL

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. n

VESTIGIAL EPIPHANY

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. n

Redolent Pastiche

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Penumbra Brood

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Quintessential Umbrella

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Furtive Pigmey

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

An example of features list on a patterned background.

Denouement

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Efflorescence

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Forbearance

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Tintinnabulation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Surreptitious

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Wherewithal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Onomatopoeia

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Labyrinthine

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Embrocation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Glamour

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Basic settings for features shortcode

Basic settings for your basic needs. Frontend builder gives the
user an option to create basic stuff with ease

Choose the order of elements

Define the basic layout of the features element. You can set the icon to go before or after the title, in the centered layout, or set left or right justification.

Set the features link

You can set the features link by inserting an URL to your destination page.

Set the title

You can define a custom color of the title in default and hovered state using the color picker, or set the hex code manually.

Choose an icon

You can include an icon representing the specific feature. Frontend Builder uses a wide variety of icon fonts - from Font Awesome, or our own Creative and Alternative icon sets.

Icon color and hover

You can define a custom color of the icon in default and hovered state using the color picker, or set the hex code manually.

Content text / HTML

You can use the text field to write plain text, or custom HTML. Frontend Builder has an embedded WordPress editor, which you can use to easily customize your content.

Define style

This option sets the basic visual style of the features element. You can choose between a clean version, round or square icon background, or version with background on the whole element.

Background color and hover

You can define a custom color of the background in default and hovered state using the color picker, or set the hex code manually.

Title color and hover

You can define a custom color of the title in default and hovered state using the color picker, or set the hex code manually.

Define icon size and padding

You can set a custom size and padding for the icon. This is a value separate from the title size.

Icon border

You can choose to add a border to the icon. This value is separate from the icon background color, and adds additional versatility of design.

Text color and hover

You can define a custom color of the text in default and hovered state using the color picker, or set the hex code manually.

Advanced settings for features shortcode

In case that you need something more creative and complex
Frontend builder has a set of advanced options to get you there

Dimensions of the Lightbox iFrame

You can set custom dimensions for the Lightbox iFrame link type

Hover icon

You can easily change the hover icon. We are offering you 3 icon galleries with Fbuilder

ID & Custom CSS

You can easily insert your own, custom CSS for that personalized look

Bottom margin

You can set different bottom margins for different elements / shortcodes

Clone shortcode

Once you are happy with the looks of your shortcode, you can clone it and use it somewhere else

Animation

You can easily animate each shortcode with tons of different animation types

Animation delay

All animations appear only when the user scrolls to the specific shortcode, you can set the delay for that

Animation speed

You can manually change the speed of each animation for each element / shortcode

Animation group

By placing different shortcodes in a group, all shortcodes in that group will animate once the user scrolls to the first element in the group

Drag & drop shortcode

You can move your shortcode to any column on the page by dragging that shortcode