Drag & Drop Builder: Structures
Drag & Drop Builder is one of the three tools you can use to create your message. It is a drag-and-drop tool. The components you can drag and drop onto your message canvas are called 'structures'.
Structures are pre-defined layout placeholders for your content. Instead of an empty canvas, you can use them to order your design. Moreover, using structures will make your message responsive to various screen sizes and devices.
Empty structures
An empty structure is a canvas component with a predefined layout only, but no predefined content elements. Basically, it will just order your content in one, two, three or four columns. You can later freely select the content type from the Element tab.
Predefined structures
A predefined structure is a canvas component with both predefined layout and predefined content elements. We offer different possible combinations, e.g. a predefined structure with the content elements text (left) and image (right) or with four image content elements next to each other.
The way you construct your structures has a big influence on the responsiveness of your message. The width of your structures is automatically scaled to the width of the screen your message is read on. If your structure contains multiple columns, the second, third, and possibly fourth column will move subsequently under the first column once the detected screen becomes too small.
This means that if your first column contains two images, and your right column contains two text elements within one structure, your message will first show the two images and then the two texts on a mobile device. In this example it’s best to use a different structure for every article.
For your convenience, some predefined structures will show you how they will appear differently on desktop and smartphone screens.
Every structure and every element can individually be removed or duplicated. The order of your already existing structures in your message can always be changed by dragging them.
Properties of the structures (structure settings)
Each structure depending on its purpose has different settings. The settings of the chosen structure will be shown on the right side of the page.
- Row background
- Content background
- Column by column settings
- Margins