Демо
- 08 июля 2016
Аккордеон
Модуль выведен в боковой колонке.
Основные настройки:
- Показывать заголовок - Нет
- Изображение - по центру
- Задан цвет фона
- Активная вкладка - Да
Макет использует стандартные стили Bootstrap, подключенные в css-файле шаблона по умолчанию.
Для дополнительного оформления вы можете переопределить стили Bootstrap в своем шаблоне.
Информация
Возможность задавать свои стили для аккордеона из админки - в следующих версиях.
Блог. Вариант 1
Модуль выведен в верхнем блоке. Оформление - в соответствии с общим стилем сайта.
Основные настройки:
- Вывод в 3 колонки, без анимации
- Изображение - по центру
- Ограничение по тексту - Нет
- Вывод даты и автора с иконками
Хочу обратить внимание: для дополнительного оформления потребовалось написать всего 4 строчки css-кода! Тени для блоков, размер и цвет даты материала.
Все остальные настройки заданы в административной панели модуля!
Блог. Вариант 2
Winter demo article-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ipsum tortor, pellentesque eget faucibus vitae, ultricies et purus. Vivamus at placerat magna. Nam neque erat, volutpat at vehicula at, congue quis purus.
Winter demo article-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ipsum tortor, pellentesque eget faucibus vitae, ultricies et purus. Vivamus at placerat magna. Nam neque erat, volutpat at vehicula at, congue quis purus.
Основные настройки:
- Вывод материалов в одну колонку.
- Изображение слева.
- Изображение и заголовок - ссылка на материал
- Позиция даты - после контента
- Горизонтальный сепаратор
Все стили CSS заданы в параметрах модуля
Блог. Вариант 3
Flowers demo article-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in pharetra diam. Aenean felis nibh, sodales a interdum sed, sodales non dolor....
Flowers demo article-2
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis, vestibulum quis odio. Pellentesque...
Flowers demo article-5
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis, vestibulum quis odio. Pellentesque...
Flowers demo article-6
Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante sed turpis commodo consectetur....
Основные настройки:
- Вывод материалов в две колонки
- Изображение слева
- Ограничение по количеству символов
- Кнопка подробнее слева, вариант "Yellow"
- Свой текст на кнопке
Все стили CSS заданы в параметрах модуля
Блог. Анимация. Эффект-1. Вариант 4
Towns demo article-5
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Towns demo article-6
Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante...
Towns demo article-7
Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante...
Towns demo article-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in pharetra diam. Aenean felis nibh, sodales a interdum...
Towns demo article-8
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Towns demo article-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in pharetra diam. Aenean felis nibh, sodales a interdum...
ДОПОЛНИТЕЛЬНЫЙ ТЕКСТ
Можно выводить произвольный текст, допускается использование html-тегов с атрибутами class, style и пр.
Основные настройки:
- Дополнительный текст. Позиция - bottom
- Эффект анимации #1
- Внешние отступы материалов 0px
- Скорость анимации - low
Все стили CSS заданы в параметрах модуля
Блог. Анимация. Эффект-2. Вариант 5
Islands demo article-6
Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante sed turpis commodo consectetur. Curabitur molestie nisi ac quam vestibulum feugiat scelerisque tortor...
Islands demo article-5
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis, vestibulum quis odio. Pellentesque quis lobortis diam.
Основные настройки:
- Эффект анимации #2
- Внешние отступы материалов 20px
- Скорость анимации - medium
Все стили CSS заданы в параметрах модуля
Блог. Анимация. Эффект-3. Вариант 6
Islands demo article-5
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Flowers demo article-2
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Islands demo article-6
Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante...
Towns demo article-5
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Flowers demo article-5
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Towns demo article-7
Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante...
Основные настройки:
- Эффект анимации #3
- Внешние отступы материалов 3px
- Скорость анимации - fast
- Вывод материалов по тегу из всех категорий
- Вывод автора материалов
Все стили CSS заданы в параметрах модуля
Слайдсет. Анимация. Эффект-3. Вариант 7
Towns demo article-7
Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante...
Islands demo article-6
Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante...
Towns demo article-5
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Islands demo article-5
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Flowers demo article-2
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Flowers demo article-5
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Основные настройки:
- Эффект анимации #3
- Количество колонок - 3
- Скорость анимации - medium
- автостарт - Да
- Скорость смены слайдов 5000
- Позиция кнопок управления - inside
- Вывод материалов по тегу из всех категорий
Все стили CSS заданы в параметрах модуля
Слайдсет. Вариант 8
Основные настройки:
- Без анимации
- Количество колонок - 2
- Вывод текста - Нет
- Автостарт - Нет
- Скорость смены слайдов 5000
- Позиция кнопок управления - outside
- Вывод материалов по тегу из всех категорий
Добавлена одна строчка кода, выравнивающая заголовки по центру. Остальные стили CSS заданы в параметрах модуля.
Слайдсет. Вариант 9
Flowers demo article-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in pharetra diam. Aenean felis nibh, sodales a interdum...
Flowers demo article-2
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Flowers demo article-5
Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...
Flowers demo article-6
Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante...
Основные настройки:
- Без анимации
- Количество колонок - 1
- Выравнивание изображения- слева
- Автостарт - Нет
- Скорость смены слайдов 5000
- Позиция кнопок управления - top/right
- Показывать кнопку Подробнее
- Заданы размер, цвет, текст кнопки
Добавлена одна строчка кода, оформление границы под кнопками управления. Остальные стили CSS заданы в параметрах модуля.
Итоги
На странице была продемонстрирована лишь небольшая часть вариантов вывода и оформления модуля.
Различные комбинации настроек и, при необходимости, создание собственного кода css-оформления, позволяет создавать десятки различных макетов вывода!
В планах выпуска следующих версий - дополнительные макеты и настройки, которые позволят полностью настроить модуль из административной панели.