Page Builder

We’re excited to have you on board in the beta launch of the Page Builder!

Designed to replace the Layout Editor, our new, what-you-see-is-what-you-get 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

1. On your Refined site, go to the page that you want to edit.

2. In the top-right of the page, click the … (Three dots) > Edit page.

Switch between the legacy Layout Editor and new Page Builder

For a period of time, you’ll have the option to work in the old Layout Editor or in the new Page Builder.

Please note that although they exist alongside each other, a design you make in the Layout Editor is not necessarily 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).

• To go from the legacy Layout Editor to the Page Builder, click the button in the banner at the top of the Builder.

Your users will see the most recently published version of the page, regardless of where it was made.

Content and structure

Modules are your page’s building blocks. Use them to:

• Create navigation.

• Show content from Atlassian Cloud.

• Add information.

Structure a page by organising modules into different sections. Sections can be further organised into rows, which can contain up to six columns.

You can easily switch up your design by dragging and dropping modules, sections and rows around.

Add a module

To add a module to a page, simply hover your mouse over the 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 page.

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:

1. Hover your mouse over an existing section.

2. 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 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. se 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.

Edit a section

Hover your mouse over a section to see its menu, which appears on 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 the page. Alternatively, you can rearrange sections by dragging and dropping them.

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.

View Permissions

Use View Permissions to decide who gets to see a certain section or row on your page. By showing different users and user groups only what’s relevant to them, they can have experiences on-page.

Publish a page or save it as draft

The green round icon with a checkmark shows that the page you are currently working on is saved as a draft. Click the Publish button to make the new version visible on your site, or click the downward arrow next it for more options:

• Publish 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 page, the draft and its comment will disappear from the version history overview.

• Discard current draft takes you back to the version that was last published.

Restore, export, or delete a previous version

Go to the version history overview to restore, export, or delete a previous page version:

1. Go to the left-hand menu (accessible through the three-line icon).

2. Click Version history.

3. Hover your mouse over a version and click the … (three dots) that appear.

Export the current 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 design.

Import a design

Go to the left-hand menu (accessible through the three-line icon) and click Export/Import layout.

Keyboard shortcuts

To make page-building fast and easy, the Page Builder features keyboard shortcuts.