Using the signature designer
What every control in the designer does, and the order that gets you to something good quickly.
- Last updated
- 6 minute read
- Signatures
The designer is deliberately small. It gives you the choices that matter for an email signature and refuses the ones that break in Outlook, and it shows you the result as you go.
The controls
Layout
Brand colour
Font
ArialLive preview
Previewing as Amelia HartAmelia Hart
Head of Operations, Halden & Rowe
- +44 20 7946 0321
- amelia.hart@haldenrowe.co.uk
- haldenrowe.co.uk
Step 1 of 6
Layout
Four starting shapes. They differ in where the photo sits and how the contact details are stacked, which is what actually changes the feel of a signature.
Reduced motion is on, so the tour waits for you. Use the arrows or the list to move through the steps.
Making a variation rather than a new design
Most organisations need one design and a couple of near-copies: a leadership version with a bigger photo, or an office version with a local address. Duplicate first, then change the copy.
- Open the signature you want to vary and choose Duplicate.
- Rename it something you will recognise in a rule, such as Ireland office.
- Change only what differs. Everything else stays in step with the original design decisions.
- Save, then point a rule at it.
Watch out: Edits apply to everyone the signature reaches. If you want to try something risky, duplicate it and point a rule at the copy instead of editing the default in place.
When to drop into HTML
The HTML view is for the things a visual control cannot express: a two-column table, a specific font size, an inline style that a particular client needs.
- Use it for finishing touches, not as the main way of working. Once you edit the HTML, the visual controls describe what they can and leave the rest alone.
- Variables sit in double braces and are highlighted. See Writing your own HTML.
- The preview beside the editor updates as you change the markup.
1<table cellpadding="0" cellspacing="0" role="presentation">2<tr>3<td style="font:bold 15px Arial;color:#0b1020">4{{display_name}}5</td>6</tr>7<tr>8<td style="font:13px Arial;color:#152c45">9{{job_title}}, {{company}}10</td>11</tr>12<td style="font:12px Arial;color:#3a3f52">13T {{phone}} | M {{mobile}}14</td>15</table>
Preview
Amelia Hart
Head of Operations, Halden & Rowe
- +44 20 7946 0321
- amelia.hart@haldenrowe.co.uk
- haldenrowe.co.uk
Available variables
Related articles
- What goes into a signatureThe pieces that make up a signature, which variable fills each one in, and what controls it.
- Writing your own HTMLEvery variable Signed understands, plus the handful of HTML rules that keep signatures intact in mail clients.
- Templates, defaults and versionsWhat the default signature really means, how to read the list, and how to remove a signature without breaking anyone.
Something here out of date, or a step that did not work? Tell us and we will fix the article. Every page is checked against the running product, so corrections are welcome.