Модулът за превключване на Divi ви позволява да показвате съдържание допълнително на щракване, без да е необходим допълнителен jQuery код. Подобно на модула Accordion, превключващите модули обикновено се използват за споделяне на a съдържание групирани, като например често задавани въпроси. Можете обаче да ги използвате и за други задачи, например за структуриране на вашата страница. В този урок ще използваме превключващи модули с пълна ширина, за да създадем прост дизайн на страница, който се държи при щракване. Дизайнерският стил, с който работим, е смел и изчистен. Също така ще можете да изтеглите JSON файла безплатно!

Да вървим.

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

Нека започнем да пресъздаваме

Добавете нов раздел

разстояние

Започнете със създаване на нова страница (или отваряне на съществуваща) и добавяне на редовен раздел към нея. Единственото нещо, което трябва да направите в настройките на раздела, е да премахнете всички подложки по подразбиране отгоре и отдолу от настройките на разстоянието.

  • Най-висока подложка: 0px
  • Подложка отдолу: 0px

Добавете нов ред

Структура на колоната

Продължете да добавяте нов ред, като използвате следната структура на колоната:

оразмеряване

Без още да добавяте модули, отворете настройките на реда и се уверете, че линията докосва лявата и дясната страна на контейнера на секцията, като промените настройките за оразмеряване. Това е важна стъпка в този урок. това позволява модулът Toggle, който ще добавим по-късно в този урок, да стане на пълна ширина.

  • Използвайте персонализирана ширина на улука: Да
  • Ширина на улука: 1
  • Ширина: 100%
  • Максимална ширина: 100%

разстояние

Също така премахваме подредената по подразбиране горна и долна подложка от реда. Това ще премахне цялото пространство между превключващия модул и контейнера за редове / колони, в който е поставен.

  • Най-висока подложка: 0px
  • Подложка отдолу: 0px

Добавете рокер модул

Вмъкнете заглавие и съдържание

Време е да започнете да добавяте модули! Единственият модул, от който се нуждаем в този ред, е модул Toggle. Ще използваме областта за заглавие, за да добавим заглавие и да поставим всичко съдържание които искаме да споделим в областта на съдържанието на тялото. Чувствайте се свободни да поставите каквото искате в областта на съдържанието; от текст към изображения и др.

Etat

Използваме затворено състояние на превключване, но не се колебайте да го оставите и отворено.

  • Състояние: близо

Настройки по подразбиране на иконата

Преминете към раздела Дизайн и променете съответно настройките на иконата на модула:

  • Цвят на иконата: # 570fff
  • Използвайте персонализиран размер на иконата: ДА
  • Размер на шрифта на иконата: 6vw

Настройки на иконата при задържане

Променете цвета на иконата на мишката.

  • Цвят на иконата: # f2f2f2

Настройки за отказ по подразбиране

След това променете цвета на фона на затворения превключвател.

  • Превключване на цвета на фона: #ffffff

Задръжте курсора на мишката над настройките

И променете цвета, който витае също.

  • Превключване на цвета на фона: # 000000

Настройки за текст на заглавието

Продължете, като промените текстовите настройки на заглавието, както следва:

  • Цветно заглавие на текста: # 000000
  • Ниво на заглавието на заглавието: H2
  • Заглавие на полицията: Монсерат
  • Заглавие на текста: Ляво подравняване
  • Размер на заглавието на текста: 8vw (десктоп), 10vw (таблет и телефон)
  • Разстояние между заглавните букви: -1vw (десктоп), -0.5vw (таблет и телефон)
  • Височина на заглавния ред: 0.7em

Настройки за затворен текст на заглавието по подразбиране

След това получите достъп до текстовите параметри на затвореното заглавие и ги променете съответно:

  • Шрифт на затворено заглавие: Montserrat
  • Заглавие затворено Размер на текста: 18vw (десктоп), 16vw (таблет и телефон)
  • Затворена височина на заглавието: 0.8em

Задръжте курсора на мишката върху текстовите настройки на заглавието

Променете цвета на затворения текст на надпис с курсора на мишката.

  • Заглавие затворено Цвят на текста: # f4f4f4

Настройки на основния текст

Отидете на настройките на текста на тялото и също направете някои промени.

  • Шрифт на тялото: Fira Sans
  • Тегло на шрифта: Лек
  • Подравняване на текста на тялото: Оправдайте
  • Размер на основния текст: 1.2vw (десктоп), 2vw (таблет), 3vw (телефон)
  • Височина на тялото: 2.1em

разстояние

Освен това добавете персонализирани подплънки в горната, долната и лявата част на модула.

  • Горна подложка: 10vw
  • Подложка отдолу: 10vw
  • Ляво запълване: 6vw

граница

Продължете, като премахнете рамката по подразбиране на модула в настройките на границата.

  • Ширина на границата: 0px

Превключете CSS съдържание

Определете параметрите на модулния модул, като добавите следните CSS кодови линии към работния плот:

ширина: 60vw; граница вляво: 0.2vw solidblack; подплънка: 5vw 5vw 5vw 5vw;

Променете ширината на CSS реда на кода на таблета и телефона:

ширина: 85vw;

Клонирайте цялата секция колкото пъти искате

След като завършите първия раздел, реда и модула Toggle, можете да клонирате цялата секция толкова пъти, колкото искате. в зависимост от количеството съдържание, което искате да покажете на страницата си.

Промяна на съдържанието

Не забравяйте да промените цялото съдържание на флип-флопа във всеки модул за джапане.

Променете цветовете на иконите

След това отворете всеки модул Toggle поотделно и променете цвета на иконата. Тези, които използвахме за този урок, са споменати по-долу:

  • Цвят на иконата 1: # ff9000
  • Цвят на иконата 2: # 00ffd4

изследване

След като всички стъпки са предприети, нека да разгледаме окончателно какво се е случило с различни размери на екрана.

Заключителни мисли

В тази статия ви показахме как да бъдете креативни с модула Toggle на Divi. По-точно; направихме ги с пълна ширина и ги използвахме за показване на съдържание от различни секции по творчески начини. Този урок показва, че можете лесно да използвате модулите на Divi извън кутията, когато вземете предвид различните контейнери. Също така успяхте да изтеглите безплатно JSON файла с урока! Ако имате въпроси или предложения, не се колебайте да оставите коментар в секцията за коментари по-долу.

Тя ПИН на Pinterest