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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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