Joomla является одной из лучших CMS, для которой существует огромное количество шаблонов, созданных на разных фреймворках. В этом материале рассмотрим лучшие фреймворки шаблонов для Joomla и сравним их возможности в таблице.
Что такое шаблонный фреймворк?
Шаблонный фреймворк — это каркас, на котором базируется шаблон для Joomla. Фреймворк содержит базовый набор функций, список которых может быть расширен разработчиком шаблона. Основной набор функций, предлагаемых шаблонным фреймворком, относится именно к шаблону и находится в настройках стилей шаблона (Расширения → Шаблоны → Стили), но некоторые современные фреймворки расширяют не только возможности шаблона, но и самой Джумлы, добавляя новые функции в компоненты ядра.
Таблица сравнения
Мы начнём с самой важной составляющей данного материала — таблицы, сравнивающей возможности 7-ми бесплатных шаблонов на лучших фреймворках, краткое описание которых представлено ниже. Вы можете кликнуть по названию фреймворка в таблице, чтобы перейти к его описанию.
❌ | Возможность отсутствует. |
✔️ | Возможность предусмотрена. |
❓ | Пояснение при наведении. |
Сокращения:
- T3 - Шаблон T3 BS3 на фреймворке T3.
- H3 - Шаблон Helix 3 на фреймворке Helix 3.
- HU - Шаблон Helix Ultimate на фреймворке Helix Ultimate.
- As - Шаблон Astroid на фреймворке Astroid.
- W7 - Шаблон Master 2 на фреймворке Warp 7.
- YP - Yootheme Pro.
- G5 - Шаблон Helium на фреймворке Gantry 5.
Удобство администрирования | T3 | H3 | HU | As | W7 | YP | G5 |
---|---|---|---|---|---|---|---|
Сохранение без перезагрузки | ✔️ | ❌ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Предпросмотр изменений | ❓ | ❌ | ❓ | ❓ | ❓ | ❓ | ❌ |
Сигналы о несохраненных изменениях | ✔️ | ❌ | ❌ | ❌ | ❌ | ❓ | ✔️ |
Интерфейс настроек | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ |
Дополнительные возможности | T3 | H3 | HU | As | W7 | YP | G5 |
Закрепление меню (Sticky Header) | ❌ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ❌ |
Favicon | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
Apple Touch Icon | ❌ | ❌ | ❌ | ❌ | ❌ | ✔️ | ✔️ |
Ссылки на соцсети | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ | ❓ |
Предзагрузчик (Preloader) | ❌ | ❓ | ❓ | ❓ | ❌ | ❌ | ❌ |
Наличие опции | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ❌ | ❌ |
Предпросмотр предзагрузчика | ❌ | ❌ | ❌ | ✔️ | ❌ | ❌ | ❌ |
Кастомизация предзагрузчика | ❌ | ✔️ | ❌ | ✔️ | ❌ | ❌ | ❌ |
Кнопка «Наверх» | ❌ | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ |
Наличие опции | ❌ | ✔️ | ✔️ | ✔️ | ✔️ | ❓ | ❓ |
Закреплённая кнопка | ❌ | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ❌ |
Кастомизация кнопки | ❌ | ❌ | ❌ | ✔️ | ❌ | ✔️ | ✔️ |
Логотип и вариации | ❓ | ❓ | ❓ | ❓ | ❌ | ❓ | ❓ |
Текст/изображение | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
Лого для мобильных | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ | ❌ |
SVG-логотип | ❌ | ❌ | ✔️ | ❌ | ❌ | ✔️ | ✔️ |
Инвертированный логотип | ❌ | ❌ | ❌ | ❌ | ❌ | ✔️ | ❌ |
Кастомизация стилей | T3 | H3 | HU | As | W7 | YP | G5 |
Типография (настройки шрифтов) | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ |
Элементы макета | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ |
Прочие элементы шаблона | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ |
Настройки макета | T3 | H3 | HU | As | W7 | YP | G5 |
Резиновый/коробочный макет | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
Изменение точек адаптивности | ✔️ | ❌ | ❌ | ❌ | ✔️ | ✔️ | ✔️ |
Конструктор макета | T3 | H3 | HU | As | W7 | YP | G5 |
Наличие конструктора | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ❓ | ✔️ |
Назначение модульных позиций | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ❌ | ✔️ |
Создание модульных позиций | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✔️ |
Формирование сетки макета | ❓ | ❓ | ❓ | ❓ | ❌ | ❓ | ❓ |
Добавление строк | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ❓ | ✔️ |
Добавление строки в строку | ❌ | ❌ | ❌ | ✔️ | ❌ | ❓ | ✔️ |
Несколько элементов в колонке | ❌ | ❌ | ❌ | ✔️ | ❌ | ❓ | ✔️ |
Перетаскивание элементов | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ❓ | ✔️ |
Дублирование элементов | ❌ | ❌ | ❌ | ✔️ | ❌ | ❓ | ❌ |
Кастомизация элементов сетки | ❓ | ❓ | ❓ | ❓ | ❌ | ❓ | ❓ |
Анимация элементов | ❌ | ❌ | ❌ | ✔️ | ❓ | ❓ | ❌ |
Резиновые строки | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ❓ | ✔️ |
Фон для строк | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ❓ | ❌ |
Адаптивность элементов сетки | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ |
Размеры колонок для разных экранов | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ❓ | ❌ |
Скрытие элементов на разных экранах | ✔️ | ✔️ | ✔️ | ✔️ | ❓ | ❌ | ❌ |
Настройки материалов | T3 | H3 | HU | As | W7 | YP | G5 |
Мета-теги Open Graph | ❌ | ❓ | ❓ | ❓ | ❌ | ❌ | ❌ |
Связанные материалы | ❌ | ❌ | ❌ | ✔️ | ❌ | ❌ | ❓ |
Рейтинг без перезагрузки | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ❌ | ✔️ |
Кнопки «Поделиться» | ❌ | ❓ | ❓ | ❓ | ❓ | ❌ | ❌ |
Время чтения материала | ❌ | ❌ | ❌ | ✔️ | ❌ | ❌ | ❌ |
Типы материалов | ❌ | ❓ | ❓ | ❓ | ❌ | ❌ | ❌ |
Значки для материалов | ❌ | ❌ | ❌ | ✔️ | ❌ | ❌ | ❌ |
Блок «Об авторе» | ❌ | ❌ | ✔️ | ✔️ | ❌ | ❌ | ❌ |
Настройки меню | T3 | H3 | HU | As | W7 | YP | G5 |
Подзаголовки пунктов меню | ✔️ | ❌ | ❌ | ✔️ | ✔️ | ✔️ | ✔️ |
Выравнивание мега-меню | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
Метка для пункта меню | ❌ | ❌ | ✔️ | ❌ | ❌ | ❌ | ❌ |
Мега-меню по клику | ✔️ | ❌ | ❌ | ✔️ | ❌ | ❌ | ✔️ |
Выбор анимации для мега-меню | ❓ | ❓ | ❓ | ❓ | ❌ | ❌ | ✔️ |
Offcanvas-меню | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Выбор анимации для Offcanvas | ❌ | ❓ | ❓ | ❓ | ❌ | ❓ | ❌ |
Иконки в пунктах меню | ❓ | ❓ | ❓ | ❓ | ❓ | ❌ | ❓ |
Добавление иконки | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ |
Предпросмотр иконок | ❌ | ❌ | ❌ | ✔️ | ✔️ | ❌ | ✔️ |
Только иконка | ❌ | ✔️ | ✔️ | ✔️ | ❌ | ❌ | ✔️ |
Размер иконки | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✔️ |
Поворот иконки | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✔️ |
Анимация вращения иконки | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✔️ |
Конструктор мега-меню | ❓ | ❓ | ❓ | ❓ | ❌ | ❌ | ❓ |
Модули в мега-меню | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ❌ | ✔️ |
Фиксированная ширина мега-меню | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ |
Колонки в мега-меню | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Строки в мега-меню | ✔️ | ❓ | ✔️ | ✔️ | ❌ | ❌ | ❌ |
Мега-меню во вложенных пунктах | ✔️ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
Скорость загрузки | T3 | H3 | HU | As | W7 | YP | G5 |
Базовая скорость | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ | ❓ |
Минификация кода и объединение файлов | ✔️ | ✔️ | ✔️ | ❌ | ✔️ | ✔️ | ❌ |
Отложенная загрузка изображений | ❌ | ❌ | ❌ | ❌ | ❌ | ✔️ | ❌ |
Отключение Bootstrap | ❌ | ❌ | ❌ | ❌ | ✔️ | ✔️ | ❌ |
Страница ошибки | T3 | H3 | HU | As | W7 | YP | G5 |
Кастомизация страницы | ❌ | ❓ | ❓ | ❓ | ❌ | ❌ | ❓ |
Фоновое изображение | ❌ | ✔️ | ✔️ | ❌ | ❌ | ❌ | ✔️ |
Логотип | ❌ | ✔️ | ✔️ | ❌ | ❌ | ❌ | ✔️ |
Текст для кнопки перехода | ❌ | ❌ | ❌ | ✔️ | ❌ | ❌ | ✔️ |
Пользовательский контент | ❌ | ❌ | ❌ | ✔️ | ❌ | ❌ | ✔️ |
Пользовательский код | T3 | H3 | HU | As | W7 | YP | G5 |
Любой код перед </head> | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ❌ | ❌ |
Любой код перед </body> | ✔️ | ✔️ | ✔️ | ✔️ | ❌ | ❌ | ✔️ |
Любой код после <head> | ✔️ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
Любой код после <body> | ✔️ | ❌ | ❌ | ❌ | ❌ | ❌ | ✔️ |
Пользовательский CSS-код | ❓ | ✔️ | ✔️ | ✔️ | ❌ | ✔️ | ❓ |
Пользовательский JS-код | ❓ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ❓ |
Пользовательские CSS-файлы | ❌ | ❌ | ❌ | ✔️ | ❌ | ❌ | ✔️ |
Пользовательские JS-файлы | ❌ | ❌ | ❌ | ✔️ | ❌ | ❌ | ✔️ |
T3 Framework
T3 Framework отличается минимализмом, удобным конструктором макетов и отличным редактором мега-меню, в то же время кастомизация стилей во внешнем интерфейсе оставляет желать лучшего. В отношении функционала и интерфейса настроек T3 напоминает Gantry 5, но с куда менее мощным конструктором макетов (без частиц).
Основные фишки:
- самый лучший редактор мега-меню,
- кастомизатор стилей во внешнем интерфейсе (Theme Magic),
- минималистичный конструктор макетов, позволяющий гибко настроить адаптивность.
Подробнее о T3 Framework.
Helix 3 Framework
Судя по количеству созданных на Helix 3 шаблонов, данный фреймворк смело можно назвать самым популярным. И хотя на смену ему пришел Helix Ultimate, многие разработчики продолжают выпускать новые шаблоны на Helix 3.
Основные фишки:
- дополнительные возможности по кастомизации пунктов меню,
- дополнительные настройки для материалов Joomla,
- наглядный конструктор макетов,
- множество дополнительных возможностей.
Helix Ultimate Framework
Helix Ultimate берёт начало от своего предшественника и копирует его функционал, завернутый в новый интерфейс. Конечно, новый фреймворк имеет новые функции и отличительные особенности, среди которых Bootstrap 4.
Warp 7 Framework
Warp 7 — фреймворк от известной немецкой веб-студии YOOtheme, среди разработок которой такие популярные новаторские расширения, как ZOO, WidgetKit, а также полноценный CSS-фреймворк UIkit. Warp 7 действительно качественный фреймворк, главной фишкой которого является наглядный кастомизатор всех элементов применяемого в нём фреймворка UIkit 2.
Основные фишки:
- кастомизатор всех элементов во внешнем интерфейсе,
- высокая оптимизация производительности,
- все функции размещены в настройках шаблона.
YOOtheme Pro
YOOtheme Pro — флагманская разработка упомянутой выше YOOtheme. Формально YOOtheme Pro является наследником Warp'а, но на деле между данными фреймворками очень мало общего.
Основные фишки:
- кастомизатор элементов во внешнем интерфейсе,
- мощный конструктор страниц,
- максимум возможностей в одном интерфейсе,
- уникальная система шаблонов и стилей.
Gantry 5 Framework
Gantry 5 обладает мощным функционалом, включающим гибкий редактор меню, позволяющий встраивать модули и легко кастомизировать внешний вид. Предусмотрена возможность создания неограниченного количества строк в разделах и элементов в отдельных строках, размеры которых легко изменять прямо в конструкторе макета — всё это позволяет настраивать шаблоны максимально гибко.
Основные фишки:
- функциональный расширяемый конструктор макетов,
- редактор мега-меню,
- инновационный подход к созданию страниц.
Astroid Framework
Astroid — современный шаблонный фреймворк, копирующий и умножающий возможности Helix 3. В отношении функционала Astroid практически идентичен Helix 3, но имеет оригинальный интерфейс, а также фишки, не свойственные хеликсу:
- самый гибкий конструктор макетов;
- возможность управлять значениями OG-тегов Title, Description и Image;
- тип материала Review;
- автоматическое добавление связанных материалов;
- приблизительное время прочтения материала;
- значки для материалов.
Всё это делает шаблоны на Astroid Framework более функциональными, однако есть и «подводные камни»:
- фреймворк плохо оптимизирован в отношении скорости загрузки шаблонов,
- шаблонов на «астроиде» сравнительно мало (есть бесплатные, но только от разработчика).
Выводы
- Большое количество представленных в таблице возможностей (социальные иконки, фавикон, логотип, кастомизация стилей) можно реализовать на уровне кода с минимальными знаниями HTML и CSS.
- В таблице представлены самые значимые качества в кастомизации шаблонов, но отдельные фреймворки содержат значительно больше возможностей и настроек, особенно это касается Yootheme Pro и Gantry.
- Yootheme Pro уникален в отношении кастомизации стилей, а Gantry — в отношении расширяемого конструктора макетов.
- Конструктор макетов в Gantry 5 старается уподобиться полноценному конструктору страниц на уровне макета, но по факту является лишь подобием того же SP Page Builder и сильно уступает лучшим конструкторам страниц в гибкости и адаптивности.
- В отношении конструктора макета и дополнительных возможностей Astroid явно опережает хеликсы, но шаблонов на нём не так много.
- Шаблоны на Warp 7 отличаются высокой оптимизацией скорости загрузки и могут быть «скелетом» для сайта любого уровня сложности, несмотря на минимализм настроек.
Упоминаемые термины:
CSS, HTML, Joomla, Кастомизация, Материал, Шаблон, CMS, Favicon, Внешний интерфейс, Helix Ultimate, Open Graph, Bootstrap, Title, ZOO, SP Page Builder