Обзоры расширений Joomla

  • Тип – конструктор контента Joomla 3.

 

 

RSPageBuilder – бесплатный, русскоязычный конструктор страниц Joomla 3 с поддержкой Bootstrap и 25 объектами. Это расширение позволит значительно упростить создание лендингов (landing page) на Joomla без знания CSS, HTML и PHP. По большому счету, это некий визуальный редактор контентной (информативной\содержательной) части страницы. Суть заключается в том, что создаётся сетка (таблица) путём нажатий на несколько инструментов. А затем добавляются в «ячейки» этой сетки различные элементы (объекты). Среди 25 таких элементов следующие: кнопки, карусели изображений, карта Google, видео, список, изображения, модули Joomla, вкладки, аккордеоны, текстовые блоки и другое. У каждого из этих элементов, включая строки и столбцы ячеек, есть свои свойства (настройки). Изменяя эти настройки, Вы меняете внешний вид и функционирование элементов и сетки. Есть возможность простого перетаскивания элементов при помощи мыши.

Несмотря на то, что на официальном сайте расширений Joomla RSPageBuilder находится в категории «Content Construction» наряду с такими расширениями как K2 и Zoo, RSPageBuilder принципиально от них отличается. RSPageBuilder – это конструктор контента страницы (её содержимого). То есть, он работает в рамках страницы или модуля. А K2 и Zoo - это некие альтернативы стандартного менеджера материалов Joomla (com_content), позволяющие создавать полноценные каталоги и чуть ли не интернет-магазины.

Компонент основывается на Bootstrap версий 2 и 3 (на Ваш выбор). Немного подробнее о принципах сетки Bootstrap можно прочесть в данной статье. Помимо компонента есть модуль. Его можно выводить в любой позиции шаблона, на любой странице, независимо от того, при помощи какого компонента была сгенерирована сама страница.

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

Пример страницы, созданной при помощи RSPageBuilder можно найти на демонстрационном сайте разработчика: пример №1, пример №2.

В обзоре будет участвовать последняя, на момент написания статьи (17.05.2017), русскоязычная версия RSPageBuilder 1.0.8 в Joomla 3.7.1. Основной шаблон сайта – RSBaraka 1.0.3 с установленными демонстрационными данными на английском языке.

На официальном сайте расширений Joomla 1 отзыв, расширение добавлено 03.01.2017.

  • Общий рейтинг – 69 из 100.
  • Функциональность – 73 из 100.
  • Простота использования – 93 из 100.
  • Документация – 93 из 100.
  • Поддержка – 93 из 100.

Особенности RSPageBuilder

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

  • Поддержка Joomla х.
  • Поддержка PHP
  • Переведён на русский и английский языки.
  • Наличие всплывающих подсказок на русском языке.
  • Поддержка Bootstrap 2 и 3.
  • Поддержка Font Awesome.
  • 25 различных элементов для создания страниц.
  • Упрощённое создание похожих элементов путём их копирования.
  • Возможность создания контента во всю ширину окна браузера.
  • Поддержка анимации.
  • Наличие модуля.
  • Возможность изменения внешнего вида элементов не только при помощи визуальных инструментов, но и при помощи CSS стилей.
  • Возможность вставки собственного HTML-кода
  • Возможность перетаскивания элементов страницы мышью.
  • Поддержка адаптивного дизайна.
  • Наличие модуля.
  • Возможность добавления мета-данных на создаваемые страницы.
  • Поддержка добавления мета-тегов Open Graph на создаваемые страницы.
  • Возможность разграничения прав доступа к создаваемыми страницам и к самому компоненту на основании системы разграничения прав доступа Joomla.
  • Поддержка встроенной системы мультиязычности Joomla.
  • Поддержка автоматического обновления компонента из админки Joomla.
  • Наличие документации на английском языке.

Страницы

В основном, создание страницы в конструкторе контента Joomla 3 происходит на вкладке Настройки страницы (рисунок ниже). Об этом немного подробнее поговорим ниже в статье.

RSPageBuilder
RSPageBuilder

Вкладка Настройки Open Graph содержит поля, позволяющие задать нужные Вам заголовок, изображение и описание для Open Graph. Open Graph – мета-информация для социальных сетей, чтобы заметки о странице Вашего сайта, которыми делятся (шарят) посетители в социальные сети, были более красивыми и информативными. Протокол Open Graph поддерживают Facebook, Одноклассники, Twitter, ВКонтакте, Google+, LinkedIn, Pinterest и другие.

Вкладка Настройки мета-данных содержит поля Мета-тег Description, Мета-тег Keywords и Мета-тег Robots. Это поможет в SEO.

Вкладка Параметры публикации содержит стандартные для Joomla поля типа: Состояние, Доступ, Язык, Дата создания и т.д. Тут можно сменить статус публикации страницы, указать автора, язык и другие данные.

На первой вкладке Настройки страницы Вы сможете создать макет страницы.

Версия Bootstrap. В верхней части вкладки (над основной рабочей областью сетки макета страницы) Вы сможете выбрать версию Bootstrap. По умолчанию выбрана 2-я версия Bootstrap. Рекомендую её оставить. Но если возникли проблемы с совместимостью шаблона сайта и станиц RSPageBuilder, тогда переключитесь на 3-ю. Стоит отметить что при переключении с версии на версию будут возникать проблемы с созданными страницами. Поэтому определитесь с данной опцией до начала создания страниц.

Страница во всю ширину. Если эта опция включена, то вся страница будет занимать 100% ширины области окна браузера.

Опция Добавить строку добавляет строку в макет страницы. А вот столбцы создаются при помощи других инструментов и в рамках строк.

На примере 2-х элементов рассмотрим основные инструменты для создания макета страницы и управления её элементами (рисунок ниже).

Page builder Joomla
Page builder Joomla
  1. Иконка элемента. Не отображается во фронтальной части сайта.
  2. Заголовок элемента. Отображается во фронтальной части сайта, над элементом. Этого заголовка может и не быть. Решать Вам. Внешний вид зависит от настроек элемента и применяемых CSS.
  3. Область элемента. За неё можно «взять» курсором мыши и переместить в другое место.
  4. Название элемента (его «тип»). Не отображается во фронтальной части сайта.
  5. Настройки столбца. Открывает всплывающее окно (рисунок ниже) с настройками столбца (столбцы внутри строки). Тут Вы сможете задать заголовок и подзаголовок столбца, его выравнивание, выбрать анимацию столбца и настроить её параметры. Также сможете задать ID и\или CSS класс для его стилизации при помощи стилей. Еще можно задать класс заголовка\подзаголовка столбца (h1-h6), размер шрифта (в разных единицах (пиксели, em, rem)), начертание, выравнивание и цвет. Плюс, можно задать поля и отступы заголовка\подзаголовка и всего столбца в целом.
Конструктор страниц Joomla
Конструктор страниц Joomla
  1. Редактирование элемента. Открывает всплывающее окно с настройками элемента. Об этом можно прочесть немного ниже в статье.
  2. Показать HTML элемента. Отображает HTML-код элемента (рисунок ниже). Его можно скопировать, но менять нельзя.
Показать HTML элемента
Показать HTML элемента
  1. Дублировать элемент. Дублирует элемент в текущий столбец\строку. Затем можно его перенести и изменить.
  2. Удалить элемент. Удаляет элемент.
  3. Добавить строку. Добавляет новую строку в макет страницы (в самый низ макета). Затем можно её переместить.
  4. Дублировать строку. Создаёт дубликат строки под текущей строкой. Затем можно будет изменить настройки сдублированной строки и её элементов.
  5. Настройки строки. Открывает всплывающее окно (рисунок ниже) с настройками строки. Они аналогичны настройкам столбца, но для строки можно задать фоновое изображение, например, для создания параллакс эффекта. Плюс, можно задать отображение строки во всю ширину окна браузера. Даже если для опции Страница во всю ширину задано Нет.
Конструктор контента Joomla 3
Конструктор контента Joomla 3
  1. Удалить строку. Удаляет строку со всем её содержимым.
  2. Добавление элемента. Позволяет добавить один из элементов конструктора страниц Joomla 3 (рисунок ниже).
Элементы RSPageBuilder
Элементы RSPageBuilder
  1. Разделение строки на столбцы. Позволяет разделить строку на столбцы для помещения в столбцах различных элементов. Доступны такие варианты: 1/1, 1/2+1/2, 1/3+1/3+1/3, 1/4+1/4+1/4+1/4, 1/3+2/3, 1/4+3/4, 1/4+1/2+1/4, 1/6+1/2+1/3, 1/6+5/6, 5/12+7/12. Если пиктограмма подсвечена, значит это соотношение применено к текущей строке.

Элементы

На данный момент (17.05.2017) в конструкторе страниц Joomla RSPageBuilder 1.0.8.

  1. Аккордеон.
  2. Анимированная цифра.
  3. Видео.
  4. Вкладка.
  5. Горизонтальная область с изображением.
  6. Горизонтальная область с иконкой.
  7. Изображение.
  8. Иконка.
  9. Карта Google.
  10. Карусель.
  11. Кнопка.
  12. Круги прогресса.
  13. Личная область.
  14. Модуль. Этот элемент позволяет отображать любой созданный Вами модуль менеджера модулей Joomla внутри сетки страницы RSPageBuilder.
  15. Область вертикального изображения.
  16. Область вертикальной иконки.
  17. Область отзывов.
  18. Область фонового видео YouTube.
  19. Область цен.
  20. Оповещение.
  21. Полоса прогресса.
  22. Разделитель.
  23. Список.
  24. Текстовый блок.
  25. Фильтр портфолио.

Плюс, в списке элементов, в разделе My Elements собраны элементы, которые есть у Вас на страницах RSPageBuilder. Так Вы сможете быстрее их добавлять на другие страницы.

У каждого элемента есть набор опций. Как уникальных для каждого элемента, так и одинаков для всех. Рассмотрим некоторые из этих объектов.

Например, так выглядят элементы Текстовый блок, Кнопка и Личная область в админке конструктора контента Joomla (рисунок ниже).

Элементы конструктора контента Joomla 3
Элементы конструктора контента Joomla 3

А так они выглядят на сайте. На картинку в правом верхнем углу наведён курсор мыши. «Живой» пример можно посмотреть тут.

Элементы на сайте
Элементы на сайте

Настройки объекта Текстовый блок (рисунок ниже) разделены на 4 вкладки. На вкладках Размер, Цвет и Пробел собраны почти те же опции, что и для одноимённых вкладок в настройках столбцов и строк макета (рассмотрены выше в статье). В большинстве случаев они аналогичны для всех элементов. А вот на вкладке Основы собраны «уникальные» опции для каждого элемента.

Настройки элемента Текстовый блок
Настройки элемента Текстовый блок

В левой части окна собраны настройки, а справа (или снизу), в большинстве элементов, сразу видно, что Вы получите на сайте.

Настройки объекта Кнопка (рисунок ниже) содержат свои «уникальные» опции и некоторые схожие с другими элементами опции.

Настройки элемента кнопка
Настройки элемента кнопка

Настройки объекта Разделитель (рисунок ниже).

Настройки элемента Разделитель
Настройки элемента Разделитель

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

Горизонтальная область с изображением
Горизонтальная область с изображением

Настройки объекта Горизонтальная область с изображением (рисунок ниже).

Настройки элемента Горизонтальная область с изображением
Настройки элемента Горизонтальная область с изображением

На рисунке ниже показаны элементы Область вертикальной иконки во фронтальной части сайта.

Область вертикальной иконки
Область вертикальной иконки

Настройки объекта Область вертикальной иконки (рисунок ниже).

Настройки элемента Область вертикальной иконки
Настройки элемента Область вертикальной иконки

На рисунке ниже показаны элементы Область цен во фронтальной части сайта. Это то, что принято называть «Таблица цен».

Область цен
Область цен

На рисунке ниже показаны настройки объекта Область цен. Причём, вкладки Основы, Размер, Цвет и Пробел особо ничем не отличаются от опций в выше рассмотренных элементах. Но тут есть дополнительная вкладка – Элементы.

Настройки элемента Область цен
Настройки элемента Область цен

У каждого элемента есть свои опции (рисунок ниже).

Настройки элемента
Настройки элемента

Ниже на рисунке показан пример одного и того же элемента Карусель, но с разными настройками. Как видите, page builder Joomla позволяет создавать визуально достаточно разные объекты даже из одного и того же элемента.

Карусель
Карусель

Так (рисунок ниже) выглядят настройки первого объекта Карусель. Того, что не во всю ширину и с текстом в правой части.

Настройки элемента Карусель (1)
Настройки элемента Карусель (1)

А так (рисунок ниже) выглядят настройки второго объекта Карусель. Того, что во всю ширину и с текстом поверх изображения.

Настройки элемента Карусель (2)
Настройки элемента Карусель (2)

Ниже на рисунке слева показан пример элемента Список, а справа – Карта Google.

Элементы Список и Карта Google
Элементы Список и Карта Google

Так выглядят настройки элемента конструктора контента Joomla 3 Список (рисунок ниже).

Настройки элемента Список
Настройки элемента Список

А так выглядят настройки элемента Карта Google (рисунок ниже). Обратите внимание, что на вкладке Элементы Вы сможете добавлять и настраивать маркеры карты.

Настройки элемента Карта Google
Настройки элемента Карта Google

Модуль и пункт меню

Страницы, созданные в компоненте RSPageBuilder можно вывести во фронтальную часть сайта при помощи пункта меню тип RSPageBuilder! – Страница в менеджере меню Joomla. Никаких особых настроек у этого пункта меню нет.

Помимо компонента есть модуль «Элементы RSPageBuilder!» (рисунок ниже). В нём, по аналогии с компонентом, можно разместить различные элементы и настроить их. Отличие только в том, что тут нельзя создавать столбцы и строки в сетке макета. Макет простой – все элементы находятся в столбце друг под другом.

Модуль RSPageBuilder
Модуль RSPageBuilder

Как уже можно понять, общая «методика» работы с page builder Joomla такова:

  1. Создать страницу или модуль
  2. Внутри создать и настроить модульную сетку.
  3. Разместить элементы на модульной сетке.
  4. Настроить элементы.
  5. Вывести во фронтальной части сайта пункт меню созданной страницы или модуль RSPageBuilder.

Всё выглядит достаточно просто. Как делать, то есть при помощи каких инструментов, в общем-то, понятно. А вот что именно должно в итоге получиться – это гораздо более сложная задача. То есть, нужно знать, какой именно контент будет размещён, где и в каком виде. Необходимо его заранее подготовить. Особенно это касается лендингов. А при помощи RSPageBuilder как раз хорошо их создавать. Не достаточно просто овладеть инструментарием. Нужно чётко понимать цели\задачи страницы, заранее подготовить макет (дизайн) и весь необходимый контент (тексты, изображения, видео, инфографику и т.д.). По сути, создание нормального лендинга - это работа для нескольких людей: «идеолога» (им может быть SEO-специалист, интернет-маркетолог), дизайнера, автора (или, на худой конец, копирайтера), фотографа, видео-оператора.

Но не взирая на сложность создания лендингов, RSPageBuilder позволяет упростить техническую часть вопроса.

Пример и опыт

Дополняю статью примером (11.06.2017). Сайт Magazin.aleksius.com Joomla 3.6.5, RSPageBuilder 1.0.8, шаблон сайта JM Computers and Electronics VirtueMart Storeу 1.0.7. Изменял только главную страницу сайта.

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

Старая версия страницы
Старая версия страницы

Затем составлено задание для дизайнера, и он создал макет (рисунок ниже).

Дизайн главной страницы
Дизайн главной страницы

Сейчас (10.06.2017) она выглядит так, как показано на рисунке ниже.

Новая версия страницы
Новая версия страницы

По различным причинам я не смог создать именно то, что заложено в макете дизайна. Некоторые из них:

  • Низкий уровень владения CSS и HTML.
  • Отсутствие знаний PHP и SQL.
  • Желание сохранить возможность обновления расширений с минимальными затратами по времени. А это значит, что вносить правки в код расширений нельзя, а если и можно, то только в макеты расширений.
  • Нежелание большинства клиентов моего магазина оставлять отзывы, а уж тем более, давать свои фотографии.

Для реализации главной страницы использовал RSPageBuilder 1.0.8, изменил настройки шаблона (разделив его на два стиля) и дополнил таблицу стилей шаблона некоторыми CSS-правилами. В основном, это добавление отступов, выравнивание, изменения шрифтов, межстрочного расстояния и другие мелочи. Большую часть RSPageBuilder позволил сделать его штатными средствами. Подвал с 4-мя модулями: «Контакты», «Оплата», «Доставка» и «Преимущества» создавался средствами самой Joomla, модулей «HTML-код» и небольшими правками таблицы стилей шаблона.

Шапка сайта с логотипом, горизонтальным меню, переключателем валюты, корзиной и кнопкой, открывающей меню пользователя, сделаны при помощи модулей Joomla, VirtueMart 3, DJ-MegaMenu и BT Login.

Макет главной страницы в RSPageBuilder показан на рисунке ниже.

Макет главной страницы в RSPageBuilder
Макет главной страницы в RSPageBuilder

На рисунке ниже показано соотношение элементов макета RSPageBuilder и тем, что получилось на сайте. Элемент Модуль («Отзывы») – это модуль компонента DJ-Reviews. Он обновляется автоматически при добавлении отзывов к товарам.

Соотношение макета страницы RSPageBuilder и самой страницы
Соотношение макета страницы RSPageBuilder и самой страницы

Изначально я реализовал блок «Преимущества» и «Оплата» при помощи элементов RSPageBuilder «Изображение». Но затем отказался от этого в пользу элементов «Текстовый блок». Сделал это из-за количества запросов (оптимизация скорости загрузки). Помимо задачи сделать страницу менее топорной (внешне), сохранить адаптивность, возможность последующего обновления расширений была ещё задача сделать страницу максимально быстрой в плане загрузки.

Для оптимизации скорости загрузки проделана работа:

  • Все растровые изображения приводились к масштабу 1:1, максимально сжимались с потерей (Adobe Photoshop CS6) и без потери качества (FileOptimizer).
  • Кэширование при помощи JotCache. Никаких исключений для RSPageBuilder прописывать не пришлось. Страница прекрасно закэшировалась.
  • Сжатие CSS и JS, а также отложенная загрузка скриптов. Всё это было сделано штатными средствами шаблона.

Также были применены различные настройки оптимизации (модуль PageSpeed), доступные на моём хостинге.

  • Объединять все скрипты JavaScript в один файл.
  • Объединять все стили CSS в один файл.
  • Переместить стили CSS перед JavaScript скриптами.
  • Предварительный резолвинг DNS.
  • Минимизировать JavaScript.
  • Минимизировать CSS.
  • Оптимизировать CSS в атрибутах style.
  • Отложенная загрузка изображений.
  • Объединять пробелы.
  • Переместить CSS в head.
  • Удалять лишние кавычки.
  • Переместить небольшие внешние CSS в HTML.
  • Переместить небольшие внешние JavaScript в HTML.
  • Оптимизировать URL в атрибутах href и src.
  • Согласовать META теги с HTTP заголовками.
  • Расширить кеширование изображений.
  • Расширить кеширование JavaScript.
  • Расширить кеширование CSS.

Стоит отметить, что из-за некоторых из этих опций стало невозможно редактировать элементы RSPageBuilder в админке. Но после их отключения всё работало отлично.

Также был обнаружен конфликт RSPageBuilder и процесса редактирования некоторых его элементов с активированным WAF (Web Application Firewall) для админки. В качестве WAF применялся RSFirewall. Можно или отключить опцию Включить активный сканер для административной панели в настройках фаервола, или написать исключение. Тип исключенияКомпонент, Соответствие – «com_rspagebuilder» (без кавычек); включить только одну опцию Отключить защиту PHP.

Больше всего в ходе оптимизации скорости загрузки главной страницы заняла работа по сокращению количества запросов к серверу. Для этого 4 отдельные картинки области «Преимущества» были объединены в одну (CSS-спрайты). 12 отдельных картинок области «Оплата» были объединены в одну (CSS-спрайты). 3 отдельные картинки модуля «Контакты» были объединены в одну (HTML карта кликов (карты-изображения)). Вместо 19 запросов стало 3. Плюс, удалось уменьшить «вес» изображений, примерно на 5-10%. Объединение изображений производилось при помощи сервиса «CSS Sprites Generator», он же формировал часть CSS-стилей.

В связи с возникшими трудностями не стал объединять иконки телефона и конверта в модуле «Контакты».

Также не стал сводить в одну картинку преимущества и логотипы платёжных систем. Это было сделано умышленно. По данным карты скроллинга Яндекс.Метрики низ страницы просматривают менее 20% посетителей. А изображения преимуществ находятся в верхней части страницы и загружаются всегда. Также на сервере включена опция Отложенная загрузка изображений. Она позволяет не загружать изображение платёжных систем, если пользователь не прокручивает страницу вниз. Ко всему изображение платёжных систем больше по объёму. Если бы я свёл все изображения в одно, то и пользователям пришлось бы загружать их все. Это привело бы к ухудшению скорости загрузки. Тогда бы я сэкономил 1 запрос, но потерял бы по скорости.

Ниже показан фрагмент HTML-кода модуля «Контакты», сама карта кликов.

<img src="/images/sluzhebnye/kontakty/sotsialnye-seti.png" alt="Соц. сети ВК, FB, G+" usemap="#sotsialnye-seti" width="107" height="29" border="0" /> <map name="sotsialnye-seti">
<area title="В контакте" alt="ВК" coords="0,0,29,29" shape="rect" href="https://vk.com/horoshevsky_alex" target="_blank" rel="nofollow" />
<area title="Facebook" alt="FB" coords="39,0,68,29" shape="rect" href="http://www.facebook.com/aleksej.horoshevskij" target="_blank" rel="nofollow" />
<area title="Google+" alt="G+" coords="78,0,107,29" shape="rect" href="https://plus.google.com/102101364649782322365" target="_blank" rel="nofollow" />
</map>

А так выглядят настройки текстового блока преимуществ (рисунок ниже).

Настройка текстового блока преимуществ
Настройка текстового блока преимуществ

Исходный код содержимого таков:

<div class="bg-na_russkom_yazyke"> </div>
<p style="text-align: center; line-height: 3;"> <strong><span class="rspbld-image-caption">На русском языке</span></strong></p>

Ниже представлен фрагмент таблицы стилей для обеспечения внешнего вида преимуществ таким, каким Вы видите их на странице.

.obvodka {   
   border-color: #c1c1c1;
   border-style: solid;
   border-width: 1px;
   height: 230px;
   max-width: 230px;
   margin: 0 auto !important;
}

.rspbld-grow {
   margin: 10px 0;
}

.bg-na_russkom_yazyke {
    width: 88px; height: 87px;
    background: url('../../../images/sluzhebnye/preimushchestva/preimushchestva.png') -91px -87px;
    margin: 0 auto;
}

Класс «.bg-na_russkom_yazyke» как раз и «является» CSS-спрайтом.

Благодаря этим работам страница сайта грузится достаточно оперативно.

Результаты Web Page Performance:

Результаты Web Page Performance
Результаты Web Page Performance

Результаты GTmetrix:

Результаты GTmetrix
Результаты GTmetrix

Результаты Google PageSpeed Insights (для мобильных):

Результаты Google PageSpeed Insights (для мобильных)
Результаты Google PageSpeed Insights (для мобильных)

Результаты Google PageSpeed Insights (для компьютеров):

Результаты Google PageSpeed Insights (для компьютеров)
Результаты Google PageSpeed Insights (для компьютеров)

Результаты Pingdom Website Speed Test.

Результаты Pingdom Website Speed Test
Результаты Pingdom Website Speed Test

 

Полезные ссылки: