Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

спойлер виджет конструктор сайта

Спойлер — виджет Elementor

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

Спойлер на сайте или форуме это например текст с заголовком, при нажатии на который, под ним открывается скрытая информация. Потому иногда так и пишут при общении на форуме "Описание под спойлером" или "Дополнительные изображения в спойлере"

Спойлеры применяют везде, т.е не зависимо от того, какой направленности у вас сайт, будь то простой сайт визитка или крупный бизнес сайт или каталог. В основном в нем скрывается некий текст, который по сути не обязателен к прочтению, а только по необходимости. Например, когда составляем инструкцию, есть моменты когда можно описать стандартные ошибки, но не факт что они возникнут и поэтому мы просто в тексте пишем "Если возникла ошибка ХХХ читаем в спойлере". И при клике на спойлер, откроется информация о ошибках.

Для решения задачи по скрытию текста в спойлер, в конструкторе сайта существует специальный виджет "Спойлер". Его задача скрыть текст под заголовком.  Обычно, спойлер используется как единичный элемент, но в случаи необходимости создать спойлер друг за другом, то в виджете есть такая возможность по умолчанию.

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

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

Содержимое

- Спойлера

  • Элементы спойлера - элементы настроек в которых можно ввести текст для заголовка, а так же основное описание, т.е то что скрывается под спойлером.
  • HTML-тег заголовка - тег для html тега заголовка спойлера.
  • Иконка - иконка спойлера по умолчанию, т.е в свернутом состоянии.
  • Иконка активного - иконка спойлера при открытом состоянии.

Стиль

- Спойлер
Доступные стили: Толщина и цвет границы, растояние между спойлерами в одном виджете и тень для каждого спойлера.

- Заголовок
Цвет и фон заголовка, активный цвет текста заголовка,  типографика и внутренние отступы. Все перечисленные свойства доступны для заголовка.

- Иконка
Для иконки доступны свойства положения иконки, цвет иконки, цвет иконки в активном состоянии, а так же отступ текста от иконки.

- Содержимое
Фон, цвет текста, типографика и внутренние отступы. Т.е стандартные стили для данного вида стилевых настроек.

 

Список всех виджетов Elementor вы можете посмотреть на странице Виджеты

Спойлер — виджет Elementor: 13 комментариев

  1. Добрый день, Роман!
    Возможно ли к виджету «спойлер» добавить кнопку с функцией «развернуть/свернуть все спойлеры на странице»?
    С уважением,
    Александр

    1. День добрый. В принципе можно, но не стандартными средствами, а написанием js. Например для нужной кнопки на событие click повесить это

      $('.elementor-toggle-item a').each(function(indx){
      $(this).click()
      });

  2. Добрый день!
    А можно ли сделать, чтобы по умолчанию первый пункт был открыт? (инструмент Аккордеон не подходит, интересует именно спойлер)

    1. День добрый. Такое только через js код.

      jQuery(document).ready(function($){
      $(".elementor-tab-title:first").trigger('click');
      });

      .

    1. В элементор все хорошо, а у вас на сайте плохо. Точнее у вас есть js ошибки, потому скрипты не работают. Если посмотрите в консоль браузера, то сможете увидеть ошибки.

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

  3. Здравствуйте, не могу справиться с такой ситуацией: виджет спойлера работает нормально, Нормально работает и когда происходит выкладка результатов поиска с помощью Search and filter при режиме пагинации, но перестает открываться и перебрасывает вверх если включить infinite scroll. Точнее: споилер открывается нормально до подгрузки , а у постов , следующих после подгрузки (после loading icon) при нажатии на спойлер-он не открывается, а перебрасывается вверх страницы. Консоль браузера ошибок не показывает:((

    1. Здравствуйте. infinite scroll в вашей теме не подгружает скрипт виджета должным образом. Поэтому он и не работает. Пишите автору темы и в поддержку Elementor Pro. Чем больше легальных запросов на доработку, тем больше новых фишек в конструкторе.

    1. Никак. Если только через шаблоны и вставки шоткода. Выше отвечал в вопросе про цены в спойлере.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2017-2020 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности