Оформление Турбо-страницы

В окне создания Турбо-страницы нажмите кнопку +Добавить в левом верхнем углу и выберите нужную секцию. Расположение секций на Турбо-странице можно отредактировать в Навигации — просто перетащите секцию в нужное место. Чтобы удалить секцию, нажмите . Секция Подвал — обязательная, ее невозможно удалить.

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

Совет. Обратите внимание на наши рекомендации по оформлению Турбо-страниц.

Вы можете комбинировать секции из библиотеки и выстраивать структуру страницы в соответствии со своими задачами.

Шапка

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

В шапке полезно разместить:

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

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

В обложке вы можете настроить заголовок, подзаголовок, кнопки и иллюстрацию, а также выбрать расположение иллюстрации — справа, слева или снизу.

Текст

В секции Текст расскажите подробно о товарах или услугах, которые вы предлагаете. Вы можете использовать разные типы текстовых блоков: заголовки для привлечения внимания, подзаголовки для передачи сути вашего предложения, описание для детальной информации о вашем товаре или услуге. Для оформления текста доступны следующие средства:
  • выравнивание;
  • нумерованные и маркированные списки;
  • подчеркивание;
  • курсив;
  • выделение жирным шрифтом;
  • гиперссылки (могут вести на другую секцию Турбо-страницы или на внешний источник);
  • выделение текста цветом.
Фото

Покажите, как выглядит ваш продукт. Если вы продаете товар, добавьте его фотографию. Если предлагаете услугу — покажите на фото процесс. В секции Фото можно добавить одну фотографию с кратким описанием. Поддерживаемые форматы изображений — 16:9, 5:4 или 1:1.
Слайдер

Секция Слайдер представляет собой серию изображений с кратким описанием. Это могут быть ваши изображения, готовые из библиотеки или ранее использованные изображения. В слайдере изображения переключаются последовательно, по одному — его удобно использовать, чтобы показать пошаговый процесс. Поддерживаемые форматы изображений в слайдере — 16:9 или 1:1.
Графика

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

Кнопки

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

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

Пример

Допустим, на Турбо-странице вы хотите рассказать о путешествиях на Байкал, Камчатку и Алтай и передать в форму заявки направление, которое заинтересовало пользователя. Добавьте кнопки «Заказать тур» после описания каждого направления. В настройках кнопок укажите, что в поле формы «Куда летим» нужно передавать, соответственно, значения: «на Байкал», «на Камчатку», «на Алтай». Когда пользователь нажмет на кнопку, появится форма заявки, а в поле «Куда летим» будет подставлено выбранное им направление.

Цена

Укажите цену на свой товар, чтобы пользователь смог принять решение о покупке прямо на Турбо-странице. Добавьте текущую и старую цену — скидка посчитается автоматически, и вы сможете отобразить ее в процентах или в деньгах. Цену стоит указывать исходя из используемой валюты и правил рекламирования в стране, в которой будет показываться Турбо-страница.

Плавающие кнопки

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

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

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

Настройте отображение сообщения благодарности — оно формируется автоматически и показывается во всплывающем окне после заполнения формы. Из этого окна вы можете увести пользователя на свой сайт или вернуть обратно на Турбо-страницу.

Заявки приходят на почту, указанную в конструкторе. Также их можно получить с помощью API Яндекс.Директа. Если заявки на почту не приходят, узнайте, отправляют ли их пользователи. Для этого в Яндекс.Метрике у счетчика Turbo Pages проверьте показатели целей:
  • Отправка заявки из формы (засчитывается при каждом клике на кнопку отправки формы независимо от результата отправки).
  • Загрузка страницы благодарности (засчитывается только при успешной отправке формы и отображении сообщения благодарности).