아코디언 슬라이더는 재미있고 매력적인 디스플레이 방법입니다. 내용 제한된 공간에서. 아코디언 슬라이더는 일반적으로 커튼이 접히는 것처럼 수평으로 쌓인 여러 요소(또는 패널)로 구성됩니다. 패널 중 하나 위로 마우스를 가져가면 확장되어 다음 항목이 표시됩니다. 내용 다른 아코디언 패널은 수축됩니다. 팽창과 수축의 아코디언 효과가 나타나는 곳입니다.
이 튜토리얼에서는 반응형 아코디언 슬라이더를 만드는 방법을 보여줍니다. Divi CSS만 사용합니다. 이를 위해 여러 모듈을 사용합니다. Divi 아코디언 패널 역할을 합니다. 모든 모듈을 사용할 수 있지만 이 예에서는 매우 창의적인 방법으로 블러 모듈을 사용하여 데스크탑과 모바일 모두에서 멋지게 보이고 작동하는 아름다운 아코디언 슬라이더를 만들 것입니다.
이것 좀 봐!
측량
다음은이 튜토리얼에서 무엇을 빌드 할 것인지에 대한 개요입니다.
튜토리얼을 시작합시다
시작하려면 무엇이 필요합니까?
시작하려면 다음을 수행해야합니다.
- 아직 설치하지 않았다면 설치하고 활성화하십시오. 디비 테마 설치됨(또는 플러그인 Divi 빌더를 사용하지 않는 경우 디비 테마).
- WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드 (시각적 생성자)에서 페이지를 편집하십시오.
- 학습서에 필요한 배경 이미지로 사용하려면 라이브러리에서 5 다른 이미지에 대해 다운로드하십시오.
그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.
Divi에서 반응 형 아코디언으로 슬라이더 만들기
라인 만들기
시작하려면 일반 섹션에 열 행을 추가하십시오.
그런 다음 회선 설정을 열고 다음을 업데이트하십시오.
- 거터 폭 : 1
- 너비 : 100 %
- 최대 너비 : 800px
- 높이 : 400px (데스크탑); 700px (태블릿 및 휴대 전화)
너비 및 최대 너비 값은 필요에 따라 변경할 수 있습니다. 아코디언은 크기가 조정되고 모든 행 너비에서 작동합니다. 또한 디자인이 작동하려면 고정 높이를 설정하는 것이 매우 중요합니다. 하위 요소 (열 및 모듈)의 높이는 100 %입니다. 따라서 행의 고정 높이를 설정하지 않으면 자식 요소에 높이가 없습니다.
열 매개 변수
행 높이가 설정되었으므로 열 설정을 열고 다음 CSS 코드를 기본 요소에 추가합니다.
국
display:flex;flex-direction: row;align-items:center;height: 100%;
했던 Tablette
flex-direction: column;
flex 속성은 아코디언 패널을 데스크톱에서 가로로, 태블릿과 휴대폰에서 세로로 정렬합니다. 높이가 100 %이면 추가 할 모듈도 높이 값 100 %를 사용할 수 있습니다.
모듈로 아코디언 패널 만들기 요약
아코디언 슬라이더는 모든 유형의 모듈을 사용하여 만들 수 있습니다. 원한다면 아코디언 패널 역할을하기 위해 다른 모듈의 조합을 사용할 수 있습니다. 하지만이 디자인에서는 Blurb Mods를 사용할 것입니다.
라인에 프리젠 테이션 모듈을 추가하여 시작하십시오.
추상 모듈 디자인
요약 모듈 설정을 열고 다음을 업데이트하십시오.
제목은 허구로 유지하고 내용 몸에서. 나중에 언제든지 변경할 수 있습니다.
그런 다음 프리젠 테이션 아이콘을 다음과 같이 업데이트하십시오.
- 아이콘 (데스크톱) : 가로 화살표 선을 나타내는 아이콘 (스크린 샷 참조)
- 아이콘 (마우스 오버) : 아이콘 확인 (스크린 샷 참조)
- 아이콘 (태블릿 및 휴대폰) : 수직 화살표 선을 나타내는 아이콘 (스크린 샷 참조)
문맥
그런 다음 블 러브에 다음과 같이 배경 이미지와 그라디언트 오버레이를 제공하십시오.
- 너비가 1000 픽셀 이상인 배경 이미지 추가
- 배경 이미지 위치 : 중앙 왼쪽
그런 다음 그라디언트 배경 오버레이를 추가하십시오.
플로트
- 왼쪽 그라데이션 배경 (마우스 오버) : # 3e215b
- 오른쪽 배경 그라디언트 색상 (마우스 오버) : rgba (0,0,0,0)
- 그라데이션 방향 : 90deg
- 배경 이미지 위에 그라디언트 배치 : 예
아이콘
- 아이콘 색상 : #ffffff
- 아이콘 이미지 / 위치 : 왼쪽
그런 다음 디자인 탭으로 이동하여 다음을 업데이트하십시오.
본문의 제목과 본문
- 제목 글꼴 : Poppins
- 글꼴 제목 : Semi Bold
- 텍스트 제목 색상 : 투명 (데스크톱), #ffffff (마우스 오버)
- 텍스트 제목 크기 : 23px
- 본문 텍스트 색상 : 투명 (데스크톱), #ffffff (마우스 오버)
높이와 상자 그림자
텍스트가 세련되면 모듈에 높이 100 %와 그림자 상자를 다음과 같이 할당하십시오.
- 높이 : 100 %
- Box Shadow : 스크린 샷 참조
- 상자 그림자 가로 위치 : -12px
- 상자의 그림자 세로 위치 : 0px
Blurb 사용자 정의 CSS
아코디언 패널 (또는 프리젠 테이션 모듈)이 나머지 모듈과 함께 확장 및 축소되도록하려면 사용자 지정 CSS를 추가하여 flex-grow로 모듈의 크기를 변경해야합니다. 아코디언을 구성하는 총 5 개의 모드를 가질 예정이므로 기본 상태에 "flex : 1"을 추가 한 다음 호버 상태에서 "flex : 5"로 변경합니다.
고급 탭에서 기본 Blurb 요소 인 다음 사용자 정의 CSS를 추가하십시오.
국
flex:1;position: relative !important;transition: flex 800ms !important;
했던 Tablette
flex:5;
그런 다음 CSS Blurb Content에 다음과 같은 사용자 정의 CSS를 추가하십시오.
국
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
했던 Tablette
width: 100%;height: 100%;position: relative !important;
오버플로 및 전환
- 수평 오버플로 : 숨겨진
- 수직 오버플로 : 숨겨진
- 전환 기간 : 400ms
- 전환 속도 곡선 : 선형
잘! 프레젠테이션 모듈의 진지한 사용자 지정이었습니다. 그러나 좋은 소식은 나머지 아코디언 패널을 만들기 위해 복제하는 것뿐입니다.
더 많은 아코디언 패널을 위해 Blurbs 복제
프레젠테이션 모듈 위로 마우스를 이동하고 복제 아이콘을 네 번 클릭하여 총 XNUMX 개의 아코디언 패널 (또는 모듈)을 만듭니다.
그런 다음 복제 한 각각의 새 블 러브에 대한 배경 이미지를 업데이트합니다.
최종 결과
마지막 생각
이 반응 형 아코디언 슬라이더에는 실제로 사용하기 재미있는 몇 가지 고유 한 요소가 있습니다. 아코디언 패널은 예기치 않은 문제없이 호버링하면서 확장 및 축소됩니다. 그리고 프레젠테이션 아이콘은 마우스를 올려 놓거나 모바일에서 변경되어 UX를 향상시킵니다. 이 디자인이 다음 프로젝트에 유용하기를 바랍니다.
