настройка стилей шаблона Protostar

Если вы используете адаптивный шаблон на Joomla 3, то это гуд, но не на 100%, так как его надо настроить под цели сайта и собственный вкус. Зачем лазить грязными руками в творение джумловских программистов? Затем, что они не работали под ваш сайт, а о Seo знают краем мозга. Ниже я дам парочку советов по настройке и оптимизации адаптивного шаблона Protostar на движке Joomla 3.6.

Уникализируйте шаблон

В настройках шаблона делайте первые шаги для уникализации, только не стоит ловить рыбу ради удовольствия – вам её кушать, как говорят в Одессе. Задача уникализации Protostar или другого шаблона – это изменение в лучшую сторону дизайна сайта для удобства пользователей.

В настройках стилей админки:

Расширения – Менеджер шаблонов – Protostar – стили

Советую изменить/добавить:

  1. Цвет текста и фона,
  2. Логотип,
  3. Название сайта,
  4. Описание.

Также там переключение с фиксированного на резиновый шаблон, но лично мне резина не по душе. Углубляться в предпочтения не буду. Чтобы изменить логотип, создайте свой лого или целиком шапку, посмотрите её название и адрес в строке «Логотип», сохраните под таким именем и замените через ftp. Совету пережимать лого через Irfan View для уменьшения размера.  Это касается всех фото.

Display: none

Для пользователя, который зашёл на сайт с мобильного устройства, не нужен тот объём информации, который предлагает полная, десктопная версия. Каждый решает сам, но я стараюсь для мобильных максимально сократить объём страниц, для чего закрываю отображение футера и сайтбаров.

закрываем блоки в template

По задумке программистов Joomla, на адаптивном шаблоне Protostar сайтбар уезжает вниз страницы. Анализ Вебвизора Яндекса показал, что фиг кто туда ходит, а документ растягивается, как кишка ленивца и увеличивается размер страницы. Как следствие, тормозится загрузка. Если у вас PHP 7, то ладно, но на PHP 5 вы теряете скорость прилично.

Я закрыл показ футера через display: none для разрешений менее 600 px, также для такого разрешения запрещён показ блоков .breadcrumb и .span3.

Вот как это выглядит в template:

@media screen and (max-width:600px) {

.footer {display: none !important;}

.breadcrumb {display: none !important;}

.span3 {display: none !important;}

}

Для разрешения менее 1000 px я использую такую «закрывачку»:

@media (max-width: 1000px) {

.well {display: none !important;}

.navbar-fixed-top {margin-bottom: 0 !important;}

.item-comment .item-image {display: none;}

}

Получается, что у меня футера и хлебных крошек нет на мобильных, а сайтбар пропадает и для планшетов.

Тупо не копируйте код, смотрите как у вас выводятся блоки и проверяйте отображение на разных расширениях через Инспектор Гугла или сужая-расширяя экран браузера.

Если вам хочется до чесотки закрыть другие блоки для отображения, то используйте это правило:

для <div id=qwe>…</div> будет #qwe

для <div class=qwe>…</div> будет .qwe

для <img src="/..." /> будет img

Так легко понять, что прописывать для display: none.

Помните о навигации

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

Вывод карты сайта в меню

Закрыли .breadcrumb и нет хлебных крошек, убрали .well и пропали последние материалы и новости. Как выйти из тупика? Я решил добавить в меню на всех страницах карту сайта и оставил отображение плагина похожих материалов под текстом страниц. Можете активнее использовать перелинковку или поиграть с запретами для разных разрешений. Как правило, тут нет ничего смертельного, так как мобильные посетители не любят шарить по 100 страницам нигде, кроме интернет-магазинов.

Держите в голове совет:

С каждой страницы сайта перейти на любой другой web-документ можно в 2 клика.

Карта HTML во всплывающем меню это решает, поэтому Боги удачи будут к вам благосклонны.

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

Добавить комментарий


Защитный код
Обновить