Skyline

Skyline is a new Page Builder for Confluence. With the app you can design Confluence pages and graphic components to embed within the pages, giving them a refreshed look and feel.

Technically, Skyline is a Confluence macro. You can use it the same way as other macros, and you can add multiple macros to one Confluence page.

How to open the app

Type /skyline in the Confluence editor and click Enter to open the Editor

Confluence Macro width

Click on the Macro name "Skyline" and then you can access Configuration bar. Click on the width selection button -> "Go full width" to change the Macro size

to full-width size ⬇️ Select the width that best fits your use case.

How to edit existing content

Click on "Skyline" -> Edit button to open the Editor with the existing content.

How to add content to the Confluence page

Click on the Save button and content will be added to the page.

Editor interface

On the left side, there's a Tools Sidebar. Hover on the specific button to access:

• Text presets

• Image tool

• Button templates

• 3D icon sets

• Spacer

• Divider

• Page Templates

• Status

Templates

These are ready-to-use templates that you can fully customize.

Layout

Structure: Section is the root element. Section contains Rows, and Rows contain Columns (only in Boxed Layout).

You can change the background of the Section, Row and Column. Available background types: Color, Gradient, Mesh, Image, Glass, Video.

Select a Section, Row, Column, and the elements (Text, Icon etc) to edit its properties.

You can change the border radius of Section, Row and Column by dragging the white dots in the corners.

You can add a new Section by clicking the Plus button on the bottom. You can duplicate a Section by clicking Duplicate button. You can re-order the Sections by clicking Move Up and Move Down buttons. You can delete a Section by clicking Delete Section button.

Section Layout: Boxed and Canvas Mode

There are two available section layout modes:

• Boxed: grid-based layout with rows and columns In this mode, section has rows, and rows have columns. Elements can be aligned vertically and horizontally.

• Canvas: free-form positioning In this mode, section doesn't have rows and columns. Elements can be added everywhere.

You can change the Layout mode at the bottom of Section Properties, after selecting a section.

Drag the height handle on the bottom of the section to change the Section height - the handle is available when hovering over a section.

Boxed mode

Canvas mode

Row

In the Row Properties, you can change the columns amount (1-4).

You can change the Row height:

• auto mode: row will take all available space

• px mode: you can change the height manually

You can add a new Row in the Section by clicking Add new row button.

Column

You can change the Column properties after selecting a Column.

Video background

Pick a video from our collection of high-quality visuals.

Image background

Browse a library of expertly crafted images.

Text component

Choose the preset and drag it to the page.

Editing Text elements

Click to select the element. Drag the boxes in the corners to change the font size. Drag element to move it to the other column. Click on the element again to change the text content. Click Delete on the keyboard to remove the element.

3D icon sets

Click on the icon to add it to the page. Select the icon set on the left side of the modal.

There are various icon sets available:

In case of any questions

Contact us at [email protected] 👋