Страница с примерами элементов для оформления контента на страницах сайта. Код этих элементов добавляется в визуальном редакторе.

 

Прогресс бары — например уровни чего-либо в характеристиках

Кнопка — Progressbar shortcode

90% Complete
50% Complete
30% Complete
70% Complete
100% Complete

 

Аккордион — вертикальный аккордион

Кнопка — Toggle/Accordion Shortcode

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat, sem et lacinia malesuada, arcu turpis feugiat ligula, vel congue augue nisi a tortor. Aenean quis accumsan nulla. Donec molestie commodo ultrices.
Praesent quam neque, accumsan non lorem quis, facilisis tempus massa. Integer vehicula neque turpis, vel malesuada quam convallis non.
Nullam nec fringilla magna. Donec sagittis, justo gravida feugiat vehicula, sapien erat eleifend sapien, sit amet iaculis leo diam quis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Nulla sed vestibulum diam. In suscipit dignissim lacus quis aliquet. Cras vehicula ligula eget aliquam bibendum. Curabitur lacinia, erat sed laoreet pulvinar, arcu lacus volutpat magna, at commodo diam nibh quis augue.

 

Закладки

Кнопка — Tabs Shortcode

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat, sem et lacinia malesuada, arcu turpis feugiat ligula, vel congue augue nisi a tortor. Aenean quis accumsan nulla. Donec molestie commodo ultrices.
Praesent quam neque, accumsan non lorem quis, facilisis tempus massa. Integer vehicula neque turpis, vel malesuada quam convallis non.
Nullam nec fringilla magna. Donec sagittis, justo gravida feugiat vehicula, sapien erat eleifend sapien, sit amet iaculis leo diam quis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Nulla sed vestibulum diam. In suscipit dignissim lacus quis aliquet. Cras vehicula ligula eget aliquam bibendum. Curabitur lacinia, erat sed laoreet pulvinar, arcu lacus volutpat magna, at commodo diam nibh quis augue.

 

Списки — могут быть с иконками стрелки, чекбокса, плюса и минуса

Кнопка — List Group Shortcode

  • Вот такие красивые списки
  • Можно оформлять, например, в акциях
  • Или в плюсах/минусах чего-то
  • Или в предложении комплекта

 

Кнопки с иконками и без

Кнопка — Button Shortcode

Кнопка

 

Групирование кнопок

Кнопка — Button Group Shortcode

Как видишь есть бок, место под иконку всегда есть, поэтому в каждую кнопку нужно вручную копировать код icon=»….» из кнопок добавляемых предыдущим способом. Пример ниже — скопировано из 2й кнопки предыдущего в третью тут.

 

Оповещения — например, при входе на страницу с акцией, перед контентом. Или на страницу товара у которого акция, для перехода на нее. И т.д.

Кнопка — Notifications Shortcode

Какое-то оповещение
Какое-то оповещение
Какое-то оповещение
Какое-то оповещение

 

Колонки — разделение контента на колонки. Можно так же устанавливать, какое количество колонок будет на разных размерах экранов (колонки остануться, просто будут смещаться).

Кнопка — Columns Shortcode

Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit. Donec placerat, purus sit amet tincidunt pellentesque, risus lectus tincidunt quam, sit amet imperdiet lectus erat sed mauris.
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit. Donec placerat, purus sit amet tincidunt pellentesque, risus lectus tincidunt quam, sit amet imperdiet lectus erat sed mauris.

 

Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit.
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit.
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit.

 

Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.

 

Адаптивные таблицы

Кнопка — Table Shortcode


Заголовок-1 Заголовок-2 Заголовок-3 Заголовок-4
Значение-1 Значение-2 Значение-3 Значение-4
Значение-1 Значение-2 Значение-3 Значение-4
Значение-1 Значение-2 Значение-3 Значение-4
Значение-1 Значение-2 Значение-3 Значение-4

 

Тултипы при наведении

Кнопка — Tooltip Image Shortcode

Где угодно в контенте можно располагать элементы при наведении на которые будет появляться тултип с дополнительной информацией. Этот элемент при этом может быть ссылкой куда-либо.

Иконки перед заголовками, только в контенте страниц.

Кнопка — Icon Heading Shortcode

 

Панели в контенте — например, обозначить что-то важное

Кнопка — Panel Shortcode

Заголовок панели
Контент Curabitur nec elit sagittis, aliquam elit at, viverra dui. Mauris velit quam, ultrices at adipiscing id, dignissim non nisi. Aliquam ullamcorper placerat semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nec feugiat nisl. Maecenas pretium enim ac lectus ultrices placerat.

 

Информация / Подсказки при клике

Кнопка — Popover Shortcode

 

Выпадающие списки

Кнопка — Button Dropdown Shortcode

 

Лейбы / Маркеры

Кнопка — Label Shortcode

Лейба Маркер Лейба Маркер Лейба Маркер

 

Еще один блок для контента (без заголовка)

Кнопка — Well Shortcode

Curabitur nec elit sagittis, aliquam elit at, viverra dui. Mauris velit quam, ultrices at adipiscing id, dignissim non nisi. Aliquam ullamcorper placerat semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nec feugiat nisl. Maecenas pretium enim ac lectus ultrices placerat.

 

Адаптивные картинки — всегда на всю ширину, не обрезаются и не деформируются

Кнопка — Responsive Image Shortcode

 

 

Иконки

Кнопка — Icon Shortcode

Иконки доступные для использования: http://getbootstrap.com/components/

 

Скругденные картинки — чем квадрантее картинка, тем ровнее круг. Картинки не деформируются…

Кнопка — Image Effects Shortcode

 

Другие шорт коды глючат, и лучше не испоьзовать.