How can we help you today?

How to Customize the Divider Design Element

This article will demonstrate how to customize the Divider Design Element and expound on its modifiable features.

 Divider


TABLE OF CONTENTS


Prerequisites

  • You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You are a ShortPoint Designer with an active license.

Interactive Tutorial

Click Get Started to learn how to customize the Divider Design Element:



NOTECheck out Divider Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Divider Design Element:


Step 1: Edit the ShortPoint Web Part

  • Go to the SharePoint page you want to use and click Edit.


Edit

  • Click the ShortPoint tag.
  • Select the pencil icon.

Step 2:Insert the Divider Design Element

  • Click the plus icon.
  • Use the search box to look for Divider and click it.

Step 3: Customize the Divider’s design

  • Navigate to the Design tab.
  • Select the Style you prefer.
  • Once satisfied, click the green check mark.


NOTECheck out Divider Features to learn more about the OOTB options you can customize.

Step 4: (Optional) Adjust the spacing and margins

  • Adjust the spacing and/or margins around the Divider according to your preference using Hot Actions.


NOTECheck out ShortPoint Page Builder Live Mode Feature: Hot Actions to learn how to use Hot Actions.

Step 5: Save

  • Then, click the eye icon to see your page in real-time.


eye icon


  • Click Save to apply all your changes.


Save


Divider Features

Below are the options you can find in the Divider Settings window:


A. Design tab

The Design tab allows you to customize the style of the Divider Design Element. It has the following styles available:


Divider

Solid
Solid
Double
Double
Dashed
Dashed
Dotted
dotted
Double-dashed
Double-dashed
Double-dotted
Double-dotted
Tiny Shadow

Tiny Shadow
Tripple

Triple
Dashed-2

Dashed-2
Dotted-2

Dotted-2
Slashes
Slashes
Zig-zag
Zig-zag
Vertical-faded
Vertical-faded
Horizontal-faded
Horizontal-faded
With-love
With-love
Cut-me
Cut-me
Vintage

Vintage
Inverse

Inverse
Curved

Curved
Fade

Fade
Fade-2
Fade-2
Dots
Dots
Accessory

Accessory
Pill
Pill
Vertical-lines

Vertical-lines
Horizontal-lines

Horizontal-lines
Slash-1
Slash-1
Slash-3

Slash-3
Bookends
Bookends
Bookend-dots

Bookend-dots
Flair

Flair
Wave

Wave
Shine
Shine

B. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Divider Design Element. 


NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

Custom CSS tab


NOTEThe Visibility tab is currently unavailable in Live Mode.


That’s it! You now know how to customize the Divider Design Element. 


Related articles:


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 60 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more