Divi 테마는 워드프레스에서 코딩 없이 웹사이트를 디자인하도록 도와주는 비주얼 빌더다. 이 글은 Divi 테마 튜토리얼 2편으로, 비주얼 빌더(Visual Builder)를 켜고 텍스트·아이콘·버튼 같은 모듈을 추가하면서 배경과 모션 효과까지 적용하는 과정을 순서대로 정리한다. 1편에서 워드프레스와 Divi 테마 설치를 마쳤다는 가정 아래 진행한다.
Divi 테마란 무엇인가
Divi 테마는 워드프레스에서 코딩 없이 웹사이트를 제작하도록 도와주는 강력한 비주얼 빌더 테마다. 화면을 보면서 요소를 배치하고 디자인을 바로 확인할 수 있어, HTML이나 CSS를 몰라도 완성도 있는 페이지를 만들 수 있다.
Divi 테마의 장점
- 코딩 없이 화면을 보면서 웹사이트를 만들 수 있다.
- 미리 디자인된 수많은 레이아웃(템플릿)을 제공한다.
- 텍스트·버튼·아이콘 등 다양한 디자인 요소를 코딩 없이 배치할 수 있다.
Divi의 구조: 섹션 · 행 · 열 · 모듈
Divi로 작업하기 전에 기본 구조를 알아 두면 이해가 빠르다. Divi의 모든 페이지는 섹션(Section) → 행(Row) → 열(Column) → 모듈(Module)의 계층으로 구성된다. 섹션은 페이지를 가로로 나누는 가장 큰 블록이고, 그 안에 행이 들어가며, 행은 다시 여러 열로 나뉜다. 텍스트·이미지·버튼·아이콘 같은 실제 콘텐츠 블록이 바로 모듈이며, 모듈은 열 안에 채워 넣는다. 이 글에서 “영역을 설정한다”는 표현은 이 섹션·행·열 구조를 잡는 작업을 가리킨다.
섹션·행·모듈은 각각 설정 패널을 가지며, 패널은 콘텐츠(Content) · 디자인(Design) · 고급(Advanced) 세 개 탭으로 나뉜다. 콘텐츠 탭에서 내용을 넣고, 디자인 탭에서 글꼴·색상·간격을 바꾸며, 고급 탭에서 사용자 CSS 같은 세부 제어를 한다. 아래 실습은 이 세 탭을 오가며 진행된다.
비주얼 빌더 시작하기
먼저 1편에서 다룬 준비 단계가 끝나 있어야 한다. 워드프레스 설치, Divi 테마 설치, 그리고 1편의 기본 설정까지 완료된 상태에서 이어 진행한다.
편집할 페이지에서 Visual Builder 사용(Enable Visual Builder)을 클릭해 비주얼 빌더를 켠다. 빈 페이지라면 처음부터 빌드(Build From Scratch)를 선택해 새 레이아웃을 직접 구성한다. 이어서 행의 열 구조를 고르는데, 이 예시에서는 두 번째 열 레이아웃을 선택해 영역을 나눈다. 처음에는 이 글을 그대로 따라 해 보고, 익숙해지면 원하는 구조로 바꿔 보길 권한다.
텍스트 모듈 만들기
열 안에 모듈을 추가할 때는 검색창에 모듈 이름을 입력해 찾는다. 검색창에 “텍스트”를 입력하고 텍스트 모듈을 클릭하면, 예시 글이 채워진 모듈과 설정 패널이 함께 나타난다.
콘텐츠 탭의 본문 영역에서 예시 글을 지우고 원하는 텍스트를 자유롭게 입력한다.
텍스트 모듈 디자인하기
설정 패널에서 디자인(Design) 탭 → 텍스트(Text)로 이동하면 입력한 글의 모양을 바꿀 수 있다.
디자인 탭의 텍스트 영역에서는 글꼴(폰트), 글자 크기, 색상, 굵기 등을 원하는 대로 지정할 수 있다.
- 텍스트 폰트: 입력한 글을 여러 글꼴로 변경한다.
- 텍스트 굵기(폰트 두께): 글자의 굵기를 조절한다.
- 텍스트 스타일: 밑줄·기울임 등 간단한 효과를 준다.
- 텍스트 색상: 글자 색을 지정한다. 색상 아이콘을 누르면 더 세밀하게 색을 고를 수 있다. 예시에서는 빨간색으로 지정했다.
아이콘 모듈 만들기
만들어 둔 텍스트 모듈 위에 마우스를 올리면 모듈을 추가하는 + 버튼이 나타난다. 이 버튼을 클릭한 뒤 Icon 모듈을 선택하면 아이콘 모듈이 추가된다.
아이콘 모듈 디자인하기
원하는 아이콘을 고른 뒤 디자인 탭 → 아이콘에서 아이콘 색상과 크기를 조절한다. 예시에서는 빨간색, 62px로 설정했다.
이어서 맞춤(Alignment)에서 아이콘 정렬 위치를 선택한다.
제목용 텍스트 모듈과 Heading 설정
아이콘 모듈 위에 마우스를 올린 뒤(클릭은 하지 않음) 다시 텍스트 모듈을 추가한다.
내용을 입력한 뒤 본문 서식 드롭다운에서 Paragraph → Heading 1을 선택한다. Heading 1~6은 제목 수준을 지정하는 서식이다.
그다음 디자인 탭 → 서브헤딩 텍스트 → H1에서 제목 텍스트를 원하는 대로 디자인한다.
주의: 텍스트 콘텐츠를 Heading 1로 설정했다면, 디자인 탭의 일반 텍스트나 H2·H3 등 다른 헤딩 항목에서 디자인을 바꿔도 적용되지 않는다. 실제 설정한 서식(H1)에 해당하는 디자인 항목을 수정해야 한다.
버튼 모듈 만들기
모듈 검색창에 “버튼”을 입력해 버튼 모듈을 클릭한다.
콘텐츠 탭에서 버튼에 표시할 문구를 입력한다.
버튼 모듈 디자인하기
디자인 탭의 버튼 도구로 원하는 모양을 만들 수 있다.
- Border Width: 버튼 테두리 두께 조절
- Border Color: 버튼 테두리 색상
- 모서리 반경(Border Radius): 버튼 모서리 둥글기 조절
- 폰트(Font): 버튼 텍스트 글꼴
- 버튼 아이콘: 버튼에 마우스를 올렸을 때 나타나는 아이콘 지정
배경 디자인
섹션·행·모듈의 배경은 설정 패널에서 다양한 방식으로 꾸밀 수 있다. 색상, 그래디언트, 이미지, 패턴, 마스크, 동영상까지 모두 지원한다.
그래디언트 배경
편집 영역(파란색 테두리)에서 설정 버튼을 클릭해 설정 패널을 연다.
배경 항목에서 배경 그래디언트를 선택한다.
그래디언트의 두 색상 지점을 각각 클릭해 원하는 색을 지정한다.
색 조합을 직접 고르기 어렵다면 uigradients.com 같은 무료 색상 조합 사이트에서 마음에 드는 색상값을 가져와 입력하면 된다. 그래디언트 종류에서 원하는 패턴(선형·방사형 등)도 선택할 수 있다.
동영상 배경
배경 항목에서 동영상 배경을 선택할 수 있다. 비디오 사용 방식은 파일 업로드와 URL 삽입 두 가지인데, URL 삽입은 오류가 잦으므로 파일 업로드를 권장한다. 파일 선택을 눌러 무료 영상 사이트에서 받은 동영상을 업로드하면 된다.
패턴 · 마스크 · 이미지 배경
배경 패턴 추가를 클릭하면 원하는 패턴과 색상을 골라 배경을 꾸밀 수 있다.
배경 마스크 추가에서는 마스크 모양과 색상을 선택해 배경에 입체감을 줄 수 있다.
이미지 배경은 배경 이미지 항목을 클릭한 뒤 파일 선택으로 원하는 이미지를 업로드해 적용한다.
업로드한 이미지는 크기 조정 옵션으로 원하는 크기와 위치로 맞출 수 있다.
여백 줄이기와 최대 너비
왼쪽 여백이 넓어 보인다면 모듈 전체를 늘려 여백을 줄일 수 있다.
디자인 탭의 최대 너비(Max Width) 값을 늘리면 모듈 전체를 넓힐 수 있다.
사용자 CSS로 세밀하게 커스텀하기
더 세밀한 디자인이 필요하면 사용자 CSS를 직접 넣을 수 있다. 먼저 배경(섹션) 설정을 연다.
고급(Advanced) 탭 → 사용자 맞춤 CSS에서 주요소(Main Element) 등에 CSS 코드를 입력하면 기본 옵션으로는 어려운 디테일까지 제어할 수 있다.
모션(스크롤) 효과 적용
버튼 모듈 하단에 이미지 모듈을 하나 추가한다.
이미지 항목을 클릭해 원하는 이미지를 업로드한다.
디자인 탭의 크기 조정에서 이미지의 크기와 위치를 설정한다.
고급 탭 → 스크롤 효과를 설정하면 페이지를 스크롤할 때 지정한 효과가 나타난다. 상하·좌우 이동, 페이드 인/아웃, 확대·축소, 회전 등 다양한 효과를 줄 수 있다.
정리
지금까지 Divi 테마 비주얼 빌더로 텍스트·아이콘·버튼·이미지 모듈을 만들고, 배경(그래디언트·이미지·패턴·마스크·동영상)과 사용자 CSS, 스크롤 모션 효과까지 적용하는 과정을 정리했다. Divi의 핵심은 섹션 → 행 → 열 → 모듈 구조와, 모듈마다 제공되는 콘텐츠 · 디자인 · 고급 세 탭이다. 이 흐름만 익히면 어떤 모듈이든 같은 방식으로 다룰 수 있다.
참고로 nuschool은 현재 Divi가 아닌 Elementor 기반으로 사이트를 운영한다. Elementor도 Divi처럼 화면을 보면서 작업하는 비주얼 빌더이고, 섹션·컬럼·위젯(Divi의 모듈에 해당)을 쌓아 페이지를 구성한다는 점에서 사고방식이 거의 같다. 한 빌더의 구조를 익혀 두면 다른 빌더로 옮겨 가도 적응이 빠르니, 이 글의 개념은 Elementor를 쓸 때도 그대로 도움이 된다. 다음 편(3편)에서 이어서 진행한다.
💬 댓글 0