엘리멘터 포트폴리오: 카테고리 필터 표시하기

엘리멘터 프로에서는 Portfolio 위젯을 사용하여 블로그 글이나 커스텀 포스트 타입 글들을 포트폴리오 형식으로 나열할 수 있습니다. 포트폴리오 위젯에 카테고리 필터를 표시하고 CSS를 사용하여 스타일을 조정할 수 있습니다.

엘리멘터 포트폴리오: 카테고리 필터 표시하기

그림과 같이 포트폴리오 위젯에 카테고리 필터 바(Filter Bar)를 표시하고 싶은 경우 Portfolio 편집 패널의 Filter Bar 섹션에서 필터 표시줄을 

Show를 On으로 설정하면 Taxonomy에서 필터 표시줄에 표시할 항목을 선택할 수 있도록 표시됩니다. 카테고리나, 태그, 사품 카테고리, 상품 태그 등을 선택할 수 있습니다. 위의 그림에서는 카테고리를 선택할 때의 화면을 보여줍니다.

CSS를 사용하여 필터바의 스타일을 변경할 수 있습니다. 예를 들어, 기본적으로 가운데 정렬되어 있는데, 다음과 같은 CSS 코드를 사용하여 왼쪽으로 정렬이 가능합니다.

.elementor-portfolio__filters {
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
}

오른쪽에 배치하려면 [**left**]를 [**right**]로 바꾸어 테스트해 보시기 바랍니다.

카테고리 이름에 마우스를 올렸을 때 글자 색상을 변경하려면 다음과 같은 코드를 추가할 수 있습니다.

.elementor-portfolio__filters li:hover {
    color: #ff0000;
}

이외에도 CSS를 사용하여 원하는 레이아웃으로 카테고리 필터 부분을 변경할 수 있습니다. 사용자 정의 CSS는 고급(Advanced) 탭의 커스텀 CSS(Custom CSS) 섹션에 추가하시기 바랍니다.

기본적인 CSS를 이해하면 어렵지 않게 스타일을 조정할 수 있을 것입니다.

엘리멘터 프로의 Portfolio 위젯과 비슷한 기능을 하는 위젯으로 Posts 위젯이 있습니다. 하지만 포스트 위젯은 필터 표시줄을 활성화하는 옵션이 제공되지 않습니다.

https://avada.tistory.com/2386

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

카테고리 필터에서 카테고리 항목들의 위치를 조정하는 옵션은 제공되지 않습니다. 카테고리 항목들은 알파벳순으로 정렬됩니다. 만약 카테고리 순서를 변경해야 하는 경우라면 엘리멘터의 탭 기능을 사용하는 것을 고려할 수 있습니다.

엘리멘터 템플릿을 원하는 곳에 추가하는 방법 (예: 탭에 토글/아코디언 표시)

또는, 자바스크립트를 활용하여 탭 기능을 구현하는 것도 가능합니다.

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2741

클라우드웨이즈 워드프레스 설치 및 도메인 설정 방법 (Cloudways)

https://avada.tistory.com/2914

워드프레스 Divi 테마 메뉴에 검색상자 표시하기

https://avada.tistory.com/2928

쿠키를 시간, 분 단위로 설정할 수 있는 워드프레스 팝업 플러그인(Popup Maker, Brave, WP Popups)