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

 

 

JM Cleaning Company – это шаблон сайта клининговой компании для Joomla 3 на русском языке. Он адаптивный, основан на Bootstrap, современный, стильный и прекрасно настраивается. Отмечу, что его с лёгкостью можно использовать для сайтов любой направленности, не только клининговых фирм. Пример минималистского шаблона Joomla есть на сайте разработчика – Joomla-Monster.com.

Обзор будет проходить в последней, на момент написания статьи (07.03.2016), русскоязычной версии шаблона JM Cleaning Company 1.0.2 (фреймворк EF4 4.6.0) на Joomla 3.4.8. Демонстрационные данные на основании «быстрого старта» сайта клининговой компании (на английском языке). Помимо самого шаблона, вы получите лицензию на такие расширения (версии указаны на момент написания статьи):

  • DJ-MediaTools 2.6.1. Компонент галереи изображений и видео для Joomla.
  • DJ-MegaMenu 3.3.2. Компонент (модуль, плагин) меню, мега-меню и мобильного меню с множеством настроек и поддержкой вставки модулей в меню.
  • DJ-Tabs 1.3.1. Компонент вкладок и аккордеона.

Особенности JM Cleaning Company

Помимо присущих всем шаблонам от Joomla-Monster.com на фреймворке EF4 особенностей у этого шаблона доски Joomla есть свои отличия. Кроме ориентации на сайты клининговых компаний в шаблоне предусмотрены дополнительные цветовые модификации (рисунок ниже), которые позволят Вам менять цвет некоторых элементов сайта без правки кода.

JM Cleaning Company
JM Cleaning Company

Большинство опций выше понятны из их названия или описаны в предыдущих статьях (ссылка выше). При помощи опций Цвет текста Color1-ms, Цвет фона Color2-ms и Цвет текста Color2-ms  можете настроить цвет соответствующих элементов модуля в случаях, когда данный суффикс CSS-класса модуля будет применён к тому или иному модулю. Подробнее об этом можно прочесть в статье «Обзор JM Joomads. Адаптивный шаблон Joomla 3».

Построитель макета и Bootstrap в Joomla

В статье «Обзор JM Job Listings. Шаблон каталога Joomla» был достаточно подробно рассмотрен построитель макета. Шаблоны Joomla-Monster.com на фреймворке EF4 также поддерживают фреймворк Bootstrap. Bootstrap содержит в себе HTML и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, навигации и других элементов веб-интерфейса сайта. Одной из особенностей Bootstrap является 12-и колоночная сетка макета страницы.

В нижней части раздела Построитель макета, шаблона JM Cleaning Company, и других шаблонов Joomla-Monster.com, есть ссылка на англоязычную статью «How to understand bootstrap grid system?» (с англ. «Как разобраться в системе сетки bootstrap?»). Основываясь на данной статье, поясню особенности шаблона Bootstrap Joomla на примере JM Cleaning Company. Это поможет более осознанно подойти к настройкам построителя макета (если это понадобится), а также понять принцип настройки\работы опции Размер Bootstrap в модулях Joomla (рисунок ниже).

Менеджер модулей
Менеджер модулей

Все шаблоны Joomla-Monster.com могут использовать фиксированную или «резиновую» ширину макета\сетки.

Фиксированная ширина

В этом случае «поведение» макета шаблона зависит от разрешения экрана устройства, на котором просматривают сайт. Вернее, шаблон будет подстраиваться под «рабочую» область окна браузера, в котором просматривается сайт. Это гораздо правильнее, на мой взгляд, так как пользователи могут открывать браузер не во всю ширину экрана. Дальше по тексту буду употреблять понятие «ширина экрана», понимая именно «рабочую» область окна браузера, в котором просматривается сайт.

Под поведением понимаю пристраивание взаимного расположения модулей и элементов сайта и изменение их размера. Например, на рисунке ниже показан шаблон сайта клиринговой компании при разрешении экрана 1920х1080 (с фиксированной шириной).

Шаблон сайта клининговой компании
Шаблон сайта клининговой компании

На рисунке ниже показан этот же шаблон, но при разрешении 768х1024 (ширина и высота).

Шаблон Bootstrap Joomla
Шаблон Bootstrap Joomla

На рисунке ниже показан этот же шаблон, но при разрешении 360х640 (ширина и высота).

Сайт на мобильном телефоне
Сайт на мобильном телефоне

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

Мобильное меню
Мобильное меню

В построителе макета, на вкладке Настроить отзывчивый макет (рисунок ниже), по умолчанию есть пять предварительно настроенных макетов страницы в зависимости от ширины экрана.

 

Название

Описание

Ширина экрана

Ширина шаблона

Большой экран

Как правило, это настольный компьютер или ноутбук

1200 пикселей и более

1170 пикселей

Нормальный экран

Как правило, это планшет в горизонтальной (альбомной) ориентации или настольный компьютер

980-1199 пикселей

940 пикселей

Средний экран

Как правило, это планшет

768-979 пикселей

724 пикселя

Маленький экран

Как правило, это планшет в вертикальной (книжной) ориентации или телефон в горизонтальной (альбомной) ориентации.

481-767 пикселей

Все колонки шаблона (позиции модулей) отображаются одна под другой с шириной 100% от ширины экрана

Очень маленький экран

Как правило, это телефон

480 пикселей и меньше

Все колонки шаблона  отображаются одна под другой с шириной 100% от ширины экрана

 

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

На рисунках ниже приведены примеры макета страницы (сетки модулей) шаблона Bootstrap Joomla JM Cleaning Company 1.0.2 для разных настроек отзывчивого экрана (для разной ширины). Обратите внимание, что у других шаблонов Joomla-Monster.com количество и расположение позиций модулей могут отличаться. Изображения пропорционально отмасштабированы для удобства восприятия.

Большой экран
Большой экран
Нормальный экран
Нормальный экран
Средний экран
Средний экран
Маленький экран
Маленький экран
Очень маленький экран
Очень маленький экран

Обратите внимание, что максимальная ширина шаблона, в таблице выше это значение «1170» задаётся в настройках построителя макета.

Шаблон для Joomla 3.4 на русском языке
Шаблон для Joomla 3.4 на русском языке

О том, как создать разные макеты и присвоить их разным страницам Вы можете прочесть в статье «Обзор JM Beauty Center. Шаблон Joomla для салона красоты». А о том, как добавлять новые блоки и позиции модулей Вы можете прочесть в стать «Обзор JM Real Estate Ads. Шаблоны недвижимости Joomla 3». Также можно добавить свои собственные CSS-стили для каждого из макетов. Об этом читайте в статье «Обзор JM Trips. Туристический шаблон Joomla».

«Резиновая» ширина

Если в настройках построителя макета Вы указали в поле Ширина шаблона значение не в пикселях («px» – нужно указывать на английском, без кавычек), а в процентах «%», то в этом случае, элементы сайта будут занимать всю ширину экрана.

Например, на рисунке ниже показан шаблон сайта клиринговой компании при разрешении экрана 1920х1080 (с «резиновой» шириной – 100%).

Шаблон сайта клининговой компании (2)
Шаблон сайта клининговой компании (2)

При разрешении 768х1024 и 360х640 сайт выглядит так же, как и при фиксированной ширине.

Настоятельно рекомендую взвешенно подойти к вопросу «резиновой» ширины. Так как читать на экранах с большим разрешением и диагональю может быть неудобно из-за длины строки. На рисунке ниже показан пример материала Joomla (текст) при разрешении экрана 1920х1080 (с «резиновой» шириной – 100%). Длина строки, примерно, составила 170 символов с пробелами.

Материал
Материал

Задав фиксированную ширину макета (1170 пикселей), тот же материал при разрешении экрана 1920х1080 выглядит так, как показано на рисунке ниже. Длина строки, примерно, составила 100 символов с пробелами. На мой взгляд, читать текст с такой длинной строки, гораздо удобнее.

Материал (2)
Материал (2)

Более того, учитывайте, что в продаже уже есть мониторы с шириной экрана 2560, 3440, 3840, 4096 и 5120 пикселей (от 25 до 35 дюймов по диагонали). На них Ваш «резиновый» сайт будет выглядеть не очень хорошо. Особенно, если у Вас «классический» сайт, а не интернет-сервис статистики (типа Яндекс.Метрика), сайт-кинотеатр или подобное, где большая площадь экрана явный плюс.

Но даже с «резиновой» шириной и «классическими» сайтами можно придумать удобную комбинацию. Например, выставлять не 100%, а меньше. Или добавлять контент по бокам сайта (в модулях), при ширине экрана более чем ХХХХ пикселей. Возможно, стоит принудительно ограничить ширину через CSS-стили, как это делается для обеспечения отзывчивого макета.

Идея 12-и колоночной сетки Bootstrap

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

Идея 12-и колоночной сетки Bootstrap
Идея 12-и колоночной сетки Bootstrap

Если Вы пожелаете расположить 6 модулей в одной позиции в строку, и хотите, чтобы модули были одинаковой ширины, то в настройках каждого модуля, на вкладке Дополнительные параметры, для опции Размер Bootstrap нужно указать «2».

Сумма указанных и используемых размеров Bootstrap должна быть 12.

Для 4-х модулей – у каждого нужно указать «3»; для 3-х – «4»; для 2-х – «6». На рисунке ниже показан пример расположения 3-х модулей «Make an appointment», «Send us a message», «Visit us» в одной позиции. Для каждого из модулей на вкладке Дополнительные параметры, для опции Размер Bootstrap указано «4».

Пример 3-х модулей в 1-й позиции
Пример 3-х модулей в 1-й позиции

Не обязательно задавать равную ширину всем модулям (рисунок ниже), но сумма всё равно должна быть 12 (в рамках одной позиции шаблона). Ширина одного модуля (или контейнера, если говорим про макет шаблона) может быть любым числом (от 0 до 12), тем самым Вы можете регулировать ширину каждого отдельного модуля, по отношению к другим модулям в этой позиции.

Разная ширина модулей
Разная ширина модулей

Есть важное отличие в применении 12-и колоночной сетки Bootstrap при фиксированной и «резиновой» ширине шаблона. Рассмотрим их на примерах.

Сетка Bootstrap при фиксированной и «резиновой» ширине

Немного определимся с терминологией.

  • Ячейка (клетка) – столбец сетки Bootstrap.
  • Контейнер – содержит позиции шаблона.
  • Позиция шаблона – содержит модули сайта.
  • Столбец (колонка) – элемент макета шаблона. Например, левая колонка, правая колонка и средняя колонка (колонка содержимого (контента)).

На рисунке ниже:

  • «TOP-BAR-1» (и другие аналогичные надписи) – позиции шаблона.
  • «6х», «12х», «3х» – ячейки (клетки).
  • «1» – контейнеры.

На рисунке ниже показан пример сетки Bootstrap при фиксированной ширине шаблона.

Сетка Bootstrap при фиксированной ширине
Сетка Bootstrap при фиксированной ширине

Все контейнеры позиций модулей, которые отображаются в одной строке, в сумме должны равняться 12 ячейкам (клеткам). Если Вам нужно разделить любую из позиций шаблона на несколько столбцов, нужно помнить, что сумма ячеек должна быть 12.

На рисунке ниже показан пример сетки Bootstrap при «резиновой» ширине шаблона.

Сетка Bootstrap при «резиновой» ширине
Сетка Bootstrap при «резиновой» ширине

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

Это отличие влияет на то, какое именно число (от 0 до 12) Вы зададите для каждого из модулей, в одной позиции, на вкладке Дополнительные параметры, в опции Размер Bootstrap, чтобы добиться нужного эффекта (соотношения ширины каждого модуля на сайте).

Пример №1. Есть две позиции в одной строке, в каждой позиции нужно разместить по два модуля.

  1. Первый модуль левой позиции должен занимать 15% всей ширины экрана.
  2. Второй модуль левой позиции должен занимать 35% всей ширины экрана.
  3. Первый модуль правой позиции должен занимать 25% всей ширины экрана
  4. Второй модуль правой позиции должен занимать 25% всей ширины экрана.

Задача сделать так, чтобы такое соотношение сохранилось и при фиксированной ширине и при «резиновой» (при условии изменения настроек модулей, располагающихся в этих позициях). То есть, нужно найти значения опций Размер Bootstrap каждого из модулей для каждой из ширин (фиксированная\«резиновая»).

На рисунке ниже визуально видно, что для достижения поставленной задачи для фиксированной ширины экрана нужно задать следующие опций Размер Bootstrap:

  1. Для первого модуля в левой позиции – «2».
  2. Для второго модуля в левой позиции – «4».
  3. Для первого модуля в правой позиции – «3».
  4. Для второго модуля в правой позиции – «3».
Пример 1. С фиксированной шириной
Пример 1. С фиксированной шириной

На рисунке ниже визуально видно, что для достижения поставленной задачи для «резиновой» ширины экрана нужно задать следующие опций Размер Bootstrap (учитывая особенность разделения каждого столбца на 12 ячеек):

  1. Для первого модуля в левой позиции – «4».
  2. Для второго модуля в левой позиции – «8».
  3. Для первого модуля в правой позиции – «6».
  4. Для второго модуля в правой позиции – «6».
    Пример 1. С «резиновой» шириной
    Пример 1. С «резиновой» шириной

Пример №2. Есть одна позиция в одной строке, в ней нужно разместить три модуля.

  1. Первый модуль должен занимать 25% всей ширины экрана.
  2. Второй модуль должен занимать 35% всей ширины экрана.
  3. Третий модуль должен занимать 50% всей ширины экрана.

Задача та же, что и в примере №1: сделать так, чтобы такое соотношение сохранилось и при фиксированной ширине и при «резиновой» (при условии изменения настроек модулей, располагающихся в этих позициях). То есть, нужно найти значения опций Размер Bootstrap каждого из модулей для каждой из ширин (фиксированная\«резиновая»).

На рисунках ниже визуально видно, что для достижения поставленной задачи для фиксированной и «резиновой» ширины экрана нужно задать одинаковые настройки Размер Bootstrap, так как в случае с «резиновой» шириной экрана в строке только один столбец:

  1. Для первого модуля – «3».
  2. Для второго модуля – «3».
  3. Для третьего модуля– «6».
Пример 2. С фиксированной шириной
Пример 2. С фиксированной шириной
Пример 2. С «резиновой» шириной
Пример 2. С «резиновой» шириной

Русификатор  JM Cleaning Company

Скачать русификатор JM Cleaning Company.

 

Надеюсь, что материал касательно сетки шаблона Bootstrap Joomla помог Вам разобраться с её особенностями и настройка модулей станет более понятной, простой и быстрой.

 

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