- Видео обзор.
- Основные возможности и особенности.
- Русский язык для YOOtheme Pro.
- Общие настройки YOOtheme Joomla.
YOOtheme Pro – русскоязычный платный конструктор страниц для Joomla.
Видео обзор
- Сайт – 00:03:15.
- Позиция Header – 00:06:33.
- Позиция Mobile – 00:09:04.
- Позиция Top – 00:10:11.
- Позиция Sidebar – 00:13:26.
- Позиция Bottom – 00:14:55.
- Позиция Footer – 00:16:42.
- Блог – 00:17:06.
- Публикация – 00:21:11.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.
Компонент обеспечивает визуальное создание страниц во фронтальной части сайта путём перетаскивания разных элементов и их настройки. Возможность создания адаптивного макета, 33 элемента (объектов типа изображение, видео, список, слайдер и т.д.), около 350 готовых макетов страниц с возможностью их изменения и многое другое. Данное расширение позволит упростить процесс создания страниц и отлично подойдёт для создания лендингов (landing page). Есть версия YOOtheme Pro для Joomla и для WordPress.
YOOtheme Pro – это не классическое расширение для Joomla. Это и не компонент, и не модуль, и не плагин. У него нет «единого центра настроек» в админке. Все опции доступны во фронтальной части сайта.
В предыдущих статьях мы уже рассматривали аналогичные расширения: RSPageBuilder и SP Page Builder.
В обзоре участвует последняя, на момент написания статьи (15.03.2021), русскоязычная версия YOOtheme Pro 2.4.4 в Joomla 3.9.25. Шаблон сайта Kitchen Daily 2.4.3.
Расширение платное – 60 € в год для Joomla или WordPress (с обновлениями и технической поддержкой для одного сайта). Есть вариант для Joomla и WordPress с обновлениями и технической поддержкой для любого количества сайтов, такая лицензия стоит 360 € в год.
Основные возможности и особенности
- Есть версия для Joomla и WordPress.
- Расширение переведено на более чем 20 языков, включая русский, украинский, английский, французский, итальянский и другие.
- Поддержка мультиязычности. Если Вас интересует вопрос мультиязычности в Джумла, то предлагаю ознакомиться со статьёй «Мультиязычность Joomla. Как перевести сайт на несколько языков».
- Создание и редактирование страниц в «визуальном режиме» во фронтальной части сайта (рисунок ниже).
- Перемещение контента по странице при помощи перетаскивания мышью. Создание, копирование, перемещение, удаление и другие действия в интерфейсе достаточно интуитивно понятны и просты (для тех, кто уже имел дело с подобными интерфейсами).
- Создание адаптивного макета страницы без необходимости написания кода.
- Поддержка дисплеев Retina (загрузка изображения с подходящим разрешением).
- Наличие 33-х элементов/объектов с возможностью их разрешения в ячейках макета и гибкой настройкой каждого элемента. Под элементами подразумеваются как простые объекты, позволяющие добавить текст, фото, видео и т.д., так и более сложные: аккордеон, галерея, слайдер и т.д.
- Возможность сохранения собственных элементов и их экспорт во внешний файл для импорта на другой сайт. Также эти элементы можно применять на разных страницах в рамках одного сайта.
- Вставка модулей Joomla в макет YOOtheme Pro.
- Около 350 готовых макетов страниц (есть фильтр для поиска) с возможностью их гибкой настройки для своих целей. Макеты разработаны профессионалами и содержат высококачественные изображения, которые можно использовать на любом сайте (согласно их лицензии). Для доступа к макетам Вам нужен API ключ (действующая лицензия).
- Возможность сохранения собственных макетов страниц и их экспорт во внешний файл для импорта на другой сайт. Также макеты можно применять к разным страницам в рамках одного сайта.
- Наличие более 30 готовых шаблонов Joomla (с быстрым стартом), страницы которых сделаны и могут быть изменены при помощи YOOtheme Pro. Плюс, есть шаблоны от сторонних разработчиков, которые базируются на этом конструкторе контента. Например, DJ-EcoFood.
- Возможность загрузки полей материалов Joomla (com_content) в разные элементы (рисунок ниже) - динамический контент. Можно добавлять данные из заголовка материала, контента, мета-данных, тегов/меток, вступительного изображения, поля автора и т.д. Плюс, есть поддержка дополнительных полей Joomla (com_fields). Данная опция позволит, например, использовать в качестве заголовка текстового элемента, заголовок из материала, а в качестве основного текста элемента – текст материала. Если данные в материале были изменены, то они автоматически изменятся и в элементах. Также есть возможность вставки данных из любого компонента, установленного на сайте.
- 205 готовых стилей (разные сочетания цветов и шрифтов). Есть фильтр для поиска. Для доступа к стилям Вам нужен API ключ (действующая лицензия).
- Удобное управление стилями разных областей и элементов. Возможность изменения шрифтов, цветов и расстояний между разными элементами.
- Расширение базируется на CSS фреймворке UIkit.
- Поддержка шрифтов Google с возможностью их хранения и загрузки с Вашего сайта. Что положительно сказывается на общей скорости загрузки страницы и лучше в плане соответствия GDPR.
- Более 125 иконок.
- Удобный инструмент для выбора цвета.
- Гибкие настройки макета для разных областей (шапка, подвал и т.д.). 18 готовых макетов для шапки сайта. 3 макета для шапки на мобильных устройствах со спадающим, модальным или Offcanvas меню. Возможность задавать анимацию и менять стили меню.
- Возможность редактирования макетов разных типов страниц: страницы категории блога и страницы материалов (рисунок ниже).
- Возможность добавления своего собственного JavaScript, CSS и Less кода.
- Чистый код и семантическая вёрстка. По заявлению разработчиков.
- Страницы, сделанные на YOOtheme Pro построены на базе новейших технологий для сокращения времени первой отрисовки, что должно положительно сказаться на опыте пользователей и оценки скорости загрузки сайта.
- Joomla page builder может быть обновлён из админки в несколько нажатий.
- Многие настройки оснащены русскоязычными подсказками.
- Отличная документация на английском языке с множеством видео-уроков.
Данный конструктор страниц Joomla обладает ещё множеством возможностей и особенностей. Это далеко не полный перечень. А настроек так много, что их обзор займёт много времени. Поэтому остановлюсь только на некоторых, наиболее интересных, на мой взгляд, моментах.
Русский язык для YOOtheme Pro
Рассмотрим шаги для установки русского, или любого другого языка, интерфейса YOOtheme Pro.
Шаг 1. Перейдите на сайт с переводами и скачайте нужный Вам язык «админки» (самого YOOtheme Pro) или фронтальной части Joomla page builder.
- Формат файла языка для «админки» – JSON.
- Формат файла языка для фронтальной части сайта – INI.
Шаг 2. При необходимости, переименуйте файл для «админки» в «ru_RU.json», а файл для фронтальной части сайта в «ru-RU.tpl_yootheme.ini». Для других языков используйте соответствующие префиксы. Например, для украинского языка это «uk_UA» (для «админки») и «uk-UA» (для фронтальной части сайта).
Шаг 3. Скопируйте файл «ru_RU.json» в «templates/yootheme/vendor/yootheme/theme/languages», а файл «ru-RU.tpl_yootheme.ini» в «templates/yootheme/language/ru-RU». Для других языков фронтальной части сайта нужно использовать папку с соответствующим именем. Например, для украинского это «uk-UA».
Общие настройки YOOtheme Joomla
Для доступа к общим настройкам расширения на первой странице панели управления Joomla нажмите YOOtheme (рисунок ниже). Или перейдите в Расширения – Шаблоны – Стили – yootheme и нажмите Customize.
Перед Вами появится фронтальная часть сайта, а слева - панель управления конструктора страниц Joomla (рисунок ниже). В панели есть несколько элементов управления, которые остаются на ней всё время.
- Закрыть. На рисунке ниже слева вверху (коричневый указатель). Позволяет закрыть панель и вернуться в админку Joomla.
- Свернуть. На рисунке ниже слева внизу (красный указатель). Позволяет свернуть панель.
- Изменить размер панели. На рисунке ниже справа внизу (зелёный указатель). Позволяет изменять ширину панели.
- Изменить размер области сайта. На рисунке ниже по центру снизу (синий указатель). Позволят изменять ширину области сайта. Полезно для проверки адаптивного дизайна (отображения на разных устройствах).
Общие настройки Joomla page builder разделены на семь пунктов меню.
- Макет.
- Стиль.
- Конструктор.
- Шаблоны.
- Меню
- Модули.
- Настройки.
В каждом из них множество настроек. Рассмотрим только наиболее интересные, на мой взгляд.
Макет
В меню Макет есть девять подменю, каждый из которых содержит настройки одноимённой области страницы (позиции модуля) сайта или типа страницы сайта (страница материала или категории материала Joomla):
- Сайт.
- Позиция Header.
- Позиция Mobile.
- Позиция Top.
- Позиция Sidebar.
- Позиция Bottom.
- Позиция Footer.
- Блог.
- Публикация.
Если в той или иной позиции модуля нет ни одного модуля, Вы можете не увидеть изменения, которые внесёте в YOOtheme Pro.
Обратите внимание, что в левой верхней части сайта появляется кнопка с переходом к предыдущей странице панели управления, а ниже и правее появляется иконка вопросительного знака (рисунок ниже). По нажатию на неё открывается окошко с перечнем ссылок на справочную информацию по данному разделу панели управления. Справка на английском языке и включает в себя не только текст и изображения, но и видео.
Сайт (рисунок ниже). Тут собраны общие настройки, которые позволяют сконфигурировать логотип (отдельно для обычных и мобильных устройств), ширину основной области контента сайта, его фоновое изображение/цвет, положение позиции модулей «Toolbar» и настройки «хлебных крошек» (навигатор сайта).
У фона сайта есть свои настройки (рисунок ниже). Тут Вы сможете задать его размер, позицию, эффект и, при желании, можно указать цвет фона с наложением другого цвета.
Отмечу, что изменения на странице отображаются моментально. Без необходимости сохранения результатов или обновления страницы.
Позиция Header (рисунок ниже). Тут собраны опции шапки сайта (хэдера/верхнего колонтитула). Можно изменить ширину шапки, закрепить панель навигации (меню), настроить выпадающее меню и выпадающую панель, а также разместить поиск по сайту.
Вы сможет выбрать один из 16-ти макетов шапки (рисунок ниже). Включая несколько макетов для мобильных устройств.
Также Вы сможете настроить каждый отдельный пункт меню (рисунок ниже): добавить подзаголовок и настроить его подменю (если оно есть).
Позиция Mobile (рисунок ниже). Тут собраны настройки мобильного меню. За счёт опции Контрольная точка можно указать, на каких устройствах будет отображаться кнопка мобильного меню.
Позиция Top (рисунок ниже). Содержит параметры для настройки одноимённой позиции модулей под шапкой. Можно задать фоновое изображение или видео с YouTube или Vimeo, настроить ширину и высоту позиции, отступы, расстояния между ячейками и так далее.
Обратите внимание, что в этой (и других позициях) можно разместить специальный модуль – «Builder» (в менеджере модулей Joomla). Тогда при помощи этого модуля можно будет настроить сложный макет внутри этой позиции. О макетах и самом модуле мы поговорим в следующих статьях.
Позиция Sidebar (рисунок ниже). Вы можете настроить отображение данной позиции. Обратите внимание, что эта позиция не отображается на страницах, сделанных при помощи YOOtheme Pro. Даже если там расположен какой-то модуль.
Позиция Bottom (рисунок ниже). Содержит настройки для одноимённой позиции модулей Joomla.
Позиция Footer (рисунок ниже). Содержит настройки для одноимённой позиции модулей Joomla. Тут Вы сможете создавать сложный макет и размещать в нём разные элементы. Об этом мы поговорим в статье «Обзор YOOtheme Pro Joomla (часть 3). Конструктор страниц».
Блог (рисунок ниже). Эти настройки относятся к страницам типа пункта меню Блог категории. Количество колонок для отображения записей блога можно указать в настройках пункта меню на вкладке Параметры блога в опции Количество колонок. А вот отступы между колонками, ширину области отображения записей блога, отступы изображений, их размер, выравнивание, настройки заголовков и т.д., можно настроить в панели управления YOOtheme Joomla.
Публикация (рисунок ниже). Эти настройки относятся к страницам типа пункта меню Материала или страницам матерела Joomla, если для них не задан отдельный пункт меню.
Вы сможете настроить размер изображения, отступы разных элементов (изображение, заголовок, содержимое) и включить отображение буквицы.
В следующей статье «Обзор YOOtheme builder (часть 2). Конструктор контента для Joomla» мы рассмотрим другие разделы общих настроек данного расширения.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Официальный сайт (на англ.).
- Документация (на англ.).
