Before you read any further, it's important to note that this article builds upon the knowledge shared in the article on Structures. To properly understand how Structures and Content blocks work together, we recommend reading this article only after you become familiar with structures.
Content blocks in Topol are the essential building blocks for designing email templates. They allow you to insert and manipulate different types of content within a structure. In other words, every template made with our editor is just a collection of content blocks arranged in a specific order. However, you are not able to place content blocks wherever you want. They are always contained within a Structure, which can hold one or multiple content blocks placed (by default) next to each other. Structures are then stacked on top of each other like Lego pieces.
Content blocks are divided into categories based on the type of content they can display. Here is a list of the most important categories and their use cases:
Text – Add and format text.
Images – Upload or link images.
Buttons – Create call-to-action buttons.
Dividers – Add horizontal lines for separation.
Spacers – Insert blank spaces for layout adjustments.
Social Icons – Add links to social media platforms.
Videos – Embed video thumbnails linked to external sites.
GIFs – Add animated elements.
HTML Blocks – Insert custom HTML code.
Please be aware that certain categories may not be included in the free plan. To access them, consider subscribing to our Topol PRO.
Here is the whole selection of content blocks that are available in the Topol editor:
To place any of these blocks into our template, we first need to create the underlying template framework from structures. It can look something like this:
Each default structure, highlighted by the interactive purple border, can contain between one and four blocks. Areas, where a block of any content can be placed, are always represented by blue rectangles featuring a large blue plus symbol in the center. These tools are visible only in editor mode and will not be present in the preview or final template.
To place content in any of these blue areas, you can either drag and drop the desired content block from the selection into that area or click on the blue plus symbol to open a modal window with the same selection and select the desired content type.
Let's say we want to place text, images, and a button into the third structure. Once done, hover over any of your three different content blocks. Here, we are hovering over the Text block:
Similarly to structures highlighted with purple interactive borders, every block in your template is highlighted as well! In this case, it has a green color and a slightly different set of functions. Let's go through the available actions one by one:
Add another block above - The number of content blocks within a structure is limited to four only on the horizontal axis (in a row), but there is nothing stopping you from stacking additional blocks on the vertical axis (in a column). In fact, the number of blocks you can have in one column within the same structure is limited only by the size of the email. Clicking on this button will add an empty default column above the current one, waiting to be filled with content of any type.
Add a comment - This will open a panel to the left. In it, you can read notes left by other members of your team working on the same template and leave notes for them. This greatly enhances the efficiency of team collaboration.
Adjust width - The width of every block can be adjusted by grabbing and dragging the marker from left to right. Please note that this marker is always on the right side of the block, never on the left, so that you can stretch or compress a block only in one direction. Additionally, blocks within a structure always strive to fill the available space around them. Therefore, as you reduce the size of one block, the block to the right will attempt to occupy the newly available space, automatically increasing in size.
AI assistant tools - A special function that is only available to the text block that takes advantage of AI to enhance the present text. You can choose from several options: Improve, Rephrase, Make it shorter, or Make it longer.
Duplicate - This useful function allows you to take any block (regardless of its content type) and place an exact copy of it anywhere in your template. To copy a block, click on this symbol while holding the cmd (or ctrl) key. Next, click on any other block within your template (it does not have to be within the same structure) and press cmd + V (or ctrl + V). The copied structure will be inserted directly below it and will be the same size as the other blocks already in this column.
Delete - To delete a content block, simply click on this symbol. However, there's one catch: you can only remove the content block within each column, not the column itself. As a result, after deleting the text, you'll be left with a default blue block, ready to be filled with any type of content again. If you wish to remove the whole column, you need to replace the whole structure with one that contains the desired number of columns.
Add another block below - This button functions identically to its counterpart labeled with the number 1; however, it adds an additional block below the current one.
Relocate - One of the most useful features available for content blocks is the ability to move them around the template. By clicking on this button and dragging it, you can reposition the selected content block anywhere within your template. As you hover over the selected content block above the template, you will notice that all other blocks shift away, creating an empty space for placement. You can also move the block above or below another block or even to a completely different structure.
As you select your block, all of its properties will be displayed in the options panel to the left of your template. Here, you can adjust the content of each selected block independently from other blocks of the same content type. As expected, these options are consistently related to the type of content within your block.
If you are interested in working with specific types of blocks (e.g., Text Blocks, Image blocks, or Button blocks), please read the article on this topic.
If you need any help using Blocks, please do not hesitate to contact our support team. We are happy to assist you!