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

인기 워드프레스 페이지 빌더 플러그인인 Elmentor는 현재 500만 개가 넘는 사이트에 설치되어 사용되고 있습니다. 무료 엘리멘터 페이지 빌더로도 훌륭한 사이트를 만들 수 있지만 일부 위젯과 템플릿이 제외되어 있고 테마 빌더와 같은 고급 기능이 제공되지 않습니다. 이 글에서는 엘리멘터 프로에서 제공하는 포스트 위젯에 대하여 살펴보겠습니다.

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

엘리멘터에서 포스트나 페이지 혹은 커스텀 포스트 타입 글을 나열할 수 있는 Posts(포스트) 및 Portfolio(포트폴리오) 위젯과 Gallery(갤러리), Form(컨택트 폼), Slides(슬라이드) 등 일부 위젯은 엘리멘터 프로에서만 제공됩니다. 엘리멘터 무료 버전에서는 프로 위젯들에 자물쇠 아이콘이 표시되어 있고 사용이 불가합니다.

Elementor의 포스트 위젯을 사용하여 글, 페이지, 커스텀 포스트 타입 글(예: Portoflio 등)을 다양한 스타일로 나열할 수 있습니다.

페이지 편집 화면의 엘리멘츠 탭에서 post로 검색한 다음 Posts 요소를 끌어다 원하는 곳에 배치합니다.

그러면 그림과 같이 글(포스트)들이 표시됩니다. 내용(Content) 탭 아래의 Layout(레이아웃) 섹션에서 스킨 옵션을 선택합니다.

Layout 섹션

스킨 옵션에서는 Classic(클래식; 고전), Cards(카드) 또는 Full Content(전체 콘텐츠)를 선택할 수 있습니다.

Columns(컬럼 개수)에서 열 개수를 지정하고 Posts Per Page(페이지당 글 개수)에서 한 페이지에 표시할 글 개수를 지정합니다.

모바일에서 표시할 컬럼과 포스트 개수를 달리 지정할 수 있습니다. 하단의 반응형 모드 아이콘을 클릭한 다음, 상단의 모바일 기기 아이콘을 클릭한 다음 모바일 기기에서의 옵션을 선택할 수 있습니다. 마찬가지 방법으로 가운데에 있는 태블릿 기기 아이콘을 클릭하여 중간 크기의 기기(태블릿 기기)에서의 레이아웃을 선택할 수 있습니다.

Meta Data(메타 데이터)에서 표시할 메타 데이터를 선택합니다.

Author(글쓴이), Date(날짜), Time(시간), Comments(댓글 개수), Date Modified(수정 날짜) 등의 메타 데이터를 표시할 수 있습니다. 예를 들어, 날짜 필드를 표시하려면 Meta Data 섹션에서 플러스 기호를 클릭한 다음 Date를 선택합니다.

글을 컬럼 레이아웃이 아닌 리스트 레이아웃으로도 표시가 가능합니다. 리스트(목록) 레이아웃으로 표시하려면 스킨을 Classic(클래식)으로 지정하고, Columns(열 개수)를 1로 선택합니다. 그리고 Image Position(이미지 위치)을 Left(왼쪽) 또는 Right(오른쪽)로 지정하고 이미지 크기 등을 적절히 지정하도록 합니다.

Query 섹션

또한, Query(쿼리) 섹션에서는 표시할 포스트 타입(예: 글, 페이지, 커스텀 포스트 타입 글)을 지정하고 특정 카테고리 또는 태그의 글만을 표시하도록 지정할 수 있습니다. 

특정 카테고리 글만 표시하려는 경우 Include By 아래의 빈칸에 있는 추가(+)를 클릭하여 Term을 선택하도록 합니다. 그런 다음, Term 필드에서 카테고리 이름을 입력하여 선택합니다.

Exclude(제외) 탭에서는 특정 카테고리 글이나 태그 글을 제외하도록 설정할 수 있으며, Offset(오프셋)도 설정할 수 있습니다.

Offset 설정은 슬라이드나 캐러셀 등과 함께 사용하여 글을 나열할 때 유용합니다. 가령 슬라이드로 최신 글 3개를 표시하도록 한 다음, 그 아래에 Posts 위젯을 사용하여 최신 글을 나열하는 경우 이미 최신 글 3개가 표시되고 있으므로 Posts 위젯에서는 최근 3개의 글은 표시되지 않도록 하는 것이 바람직합니다. 이때 Offset에 3을 지정하면 최근에 공개된 3개의 글은 제외하고 그다음 글부터 표시됩니다.

Order By에서 글 정렬 기준을 설정할 수 있습니다. Order에서는 내림차순 또는 오름차순을 선택할 수 있습니다. 예를 들어, 글 제목을 기준으로 가나다순으로 정렬하고 싶은 경우 Order By의 옵션을 Date(날짜) 대신 Title(제목)로 지정하면 됩니다. 페이지를 로드할 때마다 다른 글들이 표시되도록 하고 싶은 경우에는 Random(랜덤)을 선택할 수 있습니다.

Pagination 섹션

Pagination 섹션에서는 페이지네이션을 지정할 수 있습니다. 

페이지네이션(페이지 나눔)으로 다음 옵션이 제공됩니다.

• None(없음)
• Numbers(번호)
• Previous/Next(이전/다음)
• Numbers+Previous/Next(번호+이전/다음)
• Load on Click(클릭 시 로드)
• Infinite Scroll(무한 스크롤)

스타일 탭

스타일 탭의 Layout 섹션에서 컬럼 간격(Columns Gap), 행 간격(Rows Gap), 정렬(Alignment) 등의 옵션을 선택할 수 있습니다.

이외에도 다양한 옵션이 제공되므로 옵션을 지정하여 원하는 레이아웃을 만들 수 있습니다.

마치며

이상으로 엘리멘토 프로에서 제공하는 Posts 위젯에 대하여 살펴보았습니다. 비슷한 기능을 제공하는 위젯으로 Portfolio가 있습니다. 포트폴리오 위젯을 사용하여 포스트, 페이지 또는 커스텀 포스트 타입 글들을 포트폴리오 레이아웃으로 나열할 수 있습니다.

워드프레스 엘리멘터 포트폴리오 위젯

참고

https://avada.tistory.com/2356

워드프레스 Divi 테마 속도 개선 & 무료 Immigration Lawyer 레이아웃 팩 공개

https://avada.tistory.com/2348

엘리멘터 키트 라이브러리(Elementor Kits Library) 사용하기