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

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

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

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

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

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

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

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

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

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

Содержимое

- Спойлера

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

Стиль

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

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

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

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

 

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

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

  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. Никак. Если только через шаблоны и вставки шоткода. Выше отвечал в вопросе про цены в спойлере.

  4. А можно ли в спойлер вставить таблицу? Например, сделать ее на отдельной странице и вставить через динамические теги?

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

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

    1. В данном спойлере наверно никак. Спойлер для небольших текстов. А вы наверно вставляете огромные тексты превышающие высоту экрана.

  6. Здравствуйте! Подскажите, пожалуйста, каким образом мне с подвала сделать переход на открытый спойлер, который расположен не только на одной странице? Можете пошагово рассказать каким образом это сделать? Необходимо сделать переход на страницу FAQ, использую шаблон FAQ от elementor. Спасибо

    1. День добрый. Если задать для виджета FAQ на каждой странице один и тот же id (на вкладке Расширенные) , то можно будет просто создать ссылку вида ./#id_bloka
      и тогда будет переход на виджет (по аналогии якорем)

  7. Спасибо за ответ! Но ведь так же у меня будет переход только конкретно на саму страницу FAQ, а мне нужно при переходе, к примеру, по «Доставка», меня бы отправляло на страницу FAQ и открывало спойлер «Доставка» или я не так понял? Я скинул сайт, посмотрите пример в подвале

    1. Вы хотите открывать спойлер в зависимости от страницы с которой перешли? Если так, то нужно придумать js код с логикой.
      Проще наверно сделать отдельные страницы под каждое FAQ

      А вообще, если у вас интернет магазин и товаров будет много, то лучше делать на другой системе (рекомендую OpenCart) https://shop.opencart-russia.ru/shabloni/

      1. Мне необходимо с подвала на любой странице переходить на открытый спойлер при нажитии на необходимый вопрос

  8. Здравствуйте, нужно сделать спойлер, чтобы открывался текст и после текста было,,закрыть,, и он сворачивался. Есть какое то решение по этому поводу?

    1. Здравствуйте. Решение это написать js скрипт, чтобы закрывал спойлер. Другого решения штатными способами нет.

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

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

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

Реклама

Готовые сайты за 3000 рублей. Купить готовый сайт с конструктором это реально. А создать сайт можно дешево, быстро и просто.
Купить сайт на web5x.ru

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