DIVI BUILDER

Divi 테마 간단 사용법

Divi 테마는 인기있는 워드프레스 테마입니다. 유료 테마라 비용이 좀 들긴 하지만 그래도 그만한 값어치는 하는 테마죠.

Divi는 코딩 없이 페이지 빌더 방식으로 간단하게 사이트 디자인과 레이아웃을 구성할 수 있는데다 다른 상용 테마들에 비해 커스터마이징 범위(자유도)도 비교적 높기 때문에 워드프레스 제작사나 웹 에이전시 처럼 가성비(ROI)가 중요한 곳에서 특히 인기가 있습니다.

워드프레스 테마 디렉터리나 테마포레스트에서는 내 입맛에 딱 맞는 테마를 찾을 수가 없고 그렇다고 직접 커스텀 테마를 만들자니 부담스러운 분들에게 추천하는 테마입니다. 여기에 약간의 디자인(?) 실력만 있다면 더할 나위 없겠죠!

테마 사용법?

설치만 하면 되는데 무슨 사용법이 필요할까요? 맞습니다. Divi 테마 역시 워드프레스 테마니까 그저 테마 설치 방법으로 설치하여 사용하면 그만입니다. 다만 유료 테마이다 보니 직접 업로드 방식으로 설치해야 한다는 점만 다를 뿐이죠.

Divi 테마 사용법이 어렵진 않지만, 그래도 Divi 테마를 설치하고서 ‘그 다음엔 어떻게?’ 라고 묻는 분들을 위해 간단하게나마 사용법을 정리해 보았습니다.

여기서는 테마는 일단 설치했다 가정 하에, 그 이후 Divi 테마로 간단하게 내 사이트를 셋팅하는 방법을 소개합니다. 정말로 간단한 소개이니 큰 기대는 안하는 게 좋을 듯 하구요.^^

자식 테마 만들기

처음부터 시중에 나와 있는 Divi 자식 테마(Divi Child Themes)로 시작하는 게 아니라면, 자식 테마부터 만들고 가는 게 좋은 방법입니다. 그래야 나중에 테마를 부분적으로 수정하거나 부모 테마를 업데이트할 때 편리하겠죠.

자식 테마 만드는 방법은 아래 문서에 잘 나와 있습니다.

또는 Divi 테마만을 위한 온라인 빌더를 써도 되구요.

Divi 테마가 적용된 모습입니다.

사이트 레이아웃 디자인

테마를 설치했다면, 이제 사이트 디자인을 해야겠죠.

통상적으로 웹사이트를 디자인할 때는 큰 것부터 작은 것, 바깥에서 안쪽 순서로 하게 됩니다. 말인즉, 우선 사이트 전체의 레이아웃을 잡고 그런 다음 개별 페이지의 레이아웃을 만들고 페이지 내의 특정 요소들에 대한 UI 디자인을 하게 되죠.

Divi 테마도 마찬가지입니다. Divi 테마가 설치된 관리자 메뉴를 보면 “Divi” 메뉴가 아래와 같이 구성되어 있습니다.

큰 것부터 작은 것 순이죠!

• 테마 옵션 : 테마의 전반적인 설정
• 테마 커스터마이저 : 테마의 헤더나 푸터 영역, 메뉴 등 설정
• 모듈 커스터마이저 : 개별 UI 구성요소 설정

그러니 먼저 테마 옵션부터 시작해서 테마 커스터마이저, 그리고 모듈 커스터마이저 순으로 진행하는 것이 좋습니다. (물론 하다보면 이곳 저곳 왔다갔다 할 수 밖에 없겠지만, 원칙은 그렇다는 거죠!)

그럼 사이트 레이아웃(layout) 부터 디자인해 볼까요?

통상적으로 웹사이트의 레이아웃(layout)은 헤더 영역, 본문, 사이드바, 그리고 푸터 영역으로 나뉩니다. Divi 테마의 경우도 마찬가지죠.

우선 사이트 전체에 필요한 셋팅부터 시작합니다. 다만 지면 관계상(?) 여기서 모든 셋팅을 일일이 다 다룰 순 없기 때문에 중요한 것 한두 개 정도만 다루고 넘어갑니다.

로고 변경

우선 간단한 것부터. 로고는 “테마 옵션 > General” 메뉴에서 변경합니다.

번역 사용 안 함

Divi 테마는 디폴트로 번역을 사용하게 설정되어 있고 이 경우 한글 사이트인 경우 “BM Hanna” 폰트가 디폴트로 잡힙니다. 우리가 배달의 민족이라 그럴까요? ㅎㅎ 아무튼 이 기능을 끄면 Divi의 디폴트 폰트인 Open Sans 폰트로 변경됩니다. 물론 이 기능을 끄면 Divi 테마 커스터마이저 메뉴가 영문으로 표시되는 ‘부작용’은 감내해야 합니다.

디폴트 폰트 변경

“테마 커스터마이저 > 일반 설정 > 활판기술" 메뉴에서 헤더 폰트와 바디 폰트를 선택할 수 있습니다. 폰트 선택 메뉴가 표시되지 않으면 디비 & 엑스트라 한글폰트 플러그인을 설치해서 쓰거나 아니면 아래 코드 한 줄을 자식 테마의 functions.php 파일 내에 추가해 주면 됩니다.

function et_get_one_font_languages() { return null; }

헤더와 네비게이션 메뉴

“테마 커스터마이저 > 헤더 및 네비게이션 메뉴”에서 메인 메뉴와 보조 메뉴에 필요한 설정을 하면 됩니다.

실제 메뉴 연결은 “외모 > 메뉴” 에서 하며, 다른 워드프레스 사이트와 동일한 방식으로 처리하면 됩니다.

푸터 영역

“테마 커스터마이저 > 푸터” 메뉴에서 처리합니다. 푸터 영역 역시 메뉴에 나와 있는 대로 따라 설정하면 되기 때문에 별도로 설명할 부분은 없습니다.

Divi 테마는 푸터 영역에도 메뉴를 붙일 수 있고, “외모 > 위젯” 메뉴에서 푸터 영역에 필요한 위젯을 추가해 줄 수 있습니다.

욕심을 부리면 끝이 없지만, 사이트 레이아웃은 이 정도로만 하고 이제 메인 페이지를 한번 만들어 보겠습니다.

메인페이지 만들기

워드프레스 관리자 “페이지” 메뉴에서 새 페이지를 하나 추가합니다. 이름은 아무거나 임의로 주면 됩니다. 여기서는 그냥 “메인 페이지”라 주겠습니다.

“Divi 빌더 사용” 버튼이 보이고 우측 상단엔 “Divi 페이지 설정” 박스가 보입니다. Divi 빌더는 Divi 테마에 포함된 페이지 빌더(Page Builder) 도구이며, Divi 테마를 강력하게 만들어 주는 핵심 기능이죠.

자, 이제 메인 페이지를 만들어 봅니다. “Divi 빌더” 버튼을 클릭하면 페이지 편집기 화면이 ‘빌더 모드’로 전환됩니다.

여기서 페이지 레이아웃과 UI를 구성하면 됩니다. 참고로 Divi 빌더는 절(Section), 행(Row), 열(Column) 및 모듈(Module)의 계층 구조를 가지며, 이들 요소를 활용하여 다양한 UI를 만들 수 있습니다.

열(column)을 먼저 만들고,

그 속에 각종 UI 모듈(module)을 추가하는 방식이죠.

다음과 같이 모듈들을 추가해 나가면 됩니다.

혹은, 디자인에 자신이 없다면 “레이아웃(Layouts)”을 불러와 사용해도 됩니다. Divi 테마에는 잘 만들어진 멋진 레이아웃들이 많이 제공되고 있기 때문에 그 중 하나를 골라 적용하고 필요한 부분만 고치는 방식도 얼마든지 가능하죠!

다 되었나요?

다 되었으면 이제 메인 페이지를 연결하는 일만 남았겠죠. 메인 페이지 연결은 통상적인 워드프레스에서의 “정적 페이지 설정” 기능을 쓰면 됩니다. 관리자의 “설정 > 읽기” 메뉴에서 “홈페이지 표시”를 정적인 페이지로 바꾸고 홈페이지를 방금 전 만든 메인 페이지로 변경해 주면 되겠죠.

메인 페이지가 뚝딱 완성되었네요!

나머지 다른 페이지들도 이런 식으로 만들면 됩니다.

물론 여기 소개한 내용은 Divi 테마를 기준으로 설명했지만, 굳이 Divi 테마 아닌 다른 일반적인 상용 테마를 사용하는 경우도 비슷하게 적용 가능합니다. 페이지 빌더(Page Builder)가 바뀌면 그에 따른 사용법만 조금 다를 뿐이죠.

참고자료들

사실 Divi 테마는 개발사인 ElegentThemes에서 멋진 동영상까지 곁들인 자세한 문서를 제공하기에 다른 참고 자료가 필요 없을 정도입니다.

• Divi Theme Documentation | Elegant Themes Documentation

국내 자료는 아래 사이트들을 참고하면 좋을 것 같습니다. (혹시 제가 모르는 더 좋은 사이트가 있으면 댓글로 말씀해 주세요! 목록에 추가하도록 하겠습니다^^)

• DIVI 테마 Archives – 워드프레스 정보 꾸러미
• 아카데미 | 한국 워드프레스 리소스 스토어 – 단비스토어