Лендинг за два дня — обзор конструктора Slides от Designmodo

В прошлом году мы решили расширить нашу контентную деятельность и выпускать обучающие материалы, которые можно скачать. Начали с простой раздатки, в которой рассказали, как написать текст для email-рассылок. Чтобы её раздавать, нужен был лендинг. Для этого у нас были следующие варианты:

  • сделать собственную шаблонную страницу, в которой можно будет просто менять контент: заголовок, картинку и описание, — и использовать её в таких случаях;
  • сделать на Readymag;
  • сделать на Тильде;
  • сделать на каком-нибудь фреймворке от Designmodo.

Почему мы выбрали Slides от Designmodo

Первый вариант слишком долгий и нудный в реализации, а ведь нам надо было хотя бы просто посмотреть, интересно ли нашим читателям скачивать раздатки. Был риск, что потратим кучу времени, а потом окажется, что раздатки никому не нужны. Затягивать смысла не было, так что сразу решили использовать конструкторы.

Почему-то мы сразу проскочили вариант с Тильдой, теперь уж никто не вспомнит, почему, так что сразу начали с Readymag. На нём мы сделали первую версию страницы. В Readymag не понравились слишком узкие возможности в правке кода и скудные настройки для формы подписки. Однако страница на редимаге просуществовала довольно долго и, может быть, так и оставалась бы там, если бы не надо было платить — размещение страницы на собственном домене — платно, а 16 баксов каждый месяц — да ну на фиг.

Полезно почитать

Каково это — вести блог агентства

Поэтому в какой-то момент страница просто исчезла с нашего сайта, потому что мы за неё не заплатили. С этим надо было что-то делать, так что мы решили попробовать Slides от Designmodo. Это решение нам нравится до сих пор, так что мы его с радостью рекомендуем и рассказываем о своём опыте работы с ним.

Лендинг, который у нас получился

С помощью Slides мы сделали вот такой простенький лендинг из двух экранов за пару дней:

Лендинг

Как сделать лендинг на Slides

Для работы со Slides нужны базовые знания HTML и CSS. Этому можно научиться на Codecademy. Если вы далеки от вёрстки, советуем немного погрузиться — потом долго будете радоваться этому навыку.

Смысл работы со Slides в том, что на странице самого приложения есть много разных блоков: с видеофонами, шапкой, формами, таблицами тарифов, разными вариантами анимации. Пользователю остаётся поставить галочки, какие блоки ему нужны, и скачать архив, в котором уже есть весь код и все нужные файлы. После в текстовом редакторе вы правите контент.

различные блоки на slides

Мы для своей страницы выбрали два блока: один под описание раздатки, другой — под форму, чтобы читатель мог эту раздатку скачать.

Первый блок в оригинале выглядит так:

блок под описание раздатки

В нашей версии вот так:

блок под описание раздатки в нашей версии

То есть, мы только заменили картинку и текст. Ещё добавили стилей к списку, чтобы у пунктов был отступ.

Второй экран — с формой:

форма для скачивания раздатки

Мы заменили фоновое изображение и использовали наши фирменные цвета:

наша версия формы для скачивания

Общее впечатление от Slides

Что понравилось

  1. Slides — удобный инструмент, если вам нужно сделать лендинг быстро и без особого участия программиста.
  2. Очень много разных блоков, все их можно гармонично комбинировать между собой.
  3. Страница получается адаптивной.
  4. Обширные возможности правки кода — настраивать можно почти всё, что угодно. А, если не умеете, то и так сойдёт.
  5. Красивый дизайн.

Что не понравилось

  1. Дизайн довольно шаблонный стартаперский (возможно, вы прочитали «старпёрский», но это неправильно). В контенте приходится исходить из дизайна, а не наоборот. Но а) это особенность любого шаблонного решения; б) для простых быстрых задач в этом нет ничего страшного.
  2. Не хватает экрана с галереей изображений — такого в дизайне не предусмотрено.
  3. Анимацию перелистывания можно настроить, но нет возможности сделать страницу без анимации. Такие вещи часто ухудшают скорость загрузки страницы. (UPD: после публикации статьи ребята из Designmodo подсказали, что можно просто убрать параметр animated из тега <body>)

Тем не менее, несмотря на эти минусы, Slides для нас — лучший инструмент, который мы пробовали и для решения простых задач подходит идеально.

Однако, чтобы в MailChimp отправлялись подписчики и форма работала хорошо, нам пришлось повозиться с формой подписки и обратиться к программисту. Хорошая новость в том, что в этой статье мы отдаём вам весь код, который может потребоваться.

Как настроить форму MailChimp на лендинге Slides

Оригинальный код формы выглядит так: 

<!-- Slide #55 -->
<section class="slide fade kenBurns">
<div class="content">
<div class="container">
<div class="wrap">
<h1 class="ae-1">Say Hello</h1>
<div class="ae-2"><p>Feel free to ask anything about our products.</p></div>
<div class="fix-5-12 margin-top-6">
<div class="pad shadow selected ae-3">
<form action="ajax-email.php" id="contact-form" method="post" class="wide center" data-ajax-form="true">
<div class="label ae-4 cropTop"><label class="cropTop opacity-5" for="name55">Your name</label></div>
<input class="stroke ae-5 wide" id="name55" type="name" name="name" placeholder="Name" required/>
<div class="label ae-6"><label class="opacity-5" for="email55">Email address</label></div>
<input class="stroke ae-7 wide" id="email55" type="email" name="email" placeholder="Email" required/>
<div class="label ae-8"><label class="opacity-5" for="message55">Message</label></div>
<textarea class="left ae-9" id="message55" type="text" name="message" placeholder="Message" required></textarea>
<input class="button wide pink ae-10 margin-top-2 cropBottom" type="submit" name="submit" value="Send message" data-success-text="Done!" data-success-class="green"/>
</form>
</div>
</div>
</div>
</div>
</div>  
<div class="background" style="background-image:url(assets/img/img-55.jpg)"></div>
</section>

Помимо простых вещей, вроде изменения цвета и бэкграунда, требовалось интегрировать форму с MailChimp. Для этого я воспользовалась инструкцией, которую нашла в блоге Designmodo:

  1. Создала список рассылки в аккаунте MailChimp, в который будут попадать подписчики с лендинга.
  2. В меню списка рассылки выбрала Signup forms → Embed forms → Naked
  3. В коде формы скопировала значение, которое записано в <form action="…">, вставила скопированное значение в <form action="…"> в ;форме в коде Slides.
  4. Ну и русифицировала форму тоже прямо в коде.
  5. Кроме того, добавила примечание об обработке персональных данных — это важно после обновления закона 1 июля 2017.

Получился вот такой код:

<!-- Slide 4 (#55) -->
<section class="slide fade kenBurns">
<div class="content">
<div class="container">
<div class="wrap">
<h1 class="ae-1">Скачайте гид по&nbsp;текстам для email-рассылки</h1>
<!-- <div class="ae-2"><p>Feel free to ask anything about our products.</p></div> -->
<div class="fix-5-12 margin-top-6">
<div class="pad shadow selected ae-3">
<form action="КОД ИЗ ФОРМЫ MAILCHIMP" id="contact-form" method="post" class="wide left" data-ajax-form="true">
<div class="label ae-4 cropTop"><label class="cropTop opacity-5" for="name55">Имя</label></div>
<input class="stroke ae-5 wide" id="name55" type="text" value="" name="FNAME" placeholder="Имя" required/>
<div class="label ae-6"><label class="opacity-5" for="email55">Адрес эл. почты</label></div>
<input class="stroke ae-7 wide" id="email55" type="email" value="" name="EMAIL" placeholder="Email" required/>
<!-- <div class="label ae-8"><label class="opacity-5" for="message55">Message</label></div>
<textarea class="left ae-9" id="message55" type="text" name="message" placeholder="Message" required></textarea>
-->              <input class="button wide yellow-ems ae-10 margin-top-2 cropBottom" type="submit" name="submit" value="Получить гид на эл. почту" data-success-text="Готово" data-success-class="green"/>
</form>
<p class="terms">Заполняя форму, вы соглашаетесь <a target="_blank" href="https://emailsoldiers.ru/about-us/politika-konfidencialnosti/">на обработку персональных данных</a></p>
</div>
</div>
</div>
</div>
</div>  
<div class="background" style="background-image:url(assets/img/img-icons.jpg)"></div>

Вот тут на картинке подчёркнуты все изменения, которые я вносила в код формы:

изменения, внесенные в код формы

В инпутах, обратите внимание, соотнесла поля с названиями полей в MailChimp (name=»FNAME» и name=»EMAIL»).Инструкция: формы подписки MailChimp

После теста форма работала, данные подписчика попадали в список рассылки, но не работала кнопка — по клику ничего не происходило. То есть данные отправлялись, но пользователь не мог об этом догадаться — обратной связи не было.

Пришлось писать в поддержку. После недели общения выяснили, что у нас не работают скрипты, которые меняют состояние формы. Мы решили написать свой скрипт. Если вам тоже потребуется, пользуйтесь:

<script>
$('#contact-form').submit(function() {
var form = $(this);
setTimeout(function() {
var email = form.find('#email55').val();
form.find('input').val('');
form.find('
[type=submit]

‘).val(‘Готово’).removeClass(‘yellow-ems’).addClass(‘green’).attr(‘disabled’, true); $.get(‘detect_subscribe.php?email=’+encodeURIComponent(email), function(data) { if (data && data != ‘404’) { form.append(‘<p>Вы уже скачивали этот материал. Чтобы посмотреть его, перейдите по <a href=»https://emailsoldiers.ru/files/files/content/WHITEPAPERS/simple-email.pdf» style=»text-decoration: underline;»>ссылке</a></p>’); } }) }, 300) }); </script>

Его нужно вставить после последнего тега <div></div> перед закрывающим тегом</section>.

Обратите внимание, в коде одна строка отсылает к файлу detect_subscribe.php:

строка отсылает к файлу detect_subscribe.php

Этот файл нужен, чтобы форма получала от MailChimp информацию, является ли человек нашим подписчиком. Потому что, если является, то мы не хотели спрашивать с него данные, а хотели просто предоставить материал по ссылке.

Так что вам тоже может потребоваться такая проверка. В той же папке, где лежат все остальные файлы Slides, создайте файл detect_subscribe.php и вставьте в него этот код:

<?php
function mc_checklist($email, $debug, $apikey, $listid, $server) {
$userid = md5($email);
$auth = base64_encode( 'user:'. $apikey );
$data = array(
'apikey'        => $apikey,
'email_address' => $email
);
$json_data = json_encode($data);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://'.$server.'.api.mailchimp.com/3.0/lists/'.$listid.'/members/' . $userid);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json',
'Authorization: Basic '. $auth));
curl_setopt($ch, CURLOPT_USERAGENT, 'PHP-MCAPI/2.0');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);
$result = curl_exec($ch);
if ($debug) {
echo($result);
}
$json = json_decode($result);
return $json->{'status'};
}
echo mc_checklist($_GET['email'], false, 'ваш API ключ', 'идентификатор списка рассылки', 'сервер');
?>

В конце вместо «ваш API-ключ», «идентификатор списка рассылки» и «сервер» вставьте свои данные.

Как получить API-ключ MailChimp

Главная страница аккаунта → выпадающее меню, которое открывается при клики на стрелку рядом с фото и названием аккаунта → Extras → API keys → кликаете на кнопку Create API key → копируете полученную комбинацию букв и цифр — это ваш API ключ

Как получить API-ключ MailChimp
Как получить API-ключ MailChimp

Как найти идентификатор списка рассылки

Lists → выбираете список рассылки, из которого надо брать данные → Settings → List name and campaign defaults, там находите List ID:

Как найти идентификатор списка рассылки

Как узнать свой сервер MailChimp

После того, как вы вошли в свой аккаунт, сервер можно найти в адресной строке браузера:

slides-12.jpg

В нашем случае это us3.

Вот и всё, когда замените три значения в php-коде на нужные, всё должно работать. Вот как это выглядит для пользователя:

slides gif.gif

Объяснение длинное, но на самом деле, ничего сложного в этом нет. И уж тем более проще, чем обращаться к программисту.

Slides стоит $249, что, на наш взгляд, выгодно. $249 — это 15 месяцев на Readymag, а Slides вы сможете пользоваться бесконечно долго для какого угодно числа проектов, заплатив один раз.

Если отвлечься от финансового вопроса, Slides больше подходит тем, кто хочет вносить много изменений в страницу, а Readymag — для тех, кому важнее запустить и не придумывать себе приключений.

UPD: через пару лет перенесли обучающие материалы на основной сайт, конструктором больше не пользуемся.

Узнавайте об обновлениях блога Email Soldiers первым

Спасибо!

Осталось подтвердить подписку — кликнуть по кнопке в письме, которое мы вам отправили.

Похожие статьи

Ответьте на эти вопросы, если хотите создать продающий лендинг
Ответьте на эти вопросы, если хотите создать продающий лендинг

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