Separator / Whitespace

Overview

This element allows you to separate content with invisible whitespace, predefined vertical separators or custom ones that you can design for yourself.

Examples of the separator/whitespace element.

Usage

Vertical space between the elements.

Did you know that the Separator / Whitespace element can be used to modify the vertical space between two elements such as sections, paragraphs or headings? Let’s see how we can do that:

Drag and drop the Separator / Whitespace element between the two elements.
Select Whitespace from the dropdown options.
Enter a numerical value in the height field to modify the space.

To tighten the space between the elements try a negative number in the height field.

Code Snippets

How to use the snippets?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_hr class='default' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-3cpbkp']

Customization

Style Option

Style your own horizontal dividers using element options, which lets you customize.

Position
Border thickness
Width
Border Color
Top and Bottom Margin
Icon
Icon Color

Custom Separator Styles

Style your own border elements using custom CSS style make it dotted, dashed or use svg image as the source of your border element.

/*----------------------------------------
// CSS - Separator Styles
//--------------------------------------*/

/* Dotten line */
.hr-inner {
    border: 2px dotted;
}

/* Icon size */
.av-seperator-icon:before {
	font-size: 50px;
}
.hr  {
	line-height: 50px;
}

Replace Icon with text in separator

Relplace icon with custom text using CSS.

/*----------------------------------------
// CSS - Separator Styles
//--------------------------------------*/

.av-seperator-icon:before {
	content:"The end";
}

Resource

Contributed video:

Whitespace Element Tutorial