워드프레스 Divi 테마 튜토리얼 3편에서는 다양한 모듈을 활용해 코딩 없이 웹페이지를 구성하는 방법을 다룬다. 섹션 추가, 행동개시·안내문·이미지·토글·디바이더 모듈, 모듈 복사와 라이브러리 활용, 배경·간격·여백 조정, 애니메이션·변환 효과까지 실제 빌더 화면을 따라가며 정리한다. 1·2편을 마쳤다면 이어서 따라 하면 된다.
참고로 이 글은 nuschool이 과거 Divi 테마를 사용하던 시기에 작성된 자료다. 현재 nuschool.cc는 Elementor 기반으로 리뉴얼되어 운영되고 있으나, Divi 빌더의 기본 개념(섹션·행·모듈 구조, 라이브러리 활용 등)은 다른 페이지 빌더에도 그대로 응용되므로 기록 차원에서 정리해 둔다.
워드프레스 Divi 테마란
Divi는 Elegant Themes가 만든 워드프레스용 테마이자 비주얼 페이지 빌더로, 코드를 작성하지 않고 드래그 앤 드롭만으로 웹페이지를 만들 수 있게 해 준다. 페이지 구조는 섹션(section) → 행(row) → 칼럼(column) → 모듈(module)의 계층으로 이뤄지며, 섹션이 가장 큰 단위, 모듈이 텍스트·이미지·버튼 같은 실제 콘텐츠 단위다. 버튼·이미지·토글 등 40개가 넘는 모듈을 제공한다.
Divi 테마의 장점
- 코딩 없이 드래그 앤 드롭으로 웹사이트를 만들 수 있다.
- 미리 만들어진 수많은 레이아웃·템플릿을 제공한다.
- 각 모듈은 콘텐츠·디자인·고급 탭으로 나뉘어, 색상·타이포·여백·애니메이션 등 다양한 디자인 요소를 코딩 없이 설정할 수 있다.
- 자주 쓰는 모듈·행·섹션을 라이브러리에 저장해 재사용할 수 있다.
준비 사항
이 글은 아래 단계가 모두 끝났다는 가정 하에 진행한다. 워드프레스와 Divi 테마 설치, 그리고 1·2편의 기본 빌더 사용법을 먼저 익히고 오는 것을 권장한다.
- 워드프레스 설치
- Divi 테마 설치
- 워드프레스 Divi 테마 튜토리얼 1·2편 (기본 빌더 사용법)
섹션과 모듈 추가하기
섹션을 추가하면 대표 이미지나 광고, 안내 영역 등 페이지를 구획하는 큰 단위를 만들 수 있다. 섹션 끼워넣기 > 일반 선택 > 원하는 칼럼 구조 선택 순서로 진행한다.
행동개시 모듈
행동개시(Call To Action) 모듈을 클릭해 추가한다. 이 모듈은 제목·본문과 함께 버튼을 제공해, 방문자의 클릭을 유도하는 영역을 만들 때 쓴다.
- 텍스트: 제목과 본문, 버튼 텍스트를 수정할 수 있다.
- 링크: 버튼과 모듈 전체에 링크를 걸어 둘 수 있다.
링크 대상은 다음과 같이 동작한다.
- 같은 윈도우 안에서: 새 창이 뜨지 않고 현재 창이 링크 URL로 이동한다.
- 새 탭에서: 걸어 둔 URL을 새 창으로 띄운다.
안내문 모듈
안내문(Blurb) 모듈은 사진·제목·본문을 함께 담는 모듈이다. 서비스 소개나 특징 나열에 자주 쓰인다. 행동개시 모듈과 마찬가지로 링크를 걸 수 있다.
이미지 모듈
이미지 모듈을 추가하면 칼럼에 사진을 넣을 수 있다.
모듈 이동·복사하기
모든 모듈은 마우스로 끌어서 원하는 칼럼으로 옮길 수 있다.
모듈은 복사도 가능하다. 같은 모듈을 여러 번 쓸 때는 처음부터 다시 만들기보다 복사를 활용하면 빠르다.
디자인 툴로 모듈 꾸미기
모듈에 마우스를 올렸을 때 나타나는 붓 모양 아이콘을 클릭하면 바로 디자인 탭으로 이동한다. 디자인 탭에서 색상·여백·테두리 등 시각 요소를 코드 없이 조정할 수 있다.
색 조도 변경
디자인 탭에서 모듈의 색 조도(밝기·채도)를 조절해 분위기를 바꿀 수 있다.
이미지·아이콘 디자인 옵션
- 이미지/아이콘 너비: 크기를 조절한다.
- 이미지/아이콘 정렬: 좌·중·우로 위치를 옮긴다.
- 둥근 사각형: 사각 배경의 모서리를 둥글게 만든다(최대 원형까지 변형 가능).
모듈 복사와 라이브러리 활용
먼저 텍스트 모듈을 추가한다.
모듈 복사로 빠르게 생성하기
이전에 만든 버튼 모듈 위에 마우스를 올린 뒤(클릭하지 않는다) 복사를 선택한다.
복사한 버튼 모듈을 클릭한 뒤 드래그하면 같은 버튼을 간편하게 늘려 배치할 수 있다.
모듈 라이브러리에 저장·불러오기
라이브러리에 추가해 두면, 저장한 모듈을 보관해 두었다가 필요할 때 다른 페이지에서도 간편하게 불러 쓸 수 있다. 반복되는 디자인을 매번 새로 만들 필요가 없어 작업 속도가 크게 빨라진다.
라이브러리에서 저장한 모듈을 불러온다.
복사 기능 응용
복사 기능을 응용하면 같은 형태의 레이아웃을 빠르게 구성할 수 있다.
복사를 클릭해 모듈 개수를 늘린다.
배경·간격·정렬 다듬기
배경 색 넣기
설정 > 배경 > 색 선택 순서로 진행한 뒤 색 명암을 조절한다.
간격 조절
디자인 > 간격에서 모듈 사이의 여백(마진·패딩)을 조절한다.
텍스트 모듈 추가와 열 이동
텍스트 모듈을 추가한다.
열 옮기기 표시를 클릭한 뒤 드래그해 칼럼 위치를 바꾼다.
드래그해서 가져온 텍스트 모듈을 삭제하고, 라이브러리에서 텍스트 모듈을 불러온다.
텍스트 정렬과 배경 추가
텍스트를 정렬한 뒤 배경을 추가한다.
이미지 배치와 여백 제거
이미지 디자인 옵션을 응용해 넣고 싶은 이미지들을 차례로 배치한다.
간격과 최대 너비 조정
행 설정 > 디자인 > 크기 조정 > 사용자 정의 간격을 1로 변경한다. 이어서 최대 너비를 모두 최대로 키운다.
위아래 여백 없애기
행 설정 > 내부 여백을 모두 ‘0’으로 설정한다. 같은 방식으로 절(섹션) 설정 > 내부 여백도 ‘0’으로 설정하면 모듈 위아래의 빈 공간이 사라져 이미지를 화면에 꽉 차게 배치할 수 있다.
토글 모듈
토글 모듈은 제목을 클릭하면 내용이 펼쳐지고 다시 클릭하면 접히는 모듈이다. FAQ나 약관처럼 정보를 접어 두고 필요할 때 펼치는 영역에 적합하다. 디자인 > 아이콘에서 ‘닫혔을 때’와 ‘열렸을 때’ 아이콘을 각각 설정할 수 있고, 디자인 > 테두리 > 테두리 너비를 ‘0’으로 설정하면 테두리를 없앨 수 있다.
디바이더 모듈
디바이더 모듈은 콘텐츠 사이에 구분선을 넣는 모듈이다. 분리 기호 양식에서 선 종류(실선·점선 등)를 고를 수 있고, 크기 조정으로 선의 길이를 조절할 수 있다.
애니메이션·변환 효과
디자인 > 애니메이션에서 이미지가 화면에 나타날 때의 시각적 효과(페이드·슬라이드 등)를 넣을 수 있다. 디자인 > 변환에서는 사진의 크기·위치·회전을 자유롭게 바꿀 수 있어, 같은 이미지로도 다양한 연출이 가능하다.
마무리
이번 3편에서는 섹션 추가부터 행동개시·안내문·이미지·토글·디바이더 모듈, 모듈 복사와 라이브러리 활용, 배경·간격·여백 조정, 애니메이션·변환 효과까지 살펴봤다. 핵심은 모듈을 조합하고 자주 쓰는 구성을 라이브러리에 저장해 두는 것이다. 이렇게 하면 코딩 없이도 완성도 높은 페이지를 빠르게 만들 수 있다.
앞서 밝혔듯 nuschool은 현재 Divi 대신 Elementor 기반으로 운영되고 있다. 페이지 빌더는 달라졌지만 섹션·행·모듈 구조와 라이브러리(템플릿) 활용이라는 기본 원리는 동일하므로, 이 글의 개념은 다른 빌더로 옮겨 가도 그대로 응용할 수 있다.
💬 댓글 0