워드프레스 인기 페이지 빌더인 엘리멘터 플러그인의 유료 버전인 Elementor Pro에서는 포트폴리오 위젯을 사용하여 글이나 페이지, 커스텀 포트 타입을 포트폴리오 형식으로 표시할 수 있습니다. 이 글에서는 엘리멘터 페이지 빌더의 포트폴리오 위젯에 대해 간략하게 살펴보겠습니다.
워드프레스 Elementor Pro 라이선스 활성화하기 (엘리멘터 프로 설치 및 템플릿 로드)
워드프레스 엘리멘터 페이지 빌더(Elementor Page Builder)는 무료로 사용할 수 있지만 프로 기능과 더 많은 템플릿을 사용하려면 엘리멘터 프로 라이선스를 활성화해야 합니다. 이 글에서는 엘리멘터
avada.tistory.com
워드프레스 엘리멘터 포트폴리오 위젯
워드프레스 테마에서 제공하는 포트폴리오 기능과 엘리멘터의 포트폴리오 위젯 차이점
아바다, 엔폴드, Divi 등 인기 워드프레스 테마에는 포트폴리오 기능을 제공하는 경우가 있습니다. 하지만 이러한 테마에서 제공하는 포트폴리오(Portfolio)는 엘리멘터 페이지 빌더에서 제공하는 포트폴리오 기능과는 다릅니다.
아바다 등의 테마에서 제공하는 포트폴리오는 보통 커스텀 포스트 타입(사용자 정의 글 유형)의 하나이며 자체적으로 포트폴리오 포스트를 작성하고 표시할 수 있는 기능이 제공됩니다. 하지만 엘리멘터 프로에서 제공하는 포트폴리오 위젯은 워드프레스 기본 글 유형인 글이나 페이지뿐만 아니라 커스텀 포스트 타입 글들을 포트폴리오 레이아웃으로 나열해주는 기능을 합니다. 즉, 엘리멘터의 Portfolio 위젯은 기존 콘텐츠(글, 페이지, 커스텀 포스트 타입)를 표시하는 기능만 하고 포트폴리오 글 유형을 생성하지는 않습니다.
아바다 테마와 엔폴드 테마에서 제공하는 포트폴리오에 대해서는 다음 글을 참고해보세요.
엘리멘터 페이지 빌더의 포트폴리오 위젯 사용하기
엘리멘터에서 포트폴리오 형식으로 글이나 페이지 등을 나열하고 싶은 경우, 먼저 엘리멘터 편집 화면에서 Portfolio를 검색하여 포트폴리오 아이콘을 표시하고자 하는 곳으로 드래그하여 놓습니다.
Portfolio 위젯(요소)이 추가됩니다. 왼쪽의 Portfolio 편집 패널의 '내용' 탭에서 Layout, Query, Filter Bar를 설정할 수 있습니다.
Layout 섹션에서는 다음과 같은 옵션을 설정할 수 있습니다.
- Columns: 열 개수를 지정합니다. 기본적으로 '3'으로 설정됩니다.
- Posts Per Page: 페이지당 포스트 개수
- 이미지 크기
- Masonry: Masonry 형식으로 썸네일을 표시할지 여부를 선택합니다.
- Item Ratio: 이미지 비율을 설정합니다. 기본값은 0.66입니다.
- Show Title: 마우스 커서를 썸네일 위에 올렸을 때 제목을 표시할지 여부를 선택합니다.
- Title HTML Tag: 타이틀 HTML 태그
모바일 기기에서 컬럼 개수와 포스트 개수 등을 다르게 설정하려면 왼쪽 하단의 모바일 기기 아이콘을 클릭하고 열 개수 등을 다르게 지정하도록 합니다. 예를 들어, 기본적으로 모바일에서 1열로 표시되지만, 원하는 경우 모바일에서 2열로 표시되도록 할 수 있습니다. 비슷한 방법으로 태블릿에서의 레이아웃도 지정할 수 있습니다.
Query 섹션에서는 페이지에 표시할 포스트 타입을 선택할 수 있습니다. 원하는 경우 태그나 카테고리 등을 기준으로 일부 포스트만 표시하거나 제외할 수 있습니다.
Source에서 표시할 글 유형을 선택합니다.
글과 페이지 외에 테마나 플러그인에서 제공하는 커스텀 포스트 타입을 선택할 수 있습니다.
바로 아래에서 표시하거나 제외할 기준을 설정할 수 있습니다. Term (용어)과 Author (작성자) 중에서 선택이 가능합니다.
예를 들어, 특정 카테고리 글만 표시하고 싶은 경우 Term을 선택하고 카테고리 이름의 1~2개 글자를 입력한 다음 카테고리를 선택하면 됩니다.
그리고 Date에서 날짜 범위(예: 모든 날짜, 어제, 지난주, 지난달, 지난 분기, 지난해)를 지정할 수 있고 Order by에서 정렬 기준을 선택할 수 있습니다. Order에서 오름차순 또는 내림차순을 선택할 수 있습니다.
Filter Bar에서 필터 표시줄을 표시할지 여부를 지정할 수 있습니다. Show를 On으로 설정하는 경우 Taxonomy에서 필터 표시줄에 표시할 분류를 지정합니다. 아래 그림과 같이 설정하면 카테고리가 필터 표시줄에 표시됩니다.
스타일 탭에서는 열 간격과 행 간격 등을 지정할 수 있습니다. 그리고 아이템 오버레이, 필터 표시줄 스타일도 지정할 수 있습니다.
고급 탭에서는 여백, 패딩, CSS ID, CSS 클래스 등을 지정할 수 있고, 모션 효과와 배경, 테두리, Positioning, 반응형 등의 설정도 할 수 있습니다.
마치며
이상으로 엘리멘터 PRO에서 제공하는 Portfolio 위젯 설정에 대해 살펴보았습니다. 엘리멘터 페이지 빌더는 현재 500만 개가 넘는 워드프레스 사이트에 설치되어 사용되고 있습니다. 무료 버전에서도 충분히 괜찮은 기능을 제공하지만, 고급 기능이 필요한 경우 Elementor Pro를 사용해볼 수 있습니다.
엘리멘터의 포트폴리오 위젯과 비슷한 기능을 하는 위젯으로 포스트(Posts) 위젯이 있습니다. 포스트 위젯을 사용하여 글, 페이지, 포스트 타입 글을 다양한 레이아웃으로 나열할 수 있습니다.
워드프레스 엘리멘터 포스트 위젯(Posts)
인기 워드프레스 페이지 빌더 플러그인인 Elmentor는 현재 500만 개가 넘는 사이트에 설치되어 사용되고 있습니다. 무료 엘리멘터 페이지 빌더로도 훌륭한 사이트를 만들 수 있지만 일부 위젯과 템
avada.tistory.com
참고
워드프레스 엘리멘터 페이지 빌더: 페이지 내보내기 / 가져오기
인기 무료 워드프레스 페이지 빌더 중 하나인 엘리멘터 (Elementor)에서는 특정 페이지를 템플릿으로 저장하여 다른 사이트에서 가져올 수 있는 기능을 제공합니다. 특정 페이지만을 다른 사이트��
avada.tistory.com
워드프레스 엘리멘터 페이지 빌더 Global 위젯 사용하기
워드프레스 인기 페이지 빌더인 엘리멘터 페이지 빌더 (Elementor Page Builder)에서 특정 엘리먼트를 글로벌 위젯으로 저장하여 활용할 수 있는 기능이 있습니다. Global 위젯으로 저장하면 숏코드로도
avada.tistory.com