워드프레스 Divi 테마에서 무료 레이아웃 팩 활용하기
가장 많이 설치되어 사용되는 워드프레스 테마 중 하나인 Divi는 심플하면서도 강력한 기능을 제공합니다. 이전 글에서 Divi 테마에 대해 간단하게 소개했습니다.
Divi 테마는 초보자가 사용하기에는 조금 어려울 수 있습니다. 하지만 Divi 테마 개발사인 Elegant Themes에서 매주 무료로 공개하는 레이아웃 팩을 활용하면 비교적 수월하게 사이트를 만들 수 있습니다.
각 레이아웃 팩에는 7개 내외의 레이아웃(Layout)이 포함되어 있습니다. 현재 Divi 빌더에서는 총 107개 레이아웃 팩이 제공되며 총 799개 레이아웃을 이용할 수 있으며 매주 새로운 레이아웃 팩이 추가됩니다. 각 레이아웃 팩은 특정 주제(예: 앱 개발자, 베이커리, 건강 클리닉...)에 대한 사이트에 사용할 수 있는 레이아웃 페이지들(예: 랜딩 페이지, 소개 페이지, 연락처 페이지 등)로 구성되어 있습니다.
새로 릴리즈되는 Divi 레이아웃 팩에 대한 정보는 Elegant Themes 블로그에서 확인해볼 수 있습니다.
처음 Divi 테마를 접하는 경우 레이아웃 페이지를 로드하여 활용할 수 있습니다. 레이아웃을 분석하여 Divi 테마 사용법을 익힐 수 있고, 원하는 경우 여러 개의 레이아웃을 로드하여 마음에 드는 요소들을 조합하여 페이지를 만들 수도 있습니다.
레이아웃 로드하기
Divi 테마에서 레이아웃을 로드하려면 페이지를 열고 Divi 빌더로 편집하도록 선택합니다.
위와 같은 화면이 표시되면 라이브러리에서 로딩 아이콘(플러스 아아콘)을 클릭합니다.
그러면 '라이브러리에서 로딩' 페이지가 표시됩니다.
오늘 날짜 기준으로 총 107개 레이아웃 팩이 있으며, 각 레이아웃 팩에는 평균 7~8개 내외의 레이아웃(페이지)이 포함되어 있습니다. 두 가지 방식으로 레이아웃을 로드할 수 있습니다. 하나는 특정 주제의 레이아웃 팩에 포함된 레이아웃을 로드하거나, 검색 기능을 사용하여 레이아웃을 검색하여 검색 결과에서 원하는 레이아웃을 선택할 수 있습니다.
예를 들어, 최근 릴리즈된 베이커리 레이아웃 팩을 선택하면 다음 그림과 같이 베이커리 레이아웃 팩에 포함된 모든 레이아웃 페이지가 표시됩니다.
Divi용 베이커리 레이아웃 팩 - 랜딩 페이지베이커리 레이아웃 팩에는 다음과 같이 총 7개 레이아웃 페이지가 포함되어 있습니다.
랜딩 페이지
소개 페이지
블로그 페이지
컨택트 페이지
홈 페이지
메뉴 페이지
상점 페이지
오른쪽의 Layouts in This Pack 아래에서 각 레이아웃 페이지를 클릭하여 Live Page를 확인할 수 있습니다.
Divi용 베이커리 레이아웃 팩가령 Shop 썸네일을 클릭한 다음 왼쪽에서 View Live Demo를 클릭하여 실제 데모 페이지를 확인할 수 있습니다. 마음에 들면 Use This Layout을 클릭하면 됩니다.
다른 방법으로 라이브러리에서 로딩 페이지에서 검색 기능을 사용하여 레이아웃을 검색할 수 있습니다. 예를 들어, 컨택트 폼이 포함된 레이아웃을 찾으려면 Search 필드에 "contact"를 입력합니다.
레이아웃 검색하기사용하는 브라우저 종류에 따라 직접 입력하면 로딩이 지연될 수 있으므로, 메모장 등에 "contact"를 입력하고 선택한 다음 Ctrl + C를 눌러 클립보드에 저장한 후 Search 필드에 Ctrl + V를 눌러 붙여넣기하면 지연 문제가 발생하지 않을 것입니다.
Contact를 입력하여 검색하면 위의 그림과 같이 총 105개 레이아웃이 검색됩니다. 각 레이아웃을 살펴보고 원하는 레이아웃을 선택한 후에 Use This Layout을 클릭하면 페이지에 로드됩니다.
레이아웃 사용하기그러면 Import estimated time remaining... 화면이 표시되다가 가져오기(Import)가 완료되면 다음 그림과 같이 각 요소가 로드됩니다.
Divi 테마의 백엔드 빌더위의 그림은 백엔드 빌더에서 각 요소가 표시되어 있어서 직관적이 않습니다. 디자인을 직접 보면서 편집하고 싶은 경우 "Build On the Front End"를 클릭합니다. 그러면 시각 빌더(Visual Builder)로 페이지를 편집할 수 있습니다.
Divi 테마의 시각 빌더프런트엔드에서 편집하면 보다 수월하게 가능합니다. 저는 백엔드 빌더를 초기부터 사용하다 보니 시각 빌더 대신 백엔드 빌더만 사용하게 되네요.
필요 없는 요소(엘리먼트; element)를 삭제하고 문구, 그림 등을 변경하고, 새로운 요소를 추가할 수 있으며 마우스로 열이나 행을 끌어서 위치를 바꿀 수 있습니다. 여러 개의 레이아웃 페이지를 하나의 페이지에 로드하여 필요한 요소만 사용하는 것도 가능합니다. (아바다 등의 테마에서 데모를 로드할 경우 하나의 데모와 로드하여 사용할 수 있지만, 개념은 조금 달라도 Divi에서는 여러 개의 레이아웃을 하나의 페이지로 로드하여 사용할 수 있습니다.)
기존 콘텐츠가 있는 상황에서 레이아웃 페이지를 로드하거나 여러 개의 레이아웃 페이지를 동시에 로드하는 경우 Replace existing content 박스의 체크를 해제하도록 합니다. 그러면 기존 콘텐츠가 유지되면서 새로운 레이아웃 페이지의 요소들이 그 아래로 로드됩니다.
마치며
이상으로 Divi 테마에서 레이아웃 팩을 활용하는 방법을 간단히 살펴보았습니다. 각 레이아웃 팩에는 특정 효과가 테스트로 적용되어 있을 수 있습니다. 그런 효과를 복사하여 다른 요소에 적용하는 등의 방법도 활용해볼 수 있습니다.
참고로 대부분의 레이아웃 팩에 포함된 이미지는 라이선스 걱정 없이, 별도의 로열티 없이 상업용 사이트에 이용이 가능합니다. 이미지를 이용할 때 출처를 밝히지 않아도 됩니다.
처음 Divi를 사용하는 경우 레이아웃 팩 활용을 통해 Divi 테마에 익숙해지고 사용법을 익히는 데 도움이 될 것입니다.
