Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Setting

Description

Font family

  • Arial

  • Poppins

  • Roboto Condensed

  • Cormorant

  • Playfair Display

Background

Set a colourcolor, gradient or image as background. Customise . Scroll down this page to learn how to use the color picker.

Customize images with these additional settings:

  • Full, repeat or without repeat

  • Position the image

  • Filter (blur, shade, monochrome, vintage)

  • Underlying colour

Banner height

Enter the amount of pixels for the header image.

Secondary background

By default, the background is white. Choose Gray if you want to alternate between sections that you create in the Layout Editor.

Info

This setting doesn’t apply to pages created in the Page Builder - the Page Builder gives you more freedom in designing backgrounds.

Content

Customise Customize the area’s content with:

  • Effects (shadow)

  • Colour Color of the shadow (scroll down this page to learn how to use the color picker)

  • Corners (toggle on to round the corners)

...

Setting

Description

Background

Set a single colourcolor, gradient, or image as background. Customise Scroll down this page to learn how to use the color picker.

Customize images with these additional settings:

  • Full, repeat or without repeat

  • Position the image

  • Filter (blur, shade, monochrome, vintage)

  • Set an underlying colourcolor

Width

Determine your menu's width:

  • Percentage (%) - Always relative to the browser window and suitable for responsive designs.

  • Pixels (px) - A fixed value. We apply your pixel-value as a max-width property to make sure your site is mobile responsive.

Font colour

Set the colour color of all text and icons in the navigation menu. Scroll down this page to learn how to use the color picker.

Text size

Set the size of all text in the navigation menu.

Item background colour

Set the background colour color of all navigation menu items. Scroll down this page to learn how to use the color picker.

Menu type

Set the menu behaviourbehavior:

  • Static - The menu stays at the top of the screen when you scroll. Good for when you want to save some screen space.

  • Fixed - The menu stays at the top of the screen while you scroll. Good for when you want to have the navigation available at all times.

  • Shy - The menu disappears when you scroll down, and shows up again when you scroll up. Good for when you want to save some screen space, but want the navigation handy at the same time.

Spacing

Choose if you want the menu’s distance from the top of the page to be default or spacious

Border

Set a border around the header. Once enabled, you can pick the border’s colourcolor: Scroll down this page to learn how to use the color picker.

Shadow (Effects)

Drop a shadow behind the header. Once enabled, you can pick the shadow’s colourcolor: Scroll down this page to learn how to use the color picker.

Content

Customise Customize the area’s content with:

  • Effects (shadow)

  • Colour color of the shadow

  • Corners (toggle on to round the corners)

Style

Set the background shape of all navigation menu items.

Alignment

Set the alignment colour color of all navigation menu items. Scroll down this page to learn how to use the color picker.

Dropdown style

Set the style of navigation menu drop down lists: light or dark.

...

Setting

Description

Background

Set a single colourcolor, gradient or image as background. Customise Scroll down this page to learn how to use the color picker.

Customize images with these additional settings:

  • Full, repeat or without repeat

  • Position the image

  • Filter (blur, shade, monochrome, vintage)

  • Set an underlying colourcolor

Header colour

Set the colour color of all text headers. Scroll down this page to learn how to use the color picker.

Text colour

Set the colour color of all body text. Scroll down this page to learn how to use the color picker.

Link colour

Set the colour color of all the text that links to another page. Scroll down this page to learn how to use the color picker.

Border

Set a border around the footer. Once enabled, you can pick the border’s colourcolor. Scroll down this page to learn how to use the color picker.

Shadow (Effects)

Drop a shadow behind the footer. Once enabled, you can pick the shadow’s colourcolor. Scroll down this page to learn how to use the color picker.

Start page

Setting

Description

Width

The default width is 1200px (75 rem). You can set a new width by percentage (of browser window width), pixels, or rem.

Fill background

Makes the content fill out the full width of the browser window. This has the same effect as setting the Width to 100%. When the background is filled, you are not able to set the width manually. 

Row style

  • No style - every horizontal section is white.

  • Alternating - sections alternate between white and grey. 

  • Separating line - a thin grey line separates the sections (only applicable to pages build in the Layout Editor: in the Page Builder you can add dividers yourself, which gives you more control over your design).

Title position

Position the title to the left, center or right.

...

Setting

Description

Width

The default width of Confluence pages is 1200px (75 rem). You can set a new width by percentage (of browser window width), pixels, or rem.

...

Color picker

There are multiple ways to pick a colour color in the colour color selection popup:

  • Select the shade and hue at the top of the popup.

  • Enter an rgbRGB, rgbaRGBA, or hex code.

  • Click the eyedropper icon to select a colour color from anywhere on the page.

  • Pick one of the recently used colourscolors.

Use the vertical slider located in the middle of the popup to control the colour’s color’s opacity.