If adding assets from outside of Turtl that need editing, here are the following dimensions used throughout Turtl as a guide.

This Doc is your go-to-source for all dimensions within the editor.

It covers:

  • Turtl terminology refresher

    • Definitions of cover, Surf, and Immerse pages

  • Supported file types for Surf videos and images

    • All files that are supported, not supported, and best practice tips

  • Tips and tricks for Immerse page videos and images

    • All files that are supported, not supported, and best practice tips

  • Specific dimensions for each of the five column formatting options in Turtl




Surf and Immerse Page Image Dimensions

Note: The default size is the smallest images should be, if you are wanting to optimize for large screen sizes you can times the default by two but ensure that the optimize tick box is checked before uploading.

Column Dimensions

The below images show the dimensions of the columns and rows in the immerse level grid system. Using these dimensions, it is possible to design graphics to fill a given region within the grid.

Each image shows the grid in a different configuration, one, two, three, four or five columns. The height of a line remains 20px in all cases, but the width of the columns and gutters varies, as indicated by measurements shown. 

Note that you may wish to increase the graphics to 150% or 200% of the size required (file size depending) to ensure they look as sharp as possible on high-definition displays. These larger graphics will be scaled down to fit.

See these dimensions in action on our Dimensions for Designers doc.

One Column:

Two Columns:

Three Columns:

Four Columns:

Five Columns:

Mobile dimensions

Did this answer your question?