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

  1. Действия с секциями
  2. Работа со стандартными секциями
  3. Работа со сквозными секциями
  4. Оформление секций

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

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

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

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

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

Чтобы сделать секцию стандартной:
  1. Нажмите значок под выбранной секцией.
  2. В открывшемся окне задайте удобное для вас название секции.
  3. Нажмите кнопку Добавить в библиотеку.

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

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

Секции, которые повторяются на всех страницах сайта, например шапку и подвал, можно сделать сквозными. Тогда внесенные изменения будут применяться ко всем страницам, где используются сквозные секции. Если вы привязали к Турбо-сайту организацию из Справочника, сквозные секции будут корректно работать и с ней.
Внимание.
  • Сквозные секции работают только в рамках одного Турбо-сайта.
  • После редактирования сквозной секции страницу нужно сохранить и опубликовать. Тогда секция обновится на всех страницах, где она используется.
  • Перенести страницу со сквозными секциями на другой сайт невозможно. Для переноса страницы удалите сквозные секции или сделайте их обычными.
Чтобы сделать секцию сквозной:
  1. Нажмите значок под выбранной секцией.
  2. В открывшемся окне задайте удобное для вас название секции.
  3. Включите опцию Сделать секцию сквозной.
  4. Нажмите кнопку Добавить в библиотеку.

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

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

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

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

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

Шапка

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

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

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

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

Обложка

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

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

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

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

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

Фото

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

Слайдер

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

Графика

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

Кнопки

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

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

Пример

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

Цена

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

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

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

Форма

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

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

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

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

Товары

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

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

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

Контакты

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

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

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

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

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

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

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

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