Элемент Карусель
Описание
Это элемент для компонента Zbuilder от автора Zau4man . Компонент представляет собой визуальный редактор блоков с помощью которого вы можете красиво оформить любую страницу сайта, сделанного на InstantCMS.
Версия: 1.0.1
ZBuiler: 1.0.2 и выше
InstantCMS: 2.16.3 и выше
Дополнительно: начальные знания HTML и CSS
Элемент построен на встроенном в Bootstarap компоненте Карусель . Шаблон отображения всего один, но вы можете его изменять заполняя или оставляя пустыми поля настройки. Количество слайдов не ограничено. На каждый слайд можно добавить: изображение, установить оверлей для изображения, заголовок, текст и кнопку. Размеры карусели задаются через пресет изображения, на демо размер изображения 1110px на 400px.
Если у вас есть идеи как улучшить этот элемент, пишите в комментариях.
Установка и Обновление
Установка производится стандартным для компонента ZBuilder способом. В архиве 4 файла.
1. Зайдте в файловый менеджер вашего хостинга или подключитесь к каталогу с файлами вашего сайта по ftp.
2. Скопируйте файл form_carousel.php и form_carousel_items.php в папку /system/controlers/zbuilder/forms/elements_forms/ .
3. Скопируйте файл carousel.tpl.php в папку /templates/ваша_тема*/controllers/zbuilder/elements/ .
4. Скопируйте файл carousel.css в папку /templates/ваша_тема*/controllers/zbuilder/css/elements/ .
5. Авторизуйтесь на вашем сайте с правами Администратора . Перейдите на вкладку Компоненты , затем выберите компонент Конструктор блоков Zbuilder .
6. В открывшемся окне выберите вкладку Элементы и нажмите +Добавить .
7. Название элемента можно любое (предлагаю Карусель), Тип элемента обязательно carousel.
8. Перейдите на вкладку Компоненты , затем выберите компонент Загрузка изображений .
9. Добавьте новый пресет изображения, нажав +Добавить .
10. Заполните следующие поля:
- Системное имя: carousel — только так, элемент берет пресет именно с таким именем.
- Название: любое, я предлагаю ZBuilder Карусель.
- Ширина: 1110px.
- Высота: 400px.
- Обрезать строго по размеру: включить По центру.
Остальные настройки на ваш выбор. Сохраните новый пресет изображения.
Обновление элемента производится простым копированием новых файлов на хостинг с заменой. Либо удалите старые файлы и скопируйте новые. Важно! Не меняйте названия файлов, это нужно для правильной работы компонента.
Настройка
Чтобы добавить элемент на страницу:
1. Перейдите в Админ панель вашего сайта на вкладку Виджеты и страницы . Выберите страницу на которую хотите добавить элемент.
2. Добавьте виджет Бинд-блоков из раздела Конструктор блоков.
3. Перейдите на фронтэнд страницы на которой хотите добавить элемент. Включите Редактор областей .
4. Добавьте нужный вам блок (рекомендую одну колонку), нажав на + и выбрав нужный в раскрывающемся списке.
5. Добавьте элемент Блок с картинкой , нажав на + в нужном блоке и выбрав элемент из раскрывающегося списка.
6. В открывшемся окне измените настройки, общие для всех блоков элемента:
- Скруглять углы — радиус скругления углов у каждого блока. После значения обязательно укажите ед. измерения px .
- Время между слайдами — указывается промежуток времени для автоматической смены слайдов. Чтобы отключить автопрокрутку укажите в поле значение false .
- Оверлей изображения — перекрытие изображения. Работает только в горизонтальном шаблоне.
7. Кликните по ссылке добавить , чтобы добавить слайд.
8. В открывшемся окне заполните нужные поля:
- Изображение — картинка слайда. При загрузке картинка обрезается в соответствии с установленным в настройках (п. 9) размером. Для шаблона по-умолчанию (Modern), идеально подходит размер 1110x400px.
- Заголовок — заголовок слайда.
- Описание — любой текст в теле слайда. Используйте форматирование, чтобы сделать текст более привлекательным.
- Ссылка — в обычном формате для внешних страниц (https://webassemble.ru) и в сокращённом для внутренних (/internal-page.html). Если это поле заполнено, то отображается кнопка в слайде.
- Надпись на кнопке — изменяйте надпись как вам нужно.
- Стиль кнопки — изменяет основной цвет и цвет при наведении.
Обязательное поле — Изображение, иначе в элементе нет смысла.
9. Кликните по кнопке Сохранить . Новый слайд добавлен.
Вы можете добавить неограниченное количество слайдов и каждый со своими настройками. После добавления всех слайдов, нажмите кнопку Сохранить элемента. Готово! Карусель отображается на сайте. Можно выключить Редактор блоков .
‼️ Внимание . У элемента есть один нюанс: после сохранения (закрытия окна с формой добавления элемента), он пропадает. Но нужно просто обновить страницу и все заработает. Связано это с работой скрипта. При сохранении элемента скрипт не срабатывает, а срабатывает только после обновления страницы. Далее все работает корректно, без ошибок, инспектор браузера это подтверждает, слайды прокручиваются и переключаются при клике на кнопки управления.
