Enhance Your Email Design: How to Add Vertical Lines, Dividers, and Separators
In this article, I will show you how to add vertical lines using borders to your email designs to separate items or to provide visual separation between columns.
Looking to improve the visual appeal and organization of your email newsletters? Learn how to add a vertical line in email templates, create stylish vertical dividers, and effectively use vertical separators in your emails. This guide will walk you through simple steps using the Chamaileon email builder, ensuring your content stands out and is easy to read on any screen size.
This solution is the easiest to implement and with a little trick, it can be flawless on mobile and any screen other screen size too
In my example, I divide text menu items with vertical separators but I like to use this for event date lists or separate news blurbs.
This is how you add a vertical line (border) in the Chamaileon email builder:
Drag a box element to your email where your item will be. This box represents the item(s) you'd like to add the line between.
a: Then I add a text element to it because I create a menu.
2. Text itself holds no interest for us now, you should click on the ''Box'' in the breadcrumbs on the top of the editor. Learn to use the breadcrumbs to navigate the email design's layers.
3. On the right side, in the toolbox, under ''Border'', click ''Separate'' and add a right (or left) border px number to the border of your box. I use 2 pixels width in my example.
You can also change the color or the style of your border - in our case - line.
And there you will see vertical lines!
4. You can "move" - align them by clicking on ''Box'' again in the breadcrumbs and then under ''Margins'' you can add left, right, bottom or top margin. You should also add padding to play with space. Try it out and iterate on it for yourself.
5. You can add multiple vertical lines by using columns. Just duplicate your box with a vertical line and move it beside your original box. Chamaileon editor automatically creates a column structure from your placement. You can add a column element as well and populate it with boxes but I always prefer copy-paste, much more efficient.
I use text elements in this example to add them to the column to create a top menu with dividers.
And there you go another vertical line!
By following these steps, you can create a visually appealing and well-organized newsletter email templates with clear separations between different news blurbs or sections using vertical lines. This method ensures the design is responsive and looks good on both mobile and desktop screens.
Example Use Cases
Newsletters: Separate news blurbs or articles.
Event Lists: Divide dates and event details.
Menus: Create a navigational menu with clear dividers.
Tips
Experiment with border styles and colors to match your brand's aesthetics.
Use margins and padding to fine-tune the placement and spacing for a polished look.
Utilize the copy-paste function for efficiency when adding multiple vertical lines.
If you have more questions or need further assistance, feel free to ask!