Визуальные редакторы
На рисунке — Turbo Site v. 1.6.6 (2010-2011 гг.). Русская бесплатная программа. Вес 9,73 Мб.
Принцип работы — создание сайта путем редактирования шаблонов, идущих вместе с программой (более 20 шаблонов).
Образцы дополнительных шаблонов
Последняя версия программы — Turbo Site v. 1.7.1 (2011 г).
Создание сайта производится в несколько шагов, список которых расположен выше окна редактирования.
В режиме визульного редактирования можно вставить на страницу текст, список (маркированный и нумерованный), изображение, видео (в последних версиях программы), создать ссылки.
Есть возможность вставить свой код.
Имеется встроенная программа передачи файлов.
Достоинство программы — простота
Недостаток программы: скромные возможности визуального редактирования.
Авторская характеристика программы:
С помощью программы TurboSite Вы сможете создать HTML-сайт или электронный учебник с поддержкой комментариев, формы обратной связи, вставки видео-файлов и JavaScript-тестов и другими возможностями за считанные минуты! Всего за несколько шагов вы получаете готовый сайт:
1. Выберите тему оформления,
2. Добавьте страницы,
3. Заполните поля (название и описание сайта, информация об авторе и т.д.),
4. Добавьте информационные блоки (если необходимо: счетчики, реклама и тому подобное),
5. Готово!
Программа очень проста в обращении, не требует знания языков программирования и разметки текста! Созданный с помощью TurboSite сайт или электронный учебник будет работать на любой операционной системе, в любом современном браузере, может быть загружен на любой бесплатный хостинг (не требует поддержки PHP, MySQL и т.д.).
Последняя версия : TurboSite 1.7.1 (2011 г.).
Новое: Обновление TurboSite 1.7.1 включает новую версию медиаплеера JWPlayer 5.8, обновление компонентов AlphaControls 7.54, исправление «наползания» элементов друг на друга на вкладке «Параметры страницы», а также возможность удалять файлы проекта нажатием клавиши Delete на клавиатуре.
Последнее обновление: апрель 2016 г.
О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.
Турбо страницы и амр на одном сайте
NataliStar
16.02.2021 01:00 1 305
Привет! Подскажите, пожалуйста, можно ли на одном сайте подключить и АМР, и турбо-страницы?
Ответы на пост (4) Написать ответ
16.02.2021 15:07
amp закройте для яндекса тегом meta name yandex content noindex.и подключайте турбо страницы, если они вам так нужны (но подумайте 10 раз). А гугл и так турбо страницы не индексирует, я за AMP+нормальная адаптивная версия сайта
16.02.2021 15:28
Вы считаете, что турбо-страницы это плохо? У меня на амр не показывается яндекс реклама. Они похоже каждый свою показывают. Вот я и хотела подключить турбо, чтоб там яндекс реклама была.
16.02.2021 18:17
яндекс реклама спокойно показывается на АМП, проверьте все по инструкции, мб тег в head не добавили или где то ошиблись
AMP и Турбо-страницы: плюсы, минусы и результаты внедрения
Те, кто следит за новинками сферы IT, знают про “быстрые страницы” от Google и Яндекс: AMP и Турбо-страницы. Они были выпущены больше 2 лет назад, но особого шума на рынке не произвели.Меня зовут Константин. Я директор веб-студии AlkoDesign. Мы решили напомнить об этих инструментах и поделиться результатами их внедрения.
Мобильный трафик в последние годы неуклонно растет. Пользователи все чаще читают новостные сайты, заказывают продукты и вещи с телефонов. Мобильные и адаптивные версии сайтов перестали быть привлекательным бонусом, а стали реальной необходимостью.
Но не все так прекрасно. В погоне за трафиком и снижением отказов, приходится искать новые пути решения. Мобильные и адаптивные версии не всегда спасают ситуацию, а иногда вообще неудобны: адаптив получается слишком “тяжелыми” для скачивания, из-за этого скорость загрузки на смартфонах оставляет желать лучшего. (Говорить про то, что посетители, да и поисковые системы, не любят долгую загрузку, нужно?)
Мы в AlkoDesign.ru работаем с одним крупным информационным порталом. (Обойдемся без имен). Одними из поставленных перед нами задач, были: увеличение трафика и снижение процента отказов. Недолго думая, мы решили воспользоваться быстрыми страницами от Google и Яндекса.
В этой статьей мы поделимся результатами внедрения таких страниц на одном из новостных порталов и вкратце расскажем, что такое быстрые страницы и с чем их едят (для тех, кто не в теме).
Теория
AMP и Турбо-страницы — это технология ускоренных мобильных страниц, которая разрабатывается независимыми разработчиками и активно продвигается обеими поисковыми системами. Такие страницы загружается даже быстрее чем страница мобильной версии сайта.
AMP страницы google.ru
Суть в том, что на сайте используются специальные теги (с префиксом amp), количество и функционал которых строго ограничены. Задача разработчика состоит в том, чтобы собрать солянку из доступных схем, которые решат проблему заказчика.
Поисковые системы находит эти специальные тэги и кэширует информацию в них. После этого, когда пользователь ищет что-то, браузер на фоне подгружает информацию из CDN, в специальный iframe и при переходе по ссылке открывает уже загруженную страницу в специальном окне.
При использовании на сайте какой-либо CMS, для AMP страниц необходимо сделать свой отдельный шаблон для отображения данных согласно требованиям к разметке AMP страниц.
Турбо-страницы Яндекса
Основное отличие от AMP — контент Турбо-страниц берется не со страниц сайта, а из специального RSS-канала.
Их содержимое хранится на серверах Яндекса. Но для того, чтобы Яндекс забрал с нашего сайта контент, мы должны написать скрипт, который будет передавать все необходимые данные (текст, изображения, стили и т.д.) в специальном формате XML-документ. Процесс похож на подготовку данных для Яндекс.Товары или Яндекс.Маркета.
Честно говоря, настройка максимально простая. Если количество страниц небольшое (10-20), то сделать RSS-канал для Яндекса можно самим, без привлечения программиста. Правда, в этом случае обновляться он будет тоже вручную.
Скорость загрузки Турбо — страницы превышает обычную примерно в 15 раз. И, дополнительный (но не последний), бонус — если сайт упадёт, например, из-за заражения или DDoS-атаки, его Турбо-страницы продолжат открываться и контент будет по-прежнему доступен пользователям.
Страницы с AMP и Турбо, ранжируются выше других запросов в поиске за счет того, что соответствуют требованиям к быстрой загрузке.
Особенности AMP и Турбо-страниц
Первое и самое главное отличие от стандартных сайтов — это невозможность вставки «обычных» скриптов. То есть большая часть функционала, завязанная на динамическом изменении (действия по клику, анимация, фильтрация, модальные окна), становится недоступной.
Решение — использование доступных компонентов и iframe. Доступные компоненты позволяют добиться, пусть и не полной, реализации привычного инструментария на сайте, но представляют ему достойную замену и оптимизированы для быстрой загрузки.
С помощью AMP и Турбо-тегов, можно реализовать боковое меню, карусель, отправку формы, подгружаемый контент, рекламу и прочее. Каждый компонент связан со своей js-библиотекой, которую нужно подключить для его использования на сайте.
Особенности Турбо-страниц
Они помогают увеличивать охват мобильной аудитории — пользователям не приходится долго ждать загрузки сайта, и они почти сразу переходят к вашему контенту. Прирост трафика может быть существенным.
Преимущества Турбо-страниц в том, что после их внедрения на вашем сайте:
- Падает показатель отказов. Когда пользователь заходит на ваш сайт и из-за своего плохого интернета долго не может открыть вашу страницу, он может просто не дождаться ее загрузки, закрыть и снова вернуться в поисковую выдачу, чтобы найти какой-то другой, более быстрый сайт. Таким образом у вас повышается показатель отказов, а чем больше показатель отказов, тем хуже ваши позиции в поисковой выдаче.
- Растет мобильный трафик. На сегодняшний день многие пользователи уже знают, что сайты, отмеченные в выдаче значком ракеты, грузятся очень быстро и поэтому по ним активно кликают. Это дает вам преимущество перед конкурентами и позволяет увеличить посещаемость вашего сайта с мобильных устройств.
- Снижается нагрузка на хостинг. Если на сайте довольно высокая посещаемость, то этот пункт будет тоже актуален. За счет того, что загрузка контента идет не с вашего хостинга, а с серверов Яндекса, нагрузка снижается. При этом для создания и хранения Турбо-страниц Яндекс использует собственную сеть доставки контента (CDN), что еще сильнее ускоряет загрузку контента.
- Не поддерживаются формы обратной связи, нет возможности заказа товара или услуги. Это можно назвать самым главным минусом, т.к. для посадочной страницы или интернет-магазина использование турбо-страниц будет нецелесообразным, ведь вы все равно не сможете получить с них заявки.
- Сайт оформляется по предопределенному малогибкому шаблону. Когда вы кликаете по ссылке, помеченной значком «Турбо», то ваш контент отобразиться в упрощенной странице, созданной поисковиком, и ваше уникальное оформление сайта никто не увидит. Поэтому здесь придется выбирать между высокой скоростью загрузки сайта и уникальным оформлением вашей мобильной или адаптивной версии.
Особенности AMP
- Создание «легких» страниц;
- Поисковик сохраняет облегченные версии страниц у себя на серверах;
- «Яндекс» предлагает владельцам смартфонов турбо-страницы в поиске или новостной ленте;
- Благодаря высокой скорости загрузки улучшается пользовательский опыт и поведенческие показатели.
Подготовка данных
Для AMP-страниц
Все изображения на странице должны быть описаны в особом теге , что затрудняет вставку изображений пользователем через текстовый редактор.
Так же, если используются карусель или lightbox, нужно вставить аналоги из компонентов amp. Для реализации этого функционала был реализован обработчик, который с помощью регулярных выражений заменяет стандартные HTML-теги, на теги используемые в amp спецификации.
Еще одна особенность, которая должна коснуться в первую очередь текстового редактора, так как редактирование стилей там проходит inline. Элементы с атрибутами типа style=“color:…”, не являются валидными, а изменение цвета или размера шрифта запишет это свойство в код.
Чтобы поисковик понял, что есть AMP-версия страницы, она должна содержать ссылку:
А на AMP-странице — присутствовать обратная ссылка:
Css стили пишутся inline, и их размер не должен превышать 50кб.
Для Турбо-страниц
Чтобы подключить Турбо-страницы, достаточно внести небольшие изменения в текущий экспортный файл согласно техническим требованиям:
- Корневым элементом RSS-файла является rss, атрибут version которого должен иметь значение 2.0.
- Внутри элемента rss содержится элемент channel, который включает информацию об источнике и его содержание.
- Информация о сайте-источнике — сведения передаются в элементе channel.
- Информации о сообщении — данные передаются в элементе item.
- контент для турбо-страницы
Практика
Внедряем AMP на сайт
Учитывая, что мы далеко не новички в IT-сфере, внедрение страниц не составило большого труда.
Мы создали отдельный шаблон для сайта с использованием необходимых тегов из спецификации AMP и Турбо. Затем настроили автоматическую генерацию страниц.
Сразу после внедрения быстрых страниц, запустили проверку через Google и Яндекс валидатор. После запуска обнаружили дополнительные ошибки, которые были успешно устранены.
Внедряем Турбо-страницы
Для внедрения Турбо-страниц на сайте, была изучена спецификация формата. Определены шаблоны для генерации заголовков турбо-страниц и указания дополнительных изображений. Был разработан специализированный модуль для CMS, который генерирует RSS файлы с данными, согласно технической документации Яндекса ( partner.news.yandex.ru/tech.pdf ).
Поскольку материалы на сайте постоянно добавляются, то обновление RSS ленты с турбо-страницами, также обновляется путем запуска скрипта обновления на CRON. Из-за специфики проекта было принято решение сделать несколько RSS лент, каждая для своего типа контента.
В настройках модуля можно указать какие разделы сайта необходимо экспортировать в RSS, указать дополнительные данные для экспорта. Частота обновлений RSS ленты турбо-страниц задается периодичностью выполнения задачи на CRON.
После прохождения валидации RSS со стороны Яндекса, Турбо-страницы были добавлены к индексации.
Результаты
Отказы
После внедрения AMP и Турбо-страниц изменились поведенческие метрики.
За квартал показатель отказов на сайте в целом составил 14,2 %. Здесь учитываются все посетители, включая пользователей десктопов.
Показатель отказов для владельцев смартфонов, которые приходили на обычные страницы, составил за квартал 23,7%.
Показатель отказов для посетителей Турбо-страниц за этот же период составил 6,2 %.
То есть по показателю отказов, обычные страницы проигрывают турбо-страницам более чем в два раза: 23,7 % против 6,2% с Турбо-страницами и в целом 14,2%.
Посещаемость
С момента внедрения AMP и Турбо-страниц мы увеличили посещаемость портала в 2 раза.
Скорость загрузки страниц
Главный плюс — увеличение скорости загрузки страницы в 3 — 10 раз. Она мгновенно выросла за счет кеширования.
- Снизилась нагрузка на серверы
- Выросли поведенческих факторов (на позиции в органике AMP непосредственно не влияет).
Вывод: внедряем к месту и с умом
Там где нужно донести до пользователя контент максимально быстро и в простой форме.
В нашем случае результатом внедрения стало:
- процент отказа снизился в целом в 2 раза;
- посещаемость выросла в 2 раза;
- скорость загрузки выросла в 3-10 раз
Кому пока не подходит Турбо:
- Ecommerce, потому что нет корзины. (на данный момент в разработке)
- Landing page, потому что не поддерживаются любые кнопки и формы на страницах
Кому идеально подходят Турбо-страницы:
- СМИ
- Контентные проекты
- Блоги внутри сайтов (например, информационный раздел в интернет-магазине, с новостями, описанием новинок индустрии и т.д.)
AMP и Турбо-страницы — интересная технология, которую нужно использовать с умом. Может быть использована для «легкой» мобильной версии сайта, либо для определенных разделов, не требующих высокой функциональности. И, конечно, это отличное решение для информационных сайтов, блогов, интернет-журналов.
Турбо-сайты в Яндекс.Директе: кому они пригодятся и как их создать
В Яндекс.Директе на основе технологии Турбо-страниц можно создавать простые сайты с базовым функционалом интернет-магазина. Сайты адаптивные, быстро загружаются на мобильных и готовы к приему трафика. А еще они бесплатные и создаются с помощью простого конструктора.
О преимуществах и ограничениях Турбо-сайтов рассказываем в статье. А также пошагово показываем, как создать и подготовить к запуску трафика сайт для небольшого интернет-магазина.
Что из себя представляют Турбо-сайты и чем они выгодны
Турбо-сайт — простой сайт, который можно создать на основе Турбо-страниц в интерфейсе Яндекс.Директа. Он создается в конструкторе из готовых блоков. Если вы раньше работали с Тильдой или другими подобными сервисами — принцип создания вам уже знаком.
Турбо-сайт подойдет, если у вас еще нет сайта или вы хотите протестировать несколько гипотез, не задействуя основной сайт.
Рассмотрим подробнее особенности и преимущества Турбо-сайтов.
Плюсы Турбо-сайтов
Оптимизированы под быструю загрузку
Яндекс разработал Турбо-страницы с целью улучшить взаимодействие с сайтами на мобильных устройствах — мобильный интернет может быть нестабильным, поэтому важно, чтобы страницы загружались максимально быстро.
Скорость загрузки Турбо-страниц в 15 раз больше, чем у обычных сайтов. Это достигается благодаря максимальной оптимизации. На Турбо-страницах нет:
- лишних эффектов, замедляющих загрузку страницы;
- скриптов;
- «тяжелых» картинок и другой графики.
Это позволяет не терять пользователей, у которых на момент загрузки сайта плохой интернет (с обычными сайтами дело обстоит так: если страница не грузится в течение нескольких секунд — ее закрывают).
Подходят для SEO
Турбо-сайт — почти полноценная замена обычному сайту. В том числе его можно продвигать в поиске и получать органический трафик — страницы Турбо-сайта хорошо индексируются поисковиками (особенно Яндексом, что не удивительно). Главное, чтобы содержимое посадочных страниц было релевантным запросам пользователей.
Позволяют получать больше конверсий с мобильного трафика
Легкий вес страниц и быстрая загрузка на мобильных влияет на эффективность сайта. Чем меньше отказов (а Турбо-сайты позволяют снизить этот показатель до 30%), тем больше потенциальных клиентов попадают в воронку и в итоге вы получаете больше конверсий.
Бесплатны и без лимитов по количеству сайтов в аккаунте
В аккаунте Яндекс.Директа вы можете создавать любое количество Турбо-сайтов — ограничений нет. При этом создание и поддержка сайтов полностью бесплатна — вам не нужно платить за домен, хостинг и обслуживание.
Создаются в несколько кликов
Создавать Турбо-сайты просто, даже если вы ранее ничего подобного не делали. Есть конструктор с готовыми блоками под разные виды контента. Перетаскиваете, добавляете текст и картинки, задаете настройки — и сайт готов.
Для тех, кто уже работал с конструкторами (например Wix или Тильдой), конструктор Турбо-сайтов от Яндекса будет максимально понятным.
Адаптивность
При создании Турбо-сайта не нужно переживать за адаптивность и готовить отдельные отображения для разных расширений экрана. Сайты уже адаптивные и при создании вы сможете в режиме предпросмотра проверить, как Турбо-сайт отображается на мобильных, а как — на десктопе.
Есть готовые шаблоны
Сайты для популярных ниш создавать еще проще. Например, если нужно создать сайт для фитнес-центра — в конструкторе уже есть готовый шаблон под эту тематику.
Интегрированы с Метрикой
В Турбо-сайтах все готово для веб-аналитики — при создании сайта в Яндекс.Метрике автоматически создается новый счетчик и привязывается к ресурсу. В нем уже готовы предустановленные цели для отслеживания кликов по кнопкам и взаимодействию с другими элементами страниц. Вы сможете отслеживать действия пользователей, замерять конверсию и формировать аудитории для ретаргетинга.
Есть функционал для интернет-магазинов
На базе Турбо-сайта вы сможете создать полноценный, хотя и минималистичный интернет-магазин. Можно создавать карточки товаров, указывать в них фото, цену, название и краткое описание. Посетители сайта смогут добавлять товары в корзину и оформлять заказы. Информация по заказам будет приходить на вашу почту.
В каких случаях пригодятся Турбо-сайты
Турбо-сайты можно использовать для разных задач. Вот несколько вариантов, на которые вы можете ориентироваться:
- Вместо разработки полноценного сайта под рекламный трафик. Идеальный вариант для тех, кто продает товары только в соцсетях, но хочет попробовать контекстную рекламу. Чтобы не тратить много бюджета и времени на разработку полноценного интернет-магазина, можно создать и наполнить товарами Турбо-сайт за несколько часов и сразу запустить на него рекламу.
- Как мобильная версия основного сайта. Этот вариант подойдет тем, у кого уже есть сайт, но нет адаптации под мобильные. Разработка и оптимизация мобильной версии может быть дорогой (и затяжной по времени), а Турбо-сайт создается быстро, уже имеет адаптацию и хорошую скорость загрузки страниц.
- Промо-страница. Универсальный вариант — подойдет для продвижения отдельных товаров/услуг (например, сезонного ассортимента), акций, конкурсов и других спецпредложений.
Турбо-сайты — неплохое решение для тестирования различных гипотез. Например, для показа определенных предложений различным сегментам аудитории. Под каждый сегмент можно создать отдельный Турбо-сайт с адаптированным рекламным сообщением.
Инструмент простой, удобный и легко внедряется. Это дает возможность безболезненно тестировать офферы без затрат на дизайнеров и программистов.
Ограничения Турбо-сайтов
Недостатки у технологии тоже имеются. Функционал Турбо-сайтов ограничен, и вы не сможете:
- использовать собственный дизайн;
- редактировать исходный код сайта;
- добавлять дополнительные функции или модули;
- настраивать автоматическую выгрузку товаров с помощью фидов.
Тем не менее Турбо-сайты отлично подходят для тестирования различных гипотез и продвижения промоакций. А для небольших магазинов могут стать аналогом полноценного сайта на первое время (пока нет бюджета на разработку интернет-магазина или оплату дорогой CMS).
А теперь — к практике. Пошагово покажем, как работать с конструктором Турбо-сайтов и как создать в нем интернет-магазин детских игрушек.
Пошаговый гайд: создаем Турбо-сайт с нуля
Конструктор Турбо-страниц находится в разделе «Инструменты» Яндекс.Директа. Переходим в раздел и выбираем нужный инструмент:
Во всплывающем окне нам предлагают создать сайт с нуля или с помощью шаблона. В конструкторе доступно 16 шаблонов под разные ниши. Для интернет-магазина, например, в шаблоне уже созданы примеры карточек товаров (их нужно только отредактировать под свою тематику).
Также здесь можно указать следующие настройки:
- задать название первой страницы Турбо-сайта;
- привязать организацию из Яндекс.Справочника, если у вашей компании уже есть в нем профиль. Данные о компании подтянутся на сайт, и вам не нужно будет вводить их вручную.
Мы будем создавать Турбо-сайт для интернет-магазина, поэтому выбираем соответствующий шаблон и жмем «Создать».
Первоначальные настройки
Перед началом работы с конструктором зададим несколько базовых настроек, чтобы потом уже не возвращаться к ним. Кликаем по кнопке с шестеренкой на панели инструментов и откроется меню настроек.
Пройдемся по основным настройкам, которые здесь есть.
Настройки сайта
Прописываем адрес сайта. Обратите внимание, Турбо-сайты всегда размещаются на домене turbo.site, но можно задавать произвольное название сайта. Наш сайт мы назовем так:
После создания нескольких страниц здесь мы также сможем указать главную страницу (которая должна открываться по умолчанию при переходе по URL https://mirigrushek.turbo.site).
Также загружаем фавиконку.
Счетчик Яндекс.Метрики
При создании сайта в Метрике автоматически генерируется новый счетчик, который связан с нашим Турбо-сайтом.
Вот так он отображается в Метрике:
После публикации сайта счетчик автоматически будет фиксировать все взаимодействия с кнопками и другими элементами секций. Для этого ничего дополнительно настраивать не нужно, все цели уже готовы.
В настройках счетчика можно добавить свой счетчик (если вы хотите отслеживать данные с помощью счетчика, который создали самостоятельно). В этом случае вам нужно будет вручную проставить идентификаторы целей, которые необходимо отслеживать. Если этот момент для вас не принципиально важен, рекомендуем все же использовать автоматический счетчик — это проще.
Настройки страницы
Здесь находятся настройки страницы, которая сейчас открыта в интерфейсе конструктора. Заполняем следующие поля:
- Адрес страницы. Система по умолчанию генерирует рандомный адрес, нам же нужно указать здесь нормальную ЧПУ-ссылку.
- Поля для SEO. Указываем заголовок страницы, описание. Дополнительно можно закрыть страницу от индексации, а также указать канонический адрес.
- В блоке «Яндекс.Метрика» ничего не трогаем. По умолчанию на всех страницах сайта цели отслеживает счетчик всего сайта. Если потребуется, можно для отдельных страниц добавлять отдельные счетчики (скорее всего, это вам не понадобится, но простой знайте, что такая опция есть).
- Заполняем блок соцсети — влияет на то, как ссылка на ваш сайт будет выглядеть при публикации в соцсетях. Здесь нужно загрузить картинку, а также прописать заголовок и краткое описание.
Ссылки для просмотра
В этом разделе отображаются две ссылки:
- на опубликованную версию страницы;
- ссылка предпросмотра.
Моя организация
Если вы не привязывали организацию из Справочника на этапе создания Турбо-сайта, можно это сделать здесь.
Создаем страницу в конструкторе
Теперь разберемся, как работать с конструктором (этот раздел будет полезен тем, кто раньше не работал с подобными сервисами).
Главное в интерфейсе
В центральной области — страница сайта, которую можно собирать из готовых блоков.
Над окном конструктора — навигация по директории с сайтом. Кликнув по хлебным крошкам, вы сможете быстро переходить на другие страницы сайта (или переключаться между сайтами). А также добавлять новые страницы.
Строкой ниже — панель инструментов:
Здесь есть кнопки для различных действий:
- добавление секций;
- отмены/повторения внесенных изменений;
- переключение между вариантами отображения страницы — десктопная версия, планшетная и версия для мобильных), также есть кнопка предпросмотра;
- просмотр истории версий (вы сможете откатываться к предыдущим версиям или проверять изменения);
- копирование страницы;
- сохранение и публикация.
Страница собирается по принципу конструктора — из готовых секций (блоков), адаптированных для разных видов контента. Секции можно редактировать и менять местами. Если при создании страницы использовался шаблон, он уже содержит базовый набор блоков, подходящих для выбранной тематики. Вы можете использовать эту же структуру и изменить только контент. Либо редактировать и структуру:
- менять секции местами;
- удалять ненужные и добавлять новые.
Для создания нового блока необходимо:
- Нажать «Добавить секцию» на панели инструментов
- Выбрать тип секций.
- Выбрать вариант, который больше всего подходит для ваших задач.
Первым делом необходимо создать шапку сайта. Нам важно, чтобы в шапке обязательно были ссылки и наш контактный телефон, поэтому берем вариант «С логотипом, меню, кнопкой и минимальной контактной информацией».
Секция добавлена на страницу с шаблонными данными. Теперь наша задача — изменить содержимое:
- добавить логотип компании и указать название;
- убрать ненужные ссылки и добавить ссылки на будущие разделы сайта, которые пригодятся потенциальным клиентам (Товары, Доставка);
- добавить номер телефона и график работы.
После публикации сайта телефон будет скрыт — вместо него отобразится кнопка с иконкой телефонной трубки и текстом «Показать телефон». Чтобы увидеть номер, необходимо кликнуть по кнопке (данные о кликах будут передаваться в Метрику, а вы сможете отслеживать их количество для оценки эффективности рекламы).
Обратите внимание! При добавлении секции в шаблоне отобразилась кнопка «Оставить заявку». Так как у нас интернет-магазин, нам логично здесь выводить корзину. В настройках шапки мы этого сделать не можем, но это не проблема. Пока оставляем все как есть, а после добавления секции с товарами корзина автоматически будет отображаться в шапке.
Чтобы изменить текст в любом элементе, достаточно просто кликнуть на него (появится курсор и вы сможете редактировать текст). Также это можно сделать в меню настроек секции — оно отображается справа.
В меню редактируем пункты (удаляем ненужные из шаблона и добавляем те, которые нам нужны). В настройках пункта указываем, что должно открываться при клике на него:
- секция текущей страницы;
- другая страница (страница Турбо-сайта или внешний ресурс).
В настройках можно перетаскивать пункты, чтобы расположить их в нужном порядке в шапке страницы.
Далее переходим к блоку «Контакты». Здесь можно указать четыре типа данных:
- телефон;
- адрес (физический адрес магазина или офиса);
- электронная почта;
- часы работы.
Дополнительно в шапке можно разместить иконки соцсетей. Мы их добавлять не будем, чтобы шапка не выглядела перегруженной.
Добавляем и настраиваем обложку
В обложке можно поставить фоновое изображение, разместить заголовок с подзаголовком и кнопки для перехода к главным разделам страницы.
Создаем новую секцию, выбираем «Обложка» и нужный шаблон:
Загружаем картинку для фона (кстати, фон можно просто залить цветом), и оформляем обложку в таком виде:
Размещаем секцию с описанием преимуществ магазина
В настройках секции можно выбрать:
- нужно ли отображать изображение (опция «Формат контента»);
- количество колонок;
- ширину и формат изображения.
Чтобы преимущества визуально выглядели еще лучше, добавляем к ним подложку со скругленными углами.
Добавляем секцию с товарами
При создании секции можно выбрать сетку компоновки товаров на странице — от одного до четырех в ряд. Нам подходит вариант «В четыре колонки» — так на одном экране сразу будут видны несколько позиций и клиентам будет проще ориентироваться в ассортименте.
Секция без добавленных товаров выглядит так:
Далее секцию нужно будет заполнить (ниже покажем подробнее, как это делается).
Помните, мы говорили о кнопке «Корзина» в шапке? Вот она, автоматически появляется в шапке после того, как на страницу добавили секцию «Товары»:
После добавления секции с товарами появляется еще один блок — внизу страницы отображается предпросмотр формы заказа (она будет показываться клиентам при нажатии на кнопку «Купить»).
Создаем карточки товаров
Кликаем по секции «Товары» и переходим к её настройкам.
Первым делом активируем опцию «Дополнительные настройки». После этого в секции будет больше возможностей, которые позволят более гибко управлять отображением товаров.
Что настраиваем:
- Количество колонок для карточек товара. Здесь важно уточнить, эта опция влияет только на десктопную версию сайта. На мобильных и планшетах будет только одна колонка (с другими секциями, у которых в структуре несколько колонок, произойдет то же самое).
- Формат фото (если отключены дополнительные настройки, вы не увидите эту опцию). Здесь можно задать соотношение сторон для фото товаров (по умолчанию — 1:1).
Если вы загрузите фото товара с другим соотношением сторон, потребуется обрезать изображение и выбрать, какую его часть следует отобразить в карточке.
В настройках секции можно управлять существующими товарами (редактировать, менять местами, копировать или удалять) а также добавлять новые.
Обратите внимание! Лимита на количество товаров нет, поэтому можете добавлять любое количество товаров. Единственный недостаток — каждый товар придется заводить вручную.
Как добавлять товары
Открываем режим редактирования товара (нужно кликнуть на иконку карандаша). Появится всплывающее окно с возможностью добавления необходимых данных.
Вот что здесь можно добавить:
- Изображение. Одна или несколько картинок, которые можно загрузить разными способами: с компьютера, из библиотеки Яндекса или выбрать из ранее загруженных.
Изображение нужно будет подогнать под формат:
Добавьте нужное количество изображений. Посетители сайта смогут кликать на основное фото в карточке товара и просматривать все изображения в виде слайдера.
- Название (длиной до 50 знаков) и описание.
Для текста доступно базовое форматирование — выделение жирным, изменение цвета текста и добавление заливки. В описании текст также можно выделить курсивом или подчеркиванием.
- Цена товара. Можно указать обычную цену или цену со скидкой. Для отображения скидки нужно заполнить оба поля.
Вот так отображаются скидки в карточках товаров:
Для отображения скидок доступны несколько настроек оформления. Можно задать:
- формат отображения скидки (в рублях или %);
- цвет зачеркнутой цены;
- цвет стикера с отображением размера скидки.
В секции с товарами можно настроить фон — добавить фоновое изображение или заливку цветом.
Добавляем секцию с картой и контактами магазина
Если клиенты могут прийти в офлайн-магазин или офис для самовывоза или приобретения товаров — добавляем карту с адресом и контактами.
Для этого нам понадобится секция «Контакты»:
Указываем контактную информацию (телефон, email, адрес и часы работы магазина).
Обратите внимание! На десктопе контакты отображаются в ряд, на мобильных устройствах и планшетах — в столбец.
Дополнительно можно выбрать стиль иконок:
- или совсем убрать иконки.
Чтобы в секции отобразилась карта с проставленной геометкой и схемой проезда, ее предварительно нужно создать в Конструкторе карт Яндекса. А затем добавить в настройках секции ссылку на нее.
Для карты доступна настройка размера (с помощью кнопок XS-XL). Также можно менять компоновку элементов секции — размещать контакты над картой или слева столбиком.
Внизу в секции с контактами можно добавить иконки аккаунтов соцсетей:
Редактируем форму заказа
Пролистываем страницу в самый низ — здесь находится предпросмотр формы заказа.
Ее нужно отредактировать: заполнить обязательные поля и изменить несколько настроек под наш магазин.
Обязательно нужно указать:
- Адрес электронной почты, на которую хотим получать заказы. Если у вас работают менеджеры, указывайте несколько адресов — заказы будут приходить на вашу почту и на почту менеджера.
- Юридическую информацию о компании или физлице.
Задаем поля для ввода
По умолчанию при оформлении заказа необходимо заполнить поля с ФИО, телефоном и email.
Телефон и почта — обязательные поля. Их нельзя убрать из формы или отредактировать.
Для поля «Ваше имя» доступны корректировки:
- можно отредактировать название поля;
- убрать или изменить плейсхолдер;
- сделать поле необязательным для ввода.
Также в форму можно добавить другие поля. Если вы продаете несложные товары, этого не стоит делать — чем сложнее форма, тем меньше конверсия. Но в некоторых случаях дополнительные поля могут быть необходимы как вам, так и клиентам. Поэтому смотрите по ситуации.
Варианты доставки
В блоке «Варианты получения заказа» необходимо задать варианты доставки, которые доступны клиентам.
В форме по умолчанию есть три базовых варианта доставки. Их можно удалить и добавить собственные. Ну или отредактировать существующие.
Способы оплаты
По умолчанию отображаются два способа оплаты: картой при получении или наличными.
Один из них можно удалить (два не получится, так как должен отображаться хотя бы один способ оплаты). Также можно менять название. Добавлять другие способы оплаты нельзя.
Последняя секция — футер
Футер — обязательная секция, которую нельзя перемещать в другое место страницы или удалять. По умолчанию футер содержит информацию о технологии, на основе которой создан сайт.
В настройках секции футера можно добавить больше информации для отображения:
- краткое описание компании;
- название компании и год основания;
- логотип;
- меню (ссылки на основные разделы или страницы);
- контакты;
- иконки социальных сетей.
Еще одна настройка — тема оформления. Есть два варианта: светлая или темная. Выберите подходящий вариант, исходя из общей стилистики страницы.
Финальная проверка и публикация
После того как все настройки завершены и страница готова, проверяем отображение на разных типах устройств. Можно скопировать ссылку на страницу и открыть ее на компьютере и смартфоне. А можно воспользоваться режимом предпросмотра:
С помощью кнопок переключайтесь между режимами отображения и просматривайте, как меняется отображение контента в зависимости от типа устройства.
Если все в порядке, публикуйте страницу.
Теперь вы сможете привлекать трафик на сайт и получать заказы.
Создавайте Турбо-сайты, получайте заказы и тестируйте гипотезы: это бесплатно и просто
Напоследок несколько советов:
- Соблюдайте принцип контрастности — это особенно важно, если вы размещаете текст на фоне картинки или подложки с цветной заливкой. Недостаточно контрастный цвет может сливаться с фоном и плохо считываться.
- Для СТА-кнопок контраст еще более важен. Незаметная кнопка может стать причиной низкой конверсии.
- Загружайте качественные фото товаров и другие изображения, которые добавляете на страницу. Это важно для восприятия сайта, помогает клиентам лучше рассмотреть товары и принять решение о покупке.
- Пользуйтесь всеми доступными опциями редактирования секций для создания хорошего оформления страниц. Например, с помощью секций-разделителей можно отделить соседние блоки и улучшить их восприятие. Для этой же цели используйте внутренние отступы — блоки не будут «слипаться» друг с другом и страница будет визуально приятной.
- Используйте не более 2 цветов для текста. Для выделения важной информации вообще достаточно полужирного начертания. А цветом при необходимости можно выделить важный фрагмент в заголовке обложки.
- Не размещайте слишком много информации и различных блоков на странице. Обилие контента может отвлечь пользователя от конверсионного действия (оформления заказа или звонка).
- Используйте предпросмотр для проверки отображения на разных устройствах. Турбо-сайты хорошо адаптированы к разным устройствам, но все же перед публикацией страницы и запуском трафика лучше убедиться, что все отображается как надо.