Divi에서 팬아웃 호버 효과로 ET의 레이아웃 팩 미리보기를 다시 만드는 방법

Elegantthemes.com의 새로운 웹사이트 디자인의 멋진 기능 중 하나는 Divi 제품 페이지에서 미리 만들어진 레이아웃 팩 미리보기입니다. 이 디자인을 독특하게 만드는 것은 각 레이아웃 팩이 마우스를 올리면 펼쳐지는 3개의 개별 이미지로 표시되는 방식입니다.

오늘 우리는 Divi에서 동일한 인상적인 팬아웃 호버 효과를 사용하여 레이아웃 팩 미리보기의 디자인을 다시 만드는 방법을 보여 드리겠습니다. 디자인이 조금 더 고급스럽기 때문에 Divi의 기본 제공 디자인 옵션과 함께 일부 사용자 정의 CSS를 사용할 것입니다. 그러나 걱정하지 마십시오. 구축하는 데 오랜 시간이 걸리지 않으며 결과는 확실히 가치가 있습니다.

시작하자.

엿보기

다음은 팬아웃 호버 효과가 있는 레이아웃 팩 미리 보기입니다. 맨 아래 행에는 마우스를 가져갈 때 이미지를 개별적으로 회전시키는 보조 호버 효과가 있습니다.

데스크톱의 3열 레이아웃은 태블릿과 휴대폰의 1열로 조정됩니다.

레이아웃 팩 미리보기 팬아웃 호버 효과 레이아웃 무료 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

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

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

YouTube 채널 구독

시작하는 데 필요한 것

시작하려면 다음 설정이 필요합니다.

1. Divi 테마가 설치되고 활성화되었습니다.
2. Divi의 프론트 엔드(비주얼) 빌더에서 처음부터 빌드하기 위해 생성된 새 페이지입니다.
3. 모의 콘텐츠에 사용할 3개의 이미지. 최상의 결과를 얻으려면 이미지가 약 250x375픽셀이어야 합니다. 이것은 웹 페이지의 미리보기이므로 페이지 디자인의 스크린샷을 만든 다음 그에 따라 각 이미지를 자르거나 크기를 조정할 수 있습니다.

그런 다음 Divi에서 일부 호버 탭을 만들기 시작할 수 있는 빈 캔버스가 생깁니다.

Divi에서 팬아웃 호버 효과로 ET의 레이아웃 팩 미리보기 재생성

섹션 및 행 만들기

3열 행으로 새 일반 섹션을 만듭니다.

모듈을 추가하기 전에 행 설정을 열고 다음과 같이 크기와 간격을 업데이트하십시오.

• 거터 폭: 2
• 폭: 90%
• 최대 너비: 1120px(데스크톱), 400px(태블릿)

그런 다음 모바일에서 더 많은 간격을 위해 태블릿의 행에 패딩을 추가합니다.

• 열 1 패딩: 20% 하단
• 2열 패딩: 하단 20%
• 3열 패딩: 하단 20%

이미지 추가 1

이제 레이아웃 팩 미리보기 디자인을 구성할 세 개의 이미지 중 첫 번째 이미지를 추가할 준비가 되었습니다. 1열에 이미지 모듈을 추가하세요.

그런 다음 이미지를 이미지 모듈에 업로드합니다(크기가 약 250px x 375px이어야 함).

그런 다음 디자인 설정을 다음과 같이 업데이트합니다.

• 이미지 정렬: 중앙
• 너비: 220px
• 수직 오버플로: 숨김
• Z 인덱스: 4

이미지 컨테이너(이미지 자체가 아님)를 대상으로 해야 하므로 사용자 정의 CSS를 사용하여 사용자 정의 높이, 상자 그림자 및 테두리 반경을 추가해야 합니다. 다음 CSS를 기본 요소에 추가합니다.

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

이렇게 하면 나중에 호버 효과를 추가할 때 이미지 컨테이너와 함께 이미지를 조정할 수 있습니다. 이제 볼 수 있듯이 맞춤 높이가 240px이고 오버플로가 "숨김"으로 설정되어 있기 때문에 이미지 하단이 약간 잘렸습니다.

이미지 추가 2

두 번째 이미지를 생성하려면 열 1의 첫 번째 이미지 모듈 아래에 새 이미지 모듈을 추가합니다. 그런 다음 새 이미지(250X350)를 모듈에 업로드합니다.

그런 다음 이미지를 이미지 1의 뒤에서 약간 왼쪽에 배치해야 합니다. 이렇게 하려면 수직 오버플로를 숨기고 사용자 정의 너비와 높이를 추가해야 합니다(이미지 1에서 했던 것처럼). 여기서 주요 차이점은 이미지 1 뒤에 있는 열의 왼쪽 상단에 표시되도록 이미지에 절대 위치를 지정해야 한다는 것입니다.

이렇게 하려면 다음을 업데이트하십시오.

• 너비: 180px
• 수직 오버플로: 숨김

그런 다음 기본 요소에 다음 사용자 정의 CSS를 추가합니다.

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

이미지 추가 3

이제 레이아웃 팩 미리보기를 완료하기 위해 세 번째 이미지를 추가할 준비가 되었습니다. 이 시점에서 시각적 빌더 사용을 더 어렵게 만드는 겹치는 부분이 있으므로 와이어프레임 보기 모드를 사용하는 것이 좋습니다. 와이어프레임 모드를 배포하고 이미지 2를 복제합니다.

우리는 이미지 2에 사용한 대부분의 설정을 유지하기 위해 이미지를 복제했습니다. 유일한 차이점(새 이미지 제외)은 이미지를 왼쪽 대신 오른쪽에 배치해야 한다는 것입니다.

복제된 이미지(이미지 3)를 열고 이미지 모듈을 새 이미지(250×375)로 업데이트합니다.

그런 다음 left 위치 속성을 right 위치 속성으로 변경하여 사용자 정의 CSS를 업데이트합니다. CSS에 대한 다른 변경 사항은 필요하지 않습니다.

원하는 경우 기본 요소에 다음 CSS를 복사하여 붙여넣어 현재 CSS를 바꿀 수 있습니다.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

여태까지는 그런대로 잘됐다

여기까지가 최종 결과입니다.

디자인은 사실 그대로 정말 아름답지만 팬아웃 호버 효과로 한 단계 높여보자.

팬아웃 호버 효과 CSS 추가

일반적으로 하나의 이미지만 처리하는 경우 기본 제공 Divi 옵션을 사용하여 호버 효과를 쉽게 추가할 수 있습니다. 그러나 이 팬아웃 호버 효과를 사용하려면 상위 열 위로 마우스를 가져갈 때 여러 하위 요소(이미지)의 호버 상태를 한 번에 적용해야 합니다. 열 위로 마우스를 가져갈 때 다음이 이미지에 대한 다음 조정을 수행하기를 원합니다.

1. 호버 시 부드러운 전환을 위해 각 이미지에 전환 지속 시간을 추가합니다.
2. 이미지 1을 너비 180px, 높이 240px로 조정합니다. 이렇게 하면 이미지 컨테이너가 더 커지고 더 좁아져 이미지가 더 많이 표시됩니다.
3. 이미지 2와 3을 너비 160px, 높이 220px로 조정합니다. 이렇게 하면 이미지가 더 많이 표시되도록 이미지가 커지고 좁아집니다.
4. Image 2를 조정하여 시계 반대 방향으로 5도 회전하고 약간 왼쪽으로 이동합니다. -5도 값 transform:rotate 속성을 추가하고 left 위치 속성 값을 0으로 조정하여 이를 수행할 수 있습니다.
5. Image 3을 조정하여 시계 방향으로 5도 회전하고 약간 오른쪽으로 이동합니다. transform:rotate 속성에 5도 값을 추가하고 right position 속성 값을 0으로 조정하여 이를 수행할 수 있습니다.

이러한 호버 효과에 필요한 사용자 정의 CSS를 추가하려면 이미지가 포함된 행에 사용자 정의 CSS 클래스를 추가해야 합니다. 이렇게 하면 특정 행의 이미지에만 사용자 정의 CSS를 적용할 수 있습니다.

행 설정을 열고 다음 CSS 클래스를 추가합니다.

• CSS 클래스: 팬아웃 이미지

페이지에 사용자 정의 CSS를 추가하려면 페이지 설정을 열고 고급 탭에서 다음 사용자 정의 CSS를 추가하십시오.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

각 CSS 스니펫 위에 주석을 추가하여 각 CSS가 수행하는 작업을 상기시킵니다.

완료되면 최종 결과를 확인하세요.

최종 결과

선택적 호버 효과: 호버에서 이미지 1과 2를 개별적으로 회전

레이아웃 팩 미리보기 이미지에 다른 수준의 참여를 추가하기 위해 초기 호버 효과와 별도로 이미지 1과 이미지 2의 회전이 발생하도록 할 수 있습니다. 이를 통해 사용자는 고유한 방식으로 이미지와 상호 작용할 수 있습니다. 원하는 경우 해당 이미지에 별도의 링크나 라이트박스 미리보기를 추가할 수도 있습니다.

방법은 다음과 같습니다.

페이지 설정 사용자 정의 CSS에서 변형 속성 꺼내기

먼저 열 위로 마우스를 가져갈 때 이미지를 회전시키는 두 줄의 사용자 정의 CSS를 제거해야 합니다. 페이지 설정 사용자 정의 CSS를 열고 다음을 꺼냅니다.

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

이미지 2의 마우스 오버 시 변환 속성 추가

그런 다음 이미지 2에 대한 이미지 모듈 설정을 열고 Divi의 내장 변환 옵션을 사용하여 호버 상태에 대해 이전에 삭제한 것과 동일한 변환 회전 값을 추가합니다.

• 변환 Z축 회전(호버링): -5deg
• 변환 X축 변환(마우스 오버): -20px

이미지 3의 마우스 오버 시 변환 속성 추가

그런 다음 이미지 3에 대한 이미지 모듈 설정을 업데이트하여 변환 회전 속성을 추가합니다.

• 변환 Z축 회전(호버링): 5deg
• 변환 X축 변환(마우스 오버): 20px

이제 최종 결과를 확인하십시오.

최종 결과

이미지에 링크 추가

특정 레이아웃 팩 또는 페이지 디자인을 별도의 페이지에 표시하기 위해 리디렉션 링크를 생성하려는 경우 팩의 세 이미지 모두에 동일한 링크 URL을 추가하는 것이 가장 좋습니다. 이렇게 하려면 각 이미지 모듈을 열고 링크 URL을 추가합니다.

다른 열에 새로운 레이아웃 팩 미리보기 추가하기

디자인을 마무리하기 위해 1열에 있는 3개의 이미지를 복사하여 2열과 3열에 붙여넣을 수 있습니다.

그런 다음 2열과 3열에 있는 각 이미지를 새 이미지로 업데이트하기만 하면 됩니다.

그게 다야!

최종 디자인

다음은 최종 디자인입니다. 맨 위 행은 열 위로 마우스를 가져갈 때 호버 팬아웃 호버 효과를 보여줍니다. 두 번째 행은 이미지 2와 3에 별도로 추가된 2차 팬아웃 호버 효과를 보여줍니다.

데스크탑의 3열 레이아웃은 태블릿과 휴대폰의 1열로 조정됩니다.

마지막 생각들

팬아웃 호버 효과는 자신의 웹사이트에 페이지 레이아웃을 표시하는 데 사용할 수 있는 아름답고 매력적인 디자인 요소입니다. 이 튜토리얼에서 다룬 사용자 정의 CSS와 기본 제공 Divi 설정의 조합은 마법처럼 작동합니다. 그리고 이 설정은 Divi 빌더를 사용하여 더 많은 디자인을 탐색하기 위한 훌륭한 출발점이 될 것입니다. 바라건대, 이것은 포트폴리오를 다음 단계로 끌어올리는 데 영감을 줄 것입니다.

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

건배!