1. Что такое шаблонный фреймворк?
  2. Таблица сравнения
  3. T3 Framework
  4. Helix 3 Framework
  5. Helix Ultimate Framework
  6. Warp 7 Framework
  7. YOOtheme Pro
  8. Gantry 5 Framework
  9. Astroid Framework
  10. Выводы

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.
Полезно знать!
В таблице представлены возможности кастомизации бесплатных шаблонов от разработчиков фреймворков. Возможностей на платных шаблонах от сторонних разработчиков может быть больше, но рассматриваемый базовый функционал сохраняется.
Возможности бесплатных шаблонов на разных фреймворках
Удобство администрированияT3H3HUAsW7YPG5
Сохранение без перезагрузки ✔️ ❌ ✔️ ✔️ ✔️ ✔️ ✔️
Предпросмотр изменений ❓ ❌ ❓ ❓ ❓ ❓ ❌
Сигналы о несохраненных изменениях ✔️ ❌ ❌ ❌ ❌ ❓ ✔️
Интерфейс настроек ❓ ❓ ❓ ❓ ❓ ❓ ❓
Дополнительные возможностиT3H3HUAsW7YPG5
Закрепление меню (Sticky Header) ❌ ✔️ ✔️ ✔️ ✔️ ✔️ ❌
Favicon ❌ ✔️ ✔️ ✔️ ❌ ✔️ ✔️
Apple Touch Icon ❌ ❌ ❌ ❌ ❌ ✔️ ✔️
Ссылки на соцсети ❌ ✔️ ✔️ ✔️ ❌ ✔️ ❓
Предзагрузчик (Preloader) ❌ ❓ ❓ ❓ ❌ ❌ ❌
Наличие опции ❌ ✔️ ✔️ ✔️ ❌ ❌ ❌
Предпросмотр предзагрузчика ❌ ❌ ❌ ✔️ ❌ ❌ ❌
Кастомизация предзагрузчика ❌ ✔️ ❌ ✔️ ❌ ❌ ❌
Кнопка «Наверх» ❌ ❓ ❓ ❓ ❓ ❓ ❓
Наличие опции ❌ ✔️ ✔️ ✔️ ✔️ ❓ ❓
Закреплённая кнопка ❌ ✔️ ✔️ ✔️ ✔️ ❌ ❌
Кастомизация кнопки ❌ ❌ ❌ ✔️ ❌ ✔️ ✔️
Логотип и вариации ❓ ❓ ❓ ❓ ❌ ❓ ❓
Текст/изображение ✔️ ✔️ ✔️ ✔️ ❌ ✔️ ✔️
Лого для мобильных ✔️ ✔️ ✔️ ✔️ ❌ ✔️ ❌
SVG-логотип ❌ ❌ ✔️ ❌ ❌ ✔️ ✔️
Инвертированный логотип ❌ ❌ ❌ ❌ ❌ ✔️ ❌
Кастомизация стилейT3H3HUAsW7YPG5
Типография (настройки шрифтов) ❓ ❓ ❓ ❓ ❓ ❓ ❓
Элементы макета ❓ ❓ ❓ ❓ ❓ ❓ ❓
Прочие элементы шаблона ❓ ❓ ❓ ❓ ❓ ❓ ❓
Настройки макетаT3H3HUAsW7YPG5
Резиновый/коробочный макет ❌ ✔️ ✔️ ✔️ ❌ ✔️ ✔️
Изменение точек адаптивности ✔️ ❌ ❌ ❌ ✔️ ✔️ ✔️
Конструктор макетаT3H3HUAsW7YPG5
Наличие конструктора ✔️ ✔️ ✔️ ✔️ ❌ ❓ ✔️
Назначение модульных позиций ✔️ ✔️ ✔️ ✔️ ❌ ❌ ✔️
Создание модульных позиций ❌ ❌ ❌ ❌ ❌ ❌ ✔️
Формирование сетки макета ❓ ❓ ❓ ❓ ❌ ❓ ❓
Добавление строк ❌ ✔️ ✔️ ✔️ ❌ ❓ ✔️
Добавление строки в строку ❌ ❌ ❌ ✔️ ❌ ❓ ✔️
Несколько элементов в колонке ❌ ❌ ❌ ✔️ ❌ ❓ ✔️
Перетаскивание элементов ❌ ✔️ ✔️ ✔️ ❌ ❓ ✔️
Дублирование элементов ❌ ❌ ❌ ✔️ ❌ ❓ ❌
Кастомизация элементов сетки ❓ ❓ ❓ ❓ ❌ ❓ ❓
Анимация элементов ❌ ❌ ❌ ✔️ ❓ ❓ ❌
Резиновые строки ❌ ✔️ ✔️ ✔️ ❌ ❓ ✔️
Фон для строк ❌ ✔️ ✔️ ✔️ ❌ ❓ ❌
Адаптивность элементов сетки ❓ ❓ ❓ ❓ ❓ ❓ ❓
Размеры колонок для разных экранов ✔️ ✔️ ✔️ ✔️ ❌ ❓ ❌
Скрытие элементов на разных экранах ✔️ ✔️ ✔️ ✔️ ❓ ❌ ❌
Настройки материаловT3H3HUAsW7YPG5
Мета-теги Open Graph ❌ ❓ ❓ ❓ ❌ ❌ ❌
Связанные материалы ❌ ❌ ❌ ✔️ ❌ ❌ ❓
Рейтинг без перезагрузки ❌ ✔️ ✔️ ✔️ ❌ ❌ ✔️
Кнопки «Поделиться» ❌ ❓ ❓ ❓ ❓ ❌ ❌
Время чтения материала ❌ ❌ ❌ ✔️ ❌ ❌ ❌
Типы материалов ❌ ❓ ❓ ❓ ❌ ❌ ❌
Значки для материалов ❌ ❌ ❌ ✔️ ❌ ❌ ❌
Блок «Об авторе» ❌ ❌ ✔️ ✔️ ❌ ❌ ❌
Настройки менюT3H3HUAsW7YPG5
Подзаголовки пунктов меню ✔️ ❌ ❌ ✔️ ✔️ ✔️ ✔️
Выравнивание мега-меню ✔️ ✔️ ✔️ ✔️ ❌ ✔️ ✔️
Метка для пункта меню ❌ ❌ ✔️ ❌ ❌ ❌ ❌
Мега-меню по клику ✔️ ❌ ❌ ✔️ ❌ ❌ ✔️
Выбор анимации для мега-меню ❓ ❓ ❓ ❓ ❌ ❌ ✔️
Offcanvas-меню ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
Выбор анимации для Offcanvas ❌ ❓ ❓ ❓ ❌ ❓ ❌
Иконки в пунктах меню ❓ ❓ ❓ ❓ ❓ ❌ ❓
Добавление иконки ✔️ ✔️ ✔️ ✔️ ✔️ ❌ ✔️
Предпросмотр иконок ❌ ❌ ❌ ✔️ ✔️ ❌ ✔️
Только иконка ❌ ✔️ ✔️ ✔️ ❌ ❌ ✔️
Размер иконки ❌ ❌ ❌ ❌ ❌ ❌ ✔️
Поворот иконки ❌ ❌ ❌ ❌ ❌ ❌ ✔️
Анимация вращения иконки ❌ ❌ ❌ ❌ ❌ ❌ ✔️
Конструктор мега-меню ❓ ❓ ❓ ❓ ❌ ❌ ❓
Модули в мега-меню ✔️ ✔️ ✔️ ✔️ ❌ ❌ ✔️
Фиксированная ширина мега-меню ✔️ ✔️ ✔️ ✔️ ✔️ ❌ ✔️
Колонки в мега-меню ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
Строки в мега-меню ✔️ ❓ ✔️ ✔️ ❌ ❌ ❌
Мега-меню во вложенных пунктах ✔️ ❌ ❌ ❌ ❌ ❌ ❌
Скорость загрузкиT3H3HUAsW7YPG5
Базовая скорость ❓ ❓ ❓ ❓ ❓ ❓ ❓
Минификация кода и объединение файлов ✔️ ✔️ ✔️ ❌ ✔️ ✔️ ❌
Отложенная загрузка изображений ❌ ❌ ❌ ❌ ❌ ✔️ ❌
Отключение Bootstrap ❌ ❌ ❌ ❌ ✔️ ✔️ ❌
Страница ошибкиT3H3HUAsW7YPG5
Кастомизация страницы ❌ ❓ ❓ ❓ ❌ ❌ ❓
Фоновое изображение ❌ ✔️ ✔️ ❌ ❌ ❌ ✔️
Логотип ❌ ✔️ ✔️ ❌ ❌ ❌ ✔️
Текст для кнопки перехода ❌ ❌ ❌ ✔️ ❌ ❌ ✔️
Пользовательский контент ❌ ❌ ❌ ✔️ ❌ ❌ ✔️
Пользовательский кодT3H3HUAsW7YPG5
Любой код перед </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, ZOO, SP Page Builder