Divi에서 디자인 요소에 단면 상자 그림자를 추가하는 방법

Divi의 다양한 디자인 요소에 단면 상자 그림자를 추가하는 것은 콘텐츠를 방해하지 않으면서 창의적인 번성을 더할 수 있는 미묘한 방법입니다. 이 튜토리얼에서는 Divi의 Therapy FAQ 페이지 레이아웃에 단면 상자 그림자를 추가하는 방법을 보여 드리겠습니다. 보너스 팁으로 광고 아이콘을 세로 중앙 그래픽으로 결합하는 방법도 보여 드리겠습니다. 이러한 Divi 디자인 기법을 배우면 원하는 모듈이나 기둥에 단면 상자 그림자를 추가할 수 있습니다.

시작하자.

엿보기

다음은 단면 상자 그림자를 사용하여 구축할 FAQ 레이아웃 디자인의 미리보기입니다.

시작하기

시작하려면 새 페이지를 만들어야 합니다. WordPress 대시보드에서 페이지 > 새로 추가로 이동합니다. 그런 다음 페이지에 제목을 지정하고 시각적 빌더를 배포합니다. "미리 만들어진 레이아웃 선택" 옵션을 선택합니다. 라이브러리에서 로드 팝업에서 Therapist Layout Pack을 찾아 선택합니다. 그런 다음 치료사 FAQ 페이지 레이아웃을 선택하고 "이 레이아웃 사용"을 클릭합니다.

이제 디자인을 시작할 준비가 되었습니다.

1부: 레이아웃 구성

이 미리 만들어진 레이아웃에서는 여러 토글 모듈 내부에 모의 질문이 포함된 두 번째 섹션에 집중할 것입니다. 우선 행의 열 레이아웃을 3열(1/3 1/3 1/3)로 변경해 보겠습니다.

그런 다음 Divi의 다중 선택 기능을 사용하여 2열의 모든 모듈을 3열로 이동합니다. 이렇게 하려면 Command(또는 Control)를 누른 상태에서 모두 선택될 때까지 2열의 각 모듈을 클릭합니다. 그런 다음 3열로 드래그합니다.

이제 행에 더 많은 공간을 제공해야 합니다. 행 설정을 열고 다음을 업데이트합니다.

폭: 80%
거터 폭: 2
열 높이 균등화: 예

2부: 토글 모듈 설계

이 섹션의 모든 토글 모듈 디자인을 한 번에 사용자 지정하려면 다중 선택 기능을 사용하여 각 토글 모듈을 선택합니다. 모두 선택했으면 토글 모듈 중 하나에 대한 설정을 엽니다.

그런 다음 다음을 업데이트합니다.

열기 토글 텍스트 색상: #ffffff
열기 토글 배경색: rgba(0,0,0,0)
닫힌 토글 텍스트 색상: #ffffff
닫힌 토글 배경색: rgba(0,0,0,0)

본문 색상: #ffffff

맞춤 패딩: 상단 3vw, 하단 3vw, 왼쪽 2vw, 오른쪽 2vw

이제 다음과 같이 상자 그림자 옵션을 업데이트하여 토글 모듈의 왼쪽에 상자 그림자를 추가할 수 있습니다.

상자 그림자 수평 위치: -30px
상자 그림자 수직 위치: 0px
상자 그림자 흐림 강도: 40px
상자 그림자 확산 강도: -35px
그림자 색상: rgba(0,0,0,0.4)

상자 그림자를 올바르게 배치하는 요령은 수평 위치를 -30px로 설정하여 그림자를 왼쪽으로 이동하는 것입니다. 그런 다음 모듈의 상단과 하단으로 번지지 않고 왼쪽에 상자 그림자가 보이도록 하려면 흐림 강도와 확산 강도의 적절한 균형을 찾아야 합니다.

설정을 저장합니다.

이제 모든 토글 모듈이 새로운 디자인으로 업데이트되었습니다.

그러나 오른쪽 열에 있는 토글 모듈의 상자 그림자가 왼쪽이 아닌 오른쪽에 배치되기를 원합니다. 이를 변경하려면 다중 선택을 사용하여 오른쪽 열의 모든 토글 모듈을 선택하고 요소 설정을 엽니다. 그런 다음 다음과 같이 가로 위치를 -30px에서 30px로 변경합니다.

상자 그림자 수평 위치: 30px

그런 다음 설정을 저장합니다.

고유한 단면 상자 그림자가 있는 토글 모듈을 처리합니다. 이제 기둥에 유사한 단면 상자 그림자를 추가해야 합니다.

3부: 열에 단면 상자 그림자 추가

열에 단면 상자 그림자를 추가하려면 행 설정의 고급 탭 아래에 몇 가지 CSS 스니펫을 추가해야 합니다.

행 설정을 열고 고급 탭을 클릭합니다. Column 1 Main Element 안에 다음 CSS를 추가합니다.

상자 그림자: 30px 0px 70px -45px rgba(0,0,0,0.4)

CSS에 익숙하지 않은 경우 Divi 빌더에서 사용할 수 있는 상자 그림자 모듈 설정과 코드의 유사성을 인식할 수 있어야 합니다. 위의 코드에서…

30px는 수평 위치의 값입니다.
0px는 수직 위치의 값입니다.
70px는 흐림 강도 값입니다.
-45px는 확산 강도 값입니다.
rgba(0,0,0,0.4)는 그림자 색상입니다.

약간 더 깊은 깊이를 만들기 위해 열 상자 그림자에 토글 모듈보다 더 큰 흐림 강도를 주었습니다.

Column 3에 왼쪽 상자 그림자를 추가하려면 Column 3 Main Element에 다음 CSS를 추가해야 합니다.

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

다시 말하지만, 이 CSS와 열 1에 사용된 CSS의 유일한 차이점은 음수 수평 위치입니다.

파트 4: 열 2에 광고 아이콘 추가하기

이제 단면 상자 그림자가 완성되었으므로 몇 개의 블러 모듈 아이콘을 결합하여 간단한 그래픽 디자인을 만들 수 있는 빈 중간 열이 있습니다. 이렇게 하려면 먼저 블러브 모듈을 추가하고 제목과 콘텐츠를 삭제합니다. 그런 다음 아이콘을 클릭하여 사용하고 다음 채팅 아이콘을 선택합니다.

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

아이콘 색상: rgba(203,241,252,0.37)
아이콘 글꼴 크기: 20vw
맞춤 여백: 0px 하단

다음으로, 블러브 모듈을 복제하여 아래에 추가 모듈을 만듭니다.

그런 다음 물음표 아이콘이 있는 상단 문구를 업데이트하고 다음 디자인 설정을 업데이트합니다.

아이콘 글꼴 크기: 9vw
폭: 40%
모듈 정렬: 오른쪽
사용자 정의 여백: -2vw

마지막으로 방금 디자인한 물음표 설명 모듈을 복사하여 큰 채팅 아이콘 설명 모듈 아래에 붙여넣습니다. 그런 다음 해당 블러브 모듈의 디자인 설정을 다음과 같이 업데이트합니다.

5부: 2열의 모듈을 수직으로 중앙에 맞추기

디자인을 끝내려면 2열의 광고 아이콘을 세로로 가운데에 배치하여 레이아웃의 중심 디자인 요소로 유지해야 합니다. 이를 달성하기 위해 우리는 Divi의 flex 사용을 활용할 것입니다. 행의 열 높이를 동일하게 하기로 선택했기 때문에 CSS의 간단한 스니펫을 사용하여 모든 모듈을 열 2의 중앙에 배치할 수 있습니다. Divi에서 콘텐츠를 세로로 정렬하는 방법에 대해 언제든지 편리하게 배울 수 있습니다. 그러나 지금은 행 설정을 열고 고급 탭을 클릭하십시오. 그런 다음 Column 2 Main Element 내부에 다음 CSS를 입력합니다.

margin: auto

이제 모든 블러브 모듈이 2열 내에서 수직으로 중앙에 배치됩니다.

눈에 쉽게 보이도록 1열과 2열의 상단에 있는 각 텍스트 모듈의 텍스트를 가운데에 배치합니다. 그런 다음 다음과 같이 섹션에 배경 그라디언트를 추가합니다.

배경 그라데이션 왼쪽 색상: #616ce1
배경 그라데이션 오른쪽 색상: #3846e0

그게 다야 이제 디자인이 완성되었습니다.

최종 결과를 확인하세요.

그리고 토글을 열고 닫을 때 상자 그림자가 어떻게 확장되고 축소되는지 확인하십시오.

마지막 생각들

모듈과 열에 단면 상자 그림자를 추가하면 콘텐츠에 창의적인 방식으로 깊이를 더할 수 있습니다. 비결은 Divi의 상자 그림자 디자인 설정을 효과적으로 조정하는 방법을 아는 것입니다. 이 FAQ 페이지 레이아웃은 이 디자인을 통합할 수 있는 많은 예 중 하나일 뿐입니다. 그러나 전체 프로세스는 매우 간단하며 향후 프로젝트를 위해 디자인 도구 상자에 보관할 수 있는 좋은 기술이어야 합니다.

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

건배!