Оформление Турбо-сайта
Действия с секциями
- Добавлять секции из библиотеки. Для этого в левом верхнем углу нажмите кнопку +Добавить секцию. Изменить имя секции можно на вкладке Настройки на панели справа.
- Редактировать расположение секций на странице в панели справа — просто перетащите секцию в нужное место.
- Удалять секции со страницы, нажимая значок
. Обратите внимание: секция Подвал — обязательная, ее невозможно удалить или переместить. - Редактировать текст секций. Вы можете это делать прямо в области предварительного просмотра или на панели справа на вкладке Контент.
- Настраивать дизайн каждого элемента Турбо-страницы: например, выравнивание текста, цвет фона, отступы. Чтобы перейти к редактированию дизайна, выберите вкладку Дизайн в панели справа или нажмите Настроить стиль на вкладке Контент.
Чтобы развернуть редактор секций на всю высоту экрана, внизу нажмите Закрепить панель настроек.
Работа со стандартными секциями
Если вы создаете сайт из нескольких страниц, например сайт-портфолио, вы можете сохранять стандартные секции и использовать их повторно на других страницах. Стандартные секции доступны для всех сайтов вашего аккаунта.
- Нажмите значок
под выбранной секцией. - В открывшемся окне задайте удобное для вас название секции.
- Нажмите кнопку Добавить в библиотеку.
После этого секция будет отображаться в библиотеке в блоке . Чтобы удалить стандартную секцию из библиотеки, в этом же блоке нажмите под ней → Удалить.
Работа со сквозными секциями
Секции, которые повторяются на всех страницах сайта, например шапку и подвал, можно сделать сквозными. Тогда внесенные изменения будут применяться ко всем страницам, где используются сквозные секции. Если вы привязали к Турбо-сайту организацию из Яндекс Бизнеса, сквозные секции будут корректно работать и с ней.- Сквозные секции работают только в рамках одного Турбо-сайта.
- После редактирования сквозной секции страницу нужно сохранить и опубликовать. Тогда секция обновится на всех страницах, где она используется.
- Перенести страницу со сквозными секциями на другой сайт невозможно. Для переноса страницы удалите сквозные секции или сделайте их обычными.
- Нажмите значок под выбранной секцией.
- В открывшемся окне задайте удобное для вас название секции.
- Включите опцию Сделать секцию сквозной.
- Нажмите кнопку Добавить в библиотеку.
После этого секция будет отображаться в библиотеке в блоке . Чтобы удалить сквозную секцию из библиотеки, в этом же блоке нажмите под ней → Удалить. Добавленные на страницу секции станут обычными.
Если вы редактируете сквозную секцию, но хотите применить изменения только к одной странице, нажмите в рамке под секцией → Сделать обычной. Сквозная секция останется в библиотеке, но внесенные изменения будут сохраняться только на странице, с которой вы работаете.
Оформление секций
Вы можете комбинировать секции из библиотеки и выстраивать структуру сайта в соответствии со своими задачами.
Обратите внимание на наши рекомендации по оформлению Турбо-сайтов.
- логотип в виде текста или иконки;
- меню со ссылками на другие секции Турбо-страницы для быстрой навигации;
- контакты — телефон, адрес, почту или часы работы;
- ссылки на страницы социальных сетей;
- кнопку для перехода на другую секцию Турбо-страницы, например на форму заявки.
- выравнивание;
- нумерованные и маркированные списки;
- подчеркивание;
- курсив;
- выделение жирным шрифтом;
- гиперссылки (могут вести на другую секцию Турбо-страницы или на внешний источник);
- выделение текста цветом.
- Пример
-
На Турбо-странице вы хотите рассказать о путешествиях на Байкал, Камчатку и Алтай и передать в форму заявки направление, которое заинтересовало пользователя. Добавьте кнопки «Заказать тур» после описания каждого направления. В настройках кнопок укажите, что в поле формы «Куда летим» нужно передавать, соответственно, значения: «на Байкал», «на Камчатку», «на Алтай». Когда пользователь нажмет кнопку, появится форма заявки, а в поле «Куда летим» будет подставлено выбранное им направление.
- на почту, указанную в конструкторе;
- с помощью API Яндекс Директа;
- в Яндекс Мессенджер.
Чтобы получать заявки в Яндекс Мессенджер:
- Перейдите на страницу автоматической регистрации Мессенджера.
- В конструкторе откройте и включите опцию Отправлять заявки в Яндекс Мессенджер.
Заявки будут отправляться на логин, указанный при создании Турбо-страницы, а также продолжат приходить на почту. Подробнее.
- Изображение. Поддерживаемые форматы — 1 : 1 или 4 : 5.
- Цену. Добавьте текущую и старую цену — скидка посчитается автоматически, и вы сможете отобразить ее в процентах или в деньгах. Цену стоит указывать исходя из используемой валюты и правил рекламирования в стране, в которой будет показываться Турбо-сайт.
- Кнопку перехода из карточки товара. Введите название и укажите, что произойдет при нажатии кнопки: добавление товара в корзину, переход на другой сайт, переход к секции страницы или к форме заявки. Корзина формируется автоматически после добавления товаров, если на странице есть шапка.
Секция Шапка представляет собой блок в верхней части страницы. В шапку можно вставить разную информацию о компании, она автоматически размещается в шаблоне в зависимости от ширины экрана. Например, часть информации может быть скрыта в боковом меню — тогда на видном месте останется только самое главное.
В шапке полезно разместить:
Если на страницу добавлена секция Товары, в шапке автоматически будет размещена кнопка Корзина.
Секция Обложка представляет собой текстовый блок с возможностью добавить изображение и кнопки. Используйте обложку, чтобы рассказать о вашем предложении и разместить информацию о товаре или акции.
В обложке вы можете настроить заголовок, подзаголовок, кнопки и иллюстрацию, а также выбрать расположение иллюстрации — справа, слева или снизу.
В секции Преимущества вы можете добавить несколько ключевых сообщений о вашей компании, товаре или услуге, которые вы продвигаете. Секция представляет собой текстовые блоки с изображениями. Дополнительно можно добавить ссылки или кнопки для перехода на другую секцию Турбо-страницы или на форму заявки.
Покажите, как выглядит ваш продукт. Если вы продаете товар, добавьте его фотографию. Если предлагаете услугу — покажите на фото процесс. В секции Фото можно добавить одну фотографию с кратким описанием. Поддерживаемые соотношения сторон — 16 : 9, 5 : 4 или 1 : 1.
Секция Слайдер представляет собой серию изображений с кратким описанием. Это могут быть ваши изображения, готовые из библиотеки или ранее использованные изображения. В слайдере изображения переключаются последовательно, по одному — его удобно использовать, чтобы показать пошаговый процесс. Поддерживаемые соотношения сторон в слайдере — 1 6: 9 или 1 : 1.
В секции Галерея вы можете создать связное сообщение о вашем продукте с помощью серии изображений с кратким описанием. Это могут быть ваши изображения, готовые из библиотеки или ранее использованные изображения. Галерея показывает на странице сразу несколько изображений с горизонтальной прокруткой. Поддерживаемые соотношения сторон — 16 : 9 или 1 : 1 Разные форматы можно использовать одновременно в одной галерее.
С помощью секции Графика вы можете разнообразить страницу: добавить любые графические элементы, вензеля, разделители и расположить их в желаемом порядке.
Добавьте хотя бы одну кнопку, чтобы не терять возможные конверсии. Кнопка на первом экране увеличит вероятность конверсии. В секции Кнопки укажите, куда должно вести нажатие кнопки: на сайт, секцию Турбо-страницы или форму заявки.
В форму заявки можно передать любое значение, например модель или характеристику товара. Для этого выберите название поля и укажите значение, которое будет подставлено в это поле. Если вы используете в форме поле с выпадающим списком, в него подставится один из вариантов списка.
Укажите цену на свой товар, чтобы пользователь смог принять решение о покупке прямо на Турбо-странице. Добавьте текущую и старую цену — скидка посчитается автоматически, и вы сможете отобразить ее в процентах или в деньгах. Цену стоит указывать исходя из используемой валюты и правил рекламирования в стране, в которой будет показываться Турбо-сайт.
С помощью кнопок контактов пользователь может связаться с владельцем страницы по телефону, написать письмо, перейти на страницу в соцсети или чат в мессенджере. Кнопка двигается по странице вместе с прокруткой, оставаясь в фокусе внимания пользователя. В мобильной версии кнопки контактов располагаются внизу страницы и появляются при прокрутке вверх. Вы можете настроить дизайн кнопок самостоятельно или выбрать оригинальные стили оформления.
Добавив секцию Форма, вы сможете обрабатывать заявки от посетителей Турбо-страницы. Выберите один из шаблонов: заявка на электронное письмо, на звонок от частного лица или компании. В формах вы можете добавлять нужные поля, настраивать их названия, поясняющий текст, обязательность заполнения и ограничение по символам, выбирать тип поля — стандартное или выпадающий список.
Заполните блок Юридическая информация. Собирая персональные данные о клиентах через формы, вы должны указывать информацию о себе или своей организации — она будет вставлена в сообщение под формой. Выберите организационно-правовую форму: физическое или юридическое лицо, — и заполните поля блока. Если необходимо, добавьте ссылку на полную версию пользовательского соглашения. Она покажется во всплывающем окне по клику на надпись Подробнее.
Настройте отображение сообщения благодарности — оно формируется автоматически и показывается во всплывающем окне после заполнения формы. Из этого окна вы можете увести пользователя на свой сайт или вернуть обратно на Турбо-страницу.
Способы получения заявок через форму:
Если заявки на почту не приходят, узнайте, отправляют ли их пользователи. Для этого в Яндекс Метрике у счетчика Turbo Pages проверьте показатель цели Отправка заявки из формы (засчитывается каждая успешная отправка формы).
Секция Товары позволит вам принимать заказы от посетителей — в том числе с помощью корзины, которая автоматически появится в шапке Турбо-страницы, если секция Шапка добавлена.
Секция Товары представляет собой блок с карточками товаров, их ценами и кнопками для оформления заказа. Для каждого товара можно настроить:
В секции Контакты добавьте телефон, адрес, почту и часы работы, а также ссылки на социальные сети. Чтобы пользователю было легче понять, где вы находитесь, выберите вариант контактов с картой. Карту можно создать в Конструкторе карт Яндекса. После этого в настройках секции вы сможете добавить код карты или ссылку на нее, а также кратко описать, как до вас добраться. Карту можно расположить по правому краю или на всю ширину страницы.
Вы можете выбрать стандартный или сокращенный вид подвала, темную или светлую тему. Обязательные элементы подвала — иконка Турбо-технологий, используемых на странице, и кнопка Пожаловаться, по которой пользователи могут оставить жалобу на ее контент.
В секции есть опция Использовать юридическую информацию. В рекламе определенных товаров и услуг, например лекарств, финансовых услуг, долевого строительства, необходимо использовать предупреждения. При заполнении юридической информации помните, что на Турбо-странице должна быть указана вся информация, которая требуется в соответствии с законодательством и правилами Яндекса.
Секция добавляется автоматически, если на Турбо-странице есть секции Шапка и Товары. Окно заказа будет выводиться на экран по кнопке Оформить заказ в корзине. В конструкторе эскиз окна находится под секцией Подвал.
Введите электронную почту, на которую следует отправлять заказы из формы. Можно указать несколько адресов через запятую. Например, если обработкой заказов у вас занимаются несколько сотрудников.
Заполните блок Юридическая информация. Собирая персональные данные о клиентах через формы, вы должны указывать информацию о себе или своей организации — она будет вставлена в сообщение под формой. Выберите организационно-правовую форму: физическое или юридическое лицо, — и заполните поля блока. Если необходимо, добавьте ссылку на полную версию пользовательского соглашения. Она покажется во всплывающем окне по клику на надпись Подробнее.
Настройте поля для контактных данных клиента: добавьте недостающие, выберите формат каждого поля и укажите, какие являются обязательными.
Выберите доступные способы получения заказа. Доступные типы получения — Самовывоз и Доставка. Для первого типа укажите адрес самовывоза, для второго — стоимость доставки. Настройте способы оплаты: например, Оплата курьеру наличными и Оплата курьеру картой.
