Email Designer

The Bricksforge Email Designer is a visual tool to create email templates. It allows you to create your designs without any coding knowledge. For each template, you can create conditions to determine when which design should be used.

Email Designer

In this article, we will explain how to use the Email Designer.

Basic concepts

Templates

A template is a design for an email. Assigning conditions to a template allows you to determine when which design should be used. For example, you can create a template for Password Reset emails and assign it to the Password Reset email. Then, you could create a different template for the User Sign Up emails, and so on.

You also have the option to create a fallback template. This template will be used if no other template matches the conditions. Assigning conditions like “All Emails” will first check if there is a template that matches the email type. If there is no match, the fallback template will be used. Using the widget “Email”, you can include the “real” content of the email in your template where you want it to be.

Conditions

Conditions are used to determine when which template should be used. Example conditions are: “All Emails”, “New User Signed Up” or “Specific Bricks Form”. With the assignment of conditions for a template, you can control when which design should be used. As we described above, you could even create fallback templates that will be used if no other template matches the conditions. Using the widget “Email”, you can include the “real” content.

Global Styles

Global styles are styles that are applied to the entire email. Styles like colors and font sizes for headings and paragraphs are defined as global styles. This makes it easy to change the design of your emails. If you want to change the color of all headings, you only have to change the color in the global styles and it will be applied to all headings in your email. In contrast to global styles, you can also define styles for individual widgets. For example, you can define a style for a specific text widget that should only be applied to this paragraph.

Themes

You can create multiple themes for your emails. A theme is a collection of global styles. This makes it easy to create different designs for your emails. For example, you could create a theme for your company’s design and another theme for your partner’s design. Once creating your time, you can assign it to new templates. It’s important to understand, that a theme saves only global styles. If you want to change the design of a specific widget, for example spacings, you have to change the styles of the widget itself.

Template Variables

Template variables are variables that can be used in your templates. For example, you could use the variable {{user_name}} to display the name of the user in your email. All available variables are listed in the sidebar of the template editor under the “Element” tab. Depending on the condition you have selected, you will see different variables. Clicking on a variable will copy it to your clipboard. You can then paste it into your template. Variables can be used on every place in your template – even in the subject of your email.

Twig

Twig is a template engine for PHP. It allows you to use variables and conditions in your templates. For example, you could use the following code to display the name of the user in your email. If the name is not defined, you could display a fallback text.

{% if user_name is defined %}
    Hi {{ user_name }}!
{% else %}
    Hi there!
{% endif %}

You can use Twig everywhere in your template. Using the widget “Text”, you have also the option to use a Twig Syntax Highlighter. But this is not necessary. You can use Twig in every widget or field.

Create a new template

Email Designer Import

To create a new template, go to Email Designer in the sidebar and click on Add new template. If you’re using the Email Designer for the first time, click on Add your first template. You will be redirected to the template editor.

Widgets

Widgets are the building blocks of your email. You can use them to create your design. The following widgets are available:

H1

The H1 widget is a heading. It is the largest heading and should be used for the most important text in your email. Most styles of the H1 widget are defined in the global styles. Additionally, you can define the following element styles:

  • Text: The text of the heading.
  • Spacing Top: The spacing above the heading.
  • Spacing Bottom: The spacing below the heading.
  • Text Align: The alignment of the text.

H2

The H2 widget is a heading. It is the second largest heading and should be used for important text in your email. Most styles of the H2 widget are defined in the global styles. Additionally, you can define the following element styles:

  • Text: The text of the heading.
  • Spacing Top: The spacing above the heading.
  • Spacing Bottom: The spacing below the heading.
  • Text Align: The alignment of the text.

H3

The H3 widget is a heading. It is the third largest heading and should be used for important text in your email. Most styles of the H3 widget are defined in the global styles. Additionally, you can define the following element styles:

  • Text: The text of the heading.
  • Spacing Top: The spacing above the heading.
  • Spacing Bottom: The spacing below the heading.
  • Text Align: The alignment of the text.

Text

The Text widget is a paragraph. It should be used for normal text in your email. Most styles of the Text widget are defined in the global styles. Additionally, you can define the following element styles:

  • Text: The text of the paragraph. You can change between Rich Text and Twig mode. The Twig mode will display the content in HTML format.
  • Spacing Top: The spacing above the paragraph.
  • Spacing Bottom: The spacing below the paragraph.
  • Text Align: The alignment of the text.

Button

The Button widget is a visual button. It should be used for buttons in your email. Most styles of the Button widget are defined in the global styles. Additionally, you can define the following element styles:

  • Text: The text of the button.
  • Link: The link of the button.
  • Spacing Top: The spacing above the button.
  • Spacing Bottom: The spacing below the button.
  • Text Align: The alignment of the button.

Image

Include an image in your email. You can upload an image or select an image from the media library. You can define the following element styles:

  • Image: The image that should be displayed.
  • Link: The link that should be opened when clicking on the image.
  • Width: The width of the image.
  • Spacing Top: The spacing above the image.
  • Spacing Bottom: The spacing below the image.
  • Text Align: The alignment of the image.
  • Full Width: If enabled, the image will be displayed in full width.

Email

The Email widget is a special widget. It is used to include the “real” content of the email sent from WordPress in your template. You can use it to include the content of the email where you want it to be. Using this widget, you can create a wrapper around the content of the email.

You can define the following element styles:

  • Spacing Top: The spacing above the email content.
  • Spacing Bottom: The spacing below the email content.

Spacing

The Spacing widget is used to create spacing between other widgets. You can use it to create spacing where you want it to be.

You can define the following element styles:

  • Height: The height of the spacing.

Columns

The Columns widget is used to create columns in your email. Inside these columns, you can add other widgets. The width ratio can be defined very flexible using a syntax like 75:25 or 20:50:30.

You can define the following element styles and settings:

  • Column Count: The number of columns.
  • Column Gap: The gap between the columns.
  • Width Ratio: The width ratio of the columns.Example: 75:25 or 20:50:30.
  • Spacing Top: The spacing above the columns.
  • Spacing Bottom: The spacing below the columns.
  • Padding: The padding of the columns.
  • Full Width Wrapper: If enabled, the columns will be displayed in full width.
  • Background Color: The background color of the columns.
  • Heading Color: The color of the headings inside the columns. This will be applied to all headings inside the columns and overwrite the global heading color, but only inside the columns.
  • Text Color: The color of the text inside the columns. This will be applied to all text inside the columns and overwrite the global text color, but only inside the columns.

Dynamic

The Dynamic widget is a special widget. It is used to include dynamic content in your email, for example Bricks Dynamic Data. It’s important to understand, that you could add Dynamic Data everywhere in your template. But the usefullness of this widget is the possiblility to add a context to the Dynamic Data, passing a specific Post ID.

You can define the following element styles and settings:

  • Text: The text of the Dynamic Data. Of course, you could add whatever you want here.
  • Post ID: The Post ID that should be used as context for the Dynamic Data. If you don’t define a Post ID, post related dynamic data will not work.
  • Spacing Top: The spacing above the Dynamic Data.
  • Spacing Bottom: The spacing below the Dynamic Data.
  • Text Align: The alignment of the Dynamic Data.

HTML

The HTML widget is used to include HTML code in your email.

You can define the following element styles and settings:

  • HTML: The HTML code that should be included.
  • Spacing Top: The spacing above the HTML code.
  • Spacing Bottom: The spacing below the HTML code.

WC Table

The WC Table widget is used to display a table with WooCommerce order items. It is only available in WooCommerce emails.

You can define the following element styles and settings:

  • Spacing Top: The spacing above the table.
  • Spacing Bottom: The spacing below the table.

To style the table, you can navigate to the Global Settings. There you will find the WooCommerce Table Styles.

If

The IF widget serves as a crucial tool for creating dynamic, personalized content within your emails. This widget introduces conditional logic, allowing you to display specific content based on whether certain conditions are fulfilled.

The key element and setting for this widget is:

  • Condition: This is the logical expression that determines whether the IF statement will execute. For example, user_name == 'Harold' will trigger the IF statement if the user’s name is Harold.

Remember, every IF widget should be concluded with an ENDIF widget. Nesting of multiple IF widgets is also permissible.

Elseif

The ELSEIF widget works similarly to the IF widget but is used as an additional conditional statement when the IF condition is not met. This allows for further personalization and dynamic content based on multiple conditions.

The key element and setting for this widget is:

  • Condition: Just like the IF widget, you specify the condition to be checked. For example, user_name == 'Harold' will activate the ELSEIF statement if the user’s name is Harold.

Else

The ELSE widget is a companion to the IF and ELSEIF widgets, allowing you to specify what content should be displayed when none of the preceding conditions are met.

The ELSE widget does not require any additional settings as it serves as a default or fallback when none of the conditions in the IF or ELSEIF widgets are met.

Endif

The ENDIF widget is an indispensable component when working with conditional widgets such as IF, ELSEIF, or ELSE. It signals the end of a conditional block and is essential for the proper functioning of these conditional widgets.

The ENDIF widget requires no additional settings. Its primary function is to indicate the closure of a conditional block. Without this widget, the conditional logic will not operate correctly.

For

The FOR widget is used to loop through a list of items. This may be helpful when working with dynamic data, such as a lists of product items.

The key element and setting for this widget is:

  • Rule: This is the rule that determines which items will be looped through. For example, item in wc_order_items will loop through all the items in the WooCommerce order.

In the above example, you can use the item variable to access the current item in the loop. For example, item.name will display the name of the current item.

Endfor

The ENDFOR widget is an indispensable component when working with the FOR widget. It signals the end of a loop and is essential for the proper functioning of the FOR widget.

The ENDFOR widget requires no additional settings. Its primary function is to indicate the closure of a loop. Without this widget, the loop will not operate correctly.

Custom Element CSS

Since Bricksforge 0.9.9, each widget accepts custom CSS. This allows you to customize the design of your email even more.

The format has to be the following:

 {
  property: value;
}

For example:

 {
  color: #000000;
  font-size: 16px;
}

It is important that no selector needs to be defined. The CSS will be applied to the widget itself as inline CSS.

Template Variables

Here are the various template variables you can incorporate into their templates for dynamic content generation:

{{site_title}}

This represents the title of your site.

{{site_url}}

This holds the URL of your site.

{{site_description}}

This stores the description of your site.

{{admin_email}}

This reflects the admin’s email.

{{home_url}}

This denotes the home URL of your site.

{{login_url}}

This links to the login page of your site.

{{current_year}}

This displays the current year.

{{user_name}}

This stands for the user’s name.

{{user_email}}

This represents the user’s email.

{{user_first_name}}

This indicates the user’s first name.

{{user_last_name}}

This indicates the user’s last name.

{{reset_password_url}}

This holds the URL for the password reset action.

{{new_password_url}}

This holds the URL for setting a new password.

{{user_ip}}

This represents the user’s IP address.

{{new_user_email}}

This represents the new user’s email.

{{new_user_email_url}}

This holds the URL for validating a new user’s email.

{{confirm_url}}

This holds the URL for confirmation actions.

{{request_type}}

This indicates the type of request.

{{expiration}}

This represents expiration dates.

{{export_file_url}}

This holds the URL for the export file.

{{new_admin_email}}

This represents the new admin’s email.

{{new_admin_email_url}}

This holds the URL for validating the new admin’s email.

{{manage_url}}

This holds the URL for management actions.

{{comment_author}}

This indicates the comment author’s name.

{{comment_author_ip}}

This represents the comment author’s IP.

{{comment_author_domain}}

This indicates the comment author’s domain.

{{comment_author_email}}

This represents the comment author’s email.

{{comment_author_url}}

This holds the URL for the comment author’s site.

{{comment_content}}

This indicates the content of a comment.

{{approve_comment_url}}

This holds the URL for approving comments.

{{trash_comment_url}}

This holds the URL for trashing comments.

{{spam_comment_url}}

This holds the URL for marking comments as spam.

{{delete_comment_url}}

This holds the URL for deleting comments.

{{comment_count}}

This reflects the number of comments.

{{moderation_panel_url}}

This holds the URL for the comment moderation panel.

{{post_title}}

This indicates the title of a post.

{{brx_id}}

For Bricks Form Submissions, you can use the user input of the form fields using this variable syntax. For example, if you have a form field with the ID skfuds, you can use the variable {{brx_skfuds}} to display the user input of this field.

{{wc_order}} (Object)

This represents the entire order object data. This variable cannot be used directly. It’s an object that contains different properties that can be used in the template. Example: {{wc_order.id}} will display the order ID.

{{wc_order_id}}

This represents the ID of the order.

{{wc_order_items}} (Array)

This represents the items of the order. This variable cannot be used directly. It’s an array that contains different properties that can be used in the template. Example: {{wc_order_items.0.name}} will display the name of the first item in the order.

You can also use the FOR widget to loop through the items of the order. If you for example set the loop to item in wc_order_items, you can use the variable {{item.name}} to display the name of the item.

{{wc_order_number}}

This indicates the order number associated with the order.

{{wc_order_currency}}

This holds the currency of the order.

{{wc_order_currency_symbol}}

This represents the currency symbol for the order’s currency.

{{wc_order_date}}

This reflects the date of the order creation.

{{wc_order_date_hour}}

This displays the hour of the order creation.

{{wc_order_date_minute}}

This displays the minute of the order creation.

{{wc_order_date_second}}

This displays the second of the order creation.

{{wc_order_status}}

This indicates the status of the order (e.g., pending, processing, completed).

{{wc_order_total}}

This represents the total amount of the order.

{{wc_order_total_formatted}}

This displays the formatted total amount of the order with currency symbol and formatting.

{{wc_order_subtotal}}

This represents the subtotal amount of the order.

{{wc_order_tax}}

This represents the total tax amount of the order.

{{wc_order_tax_formatted}}

This displays the formatted total tax amount of the order with currency symbol and formatting.

{{wc_order_discount}}

This represents the total discount amount of the order.

{{wc_order_discount_formatted}}

This displays the formatted total discount amount of the order with currency symbol and formatting.

{{wc_customer_user_id}}

This represents the user ID associated with the order.

{{wc_customer_userdata}} (Object)

This represents the user data associated with the order. This variable cannot be used directly. It’s an object that contains different properties that can be used in the template. Example: {{wc_customer_userdata.user_email}} will display the email address of the user.

{{wc_billing_email}}

This indicates the billing email address for the order.

{{wc_billing_first_name}}

This indicates the billing first name associated with the order.

{{wc_billing_last_name}}

This indicates the billing last name associated with the order.

{{wc_billing_company}}

This indicates the billing company name for the order.

{{wc_billing_address_1}}

This indicates the billing address line 1 for the order.

{{wc_billing_address_2}}

This indicates the billing address line 2 for the order.

{{wc_billing_city}}

This indicates the billing city for the order.

{{wc_billing_state}}

This indicates the billing state for the order.

{{wc_billing_postcode}}

This indicates the billing postcode for the order.

{{wc_billing_country}}

This indicates the billing country for the order.

{{wc_billing_phone}}

This indicates the billing phone number for the order.

{{wc_billing_payment_method}}

This indicates the payment method used for the order.

{{wc_shipping_first_name}}

This indicates the shipping first name associated with the order.

{{wc_shipping_last_name}}

This indicates the shipping last name associated with the order.

{{wc_shipping_company}}

This indicates the shipping company name for the order.

{{wc_shipping_address_1}}

This indicates the shipping address line 1 for the order.

{{wc_shipping_address_2}}

This indicates the shipping address line 2 for the order.

{{wc_shipping_city}}

This indicates the shipping city for the order.

{{wc_shipping_state}}

This indicates the shipping state for the order.

{{wc_shipping_postcode}}

This indicates the shipping postcode for the order.

{{wc_shipping_country}}

This indicates the shipping country for the order.

{{wc_shipping_phone}}

This indicates the shipping phone number for the order.

{{wc_shipping_method}}

This indicates the shipping method for the order.

{{wc_customer_note}}

This represents the customer note associated with the order.

{{wc_shipping_cost}}

This represents the shipping cost for the order.

{{wc_shipping_cost_formatted}}

This displays the formatted shipping cost for the order with currency symbol and formatting.

{{wc_shipping_tax}}

This represents the shipping tax for the order.

{{wc_order_refunded_amount}}

This represents the refunded amount for the order.

{{wc_order_refunded_amount_formatted}}

This displays the formatted refunded amount for the order with currency symbol and formatting.

Global Styles

The Global Styles section allows you to define the global styles for your email template. These styles will be applied to all elements in your email template. This area is structured in the following sections:

Template Settings

The Template Settings section allows you to define the following settings:

  • Template Name: The name of your template. This is for your internal use only.
  • Use Theme: If you enable this option, the template will use the theme styles. If you disable this option, you can define custom styles. Important: Selecting a theme will override all custom styles!

Email Settings

The Email Settings section allows you to define the following settings:

  • Subject: The subject of your email. If you leave this field empty, the subject will be generated automatically.
  • Send To (Email): The email address of the recipient. If you leave this field empty, the default recipient will be used.
  • From (Name/Email): The name and email address of the sender. If you leave this field empty, the default sender will be used.
  • Reply To (Name/Email): The name and email address for replies. If you leave this field empty, the default reply to address will be used.

Canvas

In this section you can define different styles for the canvas. The canvas is the area where you can add your widgets. The default settings of the canvas are following best practices for email templates.

Basic Text

In this section you can define different styles for basic text elements.

Headings

In this section you can define different styles for headings.

Buttons

In this section you can define different styles for buttons.

Responsive

This section allow you to define styles for mobile devices, which will override the default styles.

WooCommerce

In this section you can define different styles for WooCommerce elements.

Custom CSS

In this section you can define custom CSS styles. These styles will be applied to the entire email template.

Conditions

Email Designer Conditions

The Conditions section allows you to define conditions for your email template. You choose between the following conditions:

General

All Emails

If this condition is set, your template will be used for all emails sent from your site. This includes also emails sent by other plugins, which are using the WordPress email way wp_mail to send emails.

User

New User Notification

This template is used for the email sent to a user when they register on the website.

Password Reset

This template is used for the email sent to a user when they request a password reset.

Confirmed Password Change

This template is used for the email sent to a user after they successfully change their password.

Email Change Request

This template is used for the email sent to a user when they request an email address change.

Confirmed Email Change

This template is used for the email sent to a user after they successfully change their email address.

Requests Personal Data

This template is used for the email sent to a user after they request their personal data.

Send Personal Data Export

This template is used for the email sent to a user containing the link to download their personal data export.

Comment Notification

This template is used for the email sent to a user when someone comments on their post.

Admin

New User Signed Up

This template is used for the email sent to the admin when a new user registers on the website.

User Changed Password

This template is used for the email sent to the admin when a user changes their password.

Admin Email Change Request

This template is used for the email sent to the admin when they request an email address change.

Confirmed Personal Data Export

This template is used for the email sent to the admin after a user’s personal data export request is confirmed.

New Comment Moderation

This template is used for the email sent to the admin when a new comment is awaiting moderation.

Bricks

For Bricks related conditions, you can use the variables of the form fields. The syntax is {{brx_id}}, where brx_id is the ID of the form field. Example: If you have a form field with the ID agorhj, you can use the variable {{brx_agorhj}} in your email template to output the value of the form field.

All Bricks Forms

This template is used for all emails sent by the Bricks Forms or Pro Forms plugin.

All Bricks Forms Confirmations

This template is used for all emails sent by the Bricks Forms or Pro Forms plugin, which are confirmation emails.

Important: Include [brf_confirmation] in the confirmation “Email content” textarea of your confirmation mail for matching purposes. Otherwise, the template will not be used. This tag will automatically be removed and not be visible in the email. If you need to add custom text inside the email content, you can do it above or below the tag.

Specific Bricks Form

This template is used for the email sent by a specific Bricks Forms or Pro Forms form. To assign a form, just enter the form ID with the syntax: form_id.

If an email is sent by a Bricks Form, which is not assigned to a template, the All Bricks Forms template will be used, if setup.

Specific Bricks Form Confirmation

This template is used for the email sent by a specific Bricks Forms or Pro Forms form, which is a confirmation email. To assign a form, just enter the form ID with the syntax: form_id.

If an email is sent by a Bricks Form, which is not assigned to a template, the All Bricks Forms Confirmations template will be used, if setup.

Important: Include [brf_confirmation] in the confirmation “Email content” textarea of your confirmation mail for matching purposes. Otherwise, the template will not be used. This tag will automatically be removed and not be visible in the email. If you need to add custom text inside the email content, you can do it above or below the tag.

WooCommerce

All WooCommerce Emails

This template is used for all emails sent by WooCommerce.

New Order

This template is used for the email sent to the customer when a new order is placed.

Cancelled Order

This template is used for the email sent to the customer when an order is cancelled.

Processing Order

This template is used for the email sent to the customer when an order is processing.

Failed Order

This template is used for the email sent to the customer when an order is failed.

Order On-Hold

This template is used for the email sent to the customer when an order is on-hold.

Completed Order

This template is used for the email sent to the customer when an order is completed.

Refunded Order

This template is used for the email sent to the customer when an order is refunded.

Partially Refunded Order

This template is used for the email sent to the customer when an order is partially refunded.

Customer Invoice

This template is used for the email sent to the customer when an invoice is available.

Customer Note

This template is used for the email sent to the customer when a note is added to their order.

Reset Password

This template is used for the email sent to the customer when they request a password reset.

New Account

This template is used for the email sent to the customer when they create an account.

Helper Functions

You have access to various helper functions to output your dynamic content.

getUserMeta(key)

Returns the meta value of the user. As parameter, you need to pass the meta key. Example: {{getUserMeta('first_name')}}. Example Output: John

getItemProductImage(item) (WooCommerce)

Returns the product image url of the cart item. This function needs to be called inside a for loop, which loops through the cart items. As parameter, you need to pass the cart item object. Example: {{getItemProductImage(item)}}. Example Output: https://example.com/wp-content/uploads/2020/01/product-image.jpg

getItemPrice(item) (WooCommerce)

Returns the formatted price of the cart item. This function needs to be called inside a for loop, which loops through the cart items. As parameter, you need to pass the cart item object. Example: {{getItemPrice(item)}}. Example Output: $10.00

getOrderMeta(key) (WooCommerce)

Returns the meta value of the order. As parameter, you need to pass the meta key. Example: {{getOrderMeta('_order_total')}}. Example Output: $10.00

getLocale()

Returns the current locale of the site. Example: {{getLocale()}}. Example Output: en_US. This variable officially supports the following third party plugins: TranslatePress, WPML, Polylang.

Sending Test Mail

You can send a test mail to your email address to check the email template. To do this, click on the Send icon in the bottom left corner of the screen. This will open a new layer, where you can enter your email address. After you have entered your email address, click on the Send Test Mail button to send the test mail.

Exporting Email Templates

You can export your email templates to a JSON file. To do this, click on the Settings > Export Template button in the top right corner of the screen. This will start the download of the JSON file.

Email Designer Import

Importing Email Templates

You can import your email templates from a JSON file. To do this, navigate to the start page of the email designer, where you see the list of your email templates. Then click on the Import Template button in the top right corner of the screen. This will open a new window, where you can select the JSON file. After you have selected the file, the import process will start.

Send Email with PHP

You can send an email with PHP using the bricksforge_send_mail() function. This function is a wrapper for the WordPress wp_mail() function and allows you to send emails with the Email Designer passing an Email Designer Template ID. Importing: This function must be called after the wp hook has been fired. Otherwise, the function will not be available.

Example:

add_action( 'wp', function() {

    $template_id = "f246b2b5-05fe-3580-6b4c-9df6296ed3cd";
    $to = "john@doe.com";
    $subject = "Hello World";
    $message = "This is a test message";
    $headers = array();
    $attachments = array();

    bricksforge_send_mail( $template_id, $to, $subject, $message, $headers, $attachments );

} );

Troubleshooting

My emails are looking bad in Outlook!

Outlook is a very special email client. Versions from Outlook 2007 onwards use Microsoft Word to render HTML emails, which can lead to problems with campaign display. It is designed for print design and tries to render HTML code as it would look in print preview. This can make it look different from the email you have designed and tested. If you know that your target audience uses Outlook, you should test your emails in Outlook before sending them and simplify the design if necessary.

Bricks Form Confirmation Emails are not working

Did you include [brf_confirmation] in the confirmation “Email content” textarea of your confirmation mail? Otherwise, the template will not be used. This tag will automatically be removed and not be visible in the email. If you need to add custom text inside the email content, you can do it above or below the tag.