Drag and Drop Responsive Template Builder

Transcription

1 Drag and Drop Responsive Template Builder

2 TABLE OF CONTENTS 1 INTRODUCTION INSTRUCTIONS CONTACT

3 1 INTRODUCTION The new drag and drop mobile responsive template feature allows you to easily edit content by dragging and dropping different content areas into your template. Any Campaign created using a drag and drop template will also have the feature in the content editor. Please note that this feature is in its beta stage and will be regularly updated. 2 INSTRUCTIONS See below for steps on how to create a template. 1. From the home screen, select Templates 2. Select Create a template 3. To create a drag and drop template, enter the template title and click Create. Please note, if you want to use the original template editor, you can do this by selecting the Create button underneath I have my own HTML. 3

4 4. A generic template will load, which you can use as the base for your new template. 5. To edit areas, you can use the toolbar as before, as well as the new editing options, which you can see at the top right hand side by hovering over or clicking into your editable areas. From left to right, you have the options to edit HTML, sort the order of your editable areas by dragging and dropping, add a link (appears only for image and options content areas), edit the settings, copy an area, delete an area, and easily navigate up or down a level. 4

5 6. When you hover over the Add Content area, you will see the below three options. This is where you can edit the CSS and HTML for your template. If you are not familiar with using CSS and HTML, you can easily edit the theme of the Campaign by clicking the settings cog. This opens up the page settings box, pictured below, which you can use to format your template. 5

6 7. To add content to your template, click the Add Content option. An area will appear on the left where you can choose from the various different content options. 8. Select the relevant content type and drag into the area you want it to sit. 6

7 Container add a block container (Note: to populate a Container, place the first block you want under the Container block) Content a single editable area where you can insert text and images. 7

8 Multi-Column add content in columns. The cog buttons which appear underneath the columns can be used to delete, add and move columns, as well as edit the column settings. You can insert up to 4 columns. Image add an image. Spacer add vertical space. This can be extended easily by dragging the bottom of the spacer down once inserted. 8

9 Options add predefined content options. For example, if you have different disclaimers depending on region, you can insert the content for each as different options, so that they can be easily changed with one click when editing a Campaign. To add options, click the settings cog icon or click into the content area. The Option Block Settings will open, where you can add new options and edit those already configured. When you click into the content area after you have added options, they will appear like the example below. When you select an option, the content will be replaced. 9

10 9. You also have the ability to create and share your own custom blocks that you can drag into your campaigns. These blocks can be made with individual customised blocks or even a container holding a combination of blocks. There are two different types: Template These blocks are custom blocks associated only with the template you are creating. My Blocks These will be custom blocks accessible throughout your account. Once created, these blocks can also be shared with other users blocks shared with you will appear under the Shared With You section. To create either type of block, open the relevant section and click Create Block. The Editing Block area will open at the top of the frame and allow you to name your block, select the icon and save it. Custom blocks can be edited or deleted by using the drop down menu to the right of the icon. Sharing is also accessed in this this menu for My Blocks. 10

11 10. Once you are happy with your template, select Continue to Preview and Save. You will then be able to use a number of testing and saving options. These include: Inbox Preview Preview how your template will display in 44 of the most popular clients and mobile devices. Preflight Report Checks if your template has passed all required checks before saving. Preview on Allows you to easily check how your template will display in 5 different device views: desktop, mobile, mobile landscape, tablet, tablet landscape. 11. If you have successfully passed the preflight report and are satisfied with how it renders in different environments, click save. 12. When building a Campaign from your new template, the content editor will also be drag and drop. 11

12 3 CONTACT If you would like to discuss any element of this document please contact us on the below details. For any global support queries, please contact the Helpdesk team at or submit a ticket here. Europe Telephone: +44 (0) europe@concep.com North America Telephone: northamerica@concep.com Asia Pacific Telephone: +61 (0) asiapacific@concep.com 12