Divi 테마 사용법 다섯 번째 글에서는 디자인 작업에서 자주 쓰이는 두 가지 주제, 즉 추천글(Testimonial) 모듈을 다듬는 법과 요소를 화면에 고정시키는 스크롤 효과(Sticky)를 개념 중심으로 정리한다. 이 시리즈는 원래 화면 캡처를 따라가는 실습 글이었지만, 시간이 지나며 캡처 이미지가 모두 유실됐다. 그래서 이번 정리는 클릭 경로를 그대로 흉내 내기보다, “Divi의 추천글 모듈과 고정 효과가 어떤 원리로 동작하는가”를 글만 읽어도 이해할 수 있게 다시 썼다.
참고로 누스쿨은 현재 사이트 제작에 Divi가 아니라 Elementor를 사용한다. 이 글은 과거 Divi 사용 시점의 기록을 SEO·아카이브 목적으로 보존한 것으로, Divi를 쓰는 독자에게는 여전히 유효한 개념 설명이고, Elementor 사용자에게는 두 빌더의 발상을 비교하는 참고가 된다.
추천글(Testimonial) 모듈이란
추천글 모듈은 고객 후기·리뷰·인용문을 한 카드 형태로 보여 주는 Divi 기본 모듈이다. 인용 부호(따옴표) 아이콘, 후기 본문, 작성자 이름·직함·회사, 작성자 사진(아바타) 같은 요소를 하나로 묶어 신뢰감을 주는 “사회적 증거(social proof)” 블록을 만든다. 랜딩 페이지나 서비스 소개 페이지에서 전환율을 끌어올릴 때 흔히 배치한다.
Divi의 다른 모듈과 마찬가지로 추천글 모듈도 설정 창이 콘텐츠(Content)·디자인(Design)·고급(Advanced) 세 탭으로 나뉜다. 텍스트와 표시 여부는 콘텐츠 탭에서, 색·여백·테두리·그림자 같은 시각 스타일은 디자인 탭에서, CSS·가시성·스크롤 효과 같은 세부 제어는 고급 탭에서 다룬다. 이 구조를 알면 “어떤 옵션이 어느 탭에 있는지”를 매번 헤매지 않게 된다.
따옴표 아이콘 다루기와 상자 그림자
따옴표(인용 부호) 아이콘 제어
추천글 모듈은 기본적으로 후기 위쪽에 원 안에 들어간 따옴표 아이콘을 표시한다. 이 아이콘은 콘텐츠 탭의 요소(Elements) 옵션에서 표시 여부를 켜고 끌 수 있다. 디자인이 깔끔해야 하는 미니멀 레이아웃에서는 이 아이콘을 꺼서 후기 텍스트만 남기는 경우가 많다.
아이콘을 유지하되 스타일만 바꾸고 싶다면 디자인 탭의 따옴표 아이콘(Quote Icon) 영역에서 다음을 조정한다. Divi 공식 문서 기준으로 다음 항목이 제공된다.
- 아이콘 색상: 기본값은 회색이며, 사이트 색상 팔레트나 스포이트로 원하는 색으로 변경할 수 있다.
- 아이콘 배경 색상: 아이콘을 감싸는 원의 배경색을 아이콘 색과 독립적으로 지정한다.
- 커스텀 아이콘 크기: “Use Custom Icon Size”를 켜면 슬라이더나 수치 입력으로 크기를 직접 정할 수 있다.
- 아이콘 교체: 아이콘 라이브러리에서 다른 모양으로 바꿀 수 있다.
주의할 점은, 디자인 탭에서 아이콘 스타일을 아무리 바꿔도 콘텐츠 탭에서 따옴표 아이콘 표시가 꺼져 있으면 화면에 반영되지 않는다는 것이다. “색을 바꿨는데 안 보인다”면 표시 토글부터 확인하면 된다.
상자 그림자(Box Shadow)로 카드 띄우기
추천글 카드를 배경 위에 살짝 떠 있는 것처럼 보이게 하려면 디자인 탭의 상자 그림자(Box Shadow) 옵션을 쓴다. Divi는 미리 정의된 그림자 프리셋을 고른 뒤, 다음 값들을 세부 조정하도록 해 둔다.
- 수평/수직 위치: 그림자를 좌우·상하 어느 방향으로 드리울지 결정한다.
- 흐림 강도(Blur): 값이 클수록 그림자 가장자리가 부드럽게 퍼진다.
- 확산(Spread): 그림자가 차지하는 면적을 키우거나 줄인다.
- 그림자 색상: 보통 검정에 낮은 투명도를 주어 자연스러운 음영을 만든다.
실무에서는 위치 값을 작게, 흐림을 적당히 주고, 색은 반투명 검정으로 두는 조합이 가장 무난하다. 그림자가 과하면 카드가 화면에서 붕 떠 보이고 촌스러워지므로, “있는 듯 없는 듯” 은은한 정도가 좋다.
스크롤 효과: 요소를 화면에 고정(Sticky)하기
두 번째 주제는 고정(Sticky) 스크롤 효과다. 페이지를 내려도 특정 요소를 화면 일정 위치에 붙여 두면, 보는 사람에게 특정 정보(메뉴·CTA 버튼·프로모션 배너 등)를 지속적으로 노출시킬 수 있다. 이는 단순한 시각 효과를 넘어 마케팅 전략으로 쓰인다.
Divi에서 고정 옵션은 섹션·행·열·모듈 어느 단위에든 적용할 수 있고, 설정 창의 고급(Advanced) 탭 → 스크롤 효과(Scroll Effects) 그룹 안에 있다. 여기서 “Sticky Position”을 선택하면 다음 세 가지 동작 중 하나를 고를 수 있다.
- Stick to Top: 스크롤을 내릴 때 요소가 화면 위쪽에 달라붙는다. 고정 헤더·메뉴에 흔히 쓴다.
- Stick to Bottom: 요소가 화면 아래쪽에 고정된다. 하단 CTA 바·알림에 적합하다.
- Stick to Top and Bottom: 위 두 동작을 결합해, 스크롤 구간에 따라 위·아래 양쪽으로 고정된다.
고정 오프셋과 고정 상태 전용 스타일
고정 위치만 정하는 데서 끝나지 않는다. Sticky Offset 값으로 요소와 화면 가장자리 사이의 간격을 줘서, 위에 붙더라도 윗변에 딱 붙지 않고 살짝 떨어뜨릴 수 있다. 또한 Divi는 고정 상태에만 적용되는 별도 스타일을 지원한다. 디자인 옵션에서 데스크톱·태블릿·모바일 탭 대신 압정(thumbtack) 탭을 누르면 “고정됐을 때만” 적용되는 값을 따로 줄 수 있다.
대표적인 활용은 고정 헤더다. 평소에는 배경이 투명하다가 스크롤로 고정되는 순간 배경을 불투명하게 바꾸거나, 메뉴 높이를 줄여 화면을 덜 차지하게 만드는 식이다. 즉 같은 요소라도 “떠 있을 때”와 “붙었을 때”의 모습을 완전히 다르게 디자인할 수 있다.
Divi의 발상과 Elementor 비교
여기서 다룬 두 기능은 다른 빌더에도 비슷한 개념으로 존재한다. 추천글 카드는 어떤 빌더든 “인용 부호 표시 토글 + 카드 그림자”라는 같은 발상으로 만들고, 고정 효과 역시 CSS의 position: sticky를 시각 옵션으로 감싼 것이라 발상이 동일하다. 누스쿨이 현재 쓰는 Elementor에서도 위젯의 고급 설정에 모션·스티키 옵션이 있어, Divi의 스크롤 효과와 거의 같은 결과를 낸다. 빌더가 바뀌어도 “표시 토글이 스타일보다 우선한다”, “고정 상태에는 별도 스타일을 줄 수 있다” 같은 원리는 그대로 통한다.
정리
Divi 사용법 5편의 핵심은 두 가지다. 첫째, 추천글 모듈은 따옴표 아이콘을 콘텐츠 탭에서 켜고 끄며 디자인 탭에서 색·크기·배경을 다루고, 상자 그림자로 카드를 은은하게 띄운다. 둘째, 고정 스크롤 효과는 고급 탭의 스크롤 효과에서 위·아래·양쪽 고정을 고르고, 오프셋과 압정 탭 전용 스타일로 고정 상태를 세밀하게 꾸민다. 화면 캡처 없이도 이 원리만 잡고 있으면 어떤 빌더에서든 같은 결과를 재현할 수 있다.
💬 댓글 0