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