This tutorial will show you how to edit the predesigned templates for YAMM in the template gallery. It requires some basic knowledge in HTML and CSS.
If you have some knowledge in HTML and CSS, you can edit our predesigned template (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 take as an example the first template in our gallery called 'Bilberry and Apple', and 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 our 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.