Турбо-страницы Яндекса: пошаговое руководство

Турбо-страница (турбо-сайт) — версия сайта, адаптированная под мобильное устройство. Обычно это одна страница с лид-формой и кнопками контактов.

Преимущества у турбо-страниц следующие:

— Ускоренная загрузка. Личный тест: 5 секунд у обычного лендинга на Tilda против 2 секунд у турбо-страницы.

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

— Интуитивно понятный и удобный конструктор. Я освоила его минут за 20 и дальше уже приступила к созданию самого сайта.

— После создания турбо-страница вы сможете использовать её в любом виде рекламы: контекст, таргет, не важно — ссылка везде работает, аналитику по ней также можно проследить через Яндекс.Метрику.

Минусы:

— Чересчур минималистичный дизайн, из-за чего один турбо-сайт похож на другой.

— Не поставить сторонние системы аналитики: пиксели соцсетей и Google Analytics. Только Яндекс.Метрика и UTM-метки.

Сегодня я составлю путеводитель по конструктору Яндекс.Директа для новичков. Покажу, как пошагово и просто создать турбо-страницу, которая поможет вашему продвижению в интернете. Результат будет по ссылке в конце, чтобы вы сами убедились в удобстве турбо-сайта и скорости его загрузки. Начнём!

Для создания турбо-сайта нам понадобятся:

— Открытый кабинет Яндекс.Директ

— Фотографии вашего продукта

— Фантазия, воображение, копирайтерские таланты — текст на странице тоже нужен

В кабинете переходим во вкладку “Инструменты”, ищем блок “Конструктор Турбо-страниц”, нажимаем “Подробнее”.

Турбо-страницы Яндекса: пошаговое руководство, изображение №1

Яндекс предлагает нам создать Турбо-сайт и предлагает на выбор несколько шаблонов, либо создать страницу с нуля.

Так выглядит окно при создании Турбо-сайта

Так выглядит окно при создании Турбо-сайта

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

Всего у Яндекса 16 шаблонов + №17 — пустая страница с нуля. Вы можете сами просмотреть, что из себя представляют шаблоны, просто дважды на них кликнув. Если вас не устроит содержимое, просто удалите её. Позже покажу, как это делается

Кратко о 4 основных и самых универсальных шаблонах:

— Интернет-магазин: очевидно, шаблон для интернет-магазина. Идеально подойдёт, если у вас любой товарный бизнес. Одежда, обувь, украшения, книги — всё, что угодно, что можно легко выбрать и купить.

Или интернет-магазин букетов, на примере Яндекса
Фото, описание, кнопка «Купить», всё довольно стандартно
Лид-форма везде примерно одинаковая, поэтому далее её показывать не буду

Или интернет-магазин букетов, на примере Яндекса

— Базовый. Один экран с фото, описанием в пару предложений и лид-формой. Лучше всего подойдёт, если вы продаёте билеты на какое-то мероприятие, например, концерт. Ещё хорошо зайдёт в нишу срочных услуг, например, вскрытие замка у захлопнувшейся двери или выездного шиномонтажа — фото мастера, указание цен, пара предложений про “приедем за 10 минут в любой район города” и лид-форма. Всё. Людям в таких ситуациях обычно не до красивой обёртки и гениально продающих текстов — им нужна максимальная оперативность услуги.

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

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

— Информационный. Достаточно универсальный, идеально подойдёт для ниши услуг и инфобизнеса: вы на нескольких экранах рассказываете о своем продукте, преимуществах, показываете фото, а внизу оставляете лид-форму. Этот шаблон больше всех остальных напоминает классический одностраничный лендинг, к которым все уже привыкли.

Например, здесь Яндекс предлагает тест-драйв автомобиля
Описание товара/услуги, карусель с фото

Например, здесь Яндекс предлагает тест-драйв автомобиля

— Товарный. Подойдёт для любого товарного интернет-магазина с очень маленьким выбором, буквально 2-3 товара. От интернет-магазина отличается лишь оформлением.

Пример с деревянным оружием. Кстати, интересно, как бы такая страница прошла модерацию Яндекса
Так выглядит карточка товара. Очень удобно, что можно поставить скидку: просто впишите старую и новую цену — процент Яндекс рассчитает сам

Пример с деревянным оружием. Кстати, интересно, как бы такая страница прошла модерацию Яндекса

Остальные шаблоны нишевые, останавливаться на них я не буду — четыре вышеперечисленных и так прекрасно справятся.

Сегодня я остановлюсь на информационном шаблоне.

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

Кстати, о моём продукте — сегодня это будет питомник мопсов “Чёрные ушки”. Цель страницы — рассказать о питомнике, показать щенков и взрослых собак, оставить контакты, по которым можно связаться с заводчиками и купить себе одного из малышей.
Сразу покажу в карусели, какой сайт у меня получился:

Турбо-страницы Яндекса: пошаговое руководство, изображение №11
Турбо-страницы Яндекса: пошаговое руководство, изображение №12
Турбо-страницы Яндекса: пошаговое руководство, изображение №13
Турбо-страницы Яндекса: пошаговое руководство, изображение №14
Турбо-страницы Яндекса: пошаговое руководство, изображение №15

Двойным кликом выбираем нужный шаблон. Видим следующий экран.

Турбо-страницы Яндекса: пошаговое руководство, изображение №16

Обратите внимание на блок справа — здесь находятся части сайта. Их можно перемещать, удалять, ну и менять, конечно же! Чем мы и займёмся.

Начнём с шапки: кликаем на саму шапку и нам открывается меню. Начнём с пункта «Дизайн». Здесь мы выбираем нужный нам формат логотипа (или удаляем его, тут уж как вам нужно).
По умолчанию «Шапка» фиксируется в верхней части экрана и висит на протяжении скроллинга всего сайта. Это можно отключить также в пункте «Дизайн», чуть ниже переключатель «Фиксировать при скролле».

Форматы логотипа: «иконка», «текст», «текст + иконка» или «без логотипа»1 из 2

Форматы логотипа: «иконка», «текст», «текст + иконка» или «без логотипа»

Так в итоге выглядят шапка и меню на мобильных устройствах
Турбо-страницы Яндекса: пошаговое руководство, изображение №19

Так в итоге выглядят шапка и меню на мобильных устройствах

Теперь переходим в пункт «Контент»: здесь мы заполняем текст сайта, контактные данные и меню, о котором я расскажу чуть позже. Обязательно нужно заполнить название компании, а также поставить логотип, если вы выбрали его отображение.

Остальные пункты особого значения для меня не имеют, поэтому оставляю их пустыми

Остальные пункты особого значения для меня не имеют, поэтому оставляю их пустыми

 

Также все заголовки и названия можно редактировать прямо на экране предпросмотра

Также все заголовки и названия можно редактировать прямо на экране предпросмотра

Далее «Меню». Здесь всё очень просто: берём и редактируем, удаляем или добавляем.

Обратите внимание, что меню связано с секциями турбо-сайта. Подробнее вы можете увидеть под кнопкой редактирования

Кнопка редактирования выделена на скриншоте
Видим, что первый пункт меню связан с секцией «Текст 1». Это можно увидеть и у остальных. Запомните это — дальше некоторые блоки мы будем заполнять именно из-за этой связи

Кнопка редактирования выделена на скриншоте

Можно добавить контакты: телефон, электронную почту, адрес и часы работы. Не забыли и про социальные сети — также можно добавить и их. Просто нажмите на «многоточие», поставьте нужную соцсеть и ссылку на неё. Пиктограммы появятся в шапке в десктоп-версии и на планшетах, либо в меню, если смотреть с смартфона

Заполняем ваши соцсети
Вот как будут выглядеть кнопки соцсетей на планшете, например

Заполняем ваши соцсети

Ставим кнопку в шапку. Я решила поставить её со скроллом к секции формы. Также тут можно поменять цвет шрифта и заливку кнопки, нажав на «Настроить стиль». Я решила сделать кнопку синей с белым текстом.

Турбо-страницы Яндекса: пошаговое руководство, изображение №26

Следующий блок: «обложка». Здесь мы остаёмся в пункте «Контент». Заполняем заголовок и изображение. Подзаголовок и кнопку по желанию.

Я заполнила заголовок и подзаголовок, как выглядит блок — увидите на следующем слайде
Турбо-страницы Яндекса: пошаговое руководство, изображение №28

Я заполнила заголовок и подзаголовок, как выглядит блок — увидите на следующем слайде

Сейчас начнутся блоки «Текст», и здесь мы запоминаем две вещи:

1. нечётные блоки будут служить заголовкамиЧётные — описанием. Соответственно, заполняем мы у каждого только их.
2. далее практически везде мы работаем только в пункте «Контент». В «Дизайне» можно отредактировать отступы. Стандартные настройки выглядят достаточно хорошо, поэтому я не рекомендую их трогать. Если нужно будет обратиться к пункту «Дизайн», я напишу об этом дополнительно.

Блок «Текст 1». Помните о связи с «Меню»? Давайте введём заголовок его пункта.

Заполняем заголовок
Результат. Синей рамкой выделен тот самый заголовок

Заполняем заголовок

Секция «Текст 2». Развиваем мысль, выраженную в заголовке («Текст 1»). Здесь также есть заголовок, подзаголовок и описание. Заполню лишь последнее.

Пишем, какие мы хорошие и уникальные, чем хорош наш продукт
«Текст 2» в синей рамке

Пишем, какие мы хорошие и уникальные, чем хорош наш продукт

Пункт «Слайдер 1». Новый формат от Яндекса для турбо-страниц, аналог «карусели» из соцсетей. Сюда вы можете загрузить фото своих продуктов или услуг, а также дать им описание, нажав кнопку редактирования — уже привычные нам 3 вертикальные точки

В моём случае это щенки и их возраст
Перелистывать можно через точки внизу, стрелками или свайпом

В моём случае это щенки и их возраст

Секция «Текст 3» в информационном шаблоне связана со вторым пунктом меню. Заполню по аналогии с «Текст 1»

Турбо-страницы Яндекса: пошаговое руководство, изображение №35

«Текст 4» — по аналогии с «Текст 2»: пишем описание к заголовку

Результат: «Текст 3» и «Текст 4» вместе
Результат: «Текст 3» и «Текст 4» вместе

Результат: «Текст 3» и «Текст 4» вместе

«Галерея 1». Тоже подборка фото, как и «Слайдер», отличается лишь тем, что галерея не листается. Сюда тоже можно загрузить фото, которые вы считаете нужными. Я решила загрузить фото взрослых собак из питомника.

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

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

«Текст 5» в этом шаблоне снова связан с меню, теперь уже с третьим пунктом. Заполняем заголовок.

Турбо-страницы Яндекса: пошаговое руководство, изображение №40

«Текст 6» предваряет блок «Форма». Рекомендую написать сюда что-то такое, что зацепит посетителя, заставит задуматься и оставить заявку. Решила попробовать так

Ввожу цепляющее описание в текст 6
Вот так выглядят вместе «Текст 5» и «Текст 6».

Ввожу цепляющее описание в текст 6

«Форма» — самый главный блок, ради которого мы и делали этот сайт. Здесь мы снова заполняем название компании, а также ИНН. В полях формы просим клиента оставить контакты (номер телефона, e-mail, не важно), имя и что-то на своё усмотрение.

Обязательно нужно указать почту, на которую будут падать заявки из формы, и внимательно за ней следить, проверять папку «Спам» — иногда заявка может упасть туда.
Параметры поля задаются после нажатия на многоточие.
И вот так форма выглядит в итоге

Обязательно нужно указать почту, на которую будут падать заявки из формы, и внимательно за ней следить, проверять папку «Спам» — иногда заявка может упасть туда.

Кнопку формы можно отредактировать так же, как и кнопку в «шапке», которую мы делали в самом начале.

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

После заполнения формы и её отправки, пользователь увидит «Сообщение благодарности». К сожалению, ни удалить, ни отредактировать его нельзя.

Турбо-страницы Яндекса: пошаговое руководство, изображение №46

«Кнопки контактов» — ссылки на соцсети или мессенджеры. Укажите все, возможно, чтобы клиент мог связаться с вами любым удобным ему способом.

Здесь я рекомендую заглянуть в пункт «Дизайн» и выставить у кнопки оригинальный стиль, иначе кнопка Vk будет непривычно красного цвета

У меня это будет ВКонтакте, например
Турбо-страницы Яндекса: пошаговое руководство, изображение №48
Турбо-страницы Яндекса: пошаговое руководство, изображение №49
Турбо-страницы Яндекса: пошаговое руководство, изображение №50

У меня это будет ВКонтакте, например

В блоке «Подвал» вы можете написать информацию о компании, вновь поставить логотип, меню, контакты — прямо как в «Шапке». Я решила не дублировать её, и оставить «Подвал» как есть.

Вот так выглядит подвал без дополнений при просмотре сайта

Вот так выглядит подвал без дополнений при просмотре сайта

Турбо-сайт почти готов, остались лишь штрихи.

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

Сначала жмём «Предпросмотр»…
… а теперь выбираем нужное устройство.

Сначала жмём «Предпросмотр»…

Осталось только задать адрес сайта. Переходим в настройки, нажимая на кнопку шестерёнки.

Турбо-страницы Яндекса: пошаговое руководство, изображение №54

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

Турбо-страницы Яндекса: пошаговое руководство, изображение №55

А как же аналитика?! Куда ставить Яндекс.Метрику?

Про неё я не забыла. Дело в том, что счётчик Яндекс.Метрики ставится на турбо-страницу автоматически. Более того: цели тоже создаются без вашего участия.

Все цели скринить не буду, их 76 штук на все случаи жизни. Как-то удалить или отредактировать их нельзя.

Все цели скринить не буду, их 76 штук на все случаи жизни. Как-то удалить или отредактировать их нельзя.

Как удалить страницу: в стартовой странице конструктора видим кнопку «Создать». Создаём папку, называем, например «Корзина».

Турбо-страницы Яндекса: пошаговое руководство, изображение №57

Слева выбираем турбо-сайт, который мы собрались удалять. Он появится в центре экрана, выбираем кнопку «…», нажимаем «Перенести сайт»

Турбо-страницы Яндекса: пошаговое руководство, изображение №58

Переносим в «Корзину» и нажимаем «Сохранить здесь».

Из двух мы выбираем ту, что я выделила

Из двух мы выбираем ту, что я выделила

Правой кнопкой мыши нажимаем на «Корзину», нажимаем кнопку «Удалить». Всё готово!

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

Буду рада, если моя статья поможет вам в успешном продвижении. Если у вас будут какие-то вопросы — пишите, смогу дать советы.
Спасибо вам за прочтение статьи, желаю успехов!

P.S. Питомник «Чёрные ушки» — выдуманный от начала до конца: адрес ненастоящий, телефон тоже, кнопки соцсетей ведут на мои аккаунты.

 

Автор: Alice Syrowatko

Понравился материал? Поделитесь им с друзьями в соцсетях!

Поможем в выборе!

Если у вас есть вопросы о формате обучения, или вы
не знаете с чего начать, оставьте свой номер:
мы позвоним и ответим на все ваши вопросы
Спасибо за подписку!
Согласен на получение рекламной информации по телефону, электронной почте и в мессенджерах