Divi에서 Row Box Shadows를 창의적으로 사용하는 방법

가장 최근의 Divi 업데이트 중 하나는 오랫동안 기다려온 것입니다. 상자 그림자를 섹션, 행 및 모듈로 통합합니다. 이 게시물에서는 행 상자 그림자가 웹 사이트의 전반적인 모양과 느낌을 개선하는 방법에 중점을 둘 것입니다.

웹 사이트에 가져올 수 있는 깊이 상자 그림자를 설명하기 위해 단계별로 다시 만드는 방법을 보여주는 예제를 만들었습니다.

결과

데스크탑

데스크탑에서 다음과 같은 모양을 다시 만드는 방법을 보여드릴 레이아웃입니다.

이동하는

그리고 모바일에서 다음과 같이:

Divi에서 Row Box Shadows를 창의적으로 사용하는 방법

YouTube 채널 구독

헤더 형식

가장 먼저 해야 할 일은 올바른 헤더 형식을 선택하는 것입니다. WordPress 대시보드 > 사용자 정의 > 머리글 및 탐색 > 머리글 형식 > 머리글 스타일로 '가운데'를 선택합니다 .

기본 메뉴 모음

머리글 및 탐색 > 기본 메뉴 모음으로 돌아가서 다음과 같이 조정합니다.

• 로고 이미지 숨기기: 활성화
• 메뉴 높이: 211
• 로고 최대 높이: 30
• 텍스트 크기: 16
• 문자 간격: 2
• 글꼴: Lato Light
• 글꼴 스타일: 대문자
• 텍스트 색상: #FFFFFF
• 활성 링크 색상: #FFFFFF
• 배경색: rgba(255,255,255,0)
• 드롭다운 메뉴 배경색: rgba(255,255,255,0)

첫 번째 섹션

테마 사용자 정의 프로그램 내에서 변경을 수행했으면 이제 레이아웃을 시작할 차례입니다. 새 페이지를 만들고 Divi Builder를 활성화한 다음 Visual Builder로 전환합니다. 그런 다음 페이지에 첫 번째 표준 섹션을 추가합니다.

단면 그라데이션 배경

이 섹션에는 다음 그라데이션 배경이 필요합니다.

• 첫 번째 색상: #ea2e7d
• 두 번째 색상: #edd900
• 그라디언트 유형: 선형
• 기울기 방향: 110deg
• 시작 위치: 0%
• 최종 위치: 100%

간격

디자인 탭으로 이동합니다. Spacing 하위 범주 내에서 위쪽 패딩에는 '100px'를 사용하고 아래쪽 패딩에는 '200px'를 사용합니다.

1열 행

행 그라데이션 배경

계속해서 섹션에 1열 행을 추가하고 다음 그라데이션 배경을 사용합니다.

• 첫 번째 색상: rgba(255,255,255,0)
• 두 번째 색상: #ea2e7d
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 56%
• 최종 위치: 100%

열 그라데이션 배경

아래로 스크롤하여 해당 행의 열에 다음 그라데이션 배경을 사용합니다.

• 첫 번째 색상: rgba(237,217,0,0.77)
• 두 번째 색상: rgba(255,255,255,0)
• 기둥 그라데이션 유형: 선형
• 기둥 기울기 방향: 180deg
• 열 시작 위치: 0
• 열 끝 위치: 100

사이징

디자인 탭으로 이동하여 크기 조정 하위 범주에 다음 변경 사항을 적용합니다.

• 사용자 정의 너비 사용: 예
• 사용자 정의 너비: 27%

간격

그런 다음 행의 위, 오른쪽, 아래 및 왼쪽 Custom Padding에 '20px'를 사용합니다.

텍스트 모듈

행 설정이 끝나면 텍스트 모듈을 추가하고 텍스트 하위 범주에 대해 다음 설정을 사용합니다.

• 텍스트 글꼴: Arvo
• 텍스트 글꼴 크기: 98px
• 텍스트 색상: #FFFFFF
• 텍스트 문자 간격: 32px
• 텍스트 줄 높이: 1.4em
• 텍스트 방향: 중앙

두 번째 섹션

첫 번째 섹션 바로 아래에 다른 섹션을 추가합니다. 이 섹션에는 레이아웃에 있는 다른 모든 행이 포함됩니다.

단면 그라데이션 배경

먼저 이 섹션에 다음 그라데이션 배경을 사용합니다.

• 첫 번째 색상: rgba(255,255,255,0)
• 두 번째 색상: #592851
• 그라디언트 유형: 선형
• 기울기 방향: 180deg
• 시작 위치: 80%
• 최종 위치: 80%

간격

그런 다음 디자인 탭으로 이동하여 하단 패딩에 '100px'를 추가합니다.

첫 번째 2열 행

행 배경색

이 새 섹션에 첫 번째 2열 행을 추가하고 '#dddddd'를 배경색으로 사용합니다.

열 1 그라데이션 배경

첫 번째 열에는 다음 그라데이션 배경이 필요합니다.

• 첫 번째 색상: #6ac922
• 두 번째 색상: #b6c1b2
• 열 1 그라데이션 유형: 선형
• 열 1 기울기 방향: 136deg
• 열 1 시작 위치: 23%
• 열 1 끝 위치: 100%

2열 배경색

아래로 스크롤하여 '#dddddd'를 열 2 배경색으로 사용합니다.

사이징

디자인 탭으로 이동하여 크기 조정 하위 범주에 대해 다음 설정을 사용합니다.

• 사용자 정의 너비 사용: 사용
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

Spacing 하위 범주에는 다음 패딩 및 여백이 필요합니다.

• 위쪽, 오른쪽, 아래쪽 및 왼쪽 패딩: 0px
• 상단 여백: -150px
• 열 1 상단 패딩: 235px(데스크톱), 0px(태블릿 및 휴대전화)
• 열 1 하단 패딩: 235px(데스크톱), 0px(태블릿 및 휴대전화)
• 열 2 상단 패딩: 150px
• 2열 하단 패딩: 150px

박스 섀도우

상자 그림자 하위 범주를 열고 다음 설정을 사용합니다.

• 상자 그림자 수평 위치: -3px
• 상자 그림자 수직 위치: -18px
• 상자 그림자 흐림 강도: 77px
• 상자 그림자 확산 강도: 23px
• 그림자 색상: rgba(0,0,0,0.3)

첫 번째 텍스트 모듈

그런 다음 첫 번째 텍스트 모듈을 두 번째 열에 추가하고 텍스트 하위 범주에 대해 다음 설정을 사용합니다.

• 텍스트 글꼴: Arvo
• 텍스트 글꼴 크기: 34px
• 텍스트 색상: #7a7a7a
• 텍스트 방향: 중앙

두 번째 텍스트 모듈

다른 텍스트 모듈을 추가하되 대신 다음 설정을 사용하십시오.

• 텍스트 글꼴: Lato Light
• 텍스트 방향: 중앙

크기 조정 하위 범주를 열고 너비 '75%'를 사용하고 가운데 모듈 ​​정렬을 선택합니다.

마지막으로 '50px'의 상단 여백을 추가합니다.

두 번째 2열 행

행 배경색

섹션에 2열 행을 추가하고 배경색으로 '#b99bc1'을 선택합니다.

열 1 배경색

아래로 스크롤하여 열 1 배경색으로 '#dddddd'를 선택합니다.

사이징

디자인 탭으로 이동하여 크기 조정 하위 범주에 다음 설정을 적용합니다.

• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

다음으로 다음 패딩을 사용합니다.

• 위쪽, 오른쪽, 아래쪽 및 왼쪽 패딩: 0px
• 열 1 상단 패딩: 150px(데스크톱), 0px(태블릿 및 휴대전화)
• 열 1 하단 패딩: 50px(데스크톱), 0px(태블릿 및 휴대전화)
• 열 2 상단 패딩: 150px
• 2열 하단 패딩: 150px

박스 섀도우

상자 그림자 하위 범주를 열고 다음 설정을 사용합니다.

• 상자 그림자 수평 위치: -4px
• 상자 그림자 수직 위치: 24px
• 상자 그림자 흐림 강도: 77px
• 상자 그림자 확산 강도: 23px
• 그림자 색상: rgba(0,0,0,0.3)
• 상자 그림자 위치: 외부 그림자

첫 번째 열의 첫 번째 이미지 모듈

첫 번째 열에 이미지 모듈을 추가하여 계속하십시오. 이미지를 업로드한 후 Spacing 하위 범주에 다음 설정을 적용합니다.

• 이미지 아래 공간 표시: 예
• 상단 여백: -500px(데스크톱), 0px(태블릿 및 휴대폰)
• 오른쪽 여백: -50px(데스크톱), 0px(태블릿 및 휴대폰)
• 왼쪽 여백: 200px(데스크톱), 0px(태블릿 및 휴대폰)

상자 그림자 하위 범주를 열고 다음 상자 그림자를 사용합니다.

• 상자 그림자 수평 위치: 2px
• 상자 그림자 수직 위치: 2px
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 30px
• 그림자 색상: rgba(255,255,255,0.68)
• 상자 그림자 위치: 외부 그림자

첫 번째 열의 두 번째 이미지 열

동일한 열에 다른 이미지 모듈을 추가하고 다음 여백을 사용합니다.

• 상단 여백: -50px(데스크톱), 0px(태블릿 및 휴대폰)
• 오른쪽 여백: 100px(데스크톱), 0px(태블릿 및 휴대폰)
• 하단 여백: 30px
• 왼쪽 여백: 100px(데스크톱), 0px(태블릿 및 휴대폰)

그런 다음 아래로 스크롤하여 다음 상자 그림자를 사용합니다.

• 상자 그림자 수평 위치: 2px
• 상자 그림자 수직 위치: 2px
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 30px
• 그림자 색상: rgba(255,255,255,0.68)
• 상자 그림자 위치: 외부 그림자

텍스트 모듈 복제 및 두 번째 열에 배치

마지막으로 이전 행의 두 텍스트 모듈을 복제하여 이 행의 두 번째 열에 배치합니다. 한 가지만 변경해야 합니다. 텍스트 색상. 각 텍스트 모듈의 설정을 열고 텍스트 색상을 '#FFFFFF'로 변경합니다.

결과

데스크탑

이 게시물의 모든 단계는 데스크탑에서 다음과 같은 결과로 이어집니다.

이동하는

모바일에서 다음 결과:

마지막 생각들

이 게시물에서는 행에 상자 그림자를 창의적으로 사용하는 방법을 보여주었습니다. 깊이 상자 그림자가 레이아웃에 주는 것을 명확하게 알 수 있는 다채로운 예제를 만들었습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!

Dmitry Guzhanin의 추천 이미지 / shutterstock.com