Toggle 모듈 Divi 표시할 수 있게 해줍니다 내용 추가 jQuery 코드가 필요 없이 클릭당 추가됩니다. Accordion 모듈과 유사하게 토글 모듈은 일반적으로 내용 자주 묻는 질문 등을 그룹화했습니다. 그러나 페이지 구성과 같은 다른 작업에도 사용할 수 있습니다. 이 튜토리얼에서는 전체 너비 토글 모듈을 사용하여 클릭 시 작동하는 간단한 페이지 디자인을 만듭니다. 우리가 다루는 디자인 스타일은 대담하고 깔끔합니다. JSON 파일을 무료로 다운로드할 수도 있습니다!

가자.

튜토리얼을 시작하기 전에 다양한 화면 크기에서 어떻게 보이는지 간단히 살펴 보겠습니다.

다시 만들기 시작합시다

새 섹션 추가

간격

새 페이지를 만들고 (또는 기존 페이지를 여는) 일반 섹션을 추가하여 시작합니다. 섹션 설정에서 수행 할 유일한 작업은 간격 설정에서 모든 기본 상단 및 하단 패딩을 제거하는 것입니다.

  • 상단 패딩 : 0px
  • 하단 패딩 : 0px

새 행 추가

기둥 구조

다음 열 구조를 사용하여 새 행을 계속 추가하십시오.

크기 조정

아직 모듈을 추가하지 않고 행 설정을 열고 크기 설정을 변경하여 선이 섹션 컨테이너의 왼쪽과 오른쪽에 닿는 지 확인합니다. 이것은이 튜토리얼에서 중요한 단계입니다. 이렇게하면이 자습서의 뒷부분에서 추가 할 Toggle 모듈이 전체 너비가 될 수 있습니다.

  • 사용자 정의 거터 너비를 사용하십시오. 예
  • 거터 폭 : 1
  • 너비 : 100 %
  • 최대 너비 : 100 %

간격

행에서 기본 상단 및 하단 패딩도 제거합니다. 이렇게하면 토글 모듈과 모듈이 배치 된 행 / 열 컨테이너 사이의 모든 공간이 제거됩니다.

  • 상단 패딩 : 0px
  • 하단 패딩 : 0px

로커 모듈 추가

제목과 내용 삽입

이제 모듈 추가를 시작할 시간입니다! 이 줄에 필요한 유일한 모듈은 Toggle 모듈입니다. 제목 영역을 사용하여 제목을 추가하고 모든 것을 배치합니다. 내용 본문 콘텐츠 영역에서 공유하고 싶은 내용입니다. 콘텐츠 영역에 원하는 것을 자유롭게 배치하세요. 텍스트부터 이미지까지.

ETAT

닫힌 토글 상태를 사용하지만 자유롭게 열어 두어도됩니다.

  • 상태 : 닫기

기본 아이콘 설정

디자인 탭으로 전환하고 그에 따라 모듈 아이콘 설정을 변경합니다.

  • 아이콘 색상 : # 570fff
  • 맞춤 아이콘 크기 사용 : 예
  • 아이콘 글꼴 크기 : 6vw

마우스 오버시 아이콘 설정

호버 아이콘의 색상을 변경합니다.

  • 아이콘 색상 : # f2f2f2

기본 장애 조치 설정

그런 다음 닫힌 토글의 배경색을 변경합니다.

  • 배경 색상 전환 : #ffffff

설정 위로 마우스를 가져갑니다

색상 호버링도 변경하십시오.

  • 배경색 전환 : # 000000

제목 텍스트 설정

다음과 같이 제목의 텍스트 설정을 변경하여 계속하십시오.

  • 색상 텍스트 제목 : # 000000
  • 타이틀 타이틀 레벨 : H2
  • 타이틀 경찰 : Montserrat
  • 텍스트 제목 : 왼쪽 정렬
  • 텍스트 제목 크기 : 8vw (데스크톱), 10vw (태블릿 및 전화)
  • 제목 문자 간격 : -1vw (데스크톱), -0.5vw (태블릿 및 전화)
  • 제목 줄의 높이 : 0.7em

닫힌 제목 텍스트 설정

그런 다음, 닫힌 제목의 텍스트 매개 변수에 액세스하여 적절하게 수정하십시오.

  • 닫힌 제목 글꼴 : Montserrat
  • 제목 닫힘 텍스트 크기 : 18vw (데스크톱), 16vw (태블릿 및 전화)
  • 닫힌 제목 높이 : 0.8em

제목의 텍스트 설정 위로 마우스를 가져갑니다.

호버에서 닫힌 캡션 텍스트의 색상을 변경하십시오.

  • 제목 닫힘 텍스트 색상 : # f4f4f4

본문 텍스트 설정

본문 설정으로 이동하여 변경하십시오.

  • 바디 글꼴 : Fira Sans
  • 폰트의 무게 : Light
  • 본문의 정렬 : 정당화
  • 본문 크기 : 1.2vw (데스크톱), 2vw (태블릿), 3vw (전화)
  • 본체 높이 : 2.1em

간격

또한 모듈의 상단, 하단 및 왼쪽에 사용자 정의 패딩을 추가하십시오.

  • 상단 패딩 : 10vw
  • 하단 패딩 : 10vw
  • 왼쪽 패딩 : 6vw

경계

테두리 설정에서 모듈의 기본 테두리를 제거하여 계속하십시오.

  • 테두리의 너비 : 0px

CSS 내용 토글

데스크탑에 다음 CSS 코드 라인을 추가하여 토글 모듈 매개 변수를 정의하십시오.

너비 : 60vw; 테두리 왼쪽 : 0.2vw 단색 검정; 패딩 : 5vw 5vw 5vw 5vw;

태블릿과 휴대 전화에서 CSS 코드 행의 너비를 변경하십시오.

폭 : 85vw;

원하는만큼 전체 섹션 복제

첫 번째 섹션, 라인 및 토글 모듈을 완료하면 전체 섹션을 원하는만큼 복제 할 수 있습니다. 페이지에 표시 할 컨텐츠의 양에 따라

내용 변경

각 플립 플롭 모듈에서 플립 플롭의 전체 내용을 변경하십시오.

아이콘 색상 변경

그런 다음 각 Toggle 모듈을 개별적으로 열고 아이콘 색상을 변경합니다. 이 자습서에서 사용한 항목은 다음과 같습니다.

  • 아이콘 색상 1 : # ff9000
  • 아이콘 색상 2 : # 00ffd4

측량

이제 모든 단계를 마쳤으므로 다양한 화면 크기에서 발생한 일을 마지막으로 살펴 보겠습니다.

마지막 생각

이 기사에서는 Toggle 모듈로 창의력을 발휘하는 방법을 보여 드렸습니다. Divi. 더 정확하게; 우리는 이를 전체 너비로 만들고 창의적인 방식으로 다양한 섹션의 콘텐츠를 표시하는 데 사용했습니다. 이 튜토리얼에서는 다음 모듈을 쉽게 사용할 수 있음을 보여줍니다. Divi 다양한 용기를 고려할 때 상자 외부. 튜토리얼 JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 자유롭게 의견을 남겨주세요.