Документация «Vega»

Темы дизайна «Vega», «Vega Blog» и «Vega Shop» — универсальное решение для Webasyst. Они подходят для создания сайтов, интернет-магазина, блога и фотогалереи. На этой странице собрана полная документация по настройке и использованию всех возможностей темы.

Начало работы

Если вы ещё не установили Webasyst, ознакомьтесь со статьёй «Как создать сайт на Webasyst: установка и настройка на своём сервере». Для доступа к настройкам темы нужно авторизоваться в бэкенде Webasyst, перейти во фронтенд и открыть боковую панель:

Если у вас подключено несколько доменов в одной установке Webasyst, убедитесь, что вы авторизованы именно через страницу домена, где установлена тема. Например, для сайта my-domain.com зайдите в аккаунт через my-domain.com/webasyst. Иначе кнопка «Настройки» не появится.

Панель настроек

Боковая панель — это инструмент управления темой прямо во фронтенде. Она появляется в виде кнопки с шестерёнкой на каждой странице сайта для авторизованных пользователей Webasyst. С её помощью можно менять настройки оформления, просматривать структуру сайта и получать готовый Smarty-код для блоков и элементов — не переходя в бэкенд.

• Настройки — основная вкладка: шрифты, цвета, шапка, подвал, параметры блоков и всё остальное оформление темы.
• Структура сайта — дерево страниц с отметками о скрытых страницах и наличии корневой страницы. Удобно для диагностики навигации.
• Генератор — формирует готовый Smarty-код для вставки блоков и элементов в режиме HTML-редактирования страниц.
• Плагины — список плагинов Webasyst, поддерживаемых темой.
• Другие продукты — дополнительные продукты разработчика.

Видимость панели настраивается в Основные настройки → Оформление → Панель с настройками темы :

• Скрыта для всех — панель не отображается ни для кого, сайт работает без лишней нагрузки.
• Видна только администраторам — полная панель настроек видна только пользователям с правами администратора Webasyst. Это режим по умолчанию.
• Режим для демо-версии — администраторы видят полную панель настроек, все остальные авторизованные пользователи видят упрощённую демо-панель с выбором цветовой схемы и возможностью посмотреть, какие блоки есть на странице.

Если панель была скрыта, включить её снова можно в бэкенде Webasyst в настройках темы.

Импорт настроек между темами

Если у вас установлено несколько тем из семейства «Vega», можно ускорить их настройку, включив частичный импорт параметров между ними в разделе «Основные настройки» → «Оформление».

Информация для контактов, а также настройки шапки и подвала будут взяты из выбранной темы — их не нужно вводить заново. Вкладки, затронутые импортом, будут отмечены бейджиком Импортируется . Импорт также работает с клонами темы: если вы создали несколько копий «Vega» для разных доменов или разделов сайта, достаточно настроить одну «главную» тему — клоны будут автоматически подтягивать из неё шапку, подвал и контактные данные.

Страницы сайта

Все страницы сайта создаются в приложении Сайт → Карта сайта . Это центральное место для управления структурой: здесь можно добавлять, переименовывать, скрывать и удалять страницы. По умолчанию главная страница сайта берётся из приложения Сайт. При необходимости её можно переключить на другое приложение — например, на Магазин, если вы хотите, чтобы по корневому URL сразу открывался каталог.

Чтобы добавить подстраницу, наведите на родительскую страницу, нажмите на троеточие справа и выберите «Добавить подстраницу».

У каждой страницы есть настройки: название, адрес и META-данные для поисковых систем — Title, Keywords и Description. Откройте страницу в «Карте сайта» и нажмите «Настройки страницы».

Главная страница

Настраиваемые блоки доступны только на главной странице. Остальные страницы сайта — это обычный текст с сайдбаром, без блочной структуры. Если нужно сделать ещё одну страницу с блоками, есть два способа.

Способ 1 — вставить код блоков вручную. В Генераторе получите Smarty-код нужных блоков и вставьте его в HTML-редактор страницы. Подробнее — в разделе Добавление блоков.

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

1. Создайте клон темы «Vega» в настройках Webasyst.
2. В приложении Сайт → Карта сайта добавьте новую страницу кнопкой «Добавить» вверху раздела.
3. В настройках этой страницы назначьте ей созданный клон темы.
4. В настройках клона включите импорт из оригинальной темы — шапка, подвал и контактная информация подтянутся автоматически, вводить их заново не нужно.

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

Шапка сайта

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

Навигация в шапке может формироваться тремя способами:

• Из страниц сайта — автоматически, на основе «Карты сайта». Страницы с флагом «Скрытая» в меню не попадают.
• Встроенный генератор навигации — позволяет создать произвольное меню с любыми ссылками и порядком. Настраивается прямо в боковой панели. Подходит, если навигация в шапке и подвале должна отличаться.
• Приложение «Управление меню» — отдельное приложение Webasyst. Позволяет создать одну навигацию и подключить её одновременно в шапку и подвал — не нужно заполнять меню дважды. Удобно, если структура меню в шапке и подвале должна совпадать.

Тема поддерживает максимум 3 уровня вложенности: основные пункты меню, выпадающее подменю первого уровня и вложенное подменю второго уровня. Четвёртый уровень не отображается.

В шапке с каталогом Shop-Script можно добавить изображения категорий двумя способами:

• Через плагин «Изображения для категории» — загрузите файл в поле «Иконка 50×50» в настройках категории на вкладке «Товары» → «Категории».
• Через «Дополнительные параметры» категории — откройте категорию, нажмите карандаш и добавьте параметр вида image=img/placeholders/60x60.png .

Ссылки-якоря

Тема поддерживает плавный переход к конкретному блоку на странице. Формат ссылки — #ID_БЛОКА , например #banner переведёт к блоку «Баннер». ID блока указан в начале вкладки с его настройками в боковой панели.

Для перехода с другой страницы используйте полный URL: https://ваш-домен.ru/#banner .

Форма обратной связи

Форма обратной связи позволяет посетителям отправить контактные данные на вашу почту. Доступные поля: имя (обязательное), email, телефон, согласие на обработку данных и капча.

Для работы формы нужно настроить два разных адреса:

• Получатель — email, на который приходят заявки. Указывается в настройках темы в боковой панели.
• Отправитель — ящик, от имени которого Webasyst рассылает письма. Настраивается в бэкенде: Настройки → Электронная почта .

Чтобы письма не попадали в спам используйте почту на своём домене — заведите ящик вида info@ваш-домен.ru и укажите его как отправителя. Письма с ящиков на gmail или mail.ru чаще попадают в спам, потому что домен отправителя не совпадает с доменом сайта.

Если нужна своя форма — включите настройку «Свой код формы», создайте блок site.feedback_form в приложении Сайт → Блоки и вставьте туда собственный HTML.

Форма подписки на рассылку

Форма подписки работает через приложение «Рассылки». Чтобы подключить её:

1. Установите приложение «Рассылки» через Инсталлер.
2. В приложении «Рассылки» перейдите в раздел Подписчики и формы → Списки и создайте новый список подписчиков. Откройте его и скопируйте ID из адресной строки браузера.

3. В том же разделе перейдите во вкладку Формы подписки , создайте новую форму и скопируйте её ID.
4. Укажите оба ID в настройках темы.

Кнопка «Подписаться»

Если на сайте появилась всплывающая кнопка «Подписаться» в правом нижнем углу — это не часть темы. Её добавляет приложение CRM, установленное в Webasyst. Чтобы убрать кнопку, есть два варианта:

• Удалить лид-форму — откройте приложение CRM → Настройки → Лид-формы и удалите форму подписки.
• Удалить приложение CRM — если CRM не используется, его можно полностью удалить через Инсталлер. Кнопка исчезнет вместе с ним.

Капча

По умолчанию в формах используется встроенная капча Webasyst. Её можно заменить на Google reCAPTCHA или отключить совсем.

Для подключения Google reCAPTCHA:

1. Зарегистрируйтесь на сайте Google reCAPTCHA и создайте ключи для reCAPTCHA v2 или reCAPTCHA v3 .
2. В бэкенде Webasyst перейдите в Настройки → Капча и добавьте ключи.

Для v3 доступен невидимый режим — пользователь не увидит виджет, проверка происходит автоматически.

Изображения

Используйте современные форматы: WebP для фотографий и графики (подробнее о формате WebP), WebM для видео. Это уменьшает вес файлов без потери видимого качества и ускоряет загрузку.

Рекомендуемый размер файла — не более 200–300 КБ. Для оптимизации удобно использовать онлайн-сервисы, например imagecompressor.com.

Для загрузки превью-изображений статей в блоге требуется плагин «Главная картинка». Оригинальное изображение должно быть 1050 × 450 пикселей для классического шаблона и 1400 × 500 пикселей для альтернативного. В настройках плагина установите размер картинки 450 × 350 и размер иконки 200 × 200 .

Главная страница блога

Основной блок главной страницы блога — «Поток статей». В нём отображаются карточки всех опубликованных статей, работает пагинация и бесконечная прокрутка. В большинстве случаев этого блока вполне достаточно.

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

По умолчанию статьи подгружаются по 10 штук за раз. Чтобы изменить это количество, установите плагин «Скрытые настройки» для приложения «Блог»: перейдите в «Блог» → «Плагины» → «Скрытые настройки» и измените параметр posts_per_page .

Создание статьи

В бэкенде приложения «Блог» нажмите «Новая запись», укажите заголовок и заполните статью через визуальный редактор. В правой части экрана заполните метапараметры: Title , Meta Keywords и Meta Description — они помогают поисковым системам правильно индексировать статью.

Тема предусматривает два шаблона страницы статьи: классический и альтернативный. Шаблон по умолчанию задаётся в настройках темы и применяется ко всем статьям. Для отдельной статьи шаблон можно переопределить: откройте статью в бэкенде, нажмите «Редактировать» в блоке «Мета» и в поле «Дополнительные параметры» добавьте template=classic или template=alter .

Большинство блоков на главной странице требуют указания ID статьи. Чтобы его узнать, перейдите на страницу нужной статьи во фронтенде, откройте боковую панель и переключитесь на вкладку «Структура сайта» — ID статьи и блога отображаются в правой части.

Для организации статей по рубрикам потребуется дополнительный плагин. Тема поддерживает несколько решений, однако мы рекомендуем плагин «Категории для блога» — он наиболее хорошо интегрирован в тему дизайна Vega Blog.

Дополнительные параметры товара

Внизу вкладки «Цены и характеристики» находится поле «Дополнительные параметры». Здесь можно задать переменные для конкретного товара в формате ПАРАМЕТР=ЗНАЧЕНИЕ . Поддерживаемые параметры:

• short_name — короткое название товара, отображаемое в карточке вместо полного. Пример: short_name=Фитосвечи с лопухом
• features — список характеристик товара, отображаемых в карточке под названием. Пункты разделяются знаком * . Пример: features=Женское здоровье * Снижение воспаления * Лимфогонное
• ym_link — ссылка на товар в Яндекс Маркете
• ozon_link — ссылка на товар в Ozon
• wb_link — ссылка на товар в Wildberries
• engage_text — текст элемента «Призыв к действию»
• engage_image — изображение элемента «Призыв к действию» (путь относительно папки темы)
• advantage_name — название элемента «Преимущество»
• advantage_text — описание элемента «Преимущество»

Категории

Наведите на категорию в бэкенде Shop-Script и нажмите иконку карандаша. В открывшемся меню настроек можно включить сортировку и фильтрацию товаров, а также указать характеристики для фильтра.

В список категорий можно добавить изображения или иконки двумя способами:

• Через плагин «Изображения для категории» — загрузите файл в поле «Иконка 50×50» в настройках категории.
• Через «Дополнительные параметры» категории: image=img/placeholders/60x60.png — изображение относительно папки темы, или icon=ID_ИКОНКИ — иконка из встроенного набора.

Личный кабинет

Чтобы включить личный кабинет для покупателей, перейдите в приложение Сайт → Карта сайта → Личный кабинет → «Настройки входа и регистрации». В поле «Раздел сайта для авторизации и регистрации» выберите Магазин или Блог в зависимости от ваших задач.

Фотогалерея

При покупке темы «Vega» для Сайта вам доступна дочерняя тема для приложения «Фото». Установите приложение через Инсталлер, затем откройте «Фото» и примените там тему «Vega». Создайте новый альбом и загрузите фотографии.

По умолчанию на каждой странице галереи отображается 50 изображений. Чтобы изменить это значение, откройте файл wa-apps/photos/lib/config/config.php и замените параметр 'photos_per_page' на нужное число.