Website Shape Dividers

Step-by-Step

Shape Dividers are designed to enhance your website layout by adding textural elements to the horizontal sections on the page, helping to blur the edges of sections of content to create a smooth transition as the user scrolls down the page.

Add Shape Dividers to Your HubSpot Website Theme

Content → Website Pages → [POWER SEC Module] → Style → Shape Divider

Style → Shape Divider → Shape Item

This is where you will add the shapes to build your Shape Divider, you can add as many as you would like.

The first item in this list will be in the back (bottom layer). The last item in this list will be visible in the front (top layer).

Style → Shape Divider → Offset Top and Offset Bottom

The shape grows into the content area for the section. The offset adds space between the shape and the content area so you can control whether the shape overlaps the content (above or below can also be determined).

Style → Shape Divider → Above Content

If true, this hides the content if the shape overlaps it.

Style → Shape Divider → Disable on Mobile

Option to disable shape dividers on mobile to reduce the load time for the page (shape and JS files don't have to be loaded).

Style → Shape Divider → Shape Item → Add one

Click this link to add your first shape.

Style → Shape Divider → Shape Item → Diagonal

The default shape is Diagonal and will be the name of the Item until you change the shape.

Style → Shape Divider → Shape Item → Diagonal → Position

Option for the shape divider to be at the Top of the Section or the Bottom of the Section.

Style → Shape Divider → Shape Item → Diagonal → Type

Select the Shape you would like to use:

• Arrow Book
• Arrow Split
• Arrow Split Alt.
• Arrow Straight
• Corner Cut
• Corner Rounded
• Curve
• Round
• Diagonal
• Diagonal Rounded
• Triangle
• Triangle Asym.
• Triangle Asym. Alt
• Triangle Mini
• Paper Cut 1
• Paper Cut 2
• Paper Cut 3
• Wave 1
• Wave 2
• Wave 3
• Wave 4
• Wave Mini

Style → Shape Divider → Shape Item → Diagonal → Flip Horizontally

Option to flip the shape on the y-axis to flip the left side of the shape to the right side of the shape.

Style → Shape Divider → Shape Item → Diagonal → Flip Vertically

Option to flip the shape on the x-axis to flip the top of the shape to the bottom of the shape.

Style → Shape Divider → Shape Item → Diagonal → Invert Shape

Fill the other area of the shape with color, creating the inverse shape from what is shown.

Style → Shape Divider → Shape Item → Diagonal → Transform Style

Choice of Stretch or Scale Ratio.

Scale Ratio will respect the width to height ratio of the original shape; the height will change depending on the device's width. Stretch will stretch the shape to fit your width and height settings; the height will stay the same across devices.

Style → Shape Divider → Shape Item → Diagonal → Width

Adjust from 100% to 300% of the original shape's width.

Style → Shape Divider → Shape Item → Diagonal → Height

Available for Stretch Transform Style only; set the height in pixels.

Style → Shape Divider → Shape Item → Diagonal → Color Type

Choice of Color or Gradient.

Style → Shape Divider → Shape Item → Diagonal → Color Type → Color

Style → Shape Divider → Shape Item → Diagonal → Color Type → Gradient

Examples