We’re excited to have you on board in the beta launch of the Page Builder!
Our Designed to replace the Layout Editor, our new what-you-see-is-what-you-get editor Page Builder lets you see your design come to life in real time as you build. You’re now able able to add, drag, edit, resize, and design content directly in the user-facing view of your page.
Access the
...
Page Builder
If the most recently published version of your page was created in the Layout Editor
...
:
Go to the page that you want to edit on your Refined site.
In the top-right of the page, click the … (Three dots) > Edit page 2.0.
Switch between editors
It’s still possible to access the old Layout Editor:
On your Refined site, go
You’re now in the Layout Editor. Click the button in the banner at the top of your screen to go to the Page Builder.
If the most recently published version of your page was created in the Page Builder:
Go to the page that you want to edit on your Refined site.
On In the top-right of the page, click the … (Three dots) > Edit page.
...
Go to the legacy Layout Editor from the Page Builder
During the Page Builder beta, the legacy Layout Editor will continue to be available for use.
Please note, however, that a design you make in the Layout Editor is not available in the Page Builder, and vice versa. Soon, you’ll have the option to migrate your layouts from the Layout Editor into the Page Builder.
To go from the Page Builder to the legacy Layout Editor, click the button in the welcome banner, or go to the left-hand menu (accessible through the three-line icon).
Note that your Your users will see the most recently published version of the page, regardless of the editor where it was made in. Save a new layout as a draft if you don’t want it published yet. A draft in the legacy editor is not available in the new editor, and vice versa.
Content and structure
Modules are your page’s building blocks. Use them to:
...
You can easily switch up your design by dragging and dropping modules, sections and rows around.
[ gif/screenshot ]
Add a module
To add a module to a page, simply hover your mouse over a spot in the layout desired location and click the button that appears.
The availability of modules depends on the content of your Refined site. For example, if you don't have a Confluence space on your site, you can’t add a Confluence-specific module to your layout.[ the children macro will show a list of module pages, once I have them ready ]page.
| Child pages (Children Display) |
|---|
Add a section or row
Sections and rows act as containers for modules and help you organise your page. To create a new section or row:
Hover your mouse over an existing section.
Click the + Section button or + Row button that appears below the section.
Edit a
...
module’s settings
Click a module to see its menu, which appears on the its right-hand side.
Click the Cogwheel to edit the module’s settings. Available settings vary per module: read a module’s documentation to learn about the possibilities (see the list of modules above).
Click the Two pages to duplicate the module.
Click the Bin to delete the module.
Edit text in a module
Simply click a module’s text to start writing and formatting.
Formatting option | Description |
|---|---|
Text styles | Choose the paragraph style or one of the five heading styles. |
Text sizes | Available sizes range from 10 - 72 pixels. |
Font | All modules use the font that you set in the theme. |
Colour | There are multiple ways to select a colour:
Use the vertical slider located in the middle of the popup to control the colour’s opacity. |
Emphasis | Make the text bold, italicised, or underlined. |
Alignment | Align the text to the left, centre, or right. |
Lists | Create a numbered list or bullet list. |
URL | Add a link to the text. |
Remove formatting | Change the text back to its default look. |
Make module content dynamic
Use text variables to make the content of your modules dynamic – for example to personally welcome a user to your intranet. When writing text in a module, hit $ to see which text variables are available.
...
Text variable | Shows | Works on |
|---|---|---|
$username | The user’s username. | All content types |
$userfullname | The user’s full name. | All content types |
$userfirstname | The user’s first name. | All content types |
$sitename | The site’s name. | All content types |
$siteid | The site’s ID. | All content types |
$servicedeskname | The service desk’s name. | JSM portals |
$servicedeskid | The service desk’s ID. | JSM portals |
$pagename | The Refined Page’s name. | Refined Pages |
$pagekey | The Refined Page’s key. | Refined Pages |
$spacekeys | A list of the space keys that belong to this page’s child pages. | Refined Pages |
$projectname | The Jira project name. | Jira project |
$projectids | A list of Jira project IDs, including the current page and its child pages. | Jira project |
$projectkey | The Jira project key. | Jira project |
$projectid | The Jira Project ID. | Jira project |
$spacename | The Confluence space name. | Confluence space |
$spacekey | The Confluence space key. | Confluence space |
Edit a section
Hover your mouse over a section to see its menu, which appears on the its top right-hand side.
Click the Lock to set the section’s View Permissions.
Click the Cogwheel to edit the section’s settings: see the table below.
Click the Two pages to duplicate the section.
Click the Bin to delete the section.
Click the Arrows to move the section up or down in the layoutpage. Alternatively, you can rearrange sections by dragging and dropping them.
Setting | Description |
|---|---|
Background | Choose which type of background to add.
|
Spacing | Set the amount of space between sections. This setting also applies to the space between a section and the page’s top or bottom of the page.
|
Edit a row
Hover your mouse over a row to edit it.
On the row’s left-hand side, a menu appears:
Click the Lock to set the row’s View Permissions.
Click the Cogwheel to edit the row’s settings: see the table below.
Click the Pages to duplicate the row.
Click the Bin to delete the row.
Click the Arrows to move the row up or down within the section. Alternatively, you can rearrange rows by dragging and dropping them within the current section or into another section.
On the row’s top, a series of buttons appears that let you decide on the amount of columns.
To change the width of a column, click and drag the column’s border.
Setting | Description |
|---|---|
Spacing | Set the amount of space between rows.
|
Height | Set the height of the modules within this row.
|
Module alignment | Align modules to the top, middle or bottom of the row. |
View Permissions
Use View Permissions to decide who gets to see a certain section or row in on your layoutpage. By showing different users and user groups only what’s relevant to them, they can have experiences on-page.
...
| Info |
|---|
You can also set View Permissions on a site-level: learn more in the Refined for Confluence Cloud documentation. |
Apply a template
...
. |
...
To apply a template, go to the left-hand menu (accessible through the three-line icon) and click Layout templates.
...
Publish a
...
page or save it as draft
The green round icon with a checkmark shows that the layout page you are currently working on is saved as a draft. Click the Publish layout button to make the layout new version visible on your site, or click the downward arrow next it for more options:
Publish layout with comment lets you add a comment to the published version. All comments are visible in the version history in the left-hand menu (accessible through the three-line icon).
Save as draft with comment lets you add a comment to the current draft version. This comment is visible in the version history in the left-hand menu (accessible through the three-line icon). Note that when you publish a new version of the layoutpage, the draft and its comment will disappear from the version history overview.
Discard current draft takes you back to the layout version that was last published.
...
[ will be replaced with better screenshot ]
Restore, export, or delete a previous layout version
...
Version History
The Version History shows an overview of previously published versions and saved drafts.
As you build your page, we automatically save drafts for you. You can also save drafts with comments (see the paragraph above). Once you publish a version, your saved drafts disappear from the Version History overview.
Restore, export, or delete versions and drafts
Go to the left-hand menu (accessible through the three-line icon).
Click Version historyHistory.
Hover your mouse over a version and click the … (three dots) that appear.
Export the
...
most recently published page layout
...
If you want to reuse a page layout, you can export it and import it to another page.
Go to the left-hand menu (accessible through the three-line icon) and click Export/Import page layout. Note that you export the most recently published version. To export a draft, go to the Version History (see the paragraph above).
Import a page layout
Go to the left-hand menu (accessible through the three-line icon) and click Export/Import page layout.
Templates
We have designed templates to help you get started. A template is merely a starting point – after adding it, you can further adjust the page.
Keyboard shortcuts
To make page-building fast and easy, the Layout Editor features keyboard shortcutsNote that when you apply a template, you discard your current draft and start a new one.
Apply a template
Go to the left-hand menu (accessible through the three-line icon) and click Templates.
Keyboard shortcuts
Use keyboard shortcuts to speed up your page-building.
Action | Shortcut |
|---|---|
Publish |
|
Close the editor |
|
Undo |
|
Redo |
|