워드프레스 엘리멘터 테마 빌더로 포스트 템플릿/우커머스 상품 페이지 템플릿 만들기

엘리멘터는 현재 1,000만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 워드프레스 페이지 빌더입니다. Elementor 무료 버전으로도 코딩 지식 없이 웬만한 사이트를 만들 수 있지만, 커스텀이 필요한 경우 엘리멘터 프로를 사용하면 시간과 노력을 절감할 수 있습니다. 엘리멘터 프로에 탑재된 테마 빌더(Theme Buider)로 헤더, 푸터, 싱글 포스트, 페이지, 아카이브(카테고리, 태그 등), 검색 페이지, 404 에러 페이지 등의 템플릿을 수월하게 만들어 적용할 수 있습니다.

이 글에서는 테마 빌더로 포스트 템플릿과 우커머스 상품 페이지 템플릿을 만드는 방법을 살펴보겠습니다.

워드프레스 엘리멘터 테마 빌더로 포스트 템플릿/우커머스 상품 페이지 템플릿을 만드는 방법

Elementor Pro의 Theme Builder를 사용하면 헤더에서 푸터까지 사이트의 각 부분을 쉽게 커스텀할 수 있습니다. 예를 들어, 카테고리별로 다른 레이아웃을 적용하기를 원하거나, 특정 페이지나 카테고리 또는 태그 페이지에 다른 헤더나 푸터를 적용하는 것도 가능합니다.

싱글 포스트 템플릿 만들기

싱글 포스트 템플릿을 만들어서 전체 글 또는 특정 카테고리 글에 적용할 수 있습니다. 그러면 카테고리에 따라 글의 레이아웃을 다르게 만들 수 있습니다.

워드프레스 관리자 페이지에서 템플릿 > Theme Builder를 선택합니다.

테마 빌더 페이지가 표시되면 왼쪽의 Site Parts에서 Single Post를 선택합니다.

그러면 Single Post 템플릿 리스트 페이지가 표시됩니다. 현재 적용되고 있거나 임시글로 저장되어 있는 Single Post 템플릿이 표시됩니다.

새로운 템플릿을 만들려면 오른쪽 상단의 Add New를 클릭합니다.

라이브러리 화면이 표시되면 드롭다운 목록에서 Single Post를 선택합니다.

포스트 템플릿 중에서 마음에 드는 템플릿을 선택하여 로드할 수 있습니다. 빈 페이지에서 시작하려면 오른쪽 상단의 X 아이콘을 클릭합니다.

템플릿 썸네일을 클릭하면 미리 보기 화면이 표시됩니다. 다른 템플릿을 둘러보려면 "< 라이브러리로 돌아가기"를 클릭합니다. 해당 템플릿을 로드하여 활용하려면 삽입 버튼을 클릭합니다.

그러면 엘리멘터에서 편집할 수 있는 화면이 표시됩니다.

템플릿을 그대로 사용하거나 미리 만들어진 템플릿을 적절히 수정할 수 있습니다. 수정이 완료되면 "발행"을 클릭합니다.

Publish Settings(발행 설정) 팝업이 표시됩니다.

Where Do You Want to Display Your Template?(템플릿을 어디에 표시하기를 원하시나요?)가 표시됩니다. Add Condition(조건 추가) 버튼을 클릭합니다. 조건은 추후에 다시 변경이 가능합니다.

조건은 "Include"(포함)와 "Exclude"(제외) 모두 지정이 가능합니다.

특정 카테고리에 지정하려는 경우에는 글 아래의 In 카테고리를 선택하고 카테고리를 지정하도록 합니다. 조건은 여러 개 지정할 수 있습니다.

완료되면 Save & Close 버튼을 클릭합니다.

추후에 조건을 변경하고 싶은 경우 워드프레스 알림판 > 템플릿 > Theme Builder > Single Post에서 해당 템플릿의 "Edit Conditions"를 클릭하여 템플릿이 적용될 위치를 재지정할 수 있습니다.

우커머스 상품 페이지 템플릿 만들기

우커머스 쇼핑몰의 상품 페이지에 사용할 템플릿도 상기에서 설명한 포스트 템플릿과 동일한 방법으로 만들 수 있습니다.

테마 빌더에서 Single Product를 선택하고 Add New를 클릭합니다.

미리 만들어진 템플릿을 선택할 수 있는 화면이 표시됩니다.

Single Product의 블록을 선택할 수 있습니다. 

템플릿이 로드되면 원하는 대로 커스텀이 가능합니다.

편집이 완료되면 게시 옆에 있는 화살표를 클릭하고 Display Conditions를 클릭합니다.

템플릿을 표시할 곳을 지정하는 화면이 표시됩니다. Add Condition 버튼을 누릅니다.

모든 상품에 적용하거나 특정 카테고리나 태그의 상품에 적용할 수도 있습니다.

예를 들어, 특정 상품 카테고리에 설정하고 싶은 경우 In 카테고리를 선택하고 카테고리 이름을 검색하여 선택합니다.

마치며

이상으로 엘리멘터 프로의 Theme Builder를 사용하여 포스트 템플릿을 만드는 방법에 대해 간략히 살펴보았습니다. 다른 템플릿도 비슷한 방법으로 만들 수 있습니다. 엘리멘터 프로의 테마 빌더를 사용하면 테마 파일을 수정하지 않고 워드프레스 알림판에서 사이트의 모든 부분을 커스텀할 수 있습니다.

Avada, Newspaper, Divi 등 일부 테마에서도 비슷한 기능을 제공합니다. 아바다의 경우 Layout을 사용하여 사이트의 모든 요소를 쉽게 커스텀할 수 있습니다.

엘리멘터 프로에 대한 자세한 정보는 Elementor 사이트를 참고하시기 바랍니다.

💡엘리멘터 프로에 대한 자세한 정보

참고

https://avada.tistory.com/2029

워드프레스 엘리멘터 페이지 빌더 커스텀 카테고리 템플릿 만들기

https://avada.tistory.com/2386

워드프레스 엘리멘터 포스트 위젯(Posts)