Divi 테마는 워드프레스에서 코딩 없이 웹사이트를 만들 수 있게 해 주는 대표적인 비주얼 빌더 테마다. 이 글은 Divi 테마 튜토리얼 1편으로, 빌더의 핵심 개념과 첫 사이트의 메뉴·페이지 구조를 잡는 과정을 입문자 눈높이에서 개념 중심으로 정리한다. 처음 Divi를 접할 때 무엇을 이해하고 시작해야 하는지, 그리고 메뉴 페이지가 어떤 원리로 구성되는지를 따라가 보자.
참고로 이 튜토리얼은 작성 당시 Divi 기준으로 쓰였으며, 화면 캡처 없이 개념 설명 위주로 다시 정리한 글이다. 누스쿨은 현재 자체 사이트 구축에 Elementor를 사용하고 있어, 두 빌더를 비교하려는 독자에게도 참고가 되도록 맥락을 함께 담았다.
Divi 테마란 무엇인가
Divi는 미국 Elegant Themes가 만든 프리미엄 워드프레스 테마이자 비주얼 페이지 빌더다. 핵심은 HTML·CSS를 직접 작성하지 않고도 화면에서 요소를 끌어다 배치(드래그 앤 드롭)하면서 디자인하는 비주얼 빌더(Divi Builder)에 있다. 편집 화면에서 보이는 모습이 곧 실제 사이트의 모습이라는 점(WYSIWYG)이 입문자에게 특히 친숙하다.
Divi는 수백 개의 미리 만들어진 레이아웃(layout pack)을 제공하므로, 빈 화면에서 시작하지 않고 완성된 디자인을 불러와 내용만 바꾸는 방식으로도 사이트를 만들 수 있다. 텍스트·이미지·버튼·슬라이더·블로그·가격표·문의 폼 등 40개가 넘는 모듈(module)을 조합해 페이지를 구성한다.
Divi 테마의 장점
- 코딩 지식 없이 드래그 앤 드롭만으로 페이지를 디자인할 수 있다.
- 수백 개의 사전 제작 레이아웃을 불러와 빠르게 시작할 수 있다.
- 40여 종의 모듈로 버튼·폼·슬라이더 등 다양한 요소를 코딩 없이 추가한다.
- 편집 화면이 실제 화면과 같아(WYSIWYG) 결과를 바로 확인하며 작업한다.
Divi 빌더의 구조: 섹션·행·열·모듈
Divi로 페이지를 만들 때는 정해진 계층 구조를 따른다. 이 구조를 이해하면 어떤 디자인이든 어디에 무엇을 넣어야 하는지 감이 잡힌다.
- 섹션(Section) — 가장 큰 단위. 페이지를 가로 띠 형태로 구획하는 블록이다. 표준·전폭(Fullwidth)·특수(Specialty) 세 유형이 있다.
- 행(Row) — 섹션 안에 들어가는 가로 줄. 한 행을 몇 개의 열로 나눌지 결정한다.
- 열(Column) — 행을 좌우로 나눈 칸. 콘텐츠를 나란히 배치할 때 쓴다.
- 모듈(Module) — 실제 콘텐츠(텍스트·이미지·버튼 등). 열 안에 배치되는 가장 작은 단위다.
즉 섹션 → 행 → 열 → 모듈 순으로 점점 작은 단위로 내려가며 페이지를 조립한다. 이 계층은 Divi뿐 아니라 Elementor 같은 다른 비주얼 빌더에서도 거의 동일하게 적용되는 공통 개념이라, 한 번 익혀 두면 다른 빌더로 옮겨 가도 그대로 활용할 수 있다.
이 글은 Divi 테마가 이미 설치되어 있다는 가정에서 진행한다. 설치와 라이선스 등록은 별도 과정이므로, 아직 준비되지 않았다면 테마 설치를 먼저 마친 뒤 따라오는 것이 좋다.
Divi 테마 메뉴 페이지 만들기의 흐름
웹사이트의 상단 메뉴(내비게이션)는 방문자가 페이지 사이를 이동하는 통로다. 워드프레스에서 메뉴를 구성하는 큰 흐름은 ① 페이지를 먼저 만들고 → ② 만든 페이지들을 메뉴에 등록·정렬한 뒤 → ③ 첫 화면(메인 페이지)을 지정하는 순서다. 이 절에서는 Divi 환경에서 그 과정을 개념 중심으로 짚는다.
1단계 — 페이지 추가하기
메뉴에 올릴 항목은 결국 개별 페이지다. 워드프레스 관리자(대시보드)의 페이지 → 새 페이지 추가에서 페이지를 만든다. ‘Home’, ‘About’, ‘Contact’처럼 메뉴로 노출할 페이지를 필요한 만큼 제목을 붙여 생성하고 공개(발행)한다. 테마를 처음 켜면 데모용 샘플 페이지가 들어 있을 수 있는데, 직접 구성하려면 이 샘플들을 정리한 뒤 새로 만드는 편이 깔끔하다.
각 페이지의 본문은 Divi 빌더로 들어가 앞서 설명한 섹션·행·모듈을 배치해 디자인한다. 1편에서는 메뉴 구조에 집중하므로, 우선 페이지의 ‘껍데기’를 만들어 두는 것으로 충분하다.
2단계 — 메뉴 만들고 페이지 등록·정렬하기
페이지를 만들었다고 자동으로 상단 메뉴가 완성되는 것은 아니다. 워드프레스 관리자의 외모(Appearance) → 메뉴(Menus)에서 새 메뉴를 하나 만들고(예: ‘Main Menu’), 왼쪽 목록의 ‘페이지’에서 원하는 페이지들을 선택해 메뉴에 추가한다.
추가한 항목은 드래그로 위아래 순서를 바꿀 수 있고, 항목을 살짝 오른쪽으로 들여 넣으면 하위(드롭다운) 메뉴가 된다. 이때 ‘홈(사용자 정의 링크)’처럼 기본으로 들어 있던 불필요한 항목이 있으면 제거한다. 마지막으로 이 메뉴를 테마의 기본 메뉴 위치(Primary Menu)에 지정하고 메뉴 저장을 누르면, 사이트 상단에 원하는 순서대로 메뉴가 표시된다.
3단계 — 메인 페이지(첫 화면) 지정하기
방문자가 도메인에 처음 접속했을 때 보이는 화면을 정하는 단계다. 워드프레스는 기본적으로 최신 글 목록을 첫 화면으로 보여 주는데, 특정 페이지(예: ‘Home’)를 첫 화면으로 고정하려면 설정 → 읽기(또는 테마 커스터마이저의 ‘홈페이지 설정’)에서 ‘정적인 페이지(고정 페이지)’를 선택하고 홈으로 쓸 페이지를 지정한 뒤 저장한다.
이렇게 하면 사이트의 메인 페이지가 우리가 만든 ‘Home’ 페이지가 되고, 상단 메뉴를 통해 다른 페이지로 자연스럽게 이동하는 기본 골격이 완성된다.
Divi vs Elementor — 빌더 선택의 맥락
Divi는 Elegant Themes의 멤버십(연간 구독 또는 1회 결제 평생 라이선스) 형태로 제공되며, 하나의 라이선스로 여러 사이트에 무제한으로 사용할 수 있는 것이 특징이다. 테마와 빌더, 다수의 사전 제작 레이아웃이 함께 묶여 제공된다.
한편 누스쿨은 현재 사이트 구축에 Elementor를 사용한다. 두 빌더 모두 섹션·열·위젯(모듈) 기반의 시각 편집을 지향한다는 점은 같지만, Elementor는 무료 버전이 있고 별도 테마에 얹어 쓰는 플러그인형 빌더라는 차이가 있다. 즉 정해진 정답이 있는 것은 아니며, 라이선스 비용·디자인 자유도·익숙함을 기준으로 선택하면 된다. 핵심 개념(섹션 → 행/열 → 모듈)을 이해해 두면 어느 빌더를 쓰더라도 학습이 빠르다.
정리
1편에서는 Divi 테마의 정체와 빌더 구조(섹션·행·열·모듈), 그리고 메뉴 페이지를 구성하는 전체 흐름 — 페이지 생성 → 메뉴 등록·정렬 → 메인 페이지 지정 — 을 개념 중심으로 살펴봤다. 화면 캡처 없이도 ‘무엇을 왜 하는지’를 이해하면, 실제 화면에서 버튼 위치를 찾는 일은 어렵지 않다.
다음 편에서는 Divi 빌더로 개별 페이지 안의 콘텐츠를 디자인하는 방법을 다룰 예정이다. 워드프레스와 웹사이트 제작에 관한 더 많은 자료는 누스쿨(NuSchool)에서 확인할 수 있다.
💬 댓글 0