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.
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
Current block
Settings
By default this tab will be empty. When selecting a row, you can access some specific parameters for the row.
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.
In this tab you can configure several parameters of your email.
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.
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.
In this last part, you can change the social icon if you want to.
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
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
Subscribers
Subscription
Time
CMS user
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.
In this tab, you can insert data on the receiver of the mail:
- Any standard receiver data (name, email, ID, creation date...)
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
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).
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...).
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
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:
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.
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 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
Last modified 7mo ago