town-5

Towns demo article-5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
13 июля 2016 Tester

Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis, vestibulum quis odio. Pellentesque quis lobortis diam.

town-6

Towns demo article-6

Звезда активнаЗвезда активнаЗвезда активнаЗвезда не активнаЗвезда не активна
13 июля 2016 Administrator

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 laoreet.

town-7

Towns demo article-7

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
08 июля 2016 Owner

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 laoreet.

Аккордеон

Модуль выведен в боковой колонке.

Основные настройки:

  • Показывать заголовок - Нет
  • Изображение - по центру
  • Задан цвет фона
  • Активная вкладка - Да

Макет использует стандартные стили Bootstrap, подключенные в css-файле шаблона по умолчанию.

Для дополнительного оформления вы можете переопределить стили Bootstrap в своем шаблоне. 

Информация

Возможность задавать свои стили для аккордеона из админки - в следующих версиях. 

Блог. Вариант 1

Модуль выведен в верхнем блоке. Оформление - в соответствии с общим стилем сайта.

Основные настройки:

  • Вывод в 3 колонки, без анимации
  • Изображение - по центру
  • Ограничение по тексту - Нет
  • Вывод даты и автора с иконками

Хочу обратить внимание: для дополнительного оформления потребовалось написать всего 4 строчки css-кода! Тени для блоков, размер и цвет даты материала.

Все остальные настройки заданы в административной панели модуля!

Блог. Вариант 2

таб 1

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.

26.11.2012
таб 2

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.

26.11.2012

Основные настройки:

  • Вывод материалов в одну колонку.
  • Изображение слева.
  • Изображение и заголовок - ссылка на материал
  • Позиция даты - после контента
  • Горизонтальный сепаратор

Все стили CSS заданы в параметрах модуля

Блог. Вариант 3

Flowers-1

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 2

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 5

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 6

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

town-5

Towns demo article-5

13 июля 2016

Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...

town-6

Towns demo article-6

13 июля 2016

Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante...

town-7

Towns demo article-7

08 июля 2016

Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante...

town-1

Towns demo article-1

26 января 2015

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in pharetra diam. Aenean felis nibh, sodales a interdum...

town-8

Towns demo article-8

25 марта 2014

Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...

town-4

Towns demo article-4

25 марта 2014

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-6

Islands demo article-6

24 марта 2014

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-5

Islands demo article-5

24 марта 2014

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-5

Islands demo article-5

24 марта , Administrator

Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...

flowers 2

Flowers demo article-2

23 января , Administrator

Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...

Islands-6

Islands demo article-6

24 марта , Administrator

Aliquam varius felis in nulla blandit at semper eros varius. Praesent non velit nec erat pretium dapibus. Ut ac ante...

town-5

Towns demo article-5

24 марта , Tester

Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...

flowers 5

Flowers demo article-5

23 января , Fog

Nullam rutrum ullamcorper erat quis laoreet. Sed vitae ipsum elit. Fusce libero libero, luctus a porttitor quis,...

town-7

Towns demo article-7

24 марта , Owner

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

Основные настройки:

  • Эффект анимации #3
  • Количество колонок - 3
  • Скорость анимации - medium
  • автостарт - Да
  • Скорость смены слайдов 5000
  • Позиция кнопок управления - inside
  • Вывод материалов по тегу из всех категорий

Все стили CSS заданы в параметрах модуля

Слайдсет. Вариант 8

Основные настройки:

  • Без анимации
  • Количество колонок - 2
  • Вывод текста - Нет
  • Автостарт - Нет
  • Скорость смены слайдов 5000
  • Позиция кнопок управления - outside
  • Вывод материалов по тегу из всех категорий

Добавлена одна строчка кода, выравнивающая заголовки по центру. Остальные стили CSS заданы в параметрах модуля.

Слайдсет. Вариант 9

Основные настройки:

  • Без анимации
  • Количество колонок - 1
  • Выравнивание изображения- слева
  • Автостарт - Нет
  • Скорость смены слайдов 5000
  • Позиция кнопок управления - top/right
  • Показывать кнопку Подробнее
  • Заданы размер, цвет, текст кнопки

Добавлена одна строчка кода, оформление границы под кнопками управления. Остальные стили CSS заданы в параметрах модуля.

Итоги

На странице была продемонстрирована лишь небольшая часть вариантов вывода и оформления модуля.

Различные комбинации настроек и, при необходимости, создание собственного кода css-оформления, позволяет создавать десятки различных макетов вывода!

В планах выпуска следующих версий - дополнительные макеты и настройки, которые позволят полностью настроить модуль из административной панели.