Shape Divider

Last Updated on

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:

1
Has Top Shape Divider.  

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

Jupiter Shape Divider Options 1

2
Choose a Shape Pattern.  

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

3
Shape 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
4
Shape Color.  

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

Jupiter Shape Divider Demo 2

5
Background Color.  

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

6
Extra 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.

x
Note: To learn more about adding custom CSS, check out this article.

Jupiter Shape Divider Options 2

7
Has Bottom Shape Divider.  

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

8
Choose a Shape Pattern.  

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

9
Shape 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
10
Shape Color.  

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

Jupiter Shape Divider Demo 3

11
Background Color.  

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

12
Extra 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket