# Email content, styling, and personalization When creating an email from scratch, or editing a prebuilt template, there are lots of parts that can be added, removed, or edited. {% hint style="info" %} In this article: **Email Content** * [Subject Line](#subject-line) * [Preview Text](#preview-text) * [Template Elements](#template-elements) * [Content Elements](#content-elements) * [Layout Elements](#layout-elements) * [Prebuilt Blocks](#prebuilt-blocks) * [Reusable Blocks](#reusable-blocks) * [Managing Content in the Editor](#managing-content-in-the-editor) **Personalisation** * [Predefined Variables](#predefined-variables) * [Custom Variables](#custom-variables) **Styling** * [Global Styling](#global-styling) {% endhint %} ## Email Content ### Subject Line {% hint style="warning" %} You **must include** a subject line when building your email. {% endhint %} The subject line is arguably the most important part of your email. It needs to grab the attention of the recipient in a potentially crowded inbox, and encourage them to open your email, so make sure the phrase or sentence you use is enticing, honest, and gives them an idea of the content or purpose of your email. You can enter a subject line by selecting subject line text field at the top of your email editor and entering your copy. You can include emojis and variables too. ### Preview Text Preview text is an optional but highly recommended element of your email, displayed by most email clients just next to the subject line. If you do not specify a preview text, email clients typically default to showing the first line of your email content, which may not be the most engaging or informative snippet. By adding customized preview text, you can provide additional context to your subject line, further enticing the recipient to open your email. You will find the preview text field located just below the subject line field in your email editor. ### Template Elements #### Content Elements In the email editor, content elements are blank, customisable sections that you can drag-and-drop into your email. Content blocks make it easy to create beautiful emails without needing to use any code. Let's take a look at the content elements you can use:
Text With a Text, you can: * Add text to your email. * Customize text font. * Customize text color. * Personalize your text with variables.
Image With an Image, you can: * Upload images to your email. * Add alt text. * Hyperlink your images. * Adjust image dimensions.
Button With a Button, you can: * Add inteactive elements and CTAs to your email. * Customize button font. * Customize button size and padding. * Hyperlink your buttons. To add links to send an email or call a phone number from your email, add the following format in the link field of the button mailto:\ tel:+xxxxxxxxxx
HTML Code With an HTML Code, you can: * Add custom HTML code to your email. * Customize your email with advanced design elements or specific formatting that isn't available with our default content blocks.
Divider With a Divider, you can: * Visually separate sections in your email with a customizable horizontal line.
Spacer With an Spacer, you can: * Visually separate sections in your email with negative space for improved readability. * Use the default spacer height of 20, or adjust it to a new height.
Social Icons With Social Icons, you can: * Add social media links to your email. * Use any of the four default social icons, including WhatsApp, Facebook, Instagram, and X.
Table With a Table you can: * Organise content using rows and columns
Rating With a Rating, you can: * Add an easy way to ask for rating to your emails. * Link to a form to collect feedback. Users will be shown this form after submitting their rating.
Product With a Product element, you can: * Select products from your catalog to showcase in your email. * Showcase dynamic products using a product feed.
#### Layout Elements To create visually appealing and well-structured emails, you can use various layout elements such as full width, two columns, and three columns. **Full Width:** Utilize the full width layout to span content across the entire width of the email. This is ideal for showcasing large images or highlighting important announcements. **Two Columns:** The two-column layout is perfect for dividing content into two equal sections. You can use this layout to compare features, display side-by-side images, or present paired information clearly. **Three Columns:** For more complex designs, the three-column layout offers a balanced way to present multiple pieces of content simultaneously. This can be useful for categorizing products, listing benefits, or organizing detailed information efficiently. You can also experiment with other layout elements such as a **Four Columns** layout for showcasing multiple items, or a **Two Columns (Custom Widths)** layout to give different percentages of space to the left and right columns. These variations can help you create more interesting and brand-specific emails. To add these layout elements to your email, drag the desired layout element from the editor's sidebar into your email design. Once added, you can populate the columns with text, images, or other elements. ### Prebuilt Blocks Prebuilt blocks are predesigned sections that you can drag-and-drop into your email, simplifying the creation process. They come ready-made with text, images, buttons, and other customizable content elements. Let's take a look at the prebuilt blocks you can use:
Header The header block appears at the top of an email. It's typically used for branding purposes, containing logos, brand names, or navigation links.
Hero The hero block is designed to grab the email recipient's attention. It's typically used for drawing attention to a key message or offer.
Image + image This block allows you to display two images side by side within the email. It's useful for showcasing two products, services, or images that complement each other.
Image + text This block allows you to display a single image with accompanying text.
Gallery This block allows you to display multiple images in a single group.
Footer The footer appears at the bottom of an email. It's typically used for displaying essential information such as unsubscribe links, contact details, social media links, and legal disclaimers.
### Reusable Blocks You can save any content block in your email as a *reusable block**.*** Reusable blocks are a great way to maintain style and branding consistency over multiple emails. By saving a styled block as a reusable block, you and your team can use it again in future emails. To save a content block as a usable block, follow these steps: 1. Hover over the block to bring up the block menu. 2. Click the star icon (⭐), which you'll find next to the 'delete' and 'duplicate' icons. This will save the block as a reusable block. To find and use a saved reusable block, follow these steps: 1. From the email builder panel on the right-hand side of your screen, under 'Blocks' > 'Your blocks', find the reusable block you want to add to your email. 2. Drag and drop the block into your email. {% hint style="info" %} Reusable blocks can be edited once you've dragged and dropped them into your email. {% endhint %} {% hint style="warning" %} Any changes you make to a reusable block will not be made globally. To save your changes, you'll need to save the edited block as a new reusable block. {% endhint %} ### Managing content in the editor * Elements can be **deleted** by selecting an element and clicking the **delete** icon. * Elements can be **duplicated** by selecting an element and clicking the **duplicate** icon. * Elements can be **moved** by clicking the element and dragging and dropping it within your design. * Some elements can be **saved as reusable blocks** by selecting an element and clicking **the star icon.** ## Personalisation ### Predefined Variables When you add predefined variables into your messages, they are dynamically replaced with the corresponding values at the moment the message is dispatched. This functionality ensures that your messages are both personalized and accurate, reflecting the latest data or configuration each time. To add a predefined variable, click the `{ }` icon in any text field, open the variable picker, and select from the organized list of variables. Currently, we support the following predefined variables, under this sections:
Contact Contact variables offer an effective way to tailor content to the individual characteristics of your contacts. For instance, instead of using a general greeting like "Hey there!", you can make your communication more personal by using the recipient's name, resulting in a greeting such as "Hey Alex!". This approach not only grabs attention but also enhances engagement by making your message feel more relevant and personalized.\ \ Contact variables enable the use of any customer attributes, meaning the dropdown options will be determined by your customer data.
Organization Organization variables allow you to incorporate details about your business entities within your communications. This includes attributes such as the organization name, address, and other key information. Using these variables, you can dynamically insert relevant organizational data, making your messages more professional and contextually appropriate.
Date Date variables let you include dynamic date information in your content. This can be helpful for referencing the current date, setting deadlines, or scheduling events. By using these variables, you ensure that the dates in your communications are always accurate and up-to-date.
Links Links variables facilitate the inclusion of dynamic URLs within your content. Use this section to include an "Unsubscribe" or "View in Browser" link to your emails. **Unsubscribe Link** Click on **Add variable** in text element and select **Links > Unsubscribe**
Select Wrap in Text as Yes and update the label as needed.
You can optionally select a list only if you want contacts to get removed from a list but not globally unsubscribe from all marketing emails. **Web View Link** Click on **Add variable** in text element and select Links > WebView
Select Wrap in Text as Yes and update the label as needed.
Email Email variables enable the insertion of the customer email address dynamically. This is especially useful for automated responses or confirmations.
Discounts Discount variables allow you to dynamically insert discount codes. This is particularly useful in marketing communications, where personalized discount offers can enhance the effectiveness of your campaigns. :information\_source: *Before using discount variables, make sure you have generated a discount code.*
Verify Verify variables provide OTP codes. These are useful in communications requiring secure and verified actions.
{% hint style="info" %} Predefined variables are powered by our Liquid templating engine, for more information on this, please read the [Dynamic Content](https://docs.bird.com/applications/content/email-templates/concepts/dynamic-content) section. {% endhint %} ### Custom Variables In the email editor, custom variables are placeholders that dynamically populate with the relevant information when an email is sent. Unlike [Predefined Variables](#predefined-variables), Custom Cariables need to be manually assigned to specific data before sending the email, as they are not linked to any preset customer attribute or data Use custom variables to personalize your email with details that may not be available through predefined variables. They can be quite useful for transactional emails, things like: * Order Tracking Number * Support Ticket ID To add a custom variable to a text block: * Click on the **"Variables"** section of the email editor * Create a new variable and give it any name.
* In the content section, in text element you can add the variable by: * Selecting **{ }** icon on the text editor for Add variables and select Custom variables. You can then select the name of the variable from the dropdown and add a default value * Typing {{variable\_name}} where variable\_name is the name given by you when creating the variable. Additionally, you can include variables in the subject line by typing {{variable\_name}}
* After saving the email, you can then use it in a campaign or a journey * When you add this email in the campaign or journey, you will automatically see a template variables section under the email preview. Here, you can select any of the values to map it with. These values can be contact attributes, event properties, or additional data uploaded.
* You can also give a default value for each of the variable. Once done, you can save and publish. ### Global Styling Global styling helps your emails to stay visually consistent. It establishes rules for formatting, colors, fonts, and other design aspects. Let's take a look at what global styling settings are available:
Global background color Set a consistent background color for your emails.
Global content body Set a default text style, font, font size, and color for the main body content of your emails.
Global links Set default styles for hyperlinks, including colors, underlining, and hover effects.
Global buttons Set a default styles for buttons, including style, color, size, and behavior.