Содержание:

1. Виды виджета «Спойлер»
2.Настройки виджета «Спойлер»

Как убрать заглавный регистр у заголовка спойлера?
Как изменить цвет фона?
Где еще можно найти спойлеры?
Можно ли один из спойлеров показывать сразу раскрытым на странице?
​

Виджет «Спойлер» предназначен для показа и скрытия размещенного в виджете контента. Ответы на вопросы, длинные тексты и любые элементы будут показываться и скрываться по нажатию на кнопку.

Найти элемент можно на панели инструментов:

1. Виды виджета «Спойлер»

Виджет представлен в трёх видах:

• со стрелочкой справа, цветным фоном и тенью вокруг содержимого;

• с рамкой, цветными кнопкой-иконкой и фоном;

• со стрелочкой слева, цветной линией под заголовком и прозрачным фоном.

После того, как мы выбрали нужный виджет, перейдем к его наполнению.
Подкорректируем заголовок как обычный текст и разместим в спойлере
желаемые виджеты:

Для настройки внешнего вида спойлера перейдем в настройки, для этого кликаем по меню «Гаечный ключ» в правом верхнем углу виджета.
​

2. Настройки виджета «Спойлер»

У каждого вида спойлера свой набор настроек. Рассмотрим уже добавленный второй тип, в котором можно изменить:

• Цвет фона

Цвет фона «Спойлера» можно изменить на любой из палитры цветов, кликнув по цветному квадрату, или на один из глобальных цветов, выбрав иконку «земной шар».

• Цвет кнопки

Цвет кнопки, которая показывает и скрывает содержимое виджета, можно изменить на любой цвет также, как и фон.

• Размер рамки

Задаем размер границы виджета «Спойлер» передвигая ползунок, делая его толще или тоньше.

• Размер иконки

Двигая ползунок, размер иконки можно сделать больше или меньше.

• Положение кнопки

Изменяем положение кнопки-иконки: она может находиться справа или слева.

• Исходный код

Если необходимо подправить стили CSS или подкорректировать структуру спойлера, то имеется доступ к исходному коду виджета.

​

Как убрать заглавный регистр у заголовка спойлера?

По умолчанию текст заголовка можно написать только большими буквами. Но если изменить 11 строку вкладки CSS на «text-transform: none;» то изменение регистра отменяется.

text-transform: none;

У первого вида спойлера для этой цели необходимо изменить строку 13 вкладки CSS.

Как изменить цвет фона?

У спойлеров с фоном, а это первый и второй тип, можно изменить строку 2 во вкладке CSS на «background-color: none;»
Это сделает их прозрачными.

background-color: none; 

Где еще можно найти спойлеры?

Некоторые шаблоны секций содержат примеры использования спойлеров, такие примеры можно найти в группе «Вопросы и ответы»

Можно ли один из спойлеров показывать сразу раскрытым на странице?

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

Готово! Мы только что разместили на странице спойлер 🙂