Элемент Блок с картинкой
Описание
Это элемент для компонента Zbuilder от автора Zau4man . Компонент представляет собой визуальный редактор блоков с помощью которого вы можете красиво оформить любую страницу сайта, сделанного на InstantCMS.
Версия: 1.2.1
ZBuiler: 1.0.2 и выше
InstantCMS: 2.16.3 и выше
Дополнительно: начальные знания HTML и CSS
Блок построен на встроенном в Bootstarap компоненте Cards . Имеет 3 шаблона разной верстки: 1 горизонтальный и 2 вертикальных. Много настроек внешнего вида: скругление углов; цвет фона, текста; оверлей изображения и др. Каждый блок содержит изображение, заголовок, текст, кнопку, которые тоже можно настроить, футер (для вертикальных шаблонов). Адаптивность под мобильные устройства.
Если у вас есть идеи как улучшить этот элемент, пишите в комментариях.
Установка и Обновление
Установка производится стандартным для компонента ZBuilder способом. В архиве 6 файла.
1. Зайдте в файловый менеджер вашего хостинга или подключитесь к каталогу с файлами вашего сайта по ftp.
2. Скопируйте файл form_blockimg.php и form_blockimg_items.php в папку /system/controlers/zbuilder/forms/elements_forms/ .
3. Скопируйте файл blockimg.tpl.php , blockimg_deck.tpl.php и blockimg_group.tpl.php в папку /templates/ваша_тема*/controllers/zbuilder/elements/ .
4. Скопируйте файл blockimg.css в папку /templates/ваша_тема*/controllers/zbuilder/css/elements/ .
5. Авторизуйтесь на вашем сайте с правами Администратора . Перейдите на вкладку Компоненты , затем выберите компонент Конструктор блоков Zbuilder .
6. В открывшемся окне выберите вкладку Элементы и нажмите +Добавить .
7. Название элемента можно любое (предлагаю Блок с картинкой), Тип элемента обязательно blockimg .
Обновление элемента производится простым копированием новых файлов на хостинг с заменой. Либо удалите старые файлы и скопируйте новые. Важно! Не меняйте названия файлов, это нужно для правильной работы компонента.
Настройка
Чтобы добавить элемент на страницу:
1. Перейдите в Админ панель вашего сайта на вкладку Виджеты и страницы . Выберите страницу на которую хотите добавить элемент.
2. Добавьте виджет Бинд-блоков из раздела Конструктор блоков.
3. Перейдите на фронтэнд страницы на которой хотите добавить элемент. Включите Редактор областей .
4. Добавьте нужный вам блок (рекомендую одну колонку), нажав на + и выбрав нужный в раскрывающемся списке.
5. Добавьте элемент Блок с картинкой , нажав на + в нужном блоке и выбрав элемент из раскрывающегося списка.
6. В открывшемся окне измените настройки, общие для всех блоков элемента:
- Скруглять углы — радиус скругления углов у каждого блока. После значения обязательно укажите ед. измерения px .
- Цвет фона — подложка блоков. Можно указывать в формате HEX или RGB.
- Цвет текста — изменяйте в зависимости от цвета фона или под ваш дизайн.
- Внутренний отступ — отступ внутри блока. После значения обязательно укажите ед. измерения px .
- Оверлей изображения — перекрытие изображения. Работает только в горизонтальном шаблоне.
7. Кликните по ссылке добавить , чтобы добавить блок.
8. В открывшемся окне заполните нужные поля:
- Иконка — выберите иконку из набора темы. Кликните по кнопке выбрать, в открывшемся окне выберите иконку и кликните по ней (код будет скопирован), вставьте скопированное значение в поле. Отображается слева от заголовка.
- Заголовок — заголовок блока.
- Изображение — картинка блока.
- Размер изображения — позволяет выбрать какой размер картинки отображать. Может пригодится для разного дизайна.
- Текст в блоке — любой текст в теле блока. Используйте форматирование, чтобы сделать текст более привлекательным.
- Текст внизу блока — текст отображается в низу блока, только в вертикальных шаблонах Deck или Group.
- Ссылка — в обычном формате для внешних страниц (https://webassemble.ru) и в сокращённом для внутренних (/internal-page.html). Если это поле заполнено, то отображается кнопка в блоке.
- Надпись на кнопке — изменяйте надпись как вам нужно.
- Стиль кнопки — изменяет основной цвет и цвет при наведении.
Обязательное поле — Изображение, иначе в элементе нет смысла. Рекомендую заполнить хотя бы Заголовок или Текст в блоке. Если какое-либо поле не заполнено, то в шаблоне значение поля не рендерится и, соответственно, не выводится.
9. Кликните по кнопке Сохранить . Новый блок добавлен.
Вы можете добавить неограниченное количество блоков и каждый со своими настройками. После добавления всех блоков, нажмите кнопку Сохранить элемента. Готово! Блок с картинкй отображается на сайте. Можно выключить Редактор блоков .
10. Чтобы выбрать шаблон отображения (по-умолчанию загружается горизонтальный шаблон) кликните на шестренку в меню элемента.
11. Из раскрывающегося списка выберите нужный: blockimg — горизонтальный шаблон по-умолчанию, blockimg_deck — вертикальный шаблон Deck, blockimg_group — вертикальный шаблон Group.
12. Кликните по кнопке Сохранить . При необходимости отредактируйте настройки элемента.
Примеры отображения шаблонов:
