When you decide to design a template from scratch, you are greeted with this:
You may not realize it at the moment, but the blue rectangle in your (currently) empty template is actually a structure consisting of a single column! So, what exactly are you seeing, and what can it do?
In the Topol Template Editor, a structure is the foundational building block of an email template. It defines the layout framework for arranging content and helps organize different sections of an email.
Similarly, a column is a designated area within each structure that can be filled with a specific type of content, such as text, images, buttons, GIFs, and others. We can refer to these types as Content Blocks (Text Block, Image Block, Button Block, etc.). All of these blocks are already part of our editor, and all you need to do is decide which column will be filled with which type of content. It's important to note that each column can hold only one block, while each section can contain multiple blocks. It's definitely possible to add many more blocks to each section than the predefined amount. We will now demonstrate the key features of sections, as well as the key features of columns. Buckle up!
Key features of sections
Grid-Based Layout
A structure consists of one to four columns, allowing you to arrange content in a flexible and responsive way. The image below shows all the pre-defined structures that you can drag and drop into the template. They all have the same functionality; the only difference is in the number and spatial distribution of columns within them.
Here is an example of a layout we just created by dragging and dropping some of these structures into our template. This layout consists of four structures (each structure occupies one whole row), while each structure contains a varying number of columns (to be specific, the first structure has one column, the second has two, the third has four, and the last structure has three columns).
Each column within a structure can contain different types of content blocks (text, images, buttons, videos, etc.).
Customizable Properties
You can adjust the width, background color, border styles, padding, and margins for each structure.
Background images can be added to enhance design aesthetics.
To configure the properties of the entire structure, click on it in your template and adjust its settings in the left menu.
You can also adjust the properties of each column within the selected structure separately. In the example below, we have selected a structure that consists of four columns. Therefore, we have the ability to modify the properties of any of these four columns.
Drag-and-Drop Functionality
Structures can be added, removed, duplicated, and rearranged within the editor using an intuitive drag-and-drop interface.
After you click on any structure, an interactive border, as shown in the image below, will appear. You will also see multiple buttons along this border.
The functions of these buttons are:
Add another empty structure above.
Add a comment to this structure.
Temporarily save a copy of this structure into the clipboard.
Permanently save the structure and its content into a gallery.
Delete this structure.
Add another empty structure below.
Drag and drop this structure anywhere else in the template.
Switch this structure with the one above.
Switch this structure with the one below.
Responsiveness & Mobile Optimization
Structures are designed to be fully responsive, ensuring email templates display correctly on both desktop and mobile devices.
The “Stack columns on mobile” option modifies the automatic stacking of columns on mobile for layouts that require a specific format.
If this option is turned on, columns within one section will stack on top of each other when viewed on mobile. If it is turned off, columns will remain side by side.
Pre-Made Structures for Efficiency
You can select from pre-built structure templates to speed up the design process.
These structures can still be customized to fit branding needs.
To view and use these pre-made structures, navigate to the Premade tab in the Content menu and select a specific category of structures (header, content, e-commerce, or footer).
That should wrap up the introduction. Now, head over to the template editor and experiment with it! There are plenty of other options that we didn’t cover here for you to explore. If you find yourself getting lost or need clarification on any functionality, don’t hesitate to contact us!