In the last couple of weeks we have been discussing the different tabs in the Template editor of Flexfer CRM. The last tab to be discussed contains the content blocks that are used to build the body of the email template, which is what we will pass over now.
When the rightmost tab is opened, a screen looking like this will appear:
Each block can be dragged into the Template to give shape to your email. These different blocks can be classified in several different groups, which all have their own kind of behavior:
- Predefined content blocks
Columns allow you to put different types of content next to each other. There are three types of columns: a single column, two columns, or three columns.
Other blocks can be dragged into these columns, or columns can be dragged underneath or above each other. Columns can’t be dragged into other columns.
Note that any Column inserted will come pre-populated with a Text element. This element can be deleted if you so wish by selecting it and simply pressing the ‘delete’ button on your keyboard.
Tip: two columns will automatically be equally wide. If you wish to change this to make one of the two columns wider, select the column that you wish to make smaller and go to the Style Manager. In the Dimensions tab, you see that the width is set to ‘auto’.
Setting this column’s width to 40% and the other column’s width to 60% will maintain the proportions of the email while giving you one bigger and one smaller column.
Other dimensions are also possible, just make sure that the two percentages add up to 100%.
A navbar is a bar containing a predefined set of items. It consists of two parts: the NavBar, and the NavBar button. These items are considered a part of a hierarchy, with a NavBar Button always being placed inside a NavBar.
A NavBar comes pre-populated with the buttons that you see in the image above. These buttons can be customized by double clicking on them to change the text, and their target url can be set by clicking on the button and then going to the Settings Menu, where you can set this in the href field.
There are two pre-defined NavBar buttons that are important to take into account: the NavBar unsubscribe link will add a button to the NavBar that is labeled ‘Unsubscribe’ and already has the code in the href field entered that is required to generate the required unsubscribe link. The NavBar webversion link will add a button to the NavBar that is labeled ‘View Webversion’ and already has the code in the href field entered that is required to generate a webversion of the email.
The Social bar works with the same hierarchical system as the NavBar: the Group Social item can be dragged anywhere into the template, while additional Social Elements can be added in case more buttons are required.
You can set the image for every Social Element option individually by clicking on the button and going to the Settings menu, where you will find a dropdown menu showing you the available Social images available for immediate use under the ‘icon’ header:
As with the NavBar, you can set the href attribute to directly point the button at your specific social media account.
The Text block allows you to drag a text element into your template, after which you can add any text you like by selecting the block and then double-clicking in it to activate the text editor.
While editing the text, you will notice that an options bar shows up at the top of the text bar, looking like this:
This bar allows you to control the text that you are typing at that moment, or to set the features of the text that you have selected at that point.
Dragging an image box into the template editor will automatically enter a placeholder image to show where it is, which looks like this when dropped into a two-column setup:
If you wish to change this image, double click on the image itself, which will open up a window in which you can select previously imported images, or upload a new image by dragging and dropping them into the dialog box, or clicking into the dialog box to open a file browser and selecting your image to upload:
Uploaded images will remain available for use at a later date.
In the style manager, you can change the width and height of your image under the ‘Dimension’ tab. The width and height will be set to ‘auto’ by default, which means that the image will be scaled to fit into the column it is dropped into.
If you change the width value to a pixel value by entering a number, but leave the height value on ‘auto’, the image will be scaled to maintain its relative size, so it won’t be stretched or compressed. However, do note that an image can’t be wider than the column that contains it.
Buttons are predefined blocks, which can be sized and colored to your wishes. You can set the colors and size in the Style Manager, where the Width and Height can be set just like images in the ‘Dimension’ tab: the width and height will be set to ‘auto’ by default, which means that the image will be scaled to fit into the column it is dropped into.
If you change the width value to a pixel value by entering a number, but leave the height value on ‘auto’, the button will be scaled to maintain its relative size, so it won’t be stretched or compressed. However, do note that a button can’t be wider than the column that contains it.
In the ‘Typography’ tab, you can edit the style and color of the text in the button. To edit the text itself, select the button in the editor and double click on the text to edit it, just like editing the normal text.
In the ‘Decorations’ tab you can edit the color and border of the button. Note that there are two ‘background’ lines: the top line governs the button background color, while the bottom line governs the background around the button.
Spacers are simple white space that can be inserted into any email to make content move further up or down. When you click on the Divider in the email, you can set the exact height in Dimensions tab of the Style manager.
A Divider forms a simple line that neatly divides two different parts of content. The width of the divider is governed by the width of the column it is placed in, or can be set in the Dimensions tab of the Style Manager.
The ‘Wrapper’, ‘Raw’, and ‘Hero’ content blocks will insert predefined content, with combinations of the other blocks being inserted to show the possibilities of the different blocks in combination with each other. It is also possible for Marketing Industries to insert new predefined content blocks based on your wishes.
With all of the different blocks out of the way, we will start discussing the usage of data from the system in your emails, allowing you to personalize emails to the specific recipients, next week. After that, we can return to the discussion of the different Workflow nodesl.