워드프레스 Divi 테마 사용법 4편에서는 페이지 디자인 작업을 더 빠르고 풍성하게 만들어 주는 세 가지 기능을 이어서 정리한다. 이번 편의 주제는 섹션 복사로 레이아웃을 재활용하는 방법, 수치를 막대그래프로 보여 주는 바 카운터(Bar Counters) 모듈, 그리고 요소에 입체감을 더하는 상자 그림자(Box Shadow) 디자인 효과다. 코드를 직접 쓰지 않고도 비주얼 빌더에서 완성도 높은 페이지를 만드는 데 자주 쓰이는 기능들이다.
※ 이 글은 과거 작성된 튜토리얼을 정리한 아카이브 글이다. 본문에 있던 화면 캡처는 현재 보존되어 있지 않아, 캡처 의존 설명을 개념 위주로 다시 풀어 정리했다. 참고로 누스쿨 사이트 자체는 현재 Divi가 아니라 Elementor로 운영하지만, Divi 사용법 시리즈는 학습·검색 자료로서 그대로 유지한다.
섹션 복사로 레이아웃 재활용하기
Divi 빌더의 페이지는 섹션(Section) → 행(Row) → 모듈(Module)의 3단 구조로 쌓인다. 이미 만들어 둔 섹션을 통째로 복사하면 동일한 구성의 섹션이 바로 아래에 그대로 생성되므로, 비슷한 레이아웃을 반복해서 쓸 때 행과 모듈을 일일이 다시 배치할 필요가 없다. 복사한 섹션은 텍스트나 이미지 같은 내용만 교체하면 되기 때문에 작업 속도가 크게 빨라진다.
섹션 위에 마우스를 올리면 나타나는 설정 바에서 복제(duplicate) 아이콘을 누르는 방식이며, 같은 원리가 행과 모듈 단위에도 그대로 적용된다. 한 페이지 안에서뿐 아니라 라이브러리(Divi Library)에 저장해 두면 다른 페이지에서도 같은 섹션을 불러와 재사용할 수 있다. 반복되는 구성요소를 한 번 잘 만들어 두고 복제·저장으로 굴리는 것이 Divi 작업의 핵심 요령이다.
바 카운터(Bar Counters) 모듈
바 카운터 모듈은 백분율 수치를 가로 막대그래프 형태로 보여 주는 모듈이다. 보유 기술 수준, 진행률, 통계 비율처럼 퍼센트로 표현할 수 있는 값을 시각적으로 강조할 때 적합하다. 모듈을 추가한 뒤 각 항목의 제목(Title)과 퍼센트(Percent) 값을 입력하면 막대가 만들어진다.
가장 큰 특징은 애니메이션이다. 막대는 페이지 로드 시점이 아니라 해당 모듈이 화면에 스크롤되어 들어오는 순간(레이지 로드 방식) 0에서 지정한 비율까지 채워지며, 이 동작이 방문자의 시선을 끄는 역할을 한다. 고급(Advanced) 탭에서는 애니메이션 지속 시간을 조절해 채워지는 속도를 빠르거나 느리게 바꿀 수 있다.
- Title / Percent: 항목 이름과 채울 비율(0~100)을 입력한다.
- Show Percentage: 퍼센트 숫자 표시 여부를 켜고 끈다. 끄면 숫자 자체가 보이지 않는다.
- 막대·배경 색상: 디자인 탭에서 막대 색과 배경색을 자유롭게 지정한다.
- 애니메이션 시간: 막대가 채워지는 데 걸리는 시간을 조절한다.
상자 그림자(Box Shadow) 디자인 효과
상자 그림자는 모듈·행·섹션에 그림자를 넣어 입체감을 주는 디자인 효과다. Divi에서는 거의 모든 모듈은 물론 행과 섹션에까지 박스 섀도 옵션이 제공되므로, 평면적인 요소가 페이지 위로 살짝 떠 보이는 듯한 효과를 코드 없이 낼 수 있다. 각 요소의 디자인 탭에서 적용한다.
빠르게 쓰고 싶다면 미리 디자인된 7가지 프리셋 중 하나를 한 번에 적용하면 된다. 세밀하게 조절하려면 다음 값들을 직접 다룬다.
| 옵션 | 역할 |
|---|---|
| 수평/수직 위치 | 그림자가 요소 기준으로 어느 방향에 얼마나 떨어져 깔릴지 결정 |
| 흐림(Blur) | 값이 클수록 그림자가 넓고 옅게, 작을수록 좁고 진하게 퍼진다 |
| 퍼짐(Spread) | 값이 클수록 그림자의 밀도가 높아져 더 강한 그림자가 된다 |
| 색상(Shadow Color) | 기본 검은색 외에 원하는 색으로 지정해 컬러 그림자 연출 |
| 안쪽/바깥쪽 | 요소 바깥(outset) 또는 안쪽(inset) 그림자를 선택 |
흐림과 퍼짐 값을 함께 키우면 요소가 보는 사람에게 가까이 떠 있는 듯한 깊이감이 생기고, 반대로 줄이면 멀리 가라앉은 느낌이 된다. 이 원리만 이해하면 카드형 박스, 버튼, 이미지 등 어떤 요소에도 자연스러운 입체감을 줄 수 있다.
그림자 색상 활용
그림자 색을 기본 검은색 대신 브랜드 색상으로 지정하면 좀 더 개성 있는 디자인을 만들 수 있다. 예를 들어 포인트 컬러를 옅게 깐 컬러 그림자는 단순한 회색 그림자보다 디자인 의도를 분명하게 드러낸다. 다만 그림자는 강조 수단이므로, 페이지 전체에 과하게 쓰기보다 핵심 요소에만 절제해서 적용하는 편이 보기 좋다.
정리
- 섹션 복사: 섹션·행·모듈을 복제하고 라이브러리에 저장해 비슷한 레이아웃을 빠르게 재사용한다.
- 바 카운터 모듈: 백분율을 막대로 시각화하고, 스크롤 진입 시 채워지는 애니메이션과 색상·속도를 조절한다.
- 상자 그림자: 흐림·퍼짐·색상·방향을 조절하거나 7가지 프리셋으로 요소에 입체감을 더한다.
이번 4편에서는 섹션 복사, 바 카운터 모듈, 상자 그림자 효과를 정리했다. 이 기능들은 모두 코드 없이 비주얼 빌더에서 처리되며, 조합하면 완성도 높은 페이지를 만들 수 있다. 더 정확한 옵션 명칭과 동작은 Divi 공식 문서에서 확인할 수 있다. 워드프레스 Divi 테마 사용법 시리즈의 다른 편과 함께 보면 디자인 기능을 더 폭넓게 익힐 수 있다.
💬 댓글 0