Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

A page divider is a layout element that helps organize and separate content into clear groups, sections, options, or parts. It helps you to make a page layout clearer and readable for users.


Examples

Macrosuite divider macro
dividerWidth100
dividerTypetext
emoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
textColor#0052CC
dividerWeight3
labelPositionmiddle
textAlignmentleft
iconColor#0052CC
fontSizemedium
textLeft
emojiEnabledfalse
dividerColor#0052CC
dividerIconfont-awesome/Rocket
dividerColor#0052CC
Macrosuite divider macro
dividerIcon
dividerWidth100
dividerTypetext
dividerWeight3
textAlignmentcenter
fontSizemedium
textMiddle
textColor#0052CC
dividerIcon
dividerColor#0052CC
Macrosuite divider macro
dividerIcon
dividerWidth100
dividerTypetext
dividerWeight3
textAlignmentright
fontSizemedium
textRight
textColor#0052CC
dividerIcon
dividerColor#0052CC
Macrosuite divider macro
dividerWidth100
dividerTypetext-with-icon
dividerWeight3
textAlignmentcenter
fontSizemedium
textLike
textColor#00b779dividerColor#00b779
dividerIconfas/thumbs-up
dividerColor#00b779
Macrosuite divider macro
dividerColor
dividerWidth100
dividerTypetext-with-icon
emoji{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
textColor#6a4ec7
dividerWeight3
labelPositionmiddle
textAlignmentleft
iconColor#6a4ec7
fontSizemedium
textPinned Message
emojiEnabledfalse#6a4ec7
dividerIconfont-awesome/MapPin
dividerColor#6a4ec7
Macrosuite divider macro
dividerWidth50
dividerTypetext-with-icon
emoji{"id":"blue_book","name":"Blue Book","short_names":["blue_book"],"colons":":blue_book:","emoticons":[],"unified":"1f4d8","skin":null,"native":"📘"}
textColor#0052ccff
dividerWeight3
labelPositionmiddle
textAlignmentcenter
iconColor#000000
fontSize32
textDocumentation
emojiEnabledtruedividerColor#0052cc66
dividerIconfont-awesome/Rocket
dividerColor#0052cc66


How to use

Please follow these steps to insert a Page Divider macro on a Confluence page:

  1. Navigate to the Confluence page you wish to edit or create a new page.

  2. Once in edit mode, either click the plus icon in the navigation bar (insert elements) or press '/' on your keyboard to bring up the macro list.

  3. Type "Optics" in the search bar, then choose the Divider macro from the options displayed.

When the configuration dialog opens, it guides you through customizing your divider, with a live preview showing changes in real-time. Once you're satisfied, click Save to add the button to your Confluence page. If you decide not to proceed, clicking Cancel will cancel the setup without inserting the macro.

Layout structure

Use the Layout structure option to enable/disable icon and text within divider.

Positioning

Use the positioning feature to place the content above or under the line.

Colors

Choose a font, hover, and icon colors from the Atlassian primary and secondary colour palette. If you want to add more colours, use the HEX editor.

Inline editing

Usean inline editing feature and edit the content of your divider. Write your divider copy directly on-screen and make quick changes with one click. The character limit is 40.

Icon/Emoji

Click on icon and choose from more than 5000 icons available and attract even more attention with Atlassian built-in emojis. To change the icon position or remove label, use the “Icon” dropdown in the macro configuration.

Weight

Use the slider to change the divider weight.

Width

Use the slider to change the divider width.


Roadmap

The Page Divider macro will receive updates to improve performance and user experience. We will introduce the following features soon:

  • Different divider styles

    Status
    titleBACKLOG

  • Divider library

    Status
    titleBACKLOG

If you have any questions, need more detailed information, or want to share feature suggestions, please feel free to contact us.