Looking at the source code of your email template might seem intimidating for some. I assure you, with a bit of know-how and a touch of courage, you can make some simple customizations using your template’s source code.
The first thing you’ll need to understand is that the source code is comprised of two main sections; the HTML (Hypertext Markup Language) and the CSS (Cascading Style Sheets). The HTML provides the structure of the email ie: your content blocks and their contents, while the CSS dictates what that content will look like and how they will behave. Aside from the visible differences in language, you can distinguish CSS because it is wrapped within style tags, i.e: <style> CSS CODE </style>
Most elements in the content blocks contain what is called a class attribute that coincides with style settings in the CSS, telling that element how it should behave. These class attributes are universal throughout your code, meaning if you make a change in the CSS, it will affect every element in your template that possesses that attribute.
NOTE: When you make changes to your template using the style settings panel, the design editor makes those changes within the CSS of your source code.
With this knowledge, you can easily make adjustments to our template to get that customized look, either universally, using the CSS, or on individual elements by removing their class attributes within the HTML. In the videos below, I’ll walk you through 4 of the most common design requests we receive and show you how simple it is to make those customizations yourself. My one recommendation before you jump in (especially if you are unfamiliar with coding) is to make a copy of your template so you can revert back if things happen to go a bit sideways! I also like to copy my source code into a code editing software instead of working directly in Lasso. If you don’t have access to industry software such as Dreamweaver, there are many free options available online; one of my faves is CoffeeCup.
The Horizontal Rule
By far the most simple addition to any template is a divider line. The horizontal rule, as it’s referred to in the coding world, is super easy to add, requires no adjustments to your CSS, and just needs one tiny bit of HTML <hr> to make the magic happen. Check out the video to see how it’s done.
The Full Width Image
Lasso’s single image content block, by default, adds 20px of padding around the image. But what if you want your image to go right to the edges of your template? This adjustment requires just a bit more coding to achieve, but is still very simple. In the video below, I’ll show you how to remove the required class attributes and adjust the image size to get a true full width image block.
Changing the Color on a Single Element
While universal style settings are helpful in creating a cohesive design, there are some instances where you want to make a single element stand out. For example, I want all of my call to action buttons to be green, except for one asking my registrants to sign up for an event. I want that particular button to stand out, and so it should be red! In the video below, I’ll show you have to break free of the style settings for a single element.
Universal and Single Cell Padding
Just like the full width image, each content block in the design editor has universal padding in place. Those can be adjusted to increase or decrease the amount of padding, both universally and on individual cells. Changes to the CSS work well with single column content blocks, but you could land yourself in hot water if you plan on using any of our 2 column blocks. In the video below, I’ll show you those roadblocks and how to avoid them. I’ll also show you how to remove the universal padding and add your own, inline with the HTML.
Understanding the relationship between the HTML and CSS is all you need to be able to make your template look exactly the way you want. With a bit of exploration, there is nothing that can’t be achieved. I can guarantee, the more you dig into the source code, the more familiar you will become. Go forth, email master, you’ve got this!