2 способа создания настраиваемых переключателей Show More в Divi

Показать больше переключателей может пригодиться для множества различных приложений на веб-сайте. Обычно переключатели «Показать больше» используются для отображения большего количества текста при нажатии на ссылку «Показать больше» (например, переключатели «Читать больше»). Это помогает сделать первоначальный дизайн более компактным и лаконичным, предоставляя посетителю возможность щелкнуть для получения дополнительной информации, если она ему понадобится.

В этом руководстве мы покажем вам два способа создания настраиваемых переключателей «Показать больше» для вашего сайта Divi. Первый способ включает преобразование модуля переключения Divi в переключатель «Показать больше», который находится под модулем и готов показать / скрыть дополнительный текст. Второй метод будет включать создание переключателя «Показать больше», который может отображать / скрывать целые строки или модули Divi. Как вы понимаете, это открывает возможность отображать или скрывать практически любой контент, который вы хотите!

Давайте начнем.

Sneak Peek

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

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

1-й способ: создание переключателя "Показать больше" с помощью модуля переключения Divi

Сначала добавьте в раздел строку из двух столбцов.

В левом столбце добавьте модуль аннотации.

Под модулем рекламного сообщения добавьте модуль переключения. Мы собираемся превратить модуль переключения в переключатель «Показать больше», чтобы он отображал / скрывал больше текста под модулем рекламного сообщения при нажатии на переключатель.

Для этого откройте настройки модуля переключения и обновите текст заголовка:

• Название: Показать больше

На вкладке дизайна обновите следующее, чтобы удалить стили по умолчанию:

• Открыть переключатель Цвет фона: rgba (0,0,0,0);
• Цвет фона закрытого переключателя: rgba (0,0,0,0);

• Padding: 0px сверху, 0px снизу, 0px слева
• Ширина границы: 0 пикселей

На вкладке Advanced обновите Custom CSS следующим образом:

Для основного элемента …

display:flex;
flex-direction: column;
align-items: flex-end;

Для переключения заголовка …

order:2;
padding-right:25px !important;

Для переключения содержимого …

order:1;
padding: 0px;

Этот заголовок переключателя и содержимое переключателя упорядочиваются по-разному, используя свойство order с display: flex. Теперь интерактивный заголовок располагается под контентом, так что он будет работать как переключатель «Показать больше».

Теперь добавьте следующий класс CSS в модуль переключения:

• Класс CSS: et-readmore-toggle

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

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

Откройте настройки модуля рекламного сообщения над переключателем и обновите поля:

• Нижнее поле: 10 пикселей;

Теперь мы готовы добавить JQuery, необходимый для изменения текста заголовка переключателя на «Показать больше» или «Показать меньше» при нажатии.

Чтобы добавить код, добавьте модуль кода под модулем переключения.

Затем вставьте следующий JQuery, убедившись, что код заключен в необходимые теги скрипта.

(function($) {
    $(document).ready(function(){
        $('.et-readmore-toggle .et_pb_toggle_title').on('click', function(e) {
            if ($(e.target).closest('.et-readmore-toggle').hasClass('et_pb_toggle_open')) {
                $(this).text('Show More');
            } else {
                $(this).text('Show Less');
            }
        });
    });
})(jQuery);

Вот результат.

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

2-й способ: создание дополнительного переключателя для отображения / скрытия любого модуля или строки Divi

Если первое переключение «Показать больше» с использованием модуля переключения кажется слишком ограничивающим, следующий метод вас заинтересует. Мы собираемся создать настраиваемый переключатель `` Показать больше '', который вы можете использовать для отображения / скрытия и модуля Divi или даже всей строки!

Создание переключателя "Показать больше" для модуля Divi

Вот как это сделать.

Сначала создайте еще одну строку из двух столбцов, как в первом примере.

Затем добавьте модуль рекламного сообщения в столбец 1.

Под модулем рекламных объявлений мы собираемся добавить модуль контактной формы.

Эта контактная форма будет модулем, который мы будем показывать / скрывать при нажатии кнопки «Показать еще».

Чтобы настроить таргетинг на этот модуль в коде, откройте настройки контактной формы и добавьте следующий класс CSS:

• Класс CSS: et-show-more-content

Нам также нужно будет настроить таргетинг на родительский контейнер модуля, который мы хотим показать / скрыть. Это позволит нам при необходимости добавить несколько экземпляров переключателя show more на странице. В этом случае родительским контейнером этого модуля контактной формы является столбец 1. Откройте настройки для столбца 1 и добавьте следующий класс CSS:

• Класс CSS: et-show-more-container

Чтобы создать кнопку-переключатель «Показать больше», добавьте модуль кнопки под модулем контактной формы.

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

• Класс CSS: et-show-more-toggle

Затем измените текст кнопки на «Показать больше».

Теперь мы готовы добавить код, необходимый для работы нашего переключателя show more.

Под кнопкой добавьте модуль кода, чтобы мы могли вставить наши CSS и JQuery.

Сначала вставьте следующий CSS в поле кода, убедившись, что код заключен в необходимые теги стиля :

  .et-show-more-content {
    display:none;
  }
  .et-fb .et-show-more-content {
    display:block;
  }
  .et-show-more-toggle {
    cursor:pointer;
  }

Затем под CSS вставьте следующий JQuery, убедившись, что код заключен в теги скрипта :

(function($) {
    $(document).ready(function(){
        $('.et-show-more-toggle').on('click', function(e) {
            e.preventDefault();
            $(e.target).closest('.et-show-more-container').children('.et-show-more-content').slideToggle("300");
            $(this).toggleClass('et-show-more-toggle_active');
            if ($(this).hasClass('et-show-more-toggle_active')) {
                $(this).text('Show Less');
            } else {
                $(this).text('Show More');
            }
        });
    });
})(jQuery);

Чтобы сбалансировать наш дизайн, продублируйте столбец 1, чтобы создать еще один идентичный столбец. Обязательно удалите пустой третий столбец и дополнительный модуль кода, который был перенесен с дубликатом.

Вот результат.

Создание переключателя "Показать больше" для строки Divi

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

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

Затем скопируйте один из существующих модулей дополнительных кнопок и вставьте его в новую строку. Затем откройте настройки кнопок и измените выравнивание кнопок:

• Расположение кнопок: по центру

Поскольку мы хотим настроить таргетинг на эту строку как на контент, который мы хотим показать / скрыть, откройте настройки строки, содержащей переключатели отображения дополнительных для модулей контактной формы. Затем добавьте в строку следующий класс CSS:

• et-show-more-content

И нам также нужно добавить настраиваемый класс CSS в родительский контейнер строки (который является разделом). Откройте настройки раздела и добавьте следующий класс CSS:

• et-show-more-container

Вот результат.

Окончательные результаты

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

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!