Filterable Portfolio 모듈의 그리드 요소를 사용자 지정하는 방법을 알고 싶습니까? Divi ? 이 튜토리얼에서 우리를 따르십시오...
당신의 영역을 가지고 사이트 웹 작품을 선보이는 것이 중요합니다. 스타일리스트라면 자신의 컴퓨터에서 여러 프로젝트를 만들 수 있습니다. 사이트 웹 귀하의 개념을 과시하는 WordPress. 브랜드 구축자인 경우 포트폴리오를 사용하여 작품을 선보일 수 있습니다. 또한 더 나아가 프로젝트에 다른 범주를 추가할 수도 있습니다. 여기 있어요 Divi의 Filterable Portfolio 모듈은 무엇을 합니까? .
이 모듈을 사용하면 우리의 노력을 쉽고 체계적으로 표시할 수 있습니다.
오늘의 자습서에서는 Filterable Portfolio 모듈의 개별 그리드 요소를 사용자 지정합니다. 무료 레이아웃 팩의 레이아웃을 사용합니다. 디비 컨퍼런스 et Divi 온라인 요가 강사 구매할 때마다 제공되는 Divi .
모든 것과 마찬가지로 Divi, 우리는 우리의 필요와 욕구에 맞게 이 모듈을 사용자 정의할 수 있습니다. 그러나 스타일링을 시작하기 전에 모듈에 대해 조금 더 알아보겠습니다.
Divi의 Filterable Portfolio 모듈은 무엇입니까?
프로젝트는 게시물과 동일하게 작동하는 사용자 지정 게시물 유형의 일부입니다. WordPress 대시보드에서 찾을 수 있습니다.
여기에서 Filterable Portfolio 모듈을 채울 개별 프로젝트를 만들 수 있습니다. 이 모듈은 프로젝트를 표시하는 두 가지 방법을 제공합니다. 그리드 형식으로 ou 전체 너비 형식으로. 우리를 위해 그리드 형식을 사용하고 사용자 정의합니다.
Filterable Portfolio 모듈을 사용하면 가장 최근 프로젝트를 발표할 수 있습니다. 사이트 사용자는 포트폴리오 그리드 상단에 필터 막대를 볼 수 있습니다. 여기에서 모듈에 표시할 수 있는 다양한 포트폴리오 범주를 탐색할 수 있습니다.
다음은 몇 가지 샘플 프로젝트가 포함된 모듈의 그리드 구성 예입니다.
Divi의 필터링 가능한 포트폴리오를 만들 때 고려해야 할 영역
모든 모드처럼 Divi, Filterable Portfolio 모듈에는 우리의 필요와 필요에 맞게 사용자 정의할 수 있는 여러 기능이 함께 제공됩니다. 따라서 모듈과 함께 제공되는 대부분의 기능은 탭에서 수정할 수 있습니다. 디자인 모듈 설정 모달에서. 다음 영역 등을 편집할 수 있습니다.
- 프로젝트 제목
- 프로젝트 카테고리
- 포도의 잎의 장식
- 필터 텍스트
- 마우스 오버 시 썸네일
- 쪽수 매기기
이것은 완전한 목록이 아니며 CSS가 이 모듈에 어떻게 더 깊은 사용자 정의를 추가했는지에 대한 이야기도 시작하지 않았습니다!
Divi의 Filterable Portfolio 모듈을 사용자 지정하는 방법
앞에서 언급했듯이 이 자습서에서는 두 가지 레이아웃을 사용합니다. 디비 컨퍼런스 et Divi 온라인 요가 강사. 아래에서 이 자습서에서 수행할 작업에 대한 개요를 볼 수 있습니다.
"Divi Conference" 레이아웃의 요소 배열
"Divi 온라인 요가 강사" 레이아웃의 요소 배열
두 레이아웃 모두에서 쉽게 다운로드할 수 있습니다. Divi 빌더.
이제 시작합시다!
Divi의 Filterable Portfolio 모듈 사용자 정의: "Divi Conference Edition"
먼저 Divi Conference Layout Pack에서 이벤트 페이지 템플릿을 설치해야 합니다. WordPress에서 새 페이지를 만들고 Divi Builder를 활성화한 후 Divi 라이브러리에 들어갑니다.
Divi 레이아웃 라이브러리에 들어가기
아이콘을 클릭하십시오 « 라이브러리에서 로드 Divi 레이아웃 라이브러리에 들어가려면
Divi 레이아웃 라이브러리에서 레이아웃 찾기
Divi 레이아웃 라이브러리의 검색 기능을 이용하여 검색 처분 " 컨퍼런스 이벤트 페이지".
레이아웃 설치
레이아웃을 선택했으면 " 이 레이아웃 사용 페이지에 레이아웃을 설치합니다.
이미지 모듈 제거 및 교체
사용자 정의할 Filterable Portfolio 모듈을 위한 공간을 만들기 위해 아래에 표시된 이미지 모듈을 제거할 것입니다. "를 클릭합니다. . 이미지 위로 마우스를 가져가면 사진이 삭제됩니다.
Divi의 Filterable Portfolio 모듈 삽입
이미지 모듈을 제거하면 이제 Filterable Portfolio 모듈을 위한 공간을 만들 수 있습니다. " 아이콘을 클릭하겠습니다. 모듈 추가 (회색 더하기 기호) 표시되는 모듈 모달 상자에서 모듈을 선택합니다.
게시물 수 및 포트폴리오 레이아웃 설정
기본적으로 이 모듈은 작업을 단일 열에 표시합니다. 그러나 기본적으로 4열로 제공되는 그리드 레이아웃을 사용합니다.
따라서 포트폴리오의 게시물 수로 4의 배수(4, 8, 12, 16 등)를 선택하는 것이 좋습니다.
이 자습서에서는 그리드에서 12개의 프로젝트를 사용합니다.
Divi의 필터링 가능한 포트폴리오 사용자 지정 시작: 제목 및 메타 텍스트
이제 프로젝트가 그리드에 표시되었으므로 선택한 템플릿의 일부 디자인 요소를 연결해 보겠습니다. 이 경우 새 모듈에서 Divi Conference Layout Pack과 함께 제공되는 스타일을 사용합니다.
텍스트 스타일 지정
- 텍스트 정렬: 가운데
- 텍스트 색상: 어두운
제목 텍스트 스타일
- 제목 제목 수준: H2
- 제목 글꼴 : 크로나 원
- 텍스트 색상: #000000
메타 텍스트 스타일
- 메타 글꼴: 기본값(Open Sans)
- 메타 텍스트 색상: #ff6651
이제 포트폴리오 그리드의 제목에 대한 스타일을 지정했으므로 프로젝트 축소판 자체의 실제 모양을 약간 변경해 보겠습니다.
프로젝트 축소판 테두리 및 둥근 모서리 변경
Divi Conference Layout 팩에서는 둥근 모서리의 고유한 조합을 사용하여 팩의 일부 키프레임에 고유한 모양을 부여합니다. 이 스타일을 모듈의 썸네일에 적용해 보겠습니다.
영상
- 이미지 :
- 둥근 모서리: 50px 50px 50px 0px
- 테두리 스타일: 모두
- 테두리 너비: 3px
- 색상: #000000
- 테두리 스타일: 단색
이렇게 하면 축소판에 레이아웃 팩의 나머지 다른 이미지와 일치하는 모양이 제공됩니다.
호버 오버레이 사용자 지정
스타일을 적용하여 한 단계 더 나아가 이 모듈과 함께 제공되는 기본 오버레이를 약간 변경해 보겠습니다. 상자에서 꺼내자마자 사용되는 아이콘과 색상을 변경할 것입니다.
위에 놓기
- 줌 아이콘 색상: #bcf5fd
- 호버 오버레이 색상: #ff6651
- 호버 아이콘 선택기: 확대/축소
이제 볼 수 있듯이 이 레이아웃의 브랜드 색상을 오버레이에 추가했으며 Divi가 이 모듈의 오버레이 기능에 대해 기본적으로 제공하는 아이콘을 변경했습니다.
페이지 매김 사용자 정의
이제 작은 CSS 스니펫을 사용하여 Filterable Portfolio 모듈에 추가 사용자 정의를 추가할 것입니다. 먼저 이 모듈의 페이지 매김을 사용자 정의합니다. 다음으로 한 줄의 CSS로 그 위에 나타나는 테두리를 제거합니다.
페이지 매김 텍스트
- 쪽수 매기기:
- 글꼴: 크로나 원
- 텍스트 정렬: 중앙
- 텍스트 색상: #ff6651, #000000(마우스 오버)
CSS의 경우 탭으로 전환합니다. Advnaced 우리 모듈의. 두 번째로 탭을 클릭합니다. 맞춤 CSS. 다음으로 다음 코드 스니펫을 입력하여 페이지 매김 위의 테두리를 제거하여 더 깔끔한 모양을 제공합니다.
포트폴리오 페이지 매김
border-top: 0px;
Divi 설정 및 CSS를 사용하여 필터 텍스트 사용자 정의
필터 텍스트의 경우 한 단계 더 높일 것입니다. CSS를 사용하여 배경과 호버 효과를 변경합니다.
새로 추가된 모듈과 레이아웃 팩의 스타일 간에 완벽한 연속성을 갖기를 원합니다. 먼저 글꼴에 대한 Divi 설정을 입력하겠습니다.
필터 기준 텍스트
- 필터 기준:
- 글꼴: 크로나 원
- 글꼴 색상: #ffffff, #000000 (마우스 오버)
현재로서는 필터가 사라진 것 같습니다. 실제로 기본 상태에서는 흰색 배경에 흰색 텍스트입니다. 그러나 두 곳에서 맞춤 CSS로 이를 변경할 것입니다.
먼저 페이지 설정에 필터 텍스트에 배경을 추가하는 CSS 스니펫을 추가합니다. 둘째, 탭을 사용하여 활성 포트폴리오 필터를 사용자 지정합니다. Advnaced 뒤 모듈.
액세스 페이지 설정에서 화면 중앙에 있는 세 개의 점을 클릭합니다. 그때 톱니바퀴 아이콘 선택 페이지 설정이 열립니다. 그럼 너 사용자 정의 CSS 탭으로 이동 필터 텍스트에 배경을 추가하려면 다음을 입력하십시오.
맞춤 CSS
이 CSS 스니펫에서는 필터의 배경색을 대상으로 합니다. 또한 호버 상태를 대상으로 지정하고 스타일을 지정합니다. 다음으로 모듈에 CSS를 더 추가하고 활성 필터 탭을 강조 표시하겠습니다.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}
포트폴리오 필터 활성 탭 스타일
f의 활성 탭포트폴리오 필터 그들이 방문하고 있는 현재 포트폴리오 범주에 사용자의 관심을 끕니다. 현재 이 필터에는 흰색 텍스트와 밝은 배경이 있습니다.
우리는 탭으로 이동합니다 Advnaced Filterable Portfolio 모듈의 기본 및 이 기능의 가리키기 상태에 텍스트를 추가합니다. 기본 상태에서 추가할 CSS 속성은 다음과 같습니다.
background: #ff6651;
color: #ffffff !important;
호버 상태
마우스를 올리면 배경이 검은색으로 변경됩니다.
color: #000000!important;
"Divi Conference"를 사용한 Divi의 필터링 가능한 포트폴리오 디자인 최종 모습
최종 모습입니다!
이제 호버링할 때의 모습입니다!
Divi의 필터링 가능한 포트폴리오 모듈 사용자 지정: "Divi 온라인 요가 강사"
Divi Conference Edition과 마찬가지로 Divi Builder의 온라인 요가 강사 레이아웃 팩에서 레이아웃을 찾으십시오.
이 튜토리얼에서는 랜딩 페이지 레이아웃을 사용할 것입니다. 제목 섹션이 있는 섹션 클래스 섹션까지 아래로 스크롤합니다. 다가오는 모든 수업.
필터링 가능한 포트폴리오 모듈 삽입
여기에서 클래스가 있는 행을 제거합니다. 세 개의 점이 있는 보라색 아이콘을 클릭합니다. . 그때, 와이어프레임 보기를 선택합니다. 마지막으로 XNUMX개의 열이 포함된 XNUMX개의 행을 삭제합니다.
그런 다음 내부 행의 단일 열로 교체합니다. 그런 다음 Filterable Portfolio 모듈을 추가합니다.
이전 예에서와 같이 게시물 수에 대해 4의 배수로 이 모듈에 대한 그리드 레이아웃을 사용합니다.
이제 지도에 표시되는 정보로 약간 다른 작업을 수행해 보겠습니다.
탭에서 내용, 로 이동 요소 선택 취소 카테고리 표시 . 즉, 포트폴리오 모듈은 프로젝트가 속해 있는 범주 이름 없이 프로젝트 이름만 표시합니다.
필터 기준 텍스트, 프로젝트 제목 및 페이지 매김 텍스트 사용자 정의
모듈의 텍스트 부분에 대한 스타일 기반을 정의해 봅시다. 이 레이아웃의 본문 텍스트는 열기 산세 주요 제목에 사용된 글꼴은 끌. 따라서 스타일링 프로세스 전체에서 이 두 글꼴의 조합을 사용할 것입니다.
텍스트
- 텍스트 정렬: 가운데
- 텍스트 색상: 라이트
제목 텍스트
- 제목 글꼴 : Cinzel
- 제목 텍스트 색상: #ffffff
필터 기준 텍스트
- 필터 기준 글꼴 두께: 굵게
- 필터 기준 텍스트 색상: #ffffff
페이지 매김 텍스트
- 페이지 매김 글꼴 두께: Bold
이것이 현재 필터링 가능한 포트폴리오 모듈의 모습입니다. 많지는 않지만 천천히 가보겠습니다!
반투명 호버 오버레이 만들기
이 레이아웃의 다양한 모듈과 아름다운 그라데이션에서 영감을 얻어봅시다. 이를 위해 반투명 호버 오버레이를 만들고 호버에도 나타나는 아이콘을 사용자 정의합니다.
- 줌 아이콘 색상: #323741
- 호버 오버레이 색상: rgba(255 201 165, 0,85)
- Hover Icon Picker: 시트를 검색하고 위의 아이콘을 봅니다.
사용자 지정 CSS를 사용하여 포트폴리오 그리드 요소에 테두리 추가
첫 번째 예와 유사하게 이제 CSS를 사용하여 Filterable Portfolio 모듈에 더 많은 관심을 추가할 것입니다.
이제 포트폴리오 그리드의 개별 항목 주위에 테두리를 추가합니다. 페이지 설정의 사용자 지정 CSS 부분에서 아래 CSS 스니펫을 사용하여 테두리를 추가합니다.
또한 이 모듈의 CSS 클래스로 "border"를 사용할 것입니다.
- CSS 클래스: 테두리
맞춤 CSS
/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}
이제 각 그리드 항목 주위에 멋진 테두리와 패딩이 있는 Filterable Portfolio 모듈이 있습니다.
스타일 페이지 매김 테두리에 CSS 추가
이전 예제와 달리 CSS를 사용하여 페이지 매김 테두리에 색상을 추가해 보겠습니다. 이 지역에도 진출할 것입니다. 설정 > 맞춤 CSS 페이지 .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}필터 기준 텍스트 스타일
Divi Conference Portfolio 모듈의 스타일과 유사하게 범주 필터에 재즈를 추가하려고 합니다. 다시 말하지만, 우리는 우리에게 제공된 템플릿에 이미 있는 스타일에서 그리기를 원합니다.
필터 막대의 배경과 호버를 대상으로 지정하기 위해 사용자 지정 CSS 섹션에 추가할 CSS는 다음과 같습니다.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}사용자 지정 CSS에 이 두 가지 새로운 추가 기능을 사용하면 Filterable Portfolio 모듈이 모양을 갖추게 됩니다.
그러나 활성 포트폴리오 필터가 어떻게 손실되는지 확인하십시오. 항상 밝은 배경에 흰색 텍스트가 있습니다. 모듈 설정으로 이동하여 CSS를 추가하여 변경해 보겠습니다.
맞춤 CSS
활성 포트폴리오 필터:
background: #ffffff;
color: #323741 !important;
모듈 애니메이션 제거
더 깔끔한 경험을 제공하기 위해 Filterable Portfolio 모듈과 함께 제공되는 기본 애니메이션을 제거할 예정입니다. 이를 위해 먼저 페이지 설정으로 돌아가서 포트폴리오 그리드 요소를 대상으로 하는 일부 CSS를 추가하고 슬라이딩 전환 즉석에서 발생합니다.
맞춤 CSS
/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}포트폴리오 그리드를 XNUMX열에서 XNUMX열로 변경
최신 CSS 추가는 Filterable Portfolio 모듈을 XNUMX열에서 XNUMX열로 변환하는 것입니다. 이것은 우리가 프로젝트를 볼 수 있는 더 많은 공간을 제공할 것입니다.
또한 모듈에 추가 줄을 추가합니다. 열을 변환하는 데 사용할 수 있는 최신 CSS 조각도 찾을 수 있습니다.
맞춤 CSS
이 마지막 스니펫의 경우 CSS ID를 추가합니다. #XNUMX열 그리드 우리 모듈에. 우리는 이전의 CSS 클래스를 그대로 유지할 것입니다.
/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}
지금 DIVI를 다운로드하세요!!!
결론
대부분의 Divi 모듈과 마찬가지로 Divi와 함께 제공되는 설정은 CSS로 추가로 개발할 수 있습니다. 작품을 선보이는 것은 온라인 비즈니스, 블로그 또는 브랜드 운영의 중요한 부분입니다.
따라서 작업을 표시하는 체계적인 방법이 필수적입니다. Divi의 Filterable Portfolio 모듈의 디자인 여정에 참여하기 위해 오늘 공유된 팁을 얻으십시오.
이 기술이 향후 프로젝트에 유용한 또 다른 디자인 기술을 추가할 수 있기를 바랍니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
