Our new Page builder introduces a modern, block-based content editing experience in Workvivo. It enables administrators to create professional, mobile-first Pages using a drag-and-drop interface with flexible content blocks, structured layouts, and real-time preview.
This enhancement significantly improves the usability, flexibility, and scalability of Pages for admins and content creators.
Let's take a look at the new components that will allow Pages to be created with visually engaging ease. We'll take a look at both the Components Blocks and Markdown Editor.
Component Blocks Guide
These blocks sit on the left hand sidebar and surface when you click on the Components option and are used to give more design control or an advanced layout.
📐 Layout
- 2 Columns: Splits content into two vertical columns
- 3 Columns: Splits content into three vertical columns
📝 Basic Content
- Paragraph: Standard body text block
- Heading 1: Primary section heading
- Heading 2: Sub-section heading
- Heading 3: Nested section heading
- Heading 4: Minor sub-section heading
- List (Numbered): Ordered list with numbers
- Bullet List: Unordered list with bullets
🧱 Structured & Visual Components
| Component | Detail | Use Case |
|---|---|---|
| Embed | Embeds external content (docs, dashboards, Figma, forms) | Use when referencing live or interactive resources |
| Card | Displays content in a visual card format | Use for navigation or highlighting key resources |
| Callout | Highlighted content block for emphasis | Highlighted content block for emphasis |
| Table | Structured rows and columns for organised data | Use for comparisons or structured information |
| Image | Inserts an image into the page | Use for visual support or examples |
| Accordion | Expandable/collapsible content section | Expandable/collapsible content section |
| Video | Embeds or uploads a video | Horizontal line separating sections |
| Button | Clickable action element | Use for CTAs or linking key workflows |
| Divider | Horizontal line separating sections | Use to visually break up sections on longer pages and improve readability |
Markdown Editor Guide
This editor provides a simple and effective way to write and edit text. Some formatting options exist across both Markdown Editor and Component Blocks
🔄 Editing
- Undo: Reverts the most recent change
- Redo: Restores the most recently undone change
🧾 Text Style Dropdown (Normal Text Menu)
- Large Heading: Primary section heading
- Small Heading: Sub-section heading
- Bullet Points: Unordered list with bullets
- Numbered List: Ordered list with numbers
- Quote: Indented quote or highlighted text block (Use to call out important notes or referenced text)
- Code Block: Formatted block for displaying code or technical text (Use for code snippets or structured technical content)
✍️ Text Formatting
- Bold: Emphasises text with heavier weight
- Italic: Adds subtle emphasis to text
- Strikethrough: Shows text as removed or completed
- Inline Code (</>): Formats text as inline code (Use when referencing commands, variables, file names, or short technical snippets within a sentence)
📐 Alignment & Indentation
- Align Left / Center / Right: Aligns text to the left / horizontally / right
- Justify: Aligns text evenly across the line.
- Indent Right: Indents content to create hierarchy.
- Indent Left: Moves indented content back to default alignment.
➕ Inserts & Extras
- Insert (+): Opens component library
- Link: Adds a hyperlink to selected text (Use for external resources or internal navigation)
- Emoji: Inserts emojis into content (Use for visual cues or tone)
- Translate: Translates content into another language (Use for global or multilingual content)
- Mobile Preview: Displays how content appears on mobile (Use to confirm mobile readability and layout)
- <->: Provides options to adjust page width from Default to Medium or Full widths.