How to Create a Mobile Responsive Template in ExactTarget

Transcription

1 How to Create a Mobile Responsive Template in ExactTarget This manual contains the following: Section 1: How to create a new mobile responsive template for a Business Unit/Artist Section 2: How to adjust the creative within your template Section 3: How to add additional content areas to your template *This template is only to be used with responsive content blocks *Please contact Maggie Bell ([email protected]) with any questions

2 Section 1: Creating a New Template Step 1: Navigate to the business unit you wish to hold the template in, and go to: Content > Shared Templates > MASTER RESPONSIVE TEMPLATE

3 Step 2: Make a copy of the MASTER RESPONSIVE TEMPLATE, and save it in the My Templates folder of the business unit.

4 Section 2: Making Adjustments within the Template This section covers the following: How to change the <title> within the template How to change the background color of the banner for both desktop and mobile How to change the desktop and mobile banner images How to change the colors of HTML buttons and text link colors How to change the background and text color for the template footer How to update the footer links (Privacy Policy and Terms of use)

5 Changing the <title> tag within your template Step 1: Navigate to the My Templates folder within the business unit, and click on the template you copied from the Master Responsive Template Step 2: The title of the template can be changed in the HTML code by replacing the Change Title text within the <title> tag with the desired title.

6 How to change the background color of the banner Step 1: To change the background color for the desktop and mobile banner, adjust the hex color value for the background-color property for the banner style id

7 How to change the background color and text color in the navigation bar Step 1: To change the background color of the navigation bar, change the hex color value for the background property for the top_nav style id Step 2: To change the color of the text in the navigation bar, change the hex color value of the color property for the top_nav style id

8 How to change the Desktop and Mobile banners Step 1: You can replace the mobile banner by inserting hosted image url in the background property of the banner style id

9 Step 2: To adjust the desktop banner, replace the src attribute url, within the <image> tag with the url of the desired banner:

10 How to change the HTML buttons and link colors Step 1: To change the color of the HTML buttons, adjust BOTH the hex value for background-color property and border property within the.htmlbuttons class Step 2: To change the color of the text links within the template, you can adjust hex value for the color property within the.linkbtn class

11 How to change the color of mobile ticket buttons *Please note: this is only changes the color of the mobile tickets buttons if you are using a tour table content block Step 1: To change the color of the tour ticket buttons within the mobile version of an , adjust the hex value for the background-color property within the.mobile-tix class

12 Updating the background and text link color in the template footer Step 1: To change the color of the footer background, adjust the hex color value within bg-color attribute of the <td> tag

13 Step 2: To change the color of the text links in the footer, adjust the color attribute within the <a> tag of the footer table *Please note: the hex value will need to be changed each time a color style is specified in order to change all text within the footer

14 Changing footer links *Please note: for any sent within ExactTarget, the url for the unsubscribe link should ALWAYS remain as %%unsub_center_url%% Step 1: The Privacy Policy and Terms of Use links can be changed by specifying the desired url within the href attribute for each text link (continued on next page)

15 Section 3: Adding additional content areas to your template Step 1: You can add a content block(s) to your template by copying/pasting the snippet of code below. You must place the code after the LAST closing </tr> tag, before the end content blocks comment within the HTML <tr><td class="article"><custom type="content" name="centre"></td></tr> (continued on next page)

16 Step 2: You will need to add a number after centre in the name attribute of the <custom> tag. For example, since we already have 16 content blocks within our template, you will need to add 17 after centre in the name attribute of the <custom> tag. If we added another content block we would insert 18, and so on. *Please note: there should be no spaces between centre and the template block number (e.g. name= centre17 )