Создавайте и меняйте дизайн интернет-магазина в реальном времени
Представьте: вы открываете свой сайт как покупатель и правите текст прямо на странице — без поиска нужного раздела в админке. Заметили опечатку в заголовке, устаревшую цену или неудачную формулировку — навели курсор, нажали и исправили. Именно для этого создан визуальный редактор BooStore.
Визуальный редактор BooStore позволяет создавать и менять дизайн интернет-магазина прямо на живой странице. Вы видите сайт так, как его видит покупатель, и редактируете именно то, что нужно: заголовки, тексты, HTML-блоки, меню, категории, производителей, коллекции и кнопки. Не нужно знать код, открывать файлы шаблона или искать нужный блок в длинных списках админпанели.
Это быстрый визуальный конструктор с живым превью, кастомизацией шаблонов и высокой скоростью загрузки. А для тонких настроек в любой момент доступен полноценный редактор каждого раздела.
📄 Содержание статьи
🖱️ Что такое визуальный редактор BooStore
Визуальный редактор — это режим, в котором сайт открывается как обычная страница, но элементы, доступные для правки, подсвечиваются. Нажмите кнопку «Визуальный редактор» — и вы сможете менять содержимое и оформление без перехода в админку. Изменения отправляются на сервер по кнопке «Сохранить» и сохраняются в тех же данных, что и при работе через полный редактор.
- Живое превью: результат виден сразу на странице.
- Без кода: текст, HTML и готовые блоки редактируются визуально.
- Безопасно: доступ проверяется по правам пользователя и владельца сайта.
- Понятные ошибки: при превышении лимита или отсутствии прав редактор сообщает об этом.
🚶 Как это выглядит на практике
Откройте любую страницу сайта и наведите курсор на заголовок или абзац — появится иконка редактирования. Нажмите её, исправьте текст прямо на месте и сохраните. Так же можно поправить текст кнопки категории, заголовок статьи или содержимое готового блока. Не нужно искать страницу в админпанели и открывать длинные формы.
- Откройте страницу или статью на сайте.
- Наведите курсор на нужный текст или блок.
- Нажмите иконку редактирования и внесите правку.
- Нажмите «Сохранить» — изменения сразу появятся на сайте.
🧩 Что можно редактировать
- Страницы: заголовок и HTML-содержимое.
- Статьи: заголовок и текст.
- Блоки и меню: заголовок, HTML-содержимое и готовые блоки.
- Категории магазина: заголовок, текст и текст кнопок.
- Производители и коллекции: заголовок, текст и текст кнопок.
- Категории каталога статей: заголовок, текст и текст кнопок.
Кнопки категорий — это ссылки, поэтому в них меняется только текст: тег ссылки создаётся автоматически и не редактируется. Для кнопок открывается удобное текстовое поле, где можно использовать HTML, а теги ссылок удаляются автоматически.
🧱 Готовые визуальные блоки
Вкладка «Визуальные блоки» — это библиотека готовых секций: преимущества, тарифы, отзывы, галереи, контакты, призывы к действию и другие. Блок перетаскивается на страницу целиком, после чего его текст, кнопки и изображения редактируются как обычные элементы. Не нужно верстать секцию с нуля — выберите подходящий готовый блок и адаптируйте под свой магазин. В панели также можно переключать цветовую схему и язык блока.
Примеры и каталог готовых визуальных блоков: templates_visual_blocks.html.
🧑💻 HTML и создание элементов
Вкладка «HTML» содержит базовые элементы: DIV, SECTION, H1–H4, P, списки, таблицу, изображение и другие. Перетащите элемент на страницу или вставьте свой HTML через кнопку </> у блока. В HTML можно использовать классы, стили, атрибуты и шорткоды BooStore — корзину, поиск, меню и готовые виджеты; служебные шорткоды двигаются только целиком.
Для сложной вёрстки, SEO-мета и дополнительных полей откройте полный редактор раздела. Визуальный и полный редакторы работают с одними данными, поэтому изменения не теряются.
🚀 Как начать
- Откройте нужную страницу сайта под администратором или владельцем.
- Нажмите кнопку «Визуальный редактор» в панели.
- Наведите курсор на заголовок, текст, блок или кнопку — появится иконка редактирования.
- Внесите изменения и нажмите «Сохранить».
Если вы меняете заголовок или текст, сохраняется именно это поле. Если перетаскиваете готовый блок — он двигается целиком. Короткие служебные вставки и шорткоды также двигаются только целиком и не разрываются.
⚡ Быстрый доступ через всплывающие окна
В админпанели есть режим «Добавить разметку быстрого доступа». Включите его — на элементах сайта появятся кнопки быстрого редактирования. Нажмите на нужный элемент, и откроется всплывающее окно с полями для правки: текст, ссылка, изображение или другие параметры. Это удобно для точечных правок без перехода в полный редактор.
Когда быстрый доступ больше не нужен, нажмите «Скрыть разметку быстрого доступа». Режим можно включать и выключать в любой момент.
🛠️ Когда нужен полный редактор
Каждый раздел сайта можно редактировать отдельно из панели управления: страницы, статьи, блоки и меню, категории магазина, производителей, коллекции и категории каталога статей. В полном редакторе доступны SEO-мета, права доступа, языки, показ по страницам, позиции меню и дополнительные поля.
Визуальный редактор — быстрый инструмент для контента и дизайна. Когда нужны расширенные настройки, откройте полный редактор нужного раздела в панели управления. Визуальный и полный редакторы работают с одними и теми же данными, поэтому изменения не теряются.
Подробнее: полная кастомизация дизайна и полный функционал BooStore.
⚡ Скорость и мобильность
Редактор не добавляет тяжёлых зависимостей на сайт и не влияет на скорость загрузки для покупателей. Панель редактора адаптирована под небольшие экраны: окна, текстовые поля и кнопки остаются удобными на планшете и смартфоне. Для комфортной работы с HTML на мобильном поле ввода автоматически увеличивается под объём текста.
❓ Часто задаваемые вопросы
Нужно ли знать код, чтобы менять дизайн?
Нет. Основные изменения делаются визуально: текст, заголовки, готовые блоки, кнопки. HTML доступен при необходимости, но не обязателен.
Можно ли менять дизайн прямо на сайте?
Да. Редактор открывается на живой странице, и изменения видны сразу. После сохранения страница перезагружается с уже обновлёнными данными.
Что будет при превышении лимита блоков?
Редактор покажет сообщение о превышении лимита и не создаст новый блок. Чтобы увеличить лимит, оплатите хостинг — после этого можно продолжать работу.
Можно ли открыть полный редактор раздела?
Да. Для страниц, статей, блоков/меню, категорий, производителей и коллекций доступен полный редактор с расширенными настройками SEO, доступа, языка, позиций и дополнительных полей.
Редактируются ли кнопки категорий?
Да, но только текст кнопки. Сама ссылка создаётся автоматически и не редактируется, чтобы не нарушить навигацию. HTML в тексте кнопки разрешён, теги ссылок удаляются.