Creating a Designer Template

To Create a Designer Email Template, choose designer option which will give you the drag and drop block editor

Choose the Designer

Select the template

We have arrange of templates, you can start with

Click on the select button to choose the template

Tool Bar

In the top section there is 13 options you can choose from, below is the description of them

  1. Turning off and on the border selectors
  2. Full screen and normal screen
  3. Import MJML Templates
  4. Shows the HTML code
  5. Undo
  6. Redo
  7. Changing Templates
  8. Save Template
  9. close button
  10. Dimensions
  11. Component settings
  12. MJML Blocks
  13. Compoents

Dimensions, Typography , Decorations

Thhis is like the designer settings of the blocks, each block has different options

This handles Dimensions on what you have selected, this example Width of email template, which this example is 600px, and the backbround Color

  1. Width
  2. Background Colour

Other Examples

In this block, Hero, which has Title Texty, Button and image, there is more designing options

Each Block has you drag in, it will give you more options to change

Component settings

This is where you add hyperlinks, href. and other options depending on the block

MJml Component

Blocks

  1. You can Drag in 1 Column
  2. You can Drag in 2 Column
  3. You can Drag in 3 Column
  4. Drag text field in, this would need to drag into other columns like Column 1,2,3
  5. Drag a Button, which has a text and hyperlink
  6. Drag a image in, Note if the template its new, and you drag in the first time, you may need to save and open it up again
  7. Adds a Divider line in between to Blocks
  8. This Adds Socials icons, Need to goto Component settings to click on the links,
  9. Spacer - Adds a Space
  10. Adds a Nav bar, with 4 options
  11. Navbar Link is adding a new nar link to a Nav bar
  12. Hero Adding Hero adds 3 in 1
    1. Button
    2. Text Title
    3. Backbround image
  13. Wrapper Another 4 in 1
    1. Table
    2. Image
    3. Header Title
    4. 2nd Title
  14. Raw : grouping 8 images as one, need to goto MJml Component to change

Draging 1 Column Block

Drag the 1 Column Block to the area you would like to goto

You will need to hold your mouse button down, when selecting the block, and then drag it to the location, and then release the button.

Drag the Button Block

Drag the button block to the location you would like

Change the Button Block

To change the button block, double click on the button, and change the text, this example is click here

To change the link. Click on the Component settings and change the Href to the web link to goto

Drag the Image Block

These is a know issue with the image block, if its a new template, you may need to save and close if its a new template.

Click on the Pencil

image selector

Drag and drop the image to the selector or upload the file

Image Changed

results matching ""

    No results matching ""