Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Как мы это сделали: превращение Tuts+ Emails в шаблон для Campaign Monitor.

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called How We Made Our Shiny New Envato Tuts+ Emails.
How We Did It: Building the New Tuts+ Email Templates

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

В первых двух частях этого исследования, мы рассмотрели, как был создан дизайн новых Tuts+ Emails, затем их HTML/CSS составляющая. В этой последней части, я покажу вам, как мы их превратили в шаблон для Campaign Monitor.

На этой стадии было двое человек, вовлеченных в процесс: Кэмерон и я. Кэм отвечала за внедрение в систему наших писем, я за новостные рассылки, о чем я и расскажу здесь.

1. Готовьте ваши файлы

Николь создала серию файлов к самому концу работы, включая HTML, CSS и примеры картинок. Вместе, они смогли сверстать несколько различных примеров email, так что мне оставалось только взять готовый шаблон и начать работать отсюда.

Подсказка: Скачайте исходные файлы, если хотите идти дальше.

Местный герой

Сейчас, пути файлов относительны. Есть всего парочка CSS файлов, некоторое количество ссылок к картинкам и это все привязано к локальной директории. То есть:

Когда мы загружаем наши файлы в конце урока, Campaign Monitor распознает все эти пути и расставит их в нужном порядке.

2. Начинаем сверху.

Наш процесс таков:Мы берем все статические части нашего email и заменяем их на динамические везде где только можно. Скроллим, первый виноватый оказался на 73 строчке: ссылка на веб-версию:

Эта ссылка каждый раз будет разной, так что давайте заменим ее на динамическое <webversion>:

Все просто. Дальше!

3. Больше важных ссылок

<webversion>, о котором мы только что позаботились является одной из важнейших ссылок, используемой Campaign Monitor. Как только мы будем готовы, давайте используем парочку других ссылок. Параграф email preferences можно найти на 346 сторчке, и выглядит он так:

Используем <preferences> и <unsubscribe> для того, чтобы сделать эту секцию динамической:

Есть еще несколько важных ссылок, например <forwardtoafriend>, но мы не будем ими пользоваться в этом случае.

4. Простые строчки

Далее стоит обратить внимание на заголовок email.

tuts email heading
Заголовок и подзаголовок

Рядом с 87 строкой вы найдете его со следующей разметкой:

Параграфы с классами heading и h1 или h2 (спасибо HTML email). Каждый из этих элементов должен быть редактируемым из Campaign Monitor, так что так как нам нужно менять всего лишь текст, воспользуемся элементом <singleline>.

В самих параграфах ничего не меняется, мы просто добавляем элемент, который можно редактировать. Каждый singleline имеет необязательный атрибут label, который будет отражаться в Campaign Editor.

5. Множественные строчки

Для более сложного, чем заголовки, контента, мы используем элемент <multiline>. На 134 строчке вы найдете контент нашей первой статьи, который мы используем как введение для каждого email.

Давайте сделаем обе этих секции динамическими:

По той же схеме: редактируемые части, с необязательными label – но в этот раз можем воспользоваться WYSIWYG редактором:

6. Редактируемые картинки

Прокрутите вниз к 168 строчке и вы обнаружите картинку в табличной строке, саму по себе:

Это будет частью повторяющейся секции (которую мы скоро сделаем), так что давайте сперва сделаем картинку динамической. Я не люблю использовать слово "простой" в уроках, но в этом случае я дам ему шанс: просто добавьте атрибут editable тегу image. Готово!

Атрибут width необходим, но src (который показывает нам оригинальную картинку) необязателен, также как и наш друг label.

Сделав это, редактор позволит нам избавиться от оригинальной картинки, загрузить новую, добавить текст под картинку и (что наиболее важно) добавить ссылку.

"Тяжелые данные говорят: email с картинками обладают в два раза большей конверсией" – Chris Hexton, CEO and Co-founder of Vero

Примечание: держите в голове, что если мы решим удалить картинку, соответствующая разметка останется. Результатом этого могут стать излишне большие padding с большим количеством пустого места, так что будьте осторожны.

7. Повторяющиеся области

Эта картинка – это та часть секции, которую мы бы хотели повторять столько раз, сколько потребуется. Она начинается на 146 строчке и заканчивается на 176 со следующим комментарием:

Также как и ранее с другими областями, нам необходимо сделать заголовок секции <singleline>, а контент – <multiline>, так что разберитесь с этим, прежде чем мы продолжим.

Чтобы можно было использовать этот код много раз, мы завернем необходимые строчки в <repeater> элемент:

Это добавит нам чуть больше контроля в Campaign Monitor, позволяя копировать секции, перемещать их или удалять.

Примечание: <repeater> должен содержать <singleline>, <multiline> или <img editable>

Еще примечание: вы не можете вкладывать элементы <repeater>!

8. Разметка страницы

Рассмотрим повторяющуюся секцию опять, но немного с другой стороны. Это секция, особая для определенной темы, и каждая тема имеет свой цвет.

В случае с нашей рассылкой для проекта переводов, иногда мы используем фото и видео секции, также как и секции кода, или разработки игр. Иногда мы пренебрегаем кодом. Иногда мы используем все девять тем. Как лучше всего их организовать? Введите элемент <layout>.

Мы можем использовать несколько элементов layout в одном блоке <repeater>, так что каждый раз, когда мы хоти скопировать блок, нам будет из чего выбрать. В нашем случае мы хотим иметь возможность выбрать из доступных тем, так что наша разметка будет выглядеть следующим образом.

Тут вы видите элементы, у каждого свой label.

Важно: Не используйте такие структуры HTML как, например, &amp; или & у label.

Начиная со 183 строчки заворачиваем наши блоки в <repeater>. Затем каждый из наших блоков-тем в <layout label=''>, убедившись, что каждый блок имеет уникальный label.

Теперь , когда мы загрузили все в Campaign Monitor, редактор выдаст нам все возможные опции, когда мы захотим использовать повторно какую-либо секцию:

9. Загрузка в Campaign Monitor

Все самое сложное позади, теперь нам необходимо загрузить наши файлы непосредственно в Campaign Monitor, чтобы мы могли использовать наш шаблон в email рассылке!

На панели управления вашей Campaign Monitor перейдите по Шаблоны > Импортировать.

Затем, введите имя вашему шаблону, выберите ваш готовый HTML файл, все необходимые дополнительные файлы (CSS и картинки) в одном файле.

Ваш файл загрузится и обработается, это займет какое-то время. Стили оптимизируются (некоторые прямо в строке, некоторые в элементе <head>), а пути обновятся. Когда все будет готово, ваш шаблон будет доступен к выбору, когда вы решите запустить новую компанию!

Заключение

Мы рассмотрели этот случай; инсайт о том, как мы создали дизайн и запустили email рассылку для Envato Tuts+. Надеюсь вам это понравилось, а если вам необходимо вдохновение для вашей следующей компании, ознакомьтесь со списком доступных шаблонов на Envato Market!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.