Анонс портального шаблона с настройками колонок для виджетов

InstantCMS 2.X
#1 9 декабря 2017 в 07:44
Друзья, в связи с тем, что недавно на форуме было обсуждение по поводу того, что для InstantCMS2 нету хороших шаблонов, а также в связи с анонсом других дополнении, я хочу под этот шумок анонсировать свой шаблон для портальных сайтов.
Возможно, мне сегодня удастся удивить и обрадовать вас.

Краткое описание:
В шаблоне есть возможность редактировать из админки (без правки кода) настройки ширины страницы, фона, расположения логотипа, иконок соц сетей, фиксирования меню.
Нооо… самая главная возможность (вернее главные возможности) — настройка количества колонок для виджетов, а в самих виджетах — настройка количества колонок записей!!! Можно отдельно настраивать для десктопных мониторов, планшетов и мобильных телефонов.
Также вы можете вставить в виджет HTML-код и вывести его перед любой записью.
Есть еще и другие новшества, но пока я их пока не буду анонсировать.

Я заранее извиняюсь за подписи некоторых переменных в админке. Это рабочие названия))

Сейчас по-подробнее:
В шаблоне можно выбрать одну из цветовых схем. Ширина страницы может быть растянута на всю ширину экрана, а также в настройках можно задать максимальную ширину. Есть есть максимальная ширина, то свободное пространство можно закрасить любым цветом или установить фоновое изображение. Фон может быть кликабельным. Также можно задать высоту, на которая страница опуститься вниз.



В большом разрешении
#2 9 декабря 2017 в 07:45
Каркас шаблона:


в большом разрешении

В верхних позициях можно создать виджет с 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 (биллинг, карты и видео)
— От других разработчиков. В приоритете: форум, афиша, доска объявлений, подписки на новости. Авторы этих и других дополнении, если вам это интересно, то пишите в личку. Это бесплатно.
#3 9 декабря 2017 в 08:05
я заметил, что видео обрезаны снизу, наверное не так настроил программу
#4 9 декабря 2017 в 08:52
Занимательно, но вы ж понимаете все будут ждать выхода конструктора.
#5 9 декабря 2017 в 10:31
Отлично, будет ли в шаблоне проработка Maps и Video?
#6 9 декабря 2017 в 10:53


Отлично, будет ли в шаблоне проработка Maps и Video?

Melon
Да, будет. Также будет проработка компонентов и от других разработчиков
#7 9 декабря 2017 в 13:15
Нормас, наконец-то что-то стоящее лля инстанта — поставил, допилил и пошёл дальше.
Конструктор, имхо, перемещение блоков мышкой не говорит о хорошнем дизайне.
#8 9 декабря 2017 в 13:28

Конструктор, имхо, перемещение блоков мышкой не говорит о хорошем дизайне.

Василич
Ну если он будет идеальным, а не тяп-ляп — лишь бы двигалось все… ладно, увидим.

Анонс портального шаблона с настройками колонок для виджетов

Рома
Демо бы поглядеть.
#9 9 декабря 2017 в 13:58

Занимательно, но вы ж понимаете все будут ждать выхода конструктора.

Jestik
Как вы могли заметить из описания конструктора — это не совсем конструктор, это расширенный инстайлер.
Конструктор — это когда генерится собственный код, который можно использовать на любом сайте с Инстантом! Сейчас же эти шаблоны смогут работать только в среде специальной программы — самого конструктора или специального "плеера".

Представленный шаблон — это действительно шаблон с нереально большим количеством настроек! +
#11 9 декабря 2017 в 16:57

Да демо можно пощупать?

Александр Витальевич
А он с вас пример берет… smile
#12 9 декабря 2017 в 17:25
Dmitry, Александр Витальевич, демо будет через неделю)
Я потом скину вам ссылку в личку
#13 9 декабря 2017 в 18:06
Очень красивый шаблон, хотелось бы увидеть демо.
#14 9 декабря 2017 в 18:20
vikont, та я не спорю… но релиза не было. Лично мне шаблон предпочтительнее нежели конструктор
#15 9 декабря 2017 в 18:36
Шаблон аккуратен но настройки не так надо бы делать. Куча блоков и кода прописано вручную без возможности масштабирования.
Например эти блоки в каркасе шаблона нужно бы делать иначе. Дать пользователю создавать такие блоки и настраивать их самостоятельно. Можно даже через виджет. А так вы их железно прописали. Нет гибкости в шаблоне, это плохо.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.