Versions Compared

Old Version 63

changes.mady.by.user Marin Varvodic

Saved on

compared with

New Version Current

changes.mady.by.user Marin Varvodic

Saved on

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.

Image RemovedLines are the most used UI element for separating the pieces of content and sections because they are recognized easily in this role. Page Divider macro allows you to add a style or title to your page dividers, making your pages more attractive. Image Added

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
Macrosuite divider macro
dividerWidth100
dividerTypetext
dividerWeight3
textAlignmentcenter
fontSizemedium
textMiddle
textColor#0052CC
dividerColor#0052CC
dividerIcon
Macrosuite divider macro
dividerWidth100
dividerTypetext
dividerWeight3
textAlignmentright
fontSizemedium
textRight
textColor#0052CC
dividerColor#0052CC
dividerIcon
Macrosuite divider macro
dividerWidth100
dividerTypetext-with-icon
dividerWeight3
textAlignmentcenter
fontSizemedium
textLike
textColor#00b779
dividerColor#00b779
dividerIconfas/thumbs-up
Macrosuite divider macro
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
dividerColor#6a4ec7
dividerIconfont-awesome/MapPin
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
emojiEnabledtrue
dividerColor#0052cc66
dividerIconfont-awesome/Rocket

How to use

To add the Page Divider macro to a Confluence page: 

  • Choose “+” in the Confluence editor

  • Search “page divider” and select the MacroSuite - Page Divider.

Alternatively, type '/' on the Confluence page to see a list of suggestions and type 'Page Divider.' Intuitive configuration dialogue helps users to create and customise buttons fast and easily.

Image Removed
Image RemovedImage Added

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 seamlessly 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.

  • Different divider styles

  • Divider library

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

Button macro
buttonTextSuggest new feature
isButtonShadowOntrue
emoji{}
buttonColor#0252cc#0052CC
buttonBorderColortransparent
buttonBorderHoverColortransparent
buttonNewTabtrue
buttonFontColor#ffffff
buttonSizemedium
buttonIconColor#ffffff
buttonWidthDetection280
buttonHoverColor260transparent
buttonIconColorbuttonFontHoverColor#fffffftransparent
buttonHoverColorbuttonIconHoverColor#0252cctransparent
buttonIconfasbootstrap/angle-rightCloudsFill
buttonTypeicon_righttextbuttonNewLink
buttonLink{"link":"https://caelor.atlassian.net/servicedesk/customer/portal/1/group/1/create/8","source":"direct"}
buttonRadius320
buttonNewLink
buttonShadowemojiEnabled0false
buttonWidth260280

How to create Page Divider with Easy HTML

Learn more about Easy HTML

MacroSuite News

Cp content card macrodata{"type":"blog","variant":"grid","columns":1,"contributors":[],"labels":[],"spaces":[],"pagination":"carousel","enrichment":"dynamic","limit":"2","manuallyPicked":[],"_migrations":["migrateContentCards"]}