Separator with icon and text

Separator with text allows insert text with- or without icon between separating lines. These lines can be of different type as shown below. Icon size, library background shape is also configured. The text size is default and not configured. If you need change text size, font family or color you will have to edit h4 heading of your theme.

Below you can view «Border Type» — separating line type and Icon Size

Solid (Border) type and Mini Icon

Solid (Border) type and without Icon

Dashed type and Small Icon

Dashed type and without Icon

Dotted type and Normal Icon

Dotted type and without Icon

Dotted type and Large Icon

Dotted type and without Icon

Shadow type and Extra Large Icon

Shadow type and without Icon

Title align: left/right

Solid (Border) type and Mini Icon

Solid (Border) type and without Icon

Dashed type and Small Icon

Dashed type and without Icon

Dotted type and Normal Icon

Dotted type and without Icon

Dotted type and Large Icon

Dotted type and without Icon

Shadow type and Extra Large Icon

Shadow type and without Icon

GENERAL SETTINGS

Horizontal separator with Text

“Separator with Text“ add separator line to your page together with text which can be positioned in the centre, left or right sides of line.

Param name
Description
Title Text which will appear on the line. All the styles: font-size, font-family, font-weight, font-color are predifined by theme styles for h4
Add icon? Having checked this, you will see new tab — icon, where you can set color, size and shape and library; There is option for custom colors
Title position Allows positioning of your text in the center, left or right side of the line.
Separator alignment Select separator alignment.
Color Choose color of your separator line, including Custom color chosen with Color picker or defined as RGB code.
Style Choose line styling — solid, dotted, dashed, shadow etc.
Border Border height in pixels.
Element width Define line width within column in percents.
CSS Animation Choose, preview (clicking “animate it”) and add animation.
Extra class name Add class name in order to refer to this element in CSS.
Design Options Control borders, background and other styling options. Preview details here.

(c) WPBakery KNOWLEDGE BASE

Setting double style of separator please mind that height of the border should not be more than 1px, otherwise you will have 4px line in height.