Page Builder

Open

Use the Page Builder to edit the content and looks of:

• The site’s homepage.

• Refined Pages.

• The landing pages of Jira projects, Jira Service Management projects, and Confluence Spaces.

On this page

Access the Page Builder

There are two ways to access the Page Builder:

1. Go to the page that you want to edit on your Refined site.

2. Click the Edit page button in the top-right of the page.
   Or use the keyboard shortcut E for quick access.

3. The next step depends on whether you used the Layout Editor for this page before: see the table below.

Or:

1. Go to the Site Builder.

2. Locate the page that you want to edit.

3. Click its … (Three dots) > Edit Page.

Editing pages you’ve built with the Layout Editor

Content and structure

Open

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

• Simplify site navigation. For example, highlight pages and blogs from Confluence spaces or direct users to other links with buttons, icons, and more.

• Create user-friendly support portals, by showing requests and request types from JSM projects and highlighting Confluence knowledge base articles.

• Add any other text, images, and other design elements you’d like.

Structure a page by clustering modules:

• The largest possible group is called a section. It can have its own settings, including backgrounds.

• Sections can be further organized into rows. Rows can also have their own settings and backgrounds.

• Rows can can contain up to six columns that contain modules.

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

Add a module

To add a module, simply hover your mouse over the desired location and click the + Add module button that appears. The availability of modules depends on which Refined app(s) you use.

Edit a module

Click a module to edit its settings: read a module’s documentation to learn about the possibilities (see the module overview 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.

Add a section or row

1. Hover your mouse over an existing section.

2. Click the + Section button or + Row button that appears below the section.

Use text variables

Use text variables to make the content of your modules dynamic. For example, you can use them in a heading or body text to personally welcome a user to your support site, or in a news module’s settings to show news from only certain spaces.

Edit a section

Click a section to make its menu appear at its top right-hand side:

• Click the Lock to determine who can see the section.

• 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

Click a section to edit it:

• A menu appears at the row’s left-hand side:

  • Click the Lock to determine who can see the row.

  • 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. You can also drag and drop rows within or between sections.

• A series of buttons at the top lets you decide on the amount of columns.

• To change the width of a column, click and drag the column’s border.

View Permissions

By showing different users and user groups only the sections and rows that are relevant to them, you can give them personalized experiences on-page.

1. Hover your mouse over a section or row. You’ll see a menu appear on its top right-hand side (section) or left-hand side (row).

2. Click the Lock.

Drafts and publishing

As you build your page, we automatically save drafts for you. The green check mark icon shows that the page you are 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 to 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.

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

Version history

To see an overview of previously published versions, go to the left-hand menu and click Version History. At the top of the list you find your current draft, if you have one. To restore, export, or delete a version/draft, hover your mouse over it and click the … (three dots) that appear.

Reuse page layouts

If you like the layout of a page and want to apply it on another page (and even another site) as well, simply export and import it.

Export a layout

To export the most recently published layout, open the left-hand menu and click Export/Import page layout. To export a draft, go to the Version History (see the paragraph above).

Import a layout

Open the left-hand menu and click Export/Import page layout.

Keyboard shortcuts

Use keyboard shortcuts to speed up the page-building process.

Return to the legacy Layout Editor

The legacy Layout Editor stays available only until May 30, 2024. Your users will see the most recently published version of the page, regardless of where it was made.

To go from the Page Builder to the legacy Layout Editor, open the left-hand menu and click Go to legacy Layout Editor.