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

Действия с секциями

Чтобы развернуть редактор секций на всю высоту экрана, внизу нажмите Закрепить панель настроек.

Работа со стандартными секциями

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

После этого секция будет отображаться в библиотеке в блоке Мои секции → Стандартные. Чтобы удалить стандартную секцию из библиотеки, в этом же блоке нажмите под ней  → Удалить.

Работа со сквозными секциями

После этого секция будет отображаться в библиотеке в блоке Мои секции → Сквозные. Чтобы удалить сквозную секцию из библиотеки, в этом же блоке нажмите под ней  → Удалить. Добавленные на страницу секции станут обычными.

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

Оформление секций

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

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

Шапка

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

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

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

Если на страницу добавлена секция Товары, в шапке автоматически будет размещена кнопка Корзина.

Обложка

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

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

Текст

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

• выравнивание;
• нумерованные и маркированные списки;
• подчеркивание;
• курсив;
• выделение жирным шрифтом;
• гиперссылки (могут вести на другую секцию Турбо-страницы или на внешний источник);
• выделение текста цветом.

Преимущества

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

Фото

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

Слайдер

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

Галерея

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

Графика

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

Кнопки

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

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

Пример

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

Цена

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

Кнопки контактов

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

Форма

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

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

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

Способы получения заявок через форму:

• на почту, указанную в конструкторе;
• с помощью API Яндекс Директа;
• в Яндекс Мессенджер.

  Чтобы получать заявки в Яндекс Мессенджер:

  1. Перейдите на страницу автоматической регистрации Мессенджера.
  2. В конструкторе откройте Настройки → Уведомления о заявках и включите опцию Отправлять заявки в Яндекс Мессенджер.

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

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

Товары

Секция Товары позволит вам принимать заказы от посетителей — в том числе с помощью корзины, которая автоматически появится в шапке Турбо-страницы, если секция Шапка добавлена.

Секция Товары представляет собой блок с карточками товаров, их ценами и кнопками для оформления заказа. Для каждого товара можно настроить:

• Изображение. Поддерживаемые форматы — 1 : 1 или 4 : 5.
• Цену. Добавьте текущую и старую цену — скидка посчитается автоматически, и вы сможете отобразить ее в процентах или в деньгах. Цену стоит указывать исходя из используемой валюты и правил рекламирования в стране, в которой будет показываться Турбо-сайт.
• Кнопку перехода из карточки товара. Введите название и укажите, что произойдет при нажатии кнопки: добавление товара в корзину, переход на другой сайт, переход к секции страницы или к форме заявки. Корзина формируется автоматически после добавления товаров, если на странице есть шапка.

Контакты

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

Как выглядит секция на смартфоне

Подвал

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

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

Окно оформления заказа

Секция добавляется автоматически, если на Турбо-странице есть секции Шапка и Товары. Окно заказа будет выводиться на экран по кнопке Оформить заказ в корзине. В конструкторе эскиз окна находится под секцией Подвал.

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

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

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

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