YOOtheme Woolberry - Шаблон Joomla

Руководство по настройке YOOtheme Woolberry для Joomla-сайта о моде и товарах

YOOtheme Woolberry полезно рассматривать не как обычный шаблон, который достаточно включить и забыть, а как готовую основу для визуального каталога, модного бренда, контентного магазина или промо-сайта с большим количеством фотографий, карточек, подборок и связанных материалов. В этом руководстве разберём, как подойти к установке, где искать основные настройки YOOtheme Pro, как не потерять структуру демо, как связать меню, модули, шаблоны страниц и пользовательские поля Joomla.

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

Ниже будет не рекламный пересказ карточки продукта, а практическая инструкция: что проверить перед установкой, как выбрать между demo package и установкой на существующий сайт, что настроить в Customizer, как работать с Template Styles, где пригодятся позиции модулей, как собрать реальный сценарий витрины и как диагностировать типичные ошибки.

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

Что именно даёт Woolberry и где он уместен

Официальная страница YOOtheme описывает Woolberry как шаблон для сайтов моды, красоты и магазинного направления, построенный на YOOtheme Pro. Для Joomla-версии важно уточнение: демо показывает товарную логику через структуру контента, пользовательские поля, категории, теги, шаблоны страниц, изображения, видео и связанные материалы. Это не означает, что в Joomla автоматически появляется полноценная торговая система с оплатой, складом и заказами. Если вам нужны именно корзина, оформление заказа, личный кабинет покупателя и управление заказами, потребуется отдельное коммерческое расширение или другая интеграция.

Woolberry хорошо подходит для задач, где главный результат - убедительно показать коллекции, товары, образы, редакционные материалы и брендовые страницы. В демо видны главная страница с крупным hero-блоком, категории Women, Men и Kids, карточки товаров, подборки, страницы публикаций, FAQ, поиск, страница магазинов, карьера и ошибки. Это даёт не один макет, а набор связанных сценариев: посетитель может идти от коллекции к товару, от поста к связанным товарам, от поиска к рекомендациям.

Для Joomla-сайта Woolberry особенно интересен, если вы хотите сохранить управляемость через CMS. Контент остаётся в статьях, категориях, тегах, пользовательских полях и модулях, а YOOtheme Pro отвечает за визуальные шаблоны и связку динамических данных с layout-элементами. Такой подход удобен, когда дизайн должен быть богатым, но редактору не хочется вручную копировать однотипные блоки на десятках страниц.

Кому шаблон подходит:

• Модному бренду, шоуруму, дизайнеру одежды или каталогу аксессуаров, где визуальные коллекции важнее сложной корзины.
• Команде, которая уже использует YOOtheme Pro и хочет быстро стартовать с готовой структурой layouts, styles и demo content.
• Редакционному проекту о стиле, где статьи должны связываться с товарами, образами, подборками и категориями.
• Агентству, которое хочет показать клиенту готовый прототип и затем аккуратно заменить демо-данные на реальные материалы.

Кому Woolberry может не подойти без дополнительной работы:

• Магазину, которому нужна полноценная обработка заказов в Joomla сразу после включения шаблона.
• Проекту с минимальным набором изображений: Woolberry построен вокруг сильной визуальной подачи, и бедный медиаконтент быстро ломает впечатление.
• Сайту, где контент-менеджеры не готовы поддерживать пользовательские поля, категории, теги и связи между материалами.
• Команде, которая хочет править файлы шаблона напрямую без child theme или безопасных механизмов YOOtheme Pro.

Перед установкой решите, что вы строите: визуальный каталог на Joomla, брендовый сайт о моде или полноценный интернет-магазин с заказами. Woolberry хорошо закрывает первые два сценария и даёт основу для третьего, но торговую часть нужно проверять отдельно.

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

Сильная сторона Woolberry - не один эффектный hero-блок, а согласованная система страниц. В официальном описании указаны готовые layouts, несколько style variations и крупная библиотека изображений для темы. На практике это означает, что шаблон нужно оценивать как набор повторяемых решений: шапка, крупные изображения, gap-free grids, карточки товаров, hover video, lightbox, sliders, search result, посты с галереями, страницы коллекций и вспомогательные страницы вроде FAQ или Stores.

Если вы переносите Woolberry на существующий Joomla-сайт, не начинайте с мелкой правки цвета кнопки. Сначала посмотрите, какие типы страниц вам действительно нужны. Например, бренду одежды обычно важны: главная, страница коллекции, категория товаров, карточка товара, статья о коллекции, FAQ, страница магазинов и поиск. Если оставить демо-структуру полностью, но заполнить только две страницы, сайт будет выглядеть незавершённым. Если удалить слишком много, можно потерять связку, ради которой Woolberry и выбран.

Какие блоки демо стоит сохранить как основу

Главная страница в референсе задаёт ритм: верхняя шапка с логотипом и меню, большой hero с сезонной коллекцией, две крупные плитки Ready-to-Wear, блок последних поступлений, затем новые визуальные секции. Такой порядок хорошо работает для бренда с регулярными коллекциями: сначала настроение, затем входы в разделы, затем конкретные товары.

Для страницы коллекции полезны большие изображения и видео-подложки. Они объясняют не просто «что продаётся», а какой стиль, сезон, цвет и настроение стоит за подборкой. Для статьи о коллекции важнее связка текста и галереи, а не стандартная карточка записи Joomla. Для карточки товара в Woolberry характерна визуальная подача с несколькими изображениями, видео и правой колонкой с информацией.

Какие блоки лучше удалить или упростить

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

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

Что проверить перед установкой на Joomla

YOOtheme Pro можно установить на существующий Joomla-сайт как шаблон, а можно стартовать с demo package. Эти варианты решают разные задачи. Установка шаблона в существующий сайт хороша, если у вас уже есть структура, пользователи, меню, материалы и рабочие расширения. Demo package удобнее, если вы хотите увидеть, как Woolberry собран изнутри, и использовать его как стартовый комплект с демо-контентом.

Официальная документация YOOtheme отдельно предупреждает, что demo package является полной установкой Joomla, а не обычным ZIP-шаблоном для существующего сайта. Это критично: если попытаться установить demo package как расширение, вы потратите время и можете запутаться в файлах. Для существующего сайта нужен пакет шаблона YOOtheme Pro, а layout и style можно загружать внутри конструктора при наличии доступа к библиотеке.

Технический минимум перед первым включением

Проверьте версию Joomla, версию PHP, расширение GD, права на запись в директории шаблона и папку изображений. У YOOtheme Pro есть системные требования, а для генерации style CSS и загрузки медиатеки важны файловые права. Если сервер не даёт записывать файлы в нужные каталоги, часть настроек может сохраняться некорректно или не применяться на публичной части сайта.

Сделайте резервную копию до установки и ещё одну копию после успешного включения. Это не формальность. Визуальные шаблоны часто затрагивают меню, модули, вывод статей, поля и структуру главной страницы. Когда что-то «поплыло», быстрее откатиться к контрольной точке, чем вспоминать, какие настройки менялись в Layout, Style, Templates и Modules.

Контентный минимум для похожего результата

Woolberry требует хороших изображений. Если карточки товаров заполнены маленькими сжатыми фото, hero-блоки и сетки будут выглядеть хуже демо, даже если шаблон установлен правильно. Подготовьте горизонтальные и вертикальные изображения, единый стиль фотосъёмки, короткие названия категорий, описания, размеры, цвета и связки между товарами и статьями.

Для Joomla-версии особенно важны пользовательские поля. В официальном описании демо перечислены поля для product categories, product type и posts: изображения, видео, цвет текста на изображении, цена, цвет, размер, fit, описание, уход, features, cross-sell products, excerpt, focal point, галереи и related products. Не обязательно переносить всё один в один, но нужно понимать, какие поля питают какие визуальные блоки.

Установка и первичная проверка без потери демо-логики

Первый запуск лучше разбить на два этапа: техническая установка и контроль визуальной структуры. Технически Joomla-шаблон устанавливается через стандартный установщик расширений, но YOOtheme Pro добавляет свой customizer, библиотеку layouts, style customizer и собственные панели для страниц, шаблонов, меню и модулей. Поэтому после установки важно не только назначить шаблон по умолчанию, но и открыть YOOtheme Pro из админ-панели Joomla.

Если вы работаете с существующим сайтом, не переключайте все страницы на новый стиль сразу. Создайте копию template style, назначьте её на тестовый пункт меню и проверьте страницу в отдельном контуре. Такой подход особенно полезен для сайтов с несколькими разделами, потому что Joomla позволяет назначать template styles на конкретные menu items. Если новый стиль ломает только одну страницу, вы исправляете её локально, а не весь сайт.

Базовая последовательность

1. Сделайте резервную копию файлов и базы данных.
2. Установите пакет YOOtheme Pro template для Joomla через стандартный установщик расширений.
3. Откройте System или раздел шаблонов Joomla и убедитесь, что шаблон появился в списке template styles.
4. Создайте копию стиля, если не хотите менять весь сайт сразу.
5. Откройте YOOtheme Pro через пункт YOOtheme в админ-панели Joomla.
6. Проверьте, что слева отображаются панели Layout, Style, Pages, Templates, Menu, Modules и Settings, а справа работает live preview.
7. Сохраните начальное состояние без крупных правок, чтобы убедиться, что сервер позволяет записывать настройки.

Как понять, что установка прошла нормально

Сначала проверьте админ-панель: customizer открывается, preview не пустой, при изменении простой настройки появляются кнопки Save и Cancel. Затем проверьте публичную часть: страница загружается без белого экрана, шапка не дублируется, меню выводится там, где ожидается, а модули не исчезли из важных областей. После этого включите просмотр на разных устройствах через device preview buttons в customizer.

Если вы использовали demo package, проверьте не только главную страницу. Откройте категорию, карточку товара, статью, FAQ и поиск. Если структура выглядит правильно, значит демо-данные, поля, шаблоны и связи работают вместе. Если же главная похожа на демо, а внутренние страницы пустые, проблема обычно не в дизайне, а в контентных источниках, назначениях шаблонов или недостающих полях.

Настройка после установки: панели, стиль, шапка и проверка адаптивности

После установки не стоит сразу менять десятки параметров. YOOtheme Pro customizer устроен так, что изменения видны в live preview, но несколько независимых правок легко смешиваются. Лучше идти от глобального к частному: site & logo, header, style, pages, templates, modules, settings. Такой порядок помогает понять, какая настройка за что отвечает.

Безопасная настройка Woolberry начинается с копии template style. В Joomla откройте Extensions -> Templates -> Styles, продублируйте стиль YOOtheme и назначьте его на тестовый пункт меню. Затем уже внутри YOOtheme Pro меняйте внешний вид. Если результат не подходит, можно вернуть старый style assignment или удалить копию, не трогая рабочий сайт.

Первые настройки, которые стоит проверить

Style variations и реальный контраст

Woolberry поставляется с несколькими style variations. Официальный обзор описывает минимальный стиль, резкие края, тонкие формы, outline-кнопки, modern sans-serif и акцентный цвет, а также дополнительные схемы вроде blue, orange, green, red и darkblue. Не выбирайте variation только по красоте миниатюры. Откройте главную, карточку товара, страницу коллекции и FAQ, затем проверьте контраст поверх фотографий.

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

Шапка, меню и мобильный вид

В референсе Woolberry шапка очень чистая: логотип, меню разделов, поиск, иконки. На рабочем сайте она быстро перегружается, если добавить все категории, служебные страницы и промо-ссылки в верхний уровень. Для Woolberry лучше оставить верхний уровень коротким, а подробную структуру вынести в dropdown, mega menu или footer.

Проверьте мобильный header отдельно. У YOOtheme Pro есть настройки mobile header, mobile navbar и dialog/mobile dialog. На небольшом экране важнее не повторить desktop-меню, а дать быстрый путь к основным разделам: новые поступления, женщины, мужчины, дети, подарки, поиск и контакты. Если сайт мультиязычный, языковой переключатель лучше проверять вместе с mobile dialog, потому что он часто ломает высоту шапки.

Настройки, которые лучше менять осторожно

Не меняйте одновременно глобальные размеры шрифтов, отступы секций, ширину контейнера, поведение navbar и стили карточек. В YOOtheme Pro много параметров завязано на UIkit components и Less variables, поэтому одна глобальная правка может улучшить hero, но ухудшить таблицу, форму или карточку товара. Работайте короткими итерациями: изменили параметр, сохранили, проверили три типа страниц, записали результат.

Если нужно внести CSS, используйте панель Settings -> CSS или child theme, а не правку файлов основного шаблона. Тогда обновления YOOtheme Pro не перезапишут вашу доработку.

Структура каталога: поля, категории, теги и связанные товары

Индивидуальная особенность Woolberry - демо построено вокруг content structure. Для Joomla это особенно важно: products и posts в демо завязаны на категории, теги, custom fields и related articles. Если вы просто создадите обычные статьи с картинкой и текстом, многие эффектные блоки не получат данных.

В продуктовой части демо используются поля для изображений, цены, sale price, видео, цвета, размеров, fit, size & fit, short description, composition & care, icons, features и cross-sell products. Категории товаров имеют intro image, hover video и цвет текста. Посты используют excerpt, focal point, галереи и related products. Это не обязательная схема для каждого проекта, но она показывает, как YOOtheme Woolberry превращает обычную CMS-структуру в визуальный каталог.

Как спланировать поля без хаоса

Начните с сущностей. Для небольшого каталога достаточно трёх типов: категория, товар и статья. Категория отвечает за вход в раздел, товар - за подробную карточку, статья - за историю коллекции или редакционный материал. Затем решите, какие поля действительно нужны. Например, для одежды нужны цвет, размер, fit, состав, уход, изображения и связанные товары. Для аксессуаров могут быть важнее материал, размеры, цвет, коллекция и рекомендации.

Не создавайте поля «на всякий случай». Каждое поле должно выводиться где-то в layout или помогать фильтровать, группировать и связывать материалы. Если поле не выводится и не участвует в логике, редакторы перестанут его заполнять, а шаблон начнёт получать пустые данные.

Динамический контент в YOOtheme Pro

YOOtheme Pro умеет подставлять данные Joomla в элементы builder. В настройках элемента выбирается content source, а затем поля мапятся на title, image, text, link или другие параметры. Для множественных источников один элемент может размножаться по данным. Это удобно для списков товаров, связанных материалов, категорий и подборок.

Если источник или поле удалены, переименованы или недоступны на текущей странице, dynamic content становится invalid. В документации YOOtheme такие случаи подсвечиваются. Для Woolberry это важная диагностика: пустая карточка часто означает не «сломался шаблон», а «layout ждёт поле, которого нет в этой категории или статье».

Связанные товары и редакционные материалы

Официальное описание Woolberry показывает идею cross-sell products для single Product page и related products для постов. В Joomla-версии такая логика строится через связки статей и пользовательские поля, включая Articles Field от Regular Labs в демо package. Практический смысл в том, что статья о сезонной коллекции может вести к товарам, а товарная карточка - к похожим позициям.

Для редактора это не автоматическая магия. Нужно договориться, кто отвечает за связи: контент-менеджер, мерчандайзер или администратор. Если связи не поддерживать, блоки «похожие товары» и «Shop the Looks» будут пустыми или случайными. Если поддерживать аккуратно, Woolberry становится не просто красивым шаблоном, а системой навигации между вдохновением, каталогом и конкретными карточками.

Template Styles, layouts и назначение на пункты меню

В Joomla template style - это не декоративная опция, а способ управлять тем, какой набор настроек шаблона применяется к конкретным menu items. YOOtheme Pro документация рекомендует дублировать default style и назначать копии на нужные страницы. Для Woolberry это особенно полезно, потому что разные разделы могут требовать разного поведения шапки, цветовой схемы или структуры верхних блоков.

Например, главная может использовать прозрачную шапку поверх hero-фотографии, а FAQ или Size Guide - обычную светлую шапку. Страница коллекции может использовать более выразительные изображения, а служебные страницы - спокойную сетку и меньше анимации. Вместо ручных CSS-исключений лучше создать отдельный template style и назначить его на нужный пункт меню.

Как не запутаться в назначениях

Дайте копиям понятные имена: Woolberry - Home, Woolberry - Catalog, Woolberry - Editorial, Woolberry - Service Pages. Затем в Joomla Template Manager откройте style и проверьте Menu Assignment. Альтернативно можно открыть конкретный menu item и выбрать template style в его параметрах. Оба подхода допустимы, но важно выбрать один рабочий порядок, чтобы не искать настройки в двух местах.

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

Layouts из библиотеки

YOOtheme Pro layout library позволяет загружать готовые layouts, вставлять их сверху или снизу существующего layout либо заменять текущий layout. Для Woolberry это удобно, если вы хотите взять готовую home-секцию, блок коллекции или карточку страницы и адаптировать её. Но загрузка layout должна соответствовать структуре контента. Если layout ожидает товары с изображениями, видео и полями, а в вашей Joomla есть только обычные статьи, визуальный результат будет неполным.

Не заменяйте рабочую страницу новым layout без копии. Сначала сохраните текущий layout в library или работайте на тестовой странице. Затем загрузите Woolberry layout и проверьте все dynamic mappings. Если часть источников красная или пустая, решите, что проще: создать нужные поля, изменить mapping или выбрать менее сложный layout.

Загрузка layout и проверка результата

1. Создайте тестовую страницу или тестовый пункт меню.
2. Откройте её в Pages или через preview в YOOtheme Pro.
3. Откройте Library в page builder и выберите layout, который соответствует типу страницы.
4. Выберите режим загрузки: заменить layout, вставить сверху или вставить снизу.
5. Проверьте dynamic content mappings, изображения и ссылки.
6. Сохраните и откройте страницу как обычный посетитель.

Мини-итог: template styles управляют тем, где применяется внешний набор настроек, а layouts управляют внутренней структурой страницы. Если смешать эти уровни, сложнее понять, почему одна страница выглядит правильно, а другая нет.

Меню, модули и позиции: как собрать навигацию Woolberry

Для Joomla-шаблона нельзя игнорировать модули. YOOtheme Pro интегрирует Joomla Module Manager в свой customizer и показывает позиции модулей, опубликованные модули и их связь с preview. В Woolberry это важно для шапки, мобильного меню, верхних и нижних областей, sidebar, footer и builder-позиций.

Официальная документация перечисляет позиции вроде toolbar-left, toolbar-right, logo, navbar, header, dialog, мобильные аналоги, sidebar, top, bottom и builder-1 до builder-6. Пустые позиции автоматически схлопываются, поэтому отсутствие модуля не должно оставлять пустую дыру в layout. Но неправильное назначение модуля на menu items может привести к другому эффекту: нужный блок просто не появится на странице.

Основное меню

В референсе Woolberry верхнее меню короткое: New In, Women, Men, Kids, Gifts, About. Такой порядок хорошо отражает каталог, но для реального сайта его нужно адаптировать. Не добавляйте в шапку все страницы. FAQ, условия, контакты, доставка и возврат лучше вынести в footer или secondary navigation.

Если вы используете mega menu, сначала соберите простую структуру Joomla menu items, затем уже улучшайте dropdown через builder. Сложное mega menu без устойчивой структуры категорий быстро превращается в визуальный блок, который тяжело поддерживать.

Позиции модулей для полезных блоков

Позиция top подходит для промо-сообщения или сезонного баннера над системным выводом, bottom - для подписки, преимуществ доставки или дополнительных блоков после контента, sidebar - для служебных страниц и блога. Позиции builder-1 до builder-6 полезны, когда вы хотите вставить модуль внутрь builder layout через Position element.

Для Woolberry хороший практический набор может выглядеть так: меню каталога в navbar, поиск в шапке, newsletter в bottom/footer, блок условий доставки в footer, языковой переключатель в toolbar или dialog, дополнительные ссылки в footer. Сначала проверьте desktop, затем mobile. Модуль, идеально работающий в широкой шапке, может перегрузить mobile dialog.

Menu assignment и видимость

В Joomla модуль может быть опубликован, но не показываться на странице из-за menu assignment. Это частый источник ошибок при переносе шаблона. Если блок не виден, проверьте не только позицию, но и вкладку назначения. Для сложных правил YOOtheme документация упоминает Advanced Module Manager от Regular Labs как вариант расширенных назначений, но добавлять его нужно только если штатных правил Joomla не хватает.

После любой правки меню или модуля очистите кеш Joomla и кеш браузера, если включены. Затем проверьте страницу без входа в админку. Так вы увидите результат глазами обычного посетителя, а не редактора с дополнительными правами.

Практический пример: главная страница модного каталога

Разберём сценарий, который реально соответствует Woolberry: нужно подготовить главную страницу для модного каталога на Joomla. Цель - сохранить визуальный характер демо, но заменить случайную демо-структуру на понятную витрину бренда: первый экран, входы в разделы, последние поступления, сезонная коллекция, преимущества и подписка.

Цель

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

Подготовка

• Создайте или проверьте категории Women, Men, Kids и сезонную коллекцию.
• Подготовьте изображения одинакового качества для hero, категорий и карточек товаров.
• Заполните поля товара: название, изображения, цена, цвет, размер, короткое описание и связанные товары, если они используются.
• Создайте пункт меню для главной и назначьте на него нужный template style.
• Проверьте, что customizer открывается с live preview именно этой страницы.

Шаги настройки

1. Откройте главную в YOOtheme Pro и загрузите подходящий Woolberry layout из библиотеки или используйте демо-страницу как основу.
2. В hero-блоке замените изображение, короткий seasonal label и ссылки на категории. Текст внутри сайта держите коротким, потому что визуал здесь важнее длинного описания.
3. Настройте две или три крупные плитки категорий. Для каждой проверьте изображение, ссылку, цвет текста и поведение на мобильном экране.
4. Для блока последних поступлений используйте dynamic content source, который выводит нужные материалы или товары. Проверьте, что карточки берут изображение, название и цену из полей.
5. Добавьте блок сезонной коллекции или редакционный блок со ссылкой на статью, если у бренда есть контент вокруг образов и подборок.
6. В нижней части страницы разместите модули про доставку, возврат, подписку и важные ссылки. Лучше вывести их через позиции или footer builder, а не вручную на каждой странице.
7. Сохраните layout, очистите кеш и проверьте страницу в desktop, tablet и phone preview.

Проверка

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

Нюанс, который часто мешает

Если блок последних товаров пустой, не спешите менять layout. Сначала проверьте content source и поля. Возможно, source выбран для другой категории, материал не опубликован, поле изображения пустое или template ждёт связанный объект, которого нет. В YOOtheme Pro такие проблемы лучше искать через dynamic content status и mapping внутри элемента.

Практичные идеи применения Woolberry на разных сайтах

Woolberry можно использовать шире, чем «магазин одежды». Но каждую идею стоит привязывать к подтверждённым возможностям: layouts, style variations, изображения, видео, пользовательские поля, связанные материалы, template styles, модули и динамический контент. Ниже несколько сценариев, которые не требуют выдуманных функций и опираются на реальную логику шаблона.

Визуальный каталог без сложной корзины

Если бренд пока продаёт через офлайн-магазины, мессенджеры или внешнюю платформу, Joomla-сайт может быть каталогом. Используйте карточки товаров как подробные страницы, а кнопки ведите на контакт, форму заявки или внешний канал. Результат проверяется просто: посетитель должен найти категорию, открыть товар, увидеть размеры, состав, изображения и понятный следующий шаг.

Редакционный журнал с товарами внутри статей

Для бренда с контентом Woolberry позволяет связывать посты с товарами. Статья о сезонной коллекции может показывать галерею, историю образа и связанные товары внизу. Здесь важна не корзина, а маршрут «вдохновение - подборка - карточка товара». Проверяйте, чтобы related products были заполнены вручную или через понятную логику источника.

Лендинг коллекции или капсулы

Для запуска коллекции можно создать отдельный пункт меню, назначить ему отдельный template style и загрузить layout с крупным hero, видео, сеткой товаров и блоком FAQ. Это удобнее, чем менять весь сайт ради одной кампании. После завершения кампании style assignment можно отключить, а страницу оставить как архив коллекции.

Сайт шоурума с адресами и консультациями

Если продажи происходят через шоурум, используйте визуальную часть Woolberry для каталога и отдельную страницу Stores или Location для адресов. Модули в bottom и footer помогут вывести условия примерки, возврата и контакты. Проверяйте не только красоту страницы, но и доступность контактов на мобильном экране.

Эти сценарии можно комбинировать. Главное - не пытаться сделать всё сразу. Начните с одного маршрута пользователя и доведите его до понятного результата, затем добавляйте фильтры, связанные товары, посты, дополнительные стили и модульные блоки.

Проверка результата: скорость, SEO, доступность и редакторская устойчивость

После настройки Woolberry важно проверить не только «нравится ли дизайн». Шаблон может выглядеть эффектно, но реальный сайт должен быстро загружаться, корректно индексироваться, быть понятным на мобильных устройствах и не разваливаться после добавления новых материалов. Проверку лучше делать по четырём направлениям.

Публичная часть и адаптивность

Откройте главную, категорию, карточку товара, статью, FAQ и поиск. Проверьте desktop, tablet, phone portrait и phone landscape. В YOOtheme Pro device preview можно переключать размеры, но финальную проверку всё равно сделайте в браузере. Обратите внимание на шапку, mobile dialog, высоту hero, обрезку изображений, видимость кнопок и читаемость текстов поверх фото.

SEO-структура

Не добавляйте в builder случайные заголовки только ради визуального размера. Страница должна иметь понятную иерархию, а визуальные элементы не должны ломать смысл. Для карточек и коллекций проверьте title, intro text, ссылки, alt у изображений, хлебные крошки и доступность страниц через меню или внутренние ссылки. Woolberry помогает подать контент, но SEO-качество зависит от структуры Joomla, текстов и того, как вы используете headings внутри layout.

Скорость и медиаконтент

В Woolberry много изображений и видео. Это сильная сторона, но она же создаёт риск тяжёлых страниц. Загружайте изображения в разумных размерах, используйте оптимизацию на стороне сайта, не вставляйте видео там, где достаточно изображения, и проверяйте lazy loading. Если после включения нескольких видео hero и sliders стали тяжёлыми, упростите первый экран и перенесите часть анимации ниже.

Редакторская устойчивость

Создайте тестовый товар и тестовую статью с минимальным набором полей. Если layout выдерживает неполные данные и не показывает пустые некрасивые блоки, структура устойчива. Если карточка разваливается без одного изображения или related products, нужно добавить display conditions, fallback-текст или редакторское правило «эти поля обязательны».

Рабочий Woolberry-сайт проверяется маршрутом, а не скриншотом: главная - категория - карточка - связанный материал - поиск - мобильный вид - повторное редактирование.

Безопасные улучшения без правки ядра шаблона

Иногда после настройки хочется слегка адаптировать Woolberry под проект: усилить читаемость подписей, добавить аккуратную служебную пометку, поправить отступ в конкретном блоке. Делайте это через настройки YOOtheme Pro, child theme или custom CSS, а не через правку файлов основного шаблона. Документация YOOtheme Pro для Joomla подтверждает, что custom CSS можно добавлять через Settings -> CSS, а для более устойчивых доработок можно использовать child theme с css/custom.css и js/custom.js.

Маленький CSS для контролируемой подписи

Ниже пример безопасной доработки. Он не опирается на скрытые классы Woolberry. Вы сами добавляете CSS class wb-product-note нужному Text или Panel element в Advanced настройках элемента YOOtheme Pro, а затем добавляете CSS в Settings -> CSS или в templates/yootheme_NAME/css/custom.css child theme.

.wb-product-note {
  max-width: 42rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #222;
}

.wb-product-note a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

Задача этого фрагмента - сделать редакторскую подпись или пояснение рядом с товарной подборкой более читаемым, не вмешиваясь в системные классы YOOtheme Pro. Проверка простая: назначьте класс одному элементу, сохраните, очистите кеш, откройте страницу и убедитесь, что изменился только этот блок. Откат - удалить class у элемента или убрать CSS.

Когда лучше использовать child theme

Если правка нужна на одном проекте и включает только CSS или небольшой JS, child theme удобнее прямой правки шаблона. Если доработка должна переезжать между клиентскими сайтами, YOOtheme рекомендует рассматривать starter plugin. Для обычного сайта Woolberry чаще достаточно child theme, template style и настроек customizer.

Не правьте файлы основного YOOtheme Pro ради мелкой визуальной доработки. Обновление шаблона может перезаписать изменения, а диагностика станет сложнее. Внешний CSS, class у элемента и child theme дают контроль и понятный откат.

Почему Woolberry может выглядеть не как демо и как это исправить

Проблемы с Joomla-шаблоном часто выглядят как «дизайн сломался», но причина находится в другом слое: отсутствует поле, модуль не назначен на пункт меню, template style применён не туда, кеш показывает старую версию, у пользователя нет прав или layout ждёт данные из демо-структуры. Ниже - практическая диагностика именно для Woolberry и YOOtheme Pro.

Главная страница пустая или сильно отличается от референса

Симптом: шапка есть, но ниже выводится обычный материал Joomla или пустой блок вместо сложной страницы. Возможная причина - нужный layout не загружен, страница открыта не через тот menu item, template style назначен на другой пункт меню или page builder layout не сохранён.

Проверьте, какой menu item является главной страницей, какой template style к нему привязан и открыт ли этот же пункт меню в YOOtheme Pro preview. Затем откройте Pages и убедитесь, что layout действительно назначен текущей странице. Если вы работали с demo package, сравните структуру с демо. Если с существующим сайтом - проверьте, не выводится ли старый article content вместо builder layout.

Карточки товаров пустые или без изображений

Симптом: сетка есть, но карточки без фото, цены или описания. Причина часто в dynamic content mapping: layout ждёт поле Images, Price или другое поле, а в вашей Joomla оно не создано, не заполнено или называется иначе. Также материал может быть не опубликован или находиться в другой категории.

Откройте элемент grid или panel slider, проверьте content source и field mapping. Если источник красный или поле отсутствует, либо создайте нужное поле, либо поменяйте mapping на существующее. Не маскируйте проблему CSS-ом: пустой источник нужно исправлять на уровне данных.

Модуль не появляется в нужной зоне

Симптом: модуль опубликован, но на странице его нет. Проверьте позицию, status, access level, language и menu assignment. В YOOtheme Pro Modules panel можно увидеть позиции и модули, но окончательное поведение зависит от Joomla. Если модуль должен быть только на одной странице, убедитесь, что выбран именно тот menu item, который открывает посетитель.

После правки style ничего не изменилось

Симптом: вы поменяли цвет или шрифт, нажали Save, но публичная часть показывает старый вид. Проверьте кеш Joomla, кеш браузера, системный кеш, CDN, а также то, какой template style назначен странице. Иногда настройка сохранена в одной копии template style, а посетитель видит другую.

Мобильное меню стало слишком длинным

Симптом: на телефоне меню занимает весь экран и мешает поиску или важным ссылкам. Причина - desktop-структуру перенесли в mobile dialog без упрощения. Разделите навигацию: основные категории оставьте в mobile navbar/dialog, служебные страницы перенесите в footer, а дополнительные ссылки выведите отдельным модулем.

Видео и слайдеры ухудшают скорость

Симптом: первый экран долго загружается, особенно на мобильном интернете. Проверьте вес изображений, количество видео, lazy loading, autoplay и расположение тяжёлых блоков. Для первого экрана часто достаточно одного сильного изображения. Видео, hover effects и дополнительные sliders лучше размещать ниже, где они не блокируют первое впечатление.

Когда лучше откатить настройку

Откатывайте изменение, если после него ломается несколько типов страниц, ухудшается мобильная шапка, пропадает контраст текста или dynamic content начинает показывать пустые блоки. Для template style достаточно вернуть старое назначение на menu item. Для CSS - удалить класс или фрагмент. Для layout - загрузить сохранённую копию из library или восстановить резервную копию.

Официальный видеопоказ Woolberry и что в нём смотреть

У YOOtheme есть точный презентационный ролик по Woolberry. Он полезен не как замена настройке, а как визуальное подтверждение логики шаблона: какие page layouts входят в пакет, как устроены product index, категории, карточка товара, блоговые шаблоны, live search, product filters, mega menu, видео, lightbox и style variations. Для Joomla-версии смотрите его как обзор визуальной и структурной идеи, а не как инструкцию по включению полноценной корзины в Joomla.

При просмотре держите рядом свой план сайта. Отмечайте, какие страницы вы действительно будете использовать: home, category, product, post, FAQ, search, stores. Отдельно выпишите блоки, которые требуют контентной дисциплины: изображения, видео, поля, связанные товары, категории, теги и тексты поверх фото.

Когда YOOtheme Woolberry будет удачным выбором

YOOtheme Woolberry стоит использовать, если вам нужен Joomla-шаблон с сильной визуальностью для моды, готовыми page layouts, style variations, демо-структурой, динамическим контентом и возможностью управлять страницами через YOOtheme Pro. Он особенно хорош там, где сайт должен быть не просто витриной, а связанной системой: коллекции, карточки, редакционные истории, поиск, FAQ, магазины, связанные товары и красивые переходы между разделами.

Перед запуском проверьте, что команда готова поддерживать контентную структуру: изображения, поля, категории, теги, связи и модульные назначения. Если всё это есть, шаблон даст быстрый старт и понятный визуальный язык. Если нет, лучше упростить структуру, начать с малого или выбрать более нейтральную основу.

Когда подготовлены резервная копия, тестовый template style, контентные поля, изображения и план страниц, можно загрузить YOOtheme Woolberry, развернуть его в безопасном контуре и пройти проверку по этому руководству. Не публикуйте сайт сразу после красивого первого экрана: пройдите маршрут посетителя, редактора и администратора, затем уже переносите результат на рабочую страницу.