How Do I Make My Template Mobile Responsive?

If you saved a custom template before December 18, 2013 using one of our AWeber templates then your template may not be mobile responsive. Subscribers checking email on mobile devices is on the rise, so it would benefit you to make your existing custom template mobile responsive.

We made it easy to switch your existing custom template to a mobile responsive design. Just follow the instructions below.

Note: If you had any custom HTML code added to your AWeber template you may want to consult your designer before following the below instructions or contact us.

Step By Step Instructions

  1. First, you will want to find out what AWeber template you used when you created your custom template. To do this first go to the "Messages" tab and from the drop down menu that appears select "Email Template Manager."



    On this page you will see any custom templates you have saved in your account. Scroll down to the template you want to make mobile responsive. You will want to note the name of the "Theme" that the template is under. The "Theme" is the name of the original AWeber template that your custom template was created from.

    In this example, we are looking at our custom template called "Widget Worker" and are taking note of the "Theme" it is under called "Pizza."

    39146396_step01-2.png

    Note: If the "Theme" name has a hyphen within it you will only want to take note of what is before the hyphen. So in the above example, even though the theme is named "Pizza - Eagles" we are only noting the "Pizza" part of the theme name.

  2. Next, create a temporary broadcast to load your custom template into. Once the drag & drop email builder is loaded, click the "Templates" button in the right hand side of the message editor. This will be located under your "Message Properties" section. Note: If you do not see the "Message Properties" section, click on the grey and white checkered background and it should appear in the right hand sidebar of the editor.



    Here, click the "My Templates" button.



    You will then see your custom templates. Click on the template that you would like to make mobile responsive. In this example, we will load our custom template, "Widget Worker," into the message.



  3. You will then see the template load into the editor. Next, you will want to click on the "Categories" button above the custom template you chose.



  4. You will then see all of the AWeber templates that we offer. Take the name of the "Theme" that you noted in step 1 and type that into the search bar to the left of the "Categories" button and hit "Enter/Return" on your keyboard.



  5. You will then see the AWeber template that you created your custom template from. Check off the "Keep My Message Content" checkbox above the template if it is not already checked off.



  6. Next, click on the AWeber template that your custom template was created from. What this does is it takes the new code for making the template mobile responsive and it applies it to your custom template.



  7. Now, you will want to save your newly mobile responsive custom template. Click the "My Templates" button.



  8. Finally, you can rename the template and save it again by clicking the "Save As Template" button. This newly saved custom template will be the mobile responsive version of your original custom template.

For Existing Messages

If you already have messages created under your original custom template you will need to load your newly created mobile responsive template into those messages in order to make them mobile responsive.

  1. First, open the message you would like to make mobile responsive. Once the message has been opened, click the "Templates" button in the right hand side of the message editor. This will be located under your "Message Properties" section.



    Here, click the "My Templates" button.



  2. If it is not already checked off, make sure to check off the "Keep My Message Content" checkbox.



  3. You will then want to click on the mobile responsible template that you would have saved from earlier on.



    Click the "Apply" button below the templates.



  4. Finally, click the "Save" button to save the message and it will now be mobile responsive!

 

What if I have issues designing my messages?

AWeber offers hundreds of templates you’re welcome to use! If you would ever find yourself wanting to modify an existing template or would like a custom template built for you to reflect your branding, our Template Team would be happy to modify existing templates or design a custom template for you!

Have more questions? Submit a request