Customize templates with browser HTML/CSS editor
This tutorial will show you how to edit a predesigned template in Gmail. It requires some basic knowledge in HTML and CSS.
This is an advanced option for users who know how to use HTML/CSS. Please do not modify anything if you are not 100% sure, otherwise you might end up with formatting issue in your emailing campaigns.
If you have some knowledge in HTML and CSS, you can edit Gmail Layout templates (changing the color, size of the borders etc.), or creating your own, through the developer tools available on Google Chrome / Firefox.
On the following guide, we will show you how to change the color of the header, the button, and the style of the text.
1. Open the template in Gmail
2. Open the developer tool
To do so, right-click from your Gmail interface, then click on 'Inspect'. A new window will appear. We recommend to place it on the right side (1) of your screen if it's big enough. Then, click on 'Elements' (2):
3. Inspect the content of your email
Click on the inspect icon from the developer tool (3), and place it in the section you want to modify in your Gmail draft/template. In our example, we will inspect the blue header, where you can read 'Lorem Ipsum' (4):
In the meantime, you will notice that the line code matching the element you have just inspected (= the header) is automatically highlighted in the developer tool. Just click on the highlighted line (5):
Then focus on the 'Styles': This is where you will enter all the CSS codes to customize the template. In our example, the element style that we want to change it called 'background-color'. You can click on the little blue square (6), and select another color (7):
You can do precisely the same thing for the 'Read more' button:
The result after customization
This article is only an overview of what you can do to customize a predefined template. If you are interested in learning more about this option to edit your email style, we invite you to consult this documentation from Google which will explain how to use the Elements from this tool. Here is also the official list of CSS properties supported in Gmail.