Каркас шаблона:
в большом разрешении
В верхних позициях можно создать виджет с css или javascript. Первое выводится перед </head>, а второе — перед </body>.
После этой секции находится позиция для рекламного баннера, которая выведется перед шапкой. Учитывая наличие этой позиции и настроек фонового изображения, на сайте можно делать рекламное брендирование.
В верхней секции шапки выводятся иконки для соц сетей, а также две позиции в которых можно вывести верхнее меню и меню пользователя, или небольную строковую надпись.
О том, как задавать сами иконки для соц сетей, читайте ниже. В настройках шаблона можно указать в какой части строки вывести эти иконки: в левой, в правой или в центре.
Ниже этой строки находится секция с логотипом, а также две позиции для виджетов. Логотип можно вывести либо в центре, либо в слева. Если вывести слева, и занять лишь только одну позицию для виджетов, то она растянется на всю ширину секции.
После секции с логотипом располагается строка главного меню. Справа можно вывести кнопку с поиском по сайту, слева — кнопку, которая выведет второе меню. Ссылки меню могут располагаться либо в центре строки, либо с левой части. Меню можно зафиксировать в верхней части экрана.
После шапки начинается главный блок, который делится на шесть настраиваемых блоков виджета, и блок с телом страниц с боковыми позициями для виджетов.
Подробнее об этих блоках будет написано ниже)
Подвал делится на три 4 секции:
В верхней секции находится одна позиция для виджетов на всю ширину страницы, туда например можно вывести меню.
В центральной секции три позиции — одну из них занимает блок с логотипом и иконками соц сетей. Сверху и снизу этого блока есть по одной позиции для виджетов. Также, как и в шапке этот блок можно перемещать лишь влево, либо в центр, а у одной позиции для виджетов есть возможность занять всю оставшуюся часть, если во второй не будет активных виджетов.
Нижняя секция такая же, как и верхняя, но туда лучше вывести текстовую информацию.
Как и в дефолтном шаблоне, в подвале есть ещё позиция для нижнего меню.
Теперь расскажу про главный блок.
Главный блок делится на шесть настраиваемых блоков виджета, и блок с телом страниц, а также с боковыми позициями для виджетов. Сперва идет первый блок, затем блок с телом страниц, а после него 5 остальных блоков.
Каждый, из этих шести этих блоков делится на три горизонтальные секции, каждую из которых можно вывести до 4 колонок в одну строку для десктопных мониторов, до трех — для планшетов, до двух — в телефонах в горизонтальном положении экрана, в вертикальном — одна позиция.
Давайте для примера попробуем настроить три секции в блоке:
Секция 1. Для десктопных экранов зададим 4 колонки для виджета. Слдовательно для всех экранов тоже нужно задать 4 позиции, которые могут расположиться в нескольких строках. Для плашетов зададим 4 виджета, но выведим их в двух строках, для мобильных телефонов в четырех (прим: для моб телефонов находящихся в горизонтальном положении экрана) — 2.
Неважно с каким количеством строк вы выведете виджеты для планшетов и телефонов, но важно чтобы совпадало количество колонок для трех экранов.
Как я настроил две другие секции вы можете увидеть на видео.
Теперь давайте перейдем в настройки виджетов. Мы видим, что колонки виджетов отображаются так, как мы задали в настройках. Если нажмем на планшет, то увидим расположение колонок для планшетов, также мы можем увидеть, как отобразятся виджеты на мобильных экранах.
Теперь давайте попробуем вывести виджет с контентом. В настройках виджета мы можем указать количество колонок записей для каждого типа экрана.
Здесь есть свои правила: Если в десктопе колонка занимает 100%, то в виджете можно делать до 4 колонок записей, если 75% или 66%, то до 3 колонок, если 50%, то до 2 колонок, если 33% или 25%, то одну колонку.
В планшете: 100% — до 3, 66% — до 2, 55% или 33% — 1.
В мобильных версиях: 100% — до 2, 50% — 1.
Здесь вы можете увидеть, как я настраиваю колонки в виджетах.
В виджетах есть возможность создать html-блок и вывести перед любой записью.
Также в типах контента можно создать поля-флаги с метками для фото, видео, выделение записи, а также метку для информирования о том, что запись обновлена. При редактировании записи из данного типа контента можно расставлять эти метки.
Для контейнера любого виджета мы можем задать белый или серый фон, или рамку.
Для каждого блока можно выбрать цвет фона: либо белый, либо черный, либо серый, либо тот цвет, который задан в настройках шаблона. Цвета надписей в виджетах изменятся автоматически.
Также можно вывести на сайте название блока и делать боковые отступы.
Иконки социальных сетей.
Так как к шаблону привязаны иконки от font awesome, то чтобы задать иконку, нужно в настройках указать её код и ссылку куда будет осуществлен переход, так же поставить флажок на месте, где нужно её вывести: в шапке и в подвале.
Мобильная версия
После релиза буду стилизовать сторонние компоненты:
— от разработчиков Instantcms (биллинг, карты и видео)
— От других разработчиков. В приоритете: форум, афиша, доска объявлений, подписки на новости. Авторы этих и других дополнении, если вам это интересно, то пишите в личку. Это бесплатно.
