Create a template

If you want to create a new template, when you click on Create new template a modal will open up with two choice: Drag & Drop Editor or HTML.

Drag & Drop Editor

With this new version of AcyMailing we've decided to work on a new drag & drop editor to make the creation of email the easiest way possible. This brand new editor make responsive template and for the css we use foundation for email.

You'll have several information and parameters to fill:

• Template Name: the name of your template, visible on listings (required)

• Email subject: will be the subject of your email, optional

• Tags: tags are like categories

• Allowed groups: On Joomla you can allow you users to manage their own lists / users / emails, you can give them access to this template when they create an email with this option

You can click on Advanced options and have more parameters:

• Email preview line: in mail client inbox listing, instead of displaying the beginning of your mail you can write anything

• Add custom style sheet: you can add your own CSS code with this option

• Custom headers: if you want to add custom html tag for outlook for exemple

• Attachments: you can add attachments to your emails, note that the attachment parameters won't show on a template edition, only on followup, notification, automation emails, welcome and unsubscribe emails

• From name: "From name" is used instead of default value

• From email: "From email" is used instead of default value

• Reply to name: "Reply to name" is used instead of default value

• Reply to email: "Reply to email" is used instead of default value

Note that "From name", "From email", "Reply to name" and "Reply to email" is available on notification, welcome and unsubscribe emails.

Below those information you'll have a preview of your mail with an Edit template button.

If you click on the edit button the editor will appear:

On the top toolbarn the two middle icons (screen and phone) allows you to preview in the two versions.

The other buttons gives yu access to different functions:

• Undo /redo modifications in the editor

• Cancel will erase all your current work since last save so be careful.

• Send a test will save the current work and let you set an email address to send a test of the template.

• Apply will save your change and close the editor.

In the center you can see your email template, were you can drop your content.

In the right part of the editor there are three tabs: Design, Current block and Setting

Design

The design tabs is were you can find all the blocks to drag.

Blocks

This first part are the container to the contents part

Contents

In this part you can find all of these contents:

• Title

• Text

• Button

• Space

• Image

• Video

• Pages only for WordPress

• Article

• Follow

• Separator

• Share (coming soon)

• Plugins you've installed

Current block

Block settings

By default this tab will be empty. When selecting a row, you can access some specific parameters for the row.

If you want more information about the block structure: click here

When you insert a content that can be configured (button, article, WooCommerce product...), you will see the specific parameters for this block. You can access them whenever you want by clicking again on the content in the editor.

Settings

In this tab you can configure several parameters of your email.

Template design

Background color: if you click on the image icon you can select a background image. With the color picker on the right you can set a background color for your email.

Background image don't work on every mail client

Content top margin: this is the margin before your content starts:

Content bottom margin: same as top margin but after the end of the content

Default font: This parameter allows you to choose the default font of all of the elements. This option is overridden by the design option below.

Design

In this part you can change the parameters of these different fonts:

• p - paragraphs

• a - links

• Dynamic text links (unsubscribe, view it online, etc)

• h1

• h2

• h3

• h4

• h5

• h6

If you want to add a custom stylesheet to your email you can do it via the button Add custom style sheet

A small window will open up and then you can enter some CSS code. The CSS will be directly applied on your template.

Social icon

In this last part, you can change the social icon if you want to.

Button types

When you insert a button with the drag and drop editor you have 3 choices for the type of button:

• Call to action: redirect the user on the link you've entered

• Unsubscribe: redirect the user on the unsubscribe page or it unsubscribe hm directly, depends on your configuration

• Confirm: confirm the user and redirect him on your homepage

Insert a dynamic text

Dynamic texts are shortcodes that allow you to insert a content changing according to the user you're sending the email to, for example "Hello {user:name}" will display "Hello James" in the sent email.

You can insert dynamic texts in Title or Text zones. The options will display on the right of the editor when editing one of these two zones:

Click in the text zone where you want to insert the information, select the information (in this example the user name) then click the "Insert dynamic text" button to insert it at your cursor position.

You can click on an inserted dynamic text to replace it by a new one.

Website links

In this tab you can add a view it online link. If you are on Joomla AND you have an AcyMailing user profile menu: you can add a Modify your profile link to it.

Subscribers

In this tab, you can insert data on the receiver of the mail:

• Any standard receiver data (name, email, ID, creation date...)

• With the Enterprise version, any custom field data you have created

Subscription

In this tab, you can insert links related to the user subscription management:

• Unsubscribe: create a link allowing the user to unsubscribe from the mail list.

• Confirm your subscription: create a link allowing the user to confirms his subscription.

• Subscribe: create a link allowing the user to subscribe to some specific list you can choose.

You can also insert data about lists, campaigns and automatic campaigns:

• List name: name of the list

• List description: description of the list

• List names: names of the lists the receiver is subscribed to

• List descriptions: descriptions of the lists the receiver is subscribed to

• List ID: ID of the list

• Campaign ID: ID of the campaign

• Subject: subject of the campaign

• Occurrence number of the automatic campaign: number of the automatic campaign generated

Time

In this tab, you can insert some date or time data. Different format are available with an example to see what it looks like. Note that you can modify the format before clicking on the insert button if you want to have a specific format (for example: %m-%Y will be replaced by 11-2019).

CMS user

If the receiver or the sender are linked to a CMS user (Joomla! or WordPress user depending on your site), you can insert information from this user (username, registration date, user group...).

Block structure settings

When you click on a row to edit it you have a Structure area where you can set the size of each column in your template:

It's very simple to use, just grab a vertical bar on one of the areas and start sliding:

In this structure you can also:

• Change the background color of each column

• Change the horizontal padding between each column

• Change the vertical padding between each column

Insert a link without settings override

You'll notice that if you want to insert a link on your template with tinyMCE the settings of your template will override it and you can't change it. So insert it and style the way you want you'll have to do select this class:

Built with AcyMailing footer

On free versions, a promotional footer "Built With AcyMailing" will be added to your emails. In paid versions you have the possibility to activate it in the AcyMailing configuration.

When you click on this footer inside the editor, an option will be displayed to allow you to change the color of the text for this footer. For example, if you have a dark background you can change the text to white.

Dynamic content structure

When you insert a dynamic content, such as an article, a page, an event or a product, you can choose between several default formats to display the content. Clicking on one of the format will render the article differently (position of the image, title and content...).

The width of the template

The default width used by emails built with our editor is 580px with a 10px margin on both sides. This is the best width for email clients compatibility (especially for Outlook and Yahoo), while being also compatible with modern and mobile mail clients with media queries.

If you really need to change the width of emails built with our editor, you will need to replace all occurrences of "580px" and "596px" in the PHP files and generated CSS files:

• media/com_acym/css/editorWYSID.min.css

• media/com_acym/css/libraries/foundation_email.min.css

• administrator/components/com_acym/helpers/mailer.php