Divi에서 반응형 아코디언 슬라이더를 만드는 방법

아코디언 슬라이더는 작은 공간에 콘텐츠를 표시하는 재미있고 매력적인 방법입니다. 아코디언 슬라이더는 일반적으로 커튼의 접힌 부분처럼 수평으로 쌓인 여러 요소(또는 패널)로 구성됩니다. 패널 중 하나에 마우스를 가져가면 확장되어 다른 아코디언 패널이 축소되면서 콘텐츠가 표시됩니다. 여기에서 확장 및 축소의 아코디언 형식 효과를 얻을 수 있습니다.

이 튜토리얼에서는 CSS만 사용하여 Divi에서 반응형 아코디언 슬라이더를 만드는 방법을 보여 드리겠습니다. 이를 위해 여러 Divi 모듈을 아코디언 패널로 사용할 것입니다. 모든 모듈을 사용할 수 있지만 이 예에서는 매우 창의적인 방법으로 블러 모듈을 사용하여 데스크탑과 모바일 모두에서 멋지게 보이고 작동하는 아름다운 아코디언 슬라이더를 만들 것입니다.

확인 해봐!

엿보기

다음은 이 튜토리얼에서 구축할 내용을 간략히 살펴보겠습니다.

데스크탑

태블릿 및 전화

Divi 반응형 아코디언 슬라이더 레이아웃을 무료로 다운로드하세요

이 튜토리얼에서 디자인한 아코디언 슬라이더를 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

YouTube 채널 구독

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 설치된 Divi 테마(또는 Divi 테마를 사용하지 않는 경우 Divi Builder 플러그인)를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. 튜토리얼에 필요한 배경 이미지에 사용할 약 5개의 서로 다른 모의 이미지를 미디어 라이브러리에 업로드합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

Divi에서 반응형 아코디언 슬라이더 만들기

행 만들기

시작하려면 일반 섹션에 1열 행을 추가하십시오.

그런 다음 행 설정을 열고 다음을 업데이트합니다.

• 거터 폭: 1
• 폭: 100%
• 최대 너비: 800px
• 높이: 400px(데스크톱); 700px(태블릿 및 휴대전화)

너비 및 최대 너비 값은 원하는 대로 변경할 수 있습니다. 아코디언은 모든 행 너비 내에서 확장되고 작동합니다. 또한 디자인이 작동하려면 고정 높이를 설정하는 것이 매우 중요합니다. 자식 요소(열 및 모듈)의 높이는 100%이므로 행의 고정 높이를 설정하지 않으면 자식 요소의 높이가 전혀 없습니다.

열 설정

이제 행의 높이를 설정했으므로 열 설정을 열고 기본 요소에 다음 CSS를 추가합니다.
데스크탑

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

태블릿

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

flex 속성은 아코디언 패널을 데스크탑에서 수평으로 정렬하고 태블릿과 휴대폰에서 수직으로 정렬합니다. 100% 높이를 사용하면 추가할 모듈에서도 100% 높이 값을 사용할 수 있습니다.

Blurb 모듈로 아코디언 패널 만들기

아코디언 슬라이더는 모든 유형의 모듈을 사용하여 만들 수 있습니다. 원한다면 다른 모듈을 조합하여 아코디언 패널로 사용할 수 있습니다. 그러나 이 디자인에서는 블러브 모듈을 사용할 것입니다.

행에 블러브 모듈을 추가하는 것으로 시작하십시오.

Blurb 모듈 디자인

블러브 모듈 설정을 열고 다음을 업데이트하십시오.

모의 제목과 본문 내용을 유지합니다. 나중에 언제든지 변경할 수 있습니다.

그런 다음 광고 아이콘을 다음과 같이 업데이트합니다.

• 아이콘(데스크톱): 수평 화살표 라인 아이콘(스크린샷 참조)

• 아이콘(호버): 아이콘 확인(스크린샷 참조)

• 아이콘(태블릿 및 휴대폰): 수직 화살표 라인 아이콘(스크린샷 참조)

배경

그런 다음 다음과 같이 호버에 배경 이미지와 그라디언트 오버레이를 제공합니다.

• 최소 1000px 너비의 배경 이미지 추가
• 배경 이미지 위치: 중앙 왼쪽

그런 다음 호버에 그라데이션 배경 오버레이를 추가합니다.

호버

• 배경 그라디언트 왼쪽 색상(마우스 오버): #3e215b
• 배경 그라디언트 오른쪽 색상(마우스 오버): rgba(0,0,0,0)
• 기울기 방향: 90deg
• 배경 이미지 위에 그라디언트 배치: 예

상

• 아이콘 색상: #ffffff
• 이미지/아이콘 배치: 왼쪽

그런 다음 디자인 탭으로 이동하여 다음을 업데이트합니다.

제목 및 본문 텍스트

• 제목 글꼴: Poppins
• 제목 글꼴 두께: 반 굵게
• 제목 텍스트 색상: 투명(데스크탑), #ffffff(호버)
• 제목 텍스트 크기: 22px
• 본문 텍스트 색상: 투명(데스크탑), #ffffff(호버)

높이 및 상자 그림자

텍스트에 스타일이 지정되면 다음과 같이 모듈에 100% 높이와 상자 그림자를 지정합니다.

• 높이: 100%
• 박스 섀도우: 스크린샷 참조
• 상자 그림자 수평 위치: -12px
• 상자 그림자 수직 위치: 0px

Blurb 사용자 정의 CSS

아코디언 패널(또는 블러블 모듈)이 나머지 모듈과 확장 및 축소되도록 하려면 flex-grow를 사용하여 모듈의 크기를 변경하는 사용자 지정 CSS를 추가해야 합니다. 아코디언을 구성하는 총 5개의 모듈이 있을 것이므로 기본 상태로 "flex:1"을 추가한 다음 호버 상태에서 "flex:5"로 변경합니다.

고급 탭에서 Blurb 기본 요소에 다음 사용자 지정 CSS를 추가합니다.

데스크탑

flex:1;
position: relative !important;
transition: flex 800ms !important;

태블릿

flex:5;

그런 다음 Blurb 콘텐츠 CSS에 다음 사용자 지정 CSS를 추가합니다.

데스크탑

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;

태블릿

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;

오버플로 및 전환

• 수평 오버플로: 숨김
• 수직 오버플로: 숨김
• 전환 시간 : 400ms
• 전환 속도 곡선: 선형

괜찮은! 그것은 블러브 모듈에 대한 몇 가지 심각한 사용자 정의였습니다. 그러나 좋은 소식은 나머지 아코디언 패널을 만들기 위해 복제하기만 하면 된다는 것입니다.

더 많은 아코디언 패널을 위한 블러브 복제

블러브 모듈 위로 마우스를 가져간 후 복제 아이콘을 네 번 클릭하여 총 5개의 아코디언 패널(또는 모듈)을 만듭니다.

그런 다음 복제한 새 광고 문구 각각에 대한 배경 이미지를 업데이트합니다.

최종 결과

데스크탑

태블릿 및 전화

마지막 생각들

이 반응형 아코디언 슬라이더에는 실제로 사용하는 것을 즐겁게 만드는 몇 가지 고유한 요소가 있습니다. 아코디언 패널은 예상치 못한 결함 없이 호버링 시 매끄럽게 확장 및 축소됩니다. 그리고 UX를 향상시키기 위해 호버 및 모바일에서 광고 아이콘이 변경됩니다. 바라건대, 이 디자인은 다음 프로젝트에 유용할 것입니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!