Layout is how your page is arranged: how wide it is, how the colors and fonts look, and how text and pictures sit next to each other. You can change it in four places, and you can combine them freely.
Change the look of the whole page
Click the palette button (Style template) at the top right of the editor. A style template sets the fonts, colors, page background and how rounded the corners are for the whole page. To use your own brand, choose Manage style templates at the bottom of the list. See Brand your Project Pages.
Make the page narrower or wider
Click the Container width button next to the palette and choose Narrow, Default or Wide. You can also enter an exact width in pixels (the default is 720). A narrow page is easier to read, a wide page gives pictures and columns more room.
Put text in columns
To show a long text in several columns side by side, click the Text element, open its settings and set Text columns. Use Columns gap to adjust the space between the columns. The text flows from one column to the next, like in a newspaper.
Place content next to a picture or on a colored background
The Columns element is the most visual way to lay out a page. It puts your content next to a picture or chart, or on a colored background.
- Click Add element (or a + button between elements) and choose Columns under Layout.
- Click the Columns element and choose its Main content type:
- Image: choose or upload the picture that sits beside or behind your content. Switch on Click image to view to let visitors open it full size, or Fit full image inside sidebar to show the whole picture without cropping.
- Chart: show one of your saved survey charts next to your text.
- Background color: select the color you want. This is an easy way to make one part of the page stand out.
- Choose the Column placement. Docked places the picture or chart in its own column beside your content. Floating places your content on top of the picture or color.
- Choose the Content alignment (Left or Right) and the Content width (Half, Narrow or Wide).
- Click Add element inside the Columns element and add what you want to show there, such as headings, text, images, buttons or a video.
- Click Preview at the top to see what it looks like.
Tip: add several Columns elements one after another and alternate the alignment, with the picture on the left and then on the right. This makes a long page more interesting to scroll.
Tip: to change the background color of the whole page, use a style template instead of a Columns element.
Add space between elements
Every element has a Margins setting (Minimal, Comfortable, Spacious or Custom). For extra space or a dividing line, add a Spacer element and turn on Show horizontal line.