Divider

Adds a divider that can be used to separate content. There are several different divider types to choose from. Some of the dividers have multiple colors that can be set. A divider can show at the top or bottom of an element. The parent element needs to have a relative position CSS style.

DIVIDER SHORTCODE OPTIONS ON BOX SHORTCODE

id
This allows you to add a custom ID to the content box, which sets the client-side ID.
size
You can choose different sizes eg. fullboxed( 100% Full Width with Boxed Content ), full ( 100% Full Width with Boxed Content ) and partial ( Partial Width with Boxed Content ).
background_type
This allow you to choose background color, image, video (WordPress Video) and webvideo (Youtube/Vimeo Video).
image
Set background image.
imagesize
Select size you want to use for the background image. You can use default wordpress size like thumbnail, medium, large and full.
imagemode
When setting the background image, you can choose the following options: Full, Parallax, Parallax (fixed), Repeat, Repeat X, Repeat Y, Zoom In.
background_image_position
Set the background image position according to the background-image CSS property rules.
image_horizontal_position
Set background image horizontal position, You choose the following options: Left, Right, Center. Default Left.
speed
Set background image parallax speed. This option is for Parallax mode only. Default 2
poster
Set poster image. This option required for WordPress video
mp4
MP4 Video File or URL.
ogv
OGV Video File or URL.
webm
WEBM Video File or URL.
video_speed
Parallax mode only – default 0 (0 is normal video background, 1 is fixed video background, or greater than 1 is parallax video background)
mute_volume
When checked, the volume will be muted. Default is Off. Only applies to videos with a Parallax Speed of 1 or greater.
video
Youtube or Vimeo video ID or URL
autoplay
When enabled, the video will play automatically.
volume
Video volume level (0 – 100)
volumebutton
When enabled, the volume on/off button will be visible.
playbutton
When enabled, the play/pause button will be visible.
restartbutton
When enabled, the restart button will be visible.
button_color
Color to be used for volume, play, and restart buttons.
button_font_color
Color to be used for the font on the volume, play, and restart buttons.
button_position
This is where the buttons that are enabled above will display over the content section.
background_color
Background color of content section.
box_class
Optional css class name to apply to the boxed content within the content section
height
Optional – manually sets the height of the content section
breakout
Enabled this option tries to break out of its parent container to force full width. May be needed if theme doesn\’t support full width pages/posts

Divider Options

top_divider_type
Select type of divider on top position
top_divider_primary_color
Set primary color for top divider.
top_divider_secondary_color
May not apply to most divider types.
top_divider_tertiary_color
May not apply to most divider types.
bottom_divider_type
Select type of divider on bottom position
bottom_divider_primary_color
Set primary color for bottom divider.
bottom_divider_secondary_color
May not apply to most divider types.
bottom_divider_tertiary_color
May not apply to most divider types.

DIVIDER SHORTCODE OPTIONS

id
This allows you to add an ID to the divider, which sets the client-side ID.
type
Select type of divider.
location
Select location “top” or “bottom”.
primary_color
May not apply to most divider types.
tertiary_color
May not apply to most divider types.
class
This allows you to add a CSS class to the divider. Adding a CSS class might help you to style certain things.
secondary_color
Set primary color of the divider.

Using Divider Shortcode

[better_divider type="clouds" location="bottom" primary_color="#3ECF8E"]

Using Divider Shortcode on Box Shortcode

[better_box background_type="color" background_color="#3ECF8E" padding_top="200" padding_bottom="200" bottom_divider_primary_color="#ff545e" bottom_divider_type="clouds" bottom_divider_location="bottom" bottom_divider_primary_color="#fff"]] <h2 style=”color:#fff; text-align: center; font-size: 52px”>Clouds Divider</h2>
[/better_box]