엘리멘토 섹션 필터링 만들기 (무료 플러그인)

그 어떤 섹션도! 필터링할 수 있다는 플러그인을 찾았다

일단 여기 링크 타고 들어가기

https://danielvoelk.de/en/blog/create-a-filterable-team-section-in-elementor/

​

다운로드 페이지:

https://danielvoelk.de/en/elementor-filter/

 

zip. 형태의 파일을 플러그인 → 새로운 플러그인 추가 → 업로드하여 워드프레스에 추가합니다

그 다음에 활성화를 눌러 켜줍니다

​

만들고 싶은 필터 개수만큼 섹션 생성하기

저는 4개로 만들었고 그 다음에 버튼(단추)를 각 칼럼에 추가합니당

단추 디자인은 이 페이지 참고!

https://mesign.tistory.com/48?category=1106455

웹 디자인 시스템 - 버튼 컴포넌트 스타일

이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼의 가시성 버튼마다 우선순위가 있다. 우선순위에 따라 가시성의 차이를 두어 디자인한다. 가시성 높음 (우선순위 높음) 가장 필요로 하거나 눌렀으면 하는 버튼 사용자가 쉽게 누르도록 눈에 띄게 디자인한다. 강조색(Primary, Secondary, Tertiary)과 브랜드 색을 주로 사용한다. 예: 로그인, 제출, 작성, 전송, 구매, 팔로우...

mesign.tistory.com

​

우선 페이지 전체 구성은 이러합니다

​

1. 단추 생성

섹션안에 필터 역할을 할 단추를 생성

저는 전체보기 / 마케팅팀 / 영업팀 / 사업지원팀 - 총 4개를 생성했습니다

일단 첫번째 전체 보기 단추의 고급 설정에서 CSS 클래스를 ef-button으로 지정

CSS ID 말고 꼭 CSS 클래스​로 지정해야합니다!

​

그 다음 마케팅 단추의 고급 설정에서 CSS 클래스를 ef-button efc-marketing으로 지정

이것도 CSS ID 말고 꼭 CSS 클래스로 지정해야 합니다

위와 동일하게 영업과 사업지원팀도 ef-button efc-*해당카레고리*로 지정합니다

​

영업은 ef-button efc-sales

​

사업지원팀은 efc-button ef-support 로 지정했습니다

​

​

​

​

2. 칼럼에 CSS 클래스 지정하기

팀원 요소에 CSS 클래스를 지정합니다

요소나 섹션이 아닌 꼭 칼럼에서 지정해야합니다

마케팅의 칼럼 → 고급 → CSS 클래스를 efc-marketing 으로 넣어줍니다

​

영업팀의 칼럼 → 고급 → CSS 클래스를 efc-sales 으로 넣어줍니다

​

마지막으로 사업지원팀의 칼럼 → 고급 → CSS 클래스를 efc-support 으로 넣어줍니다

​

​

​

​

​

​

3. 섹션에 CSS 클래스 지정하기

팀원들이 모여있는 섹션에 CSS 클래스를 지정합니다

efc-area 로 지정합니다

팀원들이 있는 모든 섹션에 다 추가해야합니다

​

​

결과물