Обзор JM Cleaning Company. Шаблон сайта клининговой компании
- Тип – профессиональный шаблон Bootstrap Joomla на русском языке.
- Особенности JM Cleaning Company.
- Построитель макета и Bootstrap в Joomla.
- Русификатор JM Cleaning Company.
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 есть свои отличия. Кроме ориентации на сайты клининговых компаний в шаблоне предусмотрены дополнительные цветовые модификации (рисунок ниже), которые позволят Вам менять цвет некоторых элементов сайта без правки кода.
Большинство опций выше понятны из их названия или описаны в предыдущих статьях (ссылка выше). При помощи опций Цвет текста 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-и колоночная сетка макета страницы.
В статье «Видео уроки DJ-Catalog2 (часть 4). Разработка каталога» показано как можно узнать расположение и название позиций шаблона при помощи построителя макета.
В нижней части раздела Построитель макета, шаблона 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 (ширина и высота).
На рисунке ниже показан этот же шаблон, но при разрешении 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» задаётся в настройках построителя макета.
О том, как создать разные макеты и присвоить их разным страницам Вы можете прочесть в статье «Обзор JM Beauty Center. Шаблон Joomla для салона красоты». А о том, как добавлять новые блоки и позиции модулей Вы можете прочесть в стать «Обзор JM Real Estate Ads. Шаблоны недвижимости Joomla 3». Также можно добавить свои собственные CSS-стили для каждого из макетов. Об этом читайте в статье «Обзор JM Trips. Туристический шаблон Joomla».
«Резиновая» ширина
Если в настройках построителя макета Вы указали в поле Ширина шаблона значение не в пикселях («px» – нужно указывать на английском, без кавычек), а в процентах «%», то в этом случае, элементы сайта будут занимать всю ширину экрана.
Например, на рисунке ниже показан шаблон сайта клиринговой компании при разрешении экрана 1920х1080 (с «резиновой» шириной – 100%).
При разрешении 768х1024 и 360х640 сайт выглядит так же, как и при фиксированной ширине.
Настоятельно рекомендую взвешенно подойти к вопросу «резиновой» ширины. Так как читать на экранах с большим разрешением и диагональю может быть неудобно из-за длины строки. На рисунке ниже показан пример материала Joomla (текст) при разрешении экрана 1920х1080 (с «резиновой» шириной – 100%). Длина строки, примерно, составила 170 символов с пробелами.
Задав фиксированную ширину макета (1170 пикселей), тот же материал при разрешении экрана 1920х1080 выглядит так, как показано на рисунке ниже. Длина строки, примерно, составила 100 символов с пробелами. На мой взгляд, читать текст с такой длинной строки, гораздо удобнее.
Более того, учитывайте, что в продаже уже есть мониторы с шириной экрана 2560, 3440, 3840, 4096 и 5120 пикселей (от 25 до 35 дюймов по диагонали). На них Ваш «резиновый» сайт будет выглядеть не очень хорошо. Особенно, если у Вас «классический» сайт, а не интернет-сервис статистики (типа Яндекс.Метрика), сайт-кинотеатр или подобное, где большая площадь экрана явный плюс.
Но даже с «резиновой» шириной и «классическими» сайтами можно придумать удобную комбинацию. Например, выставлять не 100%, а меньше. Или добавлять контент по бокам сайта (в модулях), при ширине экрана более чем ХХХХ пикселей. Возможно, стоит принудительно ограничить ширину через CSS-стили, как это делается для обеспечения отзывчивого макета.
Идея 12-и колоночной сетки Bootstrap
Система сеток Bootstrap позволяет разместить много модулей в одной и той же позиции шаблона. Более того, Вы можете задать, какое количество столбцов должен занимать каждый модуль. Общая идея деления позиции модуля показана на рисунке ниже.
Если Вы пожелаете расположить 6 модулей в одной позиции в строку, и хотите, чтобы модули были одинаковой ширины, то в настройках каждого модуля, на вкладке Дополнительные параметры, для опции Размер Bootstrap нужно указать «2».
Сумма указанных и используемых размеров Bootstrap должна быть 12.
Для 4-х модулей – у каждого нужно указать «3»; для 3-х – «4»; для 2-х – «6». На рисунке ниже показан пример расположения 3-х модулей «Make an appointment», «Send us a message», «Visit us» в одной позиции. Для каждого из модулей на вкладке Дополнительные параметры, для опции Размер Bootstrap указано «4».
Не обязательно задавать равную ширину всем модулям (рисунок ниже), но сумма всё равно должна быть 12 (в рамках одной позиции шаблона). Ширина одного модуля (или контейнера, если говорим про макет шаблона) может быть любым числом (от 0 до 12), тем самым Вы можете регулировать ширину каждого отдельного модуля, по отношению к другим модулям в этой позиции.
Есть важное отличие в применении 12-и колоночной сетки Bootstrap при фиксированной и «резиновой» ширине шаблона. Рассмотрим их на примерах.
Сетка Bootstrap при фиксированной и «резиновой» ширине
Немного определимся с терминологией.
- Ячейка (клетка) – столбец сетки Bootstrap.
- Контейнер – содержит позиции шаблона.
- Позиция шаблона – содержит модули сайта.
- Столбец (колонка) – элемент макета шаблона. Например, левая колонка, правая колонка и средняя колонка (колонка содержимого (контента)).
На рисунке ниже:
- «TOP-BAR-1» (и другие аналогичные надписи) – позиции шаблона.
- «6х», «12х», «3х» – ячейки (клетки).
- «1» – контейнеры.
На рисунке ниже показан пример сетки Bootstrap при фиксированной ширине шаблона.
Все контейнеры позиций модулей, которые отображаются в одной строке, в сумме должны равняться 12 ячейкам (клеткам). Если Вам нужно разделить любую из позиций шаблона на несколько столбцов, нужно помнить, что сумма ячеек должна быть 12.
На рисунке ниже показан пример сетки Bootstrap при «резиновой» ширине шаблона.
Все контейнеры позиций модулей, которые отображаются в одной строке, в сумме должны равняться 12 ячейкам (клеткам), но в дополнение к этому Вы можете разделить каждый столбец на 12 ячеек.
Это отличие влияет на то, какое именно число (от 0 до 12) Вы зададите для каждого из модулей, в одной позиции, на вкладке Дополнительные параметры, в опции Размер Bootstrap, чтобы добиться нужного эффекта (соотношения ширины каждого модуля на сайте).
Пример №1. Есть две позиции в одной строке, в каждой позиции нужно разместить по два модуля.
- Первый модуль левой позиции должен занимать 15% всей ширины экрана.
- Второй модуль левой позиции должен занимать 35% всей ширины экрана.
- Первый модуль правой позиции должен занимать 25% всей ширины экрана
- Второй модуль правой позиции должен занимать 25% всей ширины экрана.
Задача сделать так, чтобы такое соотношение сохранилось и при фиксированной ширине и при «резиновой» (при условии изменения настроек модулей, располагающихся в этих позициях). То есть, нужно найти значения опций Размер Bootstrap каждого из модулей для каждой из ширин (фиксированная\«резиновая»).
На рисунке ниже визуально видно, что для достижения поставленной задачи для фиксированной ширины экрана нужно задать следующие опций Размер Bootstrap:
- Для первого модуля в левой позиции – «2».
- Для второго модуля в левой позиции – «4».
- Для первого модуля в правой позиции – «3».
- Для второго модуля в правой позиции – «3».
На рисунке ниже визуально видно, что для достижения поставленной задачи для «резиновой» ширины экрана нужно задать следующие опций Размер Bootstrap (учитывая особенность разделения каждого столбца на 12 ячеек):
- Для первого модуля в левой позиции – «4».
- Для второго модуля в левой позиции – «8».
- Для первого модуля в правой позиции – «6».
- Для второго модуля в правой позиции – «6».
Пример №2. Есть одна позиция в одной строке, в ней нужно разместить три модуля.
- Первый модуль должен занимать 25% всей ширины экрана.
- Второй модуль должен занимать 35% всей ширины экрана.
- Третий модуль должен занимать 50% всей ширины экрана.
Задача та же, что и в примере №1: сделать так, чтобы такое соотношение сохранилось и при фиксированной ширине и при «резиновой» (при условии изменения настроек модулей, располагающихся в этих позициях). То есть, нужно найти значения опций Размер Bootstrap каждого из модулей для каждой из ширин (фиксированная\«резиновая»).
На рисунках ниже визуально видно, что для достижения поставленной задачи для фиксированной и «резиновой» ширины экрана нужно задать одинаковые настройки Размер Bootstrap, так как в случае с «резиновой» шириной экрана в строке только один столбец:
- Для первого модуля – «3».
- Для второго модуля – «3».
- Для третьего модуля– «6».
Русификатор JM Cleaning Company
Скачать русификатор JM Cleaning Company.
Надеюсь, что материал касательно сетки шаблона Bootstrap Joomla помог Вам разобраться с её особенностями и настройка модулей станет более понятной, простой и быстрой.
Похожие материалы |
---|
Автор статьи – Хорошевский Алексей |
---|
Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта. Кандидат технических наук по специальности «Информационные технологии». На этом сайте есть контакты и информация обо мне. На нём Вы найдёте примеры моих работ, а также перечень и цены предоставляемых услуг. |