Создаем свой первый сайт в формате сторис: пошаговое руководство

Доля мобильного трафика с каждым годом только растет. В ноябре 2022 года больше 59,88% пользователей использовали смартфон для выхода в интернет. Для сравнения: в 2015 году этот показатель составлял всего 31,16%. Можно сказать, что интернет становится мобильным. Поэтому сайты в формате сторис — естественная эволюция пользовательских страниц.

Привет, это Matomba-технологии и мы проведем вас в мир новых маркетинговых инструментов. Сегодня поговорим о том, как создать свой собственный сайт в формате сториз без мам, пап и регистраций. Поможет нам в этом сервис Diapo – конструктор интерактивных сайтов.

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

Сначала разберем, что такое сайт в формате сториз.

Story Landing – отдельная посадочная страница, которая создана в формате историй, как в социальных сетях. Она создается специально для коммуникации, маркетинговой или рекламной кампании. И все это – в привычном виде. Давайте лучше покажем 👇

Зачем использовать Story Landing:

• Лидогенерация. С помощью историй можно привлечь внимание пользователя и убедить его досмотреть информацию до конца. А там – форма для захвата лидов. Высокая конверсия из посетителя в клиента обеспечена;
• Рассказ о продукте. Используйте Diapo для характеристики и описания товара. На слайдах можно сразу сделать страницу оплаты;
• Информация о бренде, скидках или мероприятиях. Расскажите истории о компании или соберите информацию о новинках, акциях, социальной активности или целях.

Для создания такого сайта, презентации или даже визитки не нужно быть гениальным маркетологом или крутым программистом. Все что вам нужно – воображение, креативность и время. Ну и конечно сама платформа, на которой вы соберете первый сайт.

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

• Каждая ель создана вручную – даже спустя 5 лет ничего не осыпется и не потускнеет;
• 3D-ветки, которые выглядят как настоящие;
• Для елок создается крепкий, металлический каркас, благодаря чему ветки не гнутся под тяжестью игрушек и мишуры.

Это те особенности, которые мы будем упоминать при создании сайта. Вы также можете выделить особенности своего продукта. Необязательно расписывать все на несколько листов – главное выделить то, что зацепит вашу аудиторию.

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

• Сегментация (разделение покупателей на несколько сегментам по интересам, целям, поведении при покупке и т.д.);
• Портрет покупателя (подробная информация о том, где живет покупатель, сколько ему лет, кем он работает, чем интересуется);
• Выявление проблем, которые решает продукт;
• Варианты решения проблемы.

Можно составить предложение для каждого отдельного сегмента. Обязательно держите то в голове, когда будете создавать сайт. Это понадобится для создания выгодного предложения и захвата аудитории.

Как изучить свою аудиторию:

• задавайте вопросы своей целевой аудитории;
• просмотрите тематические форумы или группы;
• следите за поведением клиентов в социальных сетях.

Этого вполне достаточно, если вы делаете сайт самостоятельно. Из тех выводов, которые вы получили, нужно подбирать тезисы для историй. Теперь можно подготовить контент для сайта.

Это одна из самых важных вещей в создании сайта в формате сториз – фотографии и видео. Да, такой формат ориентирован больше на визуал. Меньше текста – больше изображений. Показывайте реальные фотографии вашего продукта, делайте видео, делайте упор на визуал. Лучше один раз показать, чем сто раз описывать, как прекрасна елка, которую вы продаете.

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

Но если нет хороших фотографий ли видео, можно найти альтернативу на бесплатных фотостоках. Вот где можно найти фотографии и видео:

• Pixabay;
• Unsplash;
• FreeStockImages;
• Gratisography;
• Pexels (для тех, у кого всегда включен VPN).

Лучше заранее позаботиться о размере контента – универсально 1080 x 1920 px (9:16), до 80 Мб. Когда все готово, можно перейти к конструктору и начинать творить.

В сервисе Diapo большой функционал, который позволяет вам воплотить практически все, что задумано. Вы ограничены только своей фантазией. Сначала нужно зарегистрироваться в сервисе. После этого вы перейдете в личный кабинет, где высветятся сделки, контакты, аналитика и партнерская программа. В верхнем правом углу высвечивается Story Landing и сториз для сайта отдельно. Количество сайтов и сториз зависит от вашего тарифа.

1. Загрузка фотографий и видео

В конструкторе есть возможность загрузить собственные фото и видео с компьютера. Для этого нужно перейти на вкладку медиа, в «Загрузки». Размер контент – до 80 Мб. Во вкладке «Изображения» можно выбрать стоковые фото с Unsplash в бесплатной библиотеке. Поиск изображений происходит через поисковую строку на английском языке. Вам необязательно открывать фотосток и там искать нужную фотографию – все есть прямо в редакторе.

Выбираем нужную фотографию и регулируем размер. При желании можно открыть редактор фото, изменить яркость, контрастность и наложить фильтр.

Внизу есть меню для добавления слайдов слева и справа. Посередине кнопка для копирования слайда.

2. Заголовки и текст

После медиа идет раздел текстов. В нем есть несколько уровней заголовков, обычный текст и форматирование. После добавления текста вам открывается дополнительный редактор – можно изменить шрифт, размер, цвет текста и цвет фона текста. На гифке ниже мы тестируем все функции этого редактора.

3. Интерактивы

Взаимодействие с аудиторией – главное в сторилендингах. Для этого в Diapo есть интерактивы:

• Кнопка;
• Соцсеть;
• Вопрс;
• Опрос;
• Форма связи;
• Тест;
• Кнопка для приложения.

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

4. Фигуры и фон

После интерактивов на слайд можно добавить фигуры и фон. Фигуры можно добавить, чтобы добавить сайдам сложности. Если вы до этого часто создавали истории в социальных сетях, то знаете, как обращаться с фигурами, чтобы зацепить аудиторию.

Кроме основной картинки вы можете добавить фон. Это может быть и обычная заливка, и картинка из предложенных в редакторе.

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

5. Техническая часть

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

• Уведомления: Email и Telegram;
• CRM-системы: amoCRM и Bitrix24;
• Email-рассылка: SendPuls и Getresponde;
• Аналитика: Яндекс.Метрика, GoogleAnalitics, FacebookPixel, ВконтактеPixel, TikTok, MailRaiting, Roistat;
• Эквайринг: CloudPayments;
• Дополнительно: Webhook и HTLM.

6. Настройка сайта

После интеграции можно настроить ключевые параметры. Они будут распространяться на все версии А/Б тестов. Что можно настроить в этом разделе:

• Показ сторилендинга по прямой ссылке и домену. При включенном режиме вы получаете запись аналитики и заявки;
• Телефонные маски для получения номеров в едином формате. Можно настроить страну;
• Язык интерфейса;
• Валюта для платежной системы;
• Информация о cookie;
• Зацикливание, чтобы после последнего слайда сайт вернулся к первому;
• WhiteLabel – отключение бренда Diapo на ваших сайтах. Доступен только на Pro-тарифе;
• Политика сайта;
• Контроль дублей;
• Автодлина слайдов;
• Автоостановка слайдов;
• Автопроигрывание;
• Адаптивный фон для веб-версии.

После настройки есть разделы аналитика и анализ рекламы. Эти разделы доступны только на тарифах Lite и Pro. С их помощью вы сможете отслеживать эффективность рекламы, поймете, досматривают ли сайт до конца и что нужна заменить в случае низких показателей.

Теперь, зная все функции создания слайдов для сторилендинга, можно приступать к созданию полноценного сайта. Мы решили сделать простой сайт, состоящий из 4-5 слайдов. Упор делаем именно на видео, чтобы передать праздничное новогоднее настроение – ведь именно для этого покупатели и ищут елку. В слайдах мы оставляем ссылку на сайт, где можно посмотреть весь каталог елок, а еще в конце делаем форму для захвата лидов – вдруг человек захочет договориться о персональных условиях.

Итак, наш сторилендинг полностью готов. Осталось только показать его нашим будущим покупателем. В разделе «Установка» есть несколько вариантов установки сайта в формате сторис:

• Прямая ссылка. Ее вы можете указать в ваших социальных сетях, блоге или давать напрямую потенциальным клиентам, например, в виде QR-кода. Дополнительно можно купить домен и отправлять сайт в рекламу. Не забудьте настроить ее на мобильный трафик – заявки вам будут гарантированы;
• Виджет для сайта. Можно установить код со сториз в любую часть вашего сайта. Это может быть конкретный блок на сайте, всплывающее окно, либо онлайн-консультант.
• Установить на любую популярную CMS: Tilda, WordPress, 1C-Битрикс, WIX.

Кроме этого, вы можете настроить SEO прямо в редакторе: заполнить Title и Description, чтобы повлиять на отображение в поисковых системах Яндекс и Google.

И нет, вам не нужно становиться программистом, чтобы установить стрилендинг. В разделе «Установка» есть подробные инструкции, как это сделать. Но если вдруг не разберетесь – можно написать в поддержку, которая отвечает в течение нескольких минут. Теперь можно делиться своим творением с покупателями и подписчиками.

Есть несколько простых лайфхаков, которые повысят лояльность аудитории и принесут вам больше заявок:

• Создавайте не больше 7-8 слайдов для сайта. Такое количество историй обеспечат уровень удержания до 70%. Никто не захочет смотреть по 20 историй, если только они не развлекательные. В ином случае посетитель просто закроет сайт и уйдет;
• Самое важное – вперед. Здесь работает такой же принцип, как и для обычных сайтов. Все классное и интересное делайте в первой истории;
• Видео работают лучше, чем картинки. Их перелистывают реже, они привлекают больше внимания и повышают доверие к продукту.

Шаг за шагом вы сможете создать свой собственный сайт в формате stories. Может быть, первый результат вас не удовлетворит, но попробовать сделать его точно стоит. В следующих статьях мы расскажем, как с помощью Diapo создать хайлатсы для сайта, сайт визитку и даже резюме для работодателя.

Подписывайтесь на наш канал на VC и не пропустите информацию о новых, инновационных инструментах.