Understanding Layouts

When designing your site, there are multiple options for layouts. With document blocks, you have complete freedom to express yourself.

Site Components

Cover Image

Cover images can be added in two ways after entering the editing mode. The first way to add a cover image will be located above the title of the document.

The second option is to open the document options panel at the right hand corner. Here you will also be able to add a cover image.

Best Practices

To maintain a good display across all sizes:

Optimal Size: 1920px x 1000px for high-quality display across formats (cover, gallery views, and embeds).

Best Practices: Center the main elements of the image to avoid important parts being cropped.

Icons

Document icons can be added the same way as cover images, on the top of the title of the document options panel.

Display Formats: Icons appear in both circular and square formats.

File Formats: JPG or PNG (transparent background preferred).

Optimal Size: 250px x 250px.

Best Practices: Focus the primary elements in the center for proper display in both circular and square formats. Use high-quality images to ensure clarity.

Logo

File Formats: JPG or PNG (transparent background preferred, but PNG is recommended).

Preferred Format: Horizontal logos are best suited for this layout.

Optimal Size:

Height: 100px.

Width: Determined by the logo’s proportions.

Color Recommendations: Avoid black or white logos in PNG format, as they may not be visible in both dark and light modes. Instead, use a colored version.