Classic Editor MDirector

How do you use MDirector editor? 

Drag&Drop Editor

With this editor, creating and modifying your templates is as easy as dragging and dropping the different blocks and elements available:

- You can create a structure by adding blocks of columns:

- You can then insert the elements you want in each column:

 - You can move, duplicate, delete or edit each element of the template:

Images:

From this editor you can:

• Import an image from your computer or add an image URL.
• Edit the image dimensions (https://mdtr.io/tR42A), lock or unlock the proportional size, return to the original image file size and crop a fragment of the image.
• Add a title, alternative text (alt.) and link to create a hyperlink from the image.
• Add spaces (padding) around the image.

Titles and text:

With the text editor you can:

• Create paragraphs with styles and choose from a variety of web-safe fonts and Google Fonts* 

*Google Fonts: https://mdtr.io/4RzOH. 

• *Paragraphs copied from other sites must have their formatting removed (Word)
• Add links, custom fields (https://mdtr.io/p0T0T) anddynamic content (https://mdtr.io/eGmfc). 
  
  

Common Styles for each column:

You can add common styles to all elements within each column.

Insert a call-to-action button (CTA)

Step 1

Drag the button element into your work area.

Step 2

Click on the “Edit” icon

A window will open showing properties of the element that you can edit.

Editing Content

1. Edit the text style: choose the colour, font, size and thickness (normal, bold, etc.) of the text, and add spacing between the letters if desired.
2. Button text: we recommend keeping calls to action short and easy to understand. 
3. Title, or alternative text: adding a title provides contacts with an explanatory text about the button. 
4. Button link: the URL you wish to take someone to on clicking the button. 

Editing button styles

1. Choose the background colour of the button.
2. Add a border and edit its style.
3. Add padding (space) inside the button.

Editing common block styles (applies to the entire block)

1. Choose the background colour of the block. 
2. Edit the block alignment (whether you want the button left, right or centre aligned).
3. Add padding (space) to the block - outside the button. 
4. Add a border to the block and edit its style.
5. Element class: element based on the content class attribute (this information is useful when you want to add custom CSS to the content found in the element).
6. Element ID: element based on the content of the attribute ID (https://mdtr.io/T61a0) (this information is useful when you want to add custom CSS to the content found in the element).

Adding general styles:

For general styles, you can customise the entire template from a single location, with the option to choose which fonts, sizes, colours and backgrounds the general template will have.

You can add additional CSS with the advanced “Custom CSS” feature. Find out in the following link: https://mdtr.io/9XCu9. 

Do you still have questions? If you have any questions, send us an email at [e-mail].