Споллеры, табы

На данной странице покажем дополнения, возмоляющие в простой форме скрыть лишние для нас элементы. В данном случае это табы, споллеры (аккордеоны), и вертикальные туры.

На мобильных стройствах возможно они будут отображатьсяч одинаково. Это вызвано тем, что размеры экранов телефонов очень малы, и все дизайнерские особенности минимализируются в пользу удобства читабельности на экранах малых размеров.

В принципе, суть одна и таже — максимально плотно и читабельно упаковать большое количество информации на странице. Пользователь сам может выбирать нужную информацию, и, не дожидаясь прогрузки страницы, увидеть нужное содержимое.

К примеру, удобно для определенного товара или услуги. Технические характеристики возможно поместить в один блок, отзывы в другой, комплектацию в третий. Посетитель сам будет кликать на нужные блоки и мгновенно получать информацию.

Табы

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

Содержимое таба, здесь может быть практически любой контент, включая изображения, видео. Блоки могут быть самой различной величины, но, как правило, блоки имеют сравнительно небольшие размеры.

Кроме того, могут быть даже графики и прочие сложные элементы страницы, при этом, расположение элементов может быть каким-угодно. Ограничений в компомовке почти нет.

Количество табов может быть достаточно большим, при этом, возможно спихнуть на обычную страницу оргомное количество контанта. Это очень удобно, особенно, если нужно помесить огромное количество контента на страницу.

Споллер (аккордеон)

Возможно, Вы уже сталкивались с таким типом контента, особенно, на форумах. Суть от аккордеонов примерно такая же, как и от споллеров, разница только в расположении блоков.

Мы видим, что в принципе, аккордеон очень похож на споллер. Похож принцип скрытия контента. И здесь тоже возможно помещать любой контент.

Количество секций строго не ограничено. Возможно поместить хоть 5, хоть 10 блоков. Однако, не стоит размещать большое число блоков. Это не совсем удобно для конечного пользователя.

Ну и конечно же, рекомендуем использовать этот блок для пользователей, которые достаточно владеют ПК, в противном случае, посетитель может просто не понять, что этот блок раскрывается по клику.

Тур по функционалу

Да, есть ещё и третий вариант расположений блоков, он более наглядный для демонстрации функционала, и более популярен у коммеческих сайтах.

Пример текста первой страницы. Возможна вставка стороннего контента, все зависит от финтации и потребностей самого проекта.

Разместим, для примера, изображение.

А сюда разместим диаграмму

Предпродакшн
Продакшн
Постпродакшн

В данный блок поместим несколько изображений с возможностью увеличения.