1. Home
  2. Shape Divider

Shape Divider

Updated on May 28, 2018

The Shape Divider is a functionality available in the Page Section shortcode of Jupiter. It allows you to have crooked sections dividing the content of page section with other elements in the page. To see a live demo of Shape Divider click here.

Jupiter Shape Divider Demo 1

Shape Divider Options

To access the Shape Divider options you need to click on the Shape Divider tab inside the Page Section options page. Following is the detailed description of each option:

1Has Top Shape Divider.  

Use this option to enable the divider at the top of the Page Section.

Jupiter Shape Divider Options 1

2Choose a Shape Pattern.  

Use this option to select the pattern of the divider you want to use at the top of the Page Section.

3Shape Size.  

Use this option to set the size of the Shape Divider at the top of the Page Section. Available options are:

  1. Big
  2. Small
4Shape Color.  

Use this option to set the color of the divider at the top of the Page Section.

Jupiter Shape Divider Demo 2

5Background Color.  

Use this option to set the background color of the divider at the top of the Page Section.

6Extra Class Name.  

If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in Custom CSS settings inside Theme Options > Advanced > Custom CSS. This option is for the top of the Page Section.

Jupiter Shape Divider Options 2

7Has Bottom Shape Divider.  

Use this option to enable the divider at the bottom of the Page Section.

8Choose a Shape Pattern.  

Use this option to select the pattern of the divider you want to use at the bottom of the Page Section.

9Shape Size.  

Use this option to set the size of the Shape Divider at the bottom of the Page Section. Available options are:

  1. Big
  2. Small
10Shape Color.  

Use this option to set the color of the divider at the bottom of the Page Section.

Jupiter Shape Divider Demo 3

11Background Color.  

Use this option to set the background color of the divider at the bottom of the Page Section.

12Extra Class Name.  

If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in Custom CSS settings inside Theme Options > Advanced > Custom CSS. This option is for the bottom of the Page Section.

Jupiter Shape Divider Demo 4

Frequently asked questions

Q: Can I add my own shape divider to the theme?

A: Unfortunately no, you can’t. The SVG patters will be dynamically generated and added to the page, so, unless you know how to deal with the codes, you can’t add more shape divider patterns.

Did this answer your question?