호버에서 스와이프 배경으로 상자 그림자를 사용하는 방법

매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다.

이번 주에는 진행중인 Divi 디자인 이니셔티브의 일환으로 상자 그림자를 호버에서 스와이프 배경으로 사용하는 방법을 보여 드리겠습니다. Personal Stylist Layout Pack' 홈페이지에서 멋지게 보이지만 가능성은 정말 무궁무진한 세 가지 다른 예를 다룰 것입니다. Divi의 기본 제공 옵션만 사용하여 스와이프 배경을 하나씩 다시 생성합니다.

가자!

시사

튜토리얼과 다양한 예제를 살펴보기 전에 결과를 살펴보겠습니다.

예 #1

예 #2

예 #3

개인 스타일리스트 레이아웃 팩 홈페이지를 새 페이지에 업로드

웹사이트에 새 페이지를 추가하고 Personal Stylist 홈페이지 레이아웃을 업로드하여 시작하십시오. 이 레이아웃을 사용하여 위에 표시된 세 가지 예를 모두 수행하지만 작업 중인 모든 종류의 레이아웃이나 웹 사이트에 이 접근 방식을 사용할 수 있습니다.

예제 #1 다시 만들기

버튼 상자 그림자 색상

첫 번째 예제를 다시 만들어 봅시다! 이 예는 영웅 섹션을 강조 표시하는 데 도움이 됩니다. 가장 먼저 해야 할 일은 첫 번째 열에서 찾을 수 있는 버튼 모듈을 열고 상자 그림자 색상을 변경하는 것입니다. 색상이 호버에 추가할 분홍색 상자 그림자와 잘 어울리도록 하기 위해 이 작업을 수행합니다.

섹션 설정

기본 배경색

섹션 설정을 열어 계속하십시오. 기본 배경색이 동일하게 유지되는지 확인하십시오.

• 배경색: #2a2a2a

호버 배경색

배경 호버를 변경합니다.

• 배경색: #ffffff

기본 상자 그림자

섹션에 기본 상자 그림자를 추가하여 계속합니다.

• 상자 그림자 수평 위치: 0px
• 상자 그림자 수직 위치: 0px
• 그림자 색상: rgba(255,137,159,0.82)
• 상자 그림자 위치: 내부 그림자

호버 박스 그림자

상자 그림자의 수평 위치를 변경합니다. 선택 값을 추가하십시오.

• 상자 그림자 수평 위치: 800px

스와이프 효과가 위에서 아래로 나타나도록 하려면 대신 상자 그림자의 수직 위치를 중심으로 변경할 수 있습니다.

• 상자 그림자 수직 위치: 650px

전환

마지막으로 고급 탭에서 전환 시간을 줄여 배경색과 상자 그림자 스와이프 배경 간에 빠르게 전환할 수 있습니다.

• 전환 시간: 200ms
• 전환 속도 곡선: 이즈

예제 #2 다시 만들기

첫 번째 텍스트 모듈 수정

호버 텍스트 설정

다음 예제로 넘어갑니다! 첫 번째 열에서 찾을 수 있는 텍스트 모듈을 열고 마우스를 가져갈 때 텍스트 색상을 변경합니다.

• 텍스트 색상: 라이트

호버 테두리

디자인 탭에서 마우스를 가져갈 때 테두리 색상을 변경하여 계속 진행합니다.

• 테두리 색상: rgba(255,137,159,0.82)

기본 상자 그림자

그런 다음 상자 그림자 설정으로 이동하여 기본 상자 그림자를 추가합니다.

• 상자 그림자 수평 위치: 0px
• 상자 그림자 수직 위치: 0px
• 그림자 색상: rgba(255,137,159,0.82)
• 상자 그림자 위치: 내부 그림자

호버 박스 그림자

호버에서 수평 위치를 변경합니다.

• 상자 그림자 수평 위치: 520px

전환

마지막으로 고급 탭에서 전환 시간을 늘려 부드러운 전환을 만듭니다.

• 전환 시간: 700ms
• 전환 속도 곡선: 이즈

세 번째 텍스트 모듈에 모듈 스타일 복사 및 붙여넣기

세 번째 텍스트 모듈에도 동일한 모듈 스타일을 사용하고 있습니다. 시간을 절약하기 위해 첫 번째 텍스트 모듈의 모듈 스타일을 복사하여 세 번째 텍스트 모듈에 붙여넣습니다.

두 번째 텍스트 모듈 수정

텍스트 설정

그러나 두 번째 텍스트 모듈은 약간 다릅니다. 모듈을 열고 텍스트 설정으로 이동하십시오. 여기서 해야 할 유일한 일은 마우스 오버 시 텍스트 색상을 변경하는 것입니다.

• 텍스트 색상: 라이트

호버 테두리

테두리 설정으로 이동하여 마우스를 가져갈 때 테두리 색상을 변경하여 계속하십시오.

• 테두리 색상: rgba(255,137,159,0.82)

기본 상자 그림자

스와이프 배경을 추가할 시간입니다! 다음 설정을 사용하여 기본 상자 그림자를 추가하여 시작합니다.

• 상자 그림자 수평 위치: 0px
• 상자 그림자 수직 위치: 0px
• 그림자 색상: rgba(255,137,159,0.82)
• 상자 그림자 위치: 내부 그림자

호버 박스 그림자

마우스 오버 시 상자 그림자의 수직 위치를 변경합니다.

• 상자 그림자 수직 위치: 500px

전환

마지막으로 이 텍스트 모듈의 전환 시간도 늘립니다.

• 전환 시간: 700ms
• 전환 속도 곡선: 이즈

예제 #3 다시 만들기

행 설정 변경

사이징

다음이자 마지막 예제로! 행 설정을 열고 크기 조정 설정을 약간 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 2

간격

행에 사용자 정의 패딩을 추가하여 계속하십시오.

• 왼쪽 패딩: 10vw
• 오른쪽 패딩: 10vw
• 열 2 왼쪽 패딩: 15vw(데스크톱), 0vw(태블릿 및 휴대전화)

기본 상자 그림자

그런 다음 행에 기본 상자 그림자를 추가합니다.

• 상자 그림자 수평 위치: 0px
• 상자 그림자 수직 위치: 0px
• 그림자 색상: #ff899f
• 상자 그림자 위치: 내부 그림자

호버 박스 그림자

호버에서 수평 위치를 변경합니다.

• 상자 그림자 수평 위치: 50px

전환

또한 고급 탭에서 전환 시간 및 전환 지연을 변경하고 있습니다.

• 전환 시간: 1000ms
• 전환 지연: 700ms
• 전환 속도 곡선: 이즈

섹션 설정 변경

크기 조정 제거

행 설정 수정을 완료했으면 계속해서 섹션 설정을 엽니다. 디자인 탭으로 이동하고 마우스 오른쪽 버튼을 클릭하고 재설정을 클릭하여 너비를 재설정하십시오.

테두리 제거

테두리 너비에 대해서도 동일한 작업을 수행합니다.

기본 상자 그림자

기본 상자 그림자를 추가하여 계속합니다.

• 상자 그림자 수평 위치: 0px
• 상자 그림자 수직 위치: 0px
• 그림자 색상: #2a2a2a
• 상자 그림자 위치: 내부 그림자

호버 박스 그림자

마우스 오버 시 상자 그림자의 수평 위치를 변경합니다.

• 상자 그림자 수평 위치: 60px

전환

그리고 디자인을 완성하려면 고급 탭에서 전환 시간을 늘립니다.

• 전환 시간: 1000ms

시사

이제 모든 단계를 거쳤으므로 단계적으로 다시 만든 세 가지 다른 예를 마지막으로 살펴보겠습니다.

예 #1

예 #2

예 #3

마지막 생각들

이 게시물에서는 상자 그림자를 Divi의 기본 제공 옵션으로만 스와이프 배경으로 사용하는 방법을 보여주었습니다. 이 자습서는 매주 도구 상자에 추가 기능을 추가하려는 지속적인 Divi 디자인 이니셔티브의 일부입니다. 이 튜토리얼이 독특하고 창의적인 방법으로 상자 그림자를 사용하도록 영감을 주기를 바랍니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!