Layout is a key element of every Content page. It helps structure content, improves visual appeal, and ensures a positive reader experience. Layering widgets is an easy way to add visual interest and depth to your layouts.
Position a widget
Note: If you're using Column pages, make sure a widget is pinned - widgets in Freeform layout are pinned by default. To check this hover over it in Preview. Pinned widgets will have blue outlines around them.
You can move widgets in Preview by dragging and dropping them to their new position.
Move a widget and place it in the position of another widget. Your widget will either display in front or behind it.
Arrange widgets
By default, the order of widgets in the Content page editor determines their arrangement in the Preview.
The first widget in the editor is positioned in the back.
The subsequent widgets in the editor are positioned in front of the first widget.
The last widget in the editor is positioned in front of every other widget.
However, you can (re)arrange the order in which the overlapping widgets appear. There are two ways to do that.
Arrange widgets in Content page editor
To change the order of widgets in Content page editor, hover over a widget, then click and hold it by the dots icon, and drag it up or down. Drop your widget in the desired position.
Arrange widgets in Preview editor
Note: This can reorder content in the Content page editor, affecting the mobile view.
First, hover over the widget in the Preview. Click the three dots to open the menu and hover over to Arrange. Choose to bring your selected widget to the front or send it to the back.
Break text
Note: This option is only available on Freeform pages.
When a widget is placed over a Text box, you can choose to break text with the widget.
The "Break text" option is available for all widgets from the widget menu or widget settings.
Place any widget on top of a Text box.
Hover over a widget in Preview. Right-click on it or click on the three-dot icon.
Click on the "Wrap text" option in the widget menu.
A widget configuration window will open.
Select "Break text".
Press "OK" to save your selection.
By layering your widgets you can create some stunning layouts that are both beautiful and functional.
Here are some widget layering examples and some inspiration for your next Turtl Doc.
