Шаблоны

Обзор JM Company. Шаблон компании для Joomla

  • Тип – готовый адаптивный шаблон Джумла на русском языке.

 

 

JM Company – адаптивный современный кросс-браузерный шаблон Joomla на русском языке с админкой, который базируется на HTML5, Bootstrap, LESS, CSS3, jQuery. Он универсальный в плане типов и тематик сайтов, которые можно делать с его помощью. Разработчики позиционируют JM Company как простой шаблон Joomla для создания сайта компании. Но он прекрасно подойдёт и для блогов, лендингов, сайтов-портфолио и подобного.

Вместе с шаблоном Вы приобретаете три «быстрых старта» (QuickStart):

  1. Шаблон рекламного агентства.
  2. Шаблон сайта страховой компании.
  3. Шаблон сайта адвоката.

В обзоре будет участвовать последняя, на момент написания статьи (26.01.2018), русскоязычная версия JM Company 1.0.0 с фреймворком EF4.8.2, в Joomla 3.8.3. Кроме самого шаблона Вы получите лицензию на такие расширения (версии указаны на момент написания статьи):

  • DJ-MegaMenu 3.6.1.1. Расширение (модуль, плагин) меню, мега-меню и мобильного меню со множеством настроек и поддержкой вставки модулей в меню. Можно создавать вертикальные и горизонтальные меню.
  • DJ-MediaTools 2.11.0. Компонент галереи изображений и видео для Joomla с поддержкой VirtueMart 3. Это позволит создавать слайдер VirtueMart, галереи с товарами и др.

Помимо платных расширений, в JM Company предусмотрены стили для ряда бесплатных модулей (о них можно прочесть ниже в статье):

  • JM Additional Features.
  • JM Counter.
  • JM Image Carousel.
  • JM Off Canvas Button.

Естественно, что шаблон содержит стили для штатных компонентов, модулей и плагинов самой Joomla. Но Вы можете использовать любые расширения вместе с этим шаблоном (ограничений нет), если они подходят под версию Джумла, установленную на сайте. Однако, стоит отметить, что для «сторонних» расширений в шаблоне может не быть стилей, и из-за этого подобные расширения отображаются не совсем красиво. Это решаемая ситуация – дописывание стилей (CSS).

Также Вы получите файл с графическими элементами шаблона в формате PSD, хорошую техническую поддержку и документацию. Документация и техническая поддержка на английском языке. Если Вас интересует документация на русском языке, обратитесь к этому разделу. В нём можно найти много информации, как о шаблонах от Joomla-Monster.com, так и о шаблонах Joomla в целом, включая уроки по работе с шаблонами.

Особенности шаблона

Как и другие шаблоны от Joomla-monster.com, JM Company основывается на фреймворке EF4 и 12-ти колоночной сетке Bootstrap. А значит, он обладает всеми особенностями присущими данному фреймворку.

При создании шаблона учитывались такие «веб-стандарты»: HTML5, LESS, CSS3, jQuery, Source maps, семантическая вёрстка. Шаблон хорошо отображается в большинстве современных браузеров, таких как: Edge, Firefox, Chrome, Safari, Opera, Internet Explorer 11, Яндекс.Браузер. Плюс, поддерживаются мобильные браузеры, например, iOS Safari, Android Browser, Chrome для Android и другие.

Отмечу, что в стилях JM Company заложена поддержка стандартного компонента меток Joomla (com_tags).

На рисунках ниже показаны примеры страниц шаблона.

JM Company
JM Company
Простой шаблон Joomla
Простой шаблон Joomla
Шаблон компании для Joomla
Шаблон компании для Joomla
Простой шаблон для Joomla 3
Простой шаблон для Joomla 3
Корпоративный шаблон Joomla
Корпоративный шаблон Joomla

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

Админка шаблона
Админка шаблона

Бесплатные модули Joomla

Разработчики из Joomla-Monster.com создали ряд бесплатных модулей их можно использовать на любых сайтах Joomla без привязки к какому-то конкретному шаблону (почти все). Но если Вы используете шаблоны от Joomla-Monster.com и в них заявлена поддержка таких модулей, как например в шаблоне JM Company, это значит, что для таких модулей в таблице стилей шаблона предусмотрены специальные стили. Что повышает визуальную совместимость и дизайнерскую гармонию шаблона и модулей. Большинство модулей (на 26.01.2018) предназначены для красивого отображения информации на сайте. Это пригодится для любого типа сайтов от лендинга до интернет-магазина. Данные модули чем-то напоминают отдельные элементы конструктора страниц RSPageBuilder.

Все модули адаптивные и соответствуют рекомендациям по созданию сайтов для людей с ограниченными возможностями (WCAG 2.0, Section508). Немного подробнее об этом можно прочесть в статье «Обзор шаблона Joomla JM University. Как сделать версию сайта для слабовидящих».

Рассмотрим некоторые из бесплатных модулей Joomla, поддержка которых заявлена в шаблоне JM Company.

Списки и перечни – JM Additional Features

В обзоре участвует последняя, на момент написания статьи (26.01.2018), русскоязычная версия JM Additional Features 1.0.7 в Joomla 3.8.3, шаблон сайта JM Company 1.0.0.

На рисунке ниже показаны несколько примеров этого модуля на сайте (с демонстрационного сайта модуля).

Списки и перечни – JM Additional Features
Списки и перечни – JM Additional Features

Админка модуля (рисунок ниже) позволяет добавлять один или несколько элементов (без ограничения). Под элементами подразумеваются «блоки» или пункты списка.

Админка модуля JM Additional Features
Админка модуля JM Additional Features

Тут Вы можете создавать, удалять и изменять элементы модуля. Элемент состоит из таких фрагментов:

  1. Заголовок.
  2. Ссылка (необязательно). Ссылки могут быть относительными (без указания протокола и домена), в рамках Вашего сайта.
  3. Изображение (необязательно). Изображению можно задать замещающий текст (ALT).
  4. Иконка (необязательно). Вместо изображения. Можно менять цвет иконки.
  5. Текст (необязательно).
  6. Кнопка (необязательно).

Можно менять положение иконки по отношению к элементу, менять тему оформления и указать количество столбцов (от 1 до 12), в которых будут располагаться элементы в рамках одного модуля.

Вместо растровых изображений можно использовать Font Awesome или Glypheicons (специальные шрифты с иконками). На рисунке ниже видно, что удалено изображение и добавлен класс «fa fa-check fa-4x», чтобы применить иконку из шрифта Font Awesome

Применение Font Awesome
Применение Font Awesome

На сайте это выглядит так (рисунок ниже)

Применение Font Awesome (2)
Применение Font Awesome (2)

Иконки шрифта Font Awesome можно найти тут. Нажмите на нужную иконку и увидите её класс (рисунок ниже). В моём примере это «fa fa-check».

Класс иконок Font Awesome
Класс иконок Font Awesome

А вот тут можно узнать, как изменить размер иконки (рисунок ниже), сделать маркированный список с их применением в виде маркеров, поворачивать иконки и многое другое. Например, для изменения размера (увеличения) добавляем класс «fa-4x» и в итоге получаем «fa fa-check fa-4x».

Размер иконок Font Awesome
Размер иконок Font Awesome

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

Модуль JM Additional Features на сайте
Модуль JM Additional Features на сайте

На демонстрационном сайте (рисунок выше) видно, что таких «блоков» три: «Ready», «Made», «Module». То есть, было создано три отдельных модуля JM Additional Features, в каждом по одному элементу. И эти блоки были расположены в трёх разных позициях шаблона. В результате получилось то, что Вы видите.

На телефоне это, примерно, выглядит так (рисунок ниже).

Модуль JM Additional Features на телефоне
Модуль JM Additional Features на телефоне

Вот ещё пара примеров этого модуля.

Примеры модуля JM Additional Features
Примеры модуля JM Additional Features

Счётчик (бегущие цифры) – JM Counter

В обзоре участвует последняя, на момент написания статьи (26.01.2018), русскоязычная версия JM Counter 1.0.3 в Joomla 3.8.3, шаблон сайта JM Company 1.0.0.

На рисунке ниже показаны несколько примеров этого модуля на сайте (с демонстрационного сайта модуля).

Счётчик (бегущие цифры) – JM Counter
Счётчик (бегущие цифры) – JM Counter

Админка модуля (рисунок ниже) позволяет добавлять один или несколько элементов (без ограничения). Под элементами подразумеваются числовые значения каких-то показателей. Например, «1000 довольных клиентов», «5000 метров площади» и так далее. Как видите, модуль похож на рассмотренный выше (JM Additional Features). Отличие в том, что можно задавать начальное и конечное значение счётчика, единицу измерения отображаемых цифр, скорость и интервал анимации счётчика (увеличение числа).

Админка модуля JM Counter
Админка модуля JM Counter

На рисунке ниже показан пример модуля на сайте, согласно настройкам, на рисунке выше.

Пример модуля JM Counter на сайте
Пример модуля JM Counter на сайте

Карусель изображений – JM Image Carousel

В обзоре участвует последняя, на момент написания статьи (26.01.2018), русскоязычная версия JM Image Carousel 1.0.4 в Joomla 3.8.3, шаблон сайта JM Company 1.0.0.

На рисунке ниже показаны несколько примеров этого модуля на сайте (с демонстрационного сайта модуля).

Карусель изображений – JM Image Carousel
Карусель изображений – JM Image Carousel

Админка модуля (рисунок ниже) позволяет добавлять один или несколько изображений (без ограничения). Как видите, модуль похож на рассмотренный выше (JM Additional Features). Только есть возможность включения/отключения индикаторов управления вращения карусели изображений, кнопок «Предыдущий» и «Следующий» и задания повторения перечня картинок. Также есть три стиля.

Админка модуля JM Image Carousel
Админка модуля JM Image Carousel

На рисунке ниже показан пример модуля на сайте, согласно настройкам, на рисунке выше.

Модуль JM Image Carousel на сайте
Модуль JM Image Carousel на сайте

Боковая панель – JM Off Canvas Button

В обзоре участвует последняя, на момент написания статьи (26.01.2018), русскоязычная версия JM Off Canvas Button 1.0.2 в Joomla 3.8.3, шаблон сайта JM Company 1.0.0.

Модуль совместим только с шаблонами на основании фреймворка EF4. Off Canvas панель – это боковая выезжающая панель на сайте, содержащая разные модули.

На рисунке ниже показаны несколько примеров этого модуля на сайте (с демонстрационного сайта модуля).

Боковая панель – JM Off Canvas Button
Боковая панель – JM Off Canvas Button

Админка модуля (рисунок ниже) весьма простая. Можно задать в качестве кнопки иконку шрифта Font Awesome или изображение.

Админка модуля JM Off Canvas Button
Админка модуля JM Off Canvas Button

Кнопки фоловинга социальных сетей – JM Social Icons

В обзоре участвует последняя, на момент написания статьи (26.01.2018), русскоязычная версия JM Social Icons 1.0.5 в Joomla 3.8.3, шаблон сайта JM Company 1.0.0.

Фоловинг – процесс перехода пользователей на Ваши страницы в социальных медиа с дальнейшей подпиской на получение уведомлений об обновлениях Ваших страниц. Не путать с «шерингом» – добавление заметки пользователем о странице Вашего сайта себе на страницу в социальной сети. Модуль JM Social Icons позволяет отобразить кнопки, по нажатию на которые пользователи будут переходить на Ваши страницы в соц. сетях. Если Вас интересуют кнопки «поделиться» («шеринг»), обратите своё внимание на AddThis.

На рисунке ниже показаны несколько примеров этого модуля на сайте (с демонстрационного сайта модуля).

Кнопки фоловинга социальных сетей – JM Social Icons
Кнопки фоловинга социальных сетей – JM Social Icons

Админка модуля (рисунок ниже) позволяет создавать сколько угодно кнопок соц. сетей. В качестве иконок можно использовать изображения или иконки из шрифтов Font Awesome и Glypheicons. О том, как применять подобные иконки можно прочесть выше в статье в разделе «Списки и перечни – JM Additional Features».

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

Админка модуля JM Social Icons
Админка модуля JM Social Icons

На рисунке ниже показан пример модуля на сайте, согласно настройкам, на рисунке выше.

Модуль JM Social Icons на сайте
Модуль JM Social Icons на сайте

Видео обзор простого шаблона для Joomla

  1. Шаблон JM Company – с 00:00.
  2. Применение шрифтов Google – с 08:15.
  3. Модуль списков и перечней JM Additional Features – с 12:31.
  4. Применение Font Awesome – с 14:41.
  5. Модуль счётчика (бегущие цифры) JM Counter – с 17:52.
  6. Модуль кнопок фоловинга социальных сетей JM Social Icons – с 19:35.
  7. Модуль карусели изображений JM Image Carousel – с 21:46.

 

 

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки Вы можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

Надеемся, что данная статья поможет Вам в выборе простого шаблона Joomla для создания сайта компании. Напомню, что шаблон универсальный и может применяться для веб-проектов любой тематики. А почти все рассмотренные бесплатные модули подойдут для различных сайтов на шаблонах от любых разработчиков (не обязательно Joomla-Monster.com).

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

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