One of the Apex custom modules that is more unique is our Curve Divider module. While the curve that you see above or below in some places in an option built into another module, this module allows you to place this visual effect wherever you'd like!
Requirements
To use this module, the following will be required:
- Section the section spacing to be FULL WIDTH. A section will default to use a container, so you'll need to change it to "Full Width" or it will not look right.
- Set the background color of the section to match the section below the divider.
- Set the color of the curve shape in the module to match the section above the divider.
- Select Convex or Concave options for the curve direction.
Pre-built Section
While this is pretty simple, we do have a pre-built section ready that you can quickly add in. When adding a section on your page by clicking the blue circle with + icon, you'll see this Curve Divider section. You can drop it on your page and already have a pre-configured divider setup, then edit as needed.
Module Settings
Here are the settings that need set for the module:
- Section ID. This will default to a number. You can change it if you'd like. The purpose of this is two-fold. One, when multiple divider modules are used on a page, the ID must be unique. Two, you can use this ID for anchor links if you want to make an anchor link on the page to go to this section.
- Shape Color. This was noted above, but is the color of the curve shape.
- Shape Version. You have options of Convex or Concave, which determine the shape of the curve.
- Top and Bottom Margins. These values are a % and allow you to move the curve shape up or down to line up as you want with sections above and below.