Tailor로 페이지 레이아웃 디자인하기

알다시피 워드프레스에는 페이지의 레이아웃을 디자인할 수 있는 여러 다양한 방법들이 있습니다. 다음은 워드프레스에서 커스텀 레이아웃을 만들기 위해 주로 사용하는 방법들입니다.

• 페이지 편집창에서 직접 콘텐츠 수정
• 테마 템플릿 파일 수정
• 숏코드 방식
• 페이지 빌더(Page Builder) 플러그인 사용

이 중 둘 이상의 방법을 함께 사용하는 경우도 많습니다만, 아마도 가장 쉽고 또 많이들 사용하는 방법 중 하나는 페이지 빌더(Page Builder) 플러그인을 사용하는 방법일 것입니다. 그래서인지 워드프레스 플러그인 디렉터리에서 “page builder” 키워드로 검색하면 상당히 많은 플러그인들이 검색되는 것을 알 수 있습니다. 여기다 플러그인 디렉터리에 등록되어 있지 않은 유료 페이지 빌더들까지 합하면 아마 1,000종은 될 듯 싶습니다.

이 중 가장 많이 사용되는 인기있는 빌더를 꼽으라면 아마도 Visual Composer가 떠오를 것입니다. 유료이긴 하지만 가격 만큼 강력하고 다양한 기능들을 제공하기 때문이죠.

오늘 소개할 플러그인도 이런 페이지 빌더 플러그인 중 하나입니다. 최근에 플러그인 디렉터리에 올라온 따끈따끈한 빌더죠. 바로 Tailor Page Builder 입니다.

그림. Tailor Page Builder

이 빌더 역시 다른 많은 빌더들과 마찬가지로 페이지의 레이아웃을 사용자가 쉽게 수정하고 편집하여 커스텀 페이지 디자인을 쉽게 만들 수 있게 해 줍니다. 드래그앤 드롭 방식으로 UI 요소들을 화면에 가져다 놓고 콘텐츠를 편집하거나 이미지를 추가할 수 있는 것도 마찬가지구요.

그럼 간단하게 페이지를 하나 만들면서 사용법을 알아 볼까요? 여러분을 달콤한 디저트의 세계로 안내할 레시피 랜딩 페이지를 하나 만들어 보기로 하죠. 우선 관리자 화면의 “페이지” 메뉴에서 새 페이지를 하나 추가한 다음, 제목을 달고 저장합니다.

그림. Tailor this Page

페이지가 만들어 지면 관리자 화면 상단 어드민바(Admin Bar)에 “Tailor this Page”라는 메뉴 링크가 추가된 것이 보일 것입니다. 이 메뉴를 클릭하면 다음과 같이 눈으로 직접 보면서 페이지를 디자인할 수 있는 Tailer Page Builder의 편집 화면이 나옵니다. 워드프레스의 커스터마이저(Customizer) 기능을 확장하는 형태로 되어 있습니다.

그림. Tailor 빌더 화면

좌측에 여러 UI 요소들이 박스 형태로 나열되어 있는 것을 확인할 수 있습니다. 이제 이 박스들 중 필요한 것을 골라 마우스로 끌어 우측의 테마 영역에 넣어주고 콘텐츠를 입력하거나 필요한 몇몇 설정들을 처리해 주면서 간단하게 페이지 디자인을 만들어 나갈 수가 있습니다. 아래에서는 Hero 요소를 선택하여 페이지 상단에 대표 이미지를 두고 그 아래 약간의 설명과 함께 클릭할 수 있는 Button 요소를 추가하고 있습니다. 각 UI 요소에 마우스를 올리면 “Edit” 버튼이 있어 여러 가지 속성값들을 쉽게 추가하거나 변경할 수 있구요.

그림. Tailor 사용하기

Grid를 추가하거나 Gallery를 만들어 넣거나 최근 글(Posts)을 추가하는 것도 마찬가지https://wpguide.usefulparadigm.com/wp-content/uploads/2020/10/입니다. 모든 UI 요소는 반응형 웹 기반으로 제작되어 있기 때문에 커스터마이저에서 디바이스를 바꿔가며 화면폭에 따라 어떻게 보이는지 쉽게 확인해 볼 수도 있습니다.

그림. 반응형 웹 기반 Tailor 미리보기

그 밖에도 Tailor에는 다양한 기능들이 많이 들어 있습니다. 예를 들어, 이미 만들어 놓은 레이아웃의 전부 또는 일부분을 저장하여 두었다 나중에 다른 곳에서 다시 활용할 수 있는 “템플릿(templates)” 기능도 있고 Tailor에서 기본으로 제공하는 UI 외에 사용자가 직접 새로 UI를 만들어 확장할 수 있는 기능도 제공합니다. 대부분의 빌더 플러그인들이 유료인 것과는 달리 이 플러그인은 무료이며 또한 오픈소스로 소스코드가 공개되어 있는 점도 매력적입니다.

그림. Tailor 템플릿 저장하기

물론 아직 세상에 나온지 얼마 안되는 플러그인이라 그런지 약간의 버그가 보이긴 합니다만, 전체적으로는 아주 잘 만들어진 좋은 플러그인이라는 느낌입니다. 찜해 두었다가 여러분 워드프레스 사이트에 랜딩 페이지(landing page)나 각종 소개 페이지 같은 커스텀 페이지들을 만들 필요가 있을 때 한번 검토해 보면 좋을 듯 싶네요. 🙂

• Tailor 공식 사이트
• Tailor Page Builder (워드프레스 플러그인 디렉터리)
• Tailor 사용법 문서