의 필터링 가능한 포트폴리오 모듈을 사용하시겠습니까? Divi 어떤 레이아웃을 선택해야 할지 모르십니까?
모듈 « 필터링 가능한 포트폴리오 의 ' Divi 선택할 수 있는 두 가지 레이아웃 옵션을 제공합니다. 두 옵션 모두 장점이 있으며 특정 목적에 매우 적합합니다.
이 기사에서는 이 모듈의 전체 너비 레이아웃과 그리드 레이아웃을 비교하여 사용자에게 필요한 것을 결정하는 데 도움을 줄 것입니다. 사이트 웹.
또한 두 레이아웃을 모두 사용자 정의하여 하나의 레이아웃에서 어떻게 작동하는지 살펴보겠습니다. Divi.
시작하자!
측량
먼저 이 튜토리얼에서 무엇을 만들지 봅시다.
그리드 레이아웃의 데스크탑 버전
지금 DIVI를 다운로드하세요!!!
그리드 레이아웃의 전화 버전
전폭 레이아웃의 데스크탑 버전
전체 너비 레이아웃의 전화 버전
필터링 가능한 포트폴리오 모듈의 레이아웃을 변경하는 방법
기본적으로 "필터링 가능한 포트폴리오" 모듈은 레이아웃을 전체 너비로 표시합니다. 그리드에 항목을 표시하도록 레이아웃을 변경할 수 있습니다. 먼저, 모듈 매개변수.
그런 다음 탭을 선택하십시오. 디자인. 첫 번째 옵션은 레이아웃. 몇 가지 선택 항목이 있는 드롭다운 목록이 있습니다. 중에서 선택하려면 선택하십시오. 전체 넓이 et 그리드.
현재 선택되지 않은 옵션을 선택하면 모듈이 이 레이아웃에 포트폴리오 항목을 다시 로드하고 표시합니다. 아래 예는 그리드 레이아웃을 보여줍니다.
필터링 가능한 포트폴리오 모듈 레이아웃 비교
두 레이아웃은 매우 다르지만 몇 가지 유사점이 있습니다. 둘 다 모듈 상단에 필터를 표시하고 항목 이미지 아래에 제목과 메타를 표시하며 모듈 하단에 페이지 매김을 표시합니다.
어떻게 다른지 살펴보겠습니다.
전체 너비 레이아웃
전체 너비는 포트폴리오 영역의 전체 너비를 차지하는 포트폴리오 요소와 함께 큰 이미지를 표시합니다. 이미지는 원래 형식으로 표시되고 사용 가능한 너비에 맞게 확장됩니다.
지갑 항목 사이에 많은 공간을 추가하지 않습니다. 게시물 수를 몇 개로 제한하는 것이 좋습니다. 아래 예는 2개의 게시물이 있는 전체 너비 레이아웃을 보여줍니다.
그리드 레이아웃
그리드 레이아웃은 최대 4개의 항목을 연속으로 표시합니다. 요소 사이에 더 많은 공간을 추가합니다. 이미지 크기와 모양에 관계없이 이미지가 잘려서 동일한 크기의 축소판이 생성됩니다.
이 경우 페이지 매김을 표시하기 위해 XNUMX개의 게시물을 표시하도록 모듈을 제한했습니다.
Filterable Portfolio 모듈의 각 레이아웃을 사용하는 경우
두 가지 방식 모두 장단점이 있습니다. 다음은 각 레이아웃을 언제 사용해야 하는지에 대한 몇 가지 팁입니다.
전체 너비 레이아웃
표시할 항목이 많지 않거나 몇 가지 항목에 집중하려는 경우 전체 너비 레이아웃을 사용합니다.
또한 주요 이미지를 강조 표시하거나 관심을 끌 때 이 레이아웃을 사용하십시오.
그리드 레이아웃
많은 항목을 표시하거나 레이아웃에서 더 작은 공간에 더 많은 항목을 표시하려는 경우 그리드 레이아웃을 사용합니다.
필터링 가능한 포트폴리오 모듈 레이아웃을 사용자 지정하는 방법
이제 레이아웃을 선택하는 방법, 작동 방식 및 사용 시기를 보았으므로 이 두 레이아웃을 사용자 지정하는 방법을 살펴보겠습니다.
우리는 포트폴리오 페이지를 사용할 것입니다 무료 화가 레이아웃 팩 디비에서 사용 가능합니다. 여기가 원본 페이지입니다.
포트폴리오를 Filterable Portfolio 모듈로 교체하고 동일한 이미지와 제목을 사용합니다.
우리는 두 가지 버전을 만들 것입니다. 하나는 전체 너비 레이아웃이고 다른 하나는 그리드 레이아웃입니다.
필터링 가능한 포트폴리오 모듈의 그리드 레이아웃을 사용자 정의하는 방법
그리드 레이아웃부터 시작하겠습니다. 원래 레이아웃의 색상과 글꼴을 사용합니다.
내용
그들을 열어 라. 모듈 매개변수 에 4를 입력합니다. 게시물 수. 모두 선택 카테고리 모듈에 표시하려는
- 게시물 수: 4
- 포함된 카테고리: 카테고리 선택
규정
그런 다음 탭을 선택하십시오. 디자인 선택하고 그리드 레이아웃 옵션에서
- 레이아웃: 그리드
영상
다음으로 스크롤 영상 옵션을 선택하십시오 박스 섀도우. 변경 그림자 색 RGBA(0,0,0,0.05).
- 상자 그림자: 4ème 선택권
- 그림자 색상: rgba(0,0,0,0.05)
텍스트
그런 다음 아래로 스크롤하여 텍스트 그리고 수정 조정 가운데에. 이것은 필터, 제목, 메타 및 페이지 매김을 중앙에 배치합니다.
- 텍스트 정렬: 가운데
제목 텍스트
그런 다음 아래로 스크롤하여 제목 텍스트 다음 설정을 변경합니다.
- 제목 글꼴 : Merriweather
- 제목 텍스트 색상: #000000
크기 변경 경찰 데스크톱의 경우 26픽셀, 태블릿의 경우 20픽셀, 휴대폰의 경우 18픽셀입니다.
- 제목 텍스트 크기: 데스크톱 26px, 태블릿 20px, 휴대폰 18px
필터 기준 텍스트
그런 다음 아래로 스크롤하여 필터 기준 텍스트 다음 설정을 변경합니다.
- 필터 기준:
- 글꼴: 몬세라트
- 글꼴 두께: 굵게
- 스타일: TT
- 텍스트 색상: #fd6927
- 텍스트 크기: 12px
메타 텍스트
그런 다음 아래로 스크롤하여 메타 텍스트. 변경 경찰 몬세라트와 뢰르 #fd6927에서.
- 메타 텍스트 크기: 몬세라트
- 메타 텍스트 색상: #fd6927
설정 taille 12픽셀에서문자 간격 2픽셀 및 거만 1,2 em에 라인.
- 텍스트 크기: 12px
- 메타 문자 간격: 2px
- 메타 라인 높이: 1,2 em
페이지 매김 텍스트
마지막으로 아래로 스크롤하여 페이지 매김 텍스트 그리고 그것을 변경 경찰 몬세라트에서 설정하고 뢰르 블랙에 글꼴입니다. 모듈을 닫고 설정을 저장합니다.
- 페이지 매김 글꼴: 몬세라트
- 페이지 매김 텍스트 색상: #000000
전체 너비 레이아웃에서 필터링 가능한 포트폴리오 모듈을 사용자 지정하는 방법
이제 전체 너비 레이아웃으로 모듈을 구성해 보겠습니다.
그리드 레이아웃과 동일한 디자인 큐를 사용하지만 이 레이아웃에 적합한 몇 가지 변경 사항을 적용합니다. 간단한 CSS를 사용하여 약간의 조정을 할 것입니다.
내용
그들을 열어 라. 모듈 매개변수 수를 변경하고 출판물 2. 이렇게 하면 페이지를 더 작게 유지하고 큰 이미지로 더 쉽게 관리할 수 있습니다. 모두 선택 카테고리 모듈에 표시하려는
- 게시물 수: 2
- 포함된 카테고리: 카테고리 선택
요소
다음으로 스크롤 요소 비활성화 카테고리 표시. 나머지는 활성화된 상태로 둡니다. 범주는 필터에 대해 계속 활성화되지만 제목과 함께 표시되지는 않습니다.
- 카테고리 표시: 아니오
규정
탭 선택 디자인. 아래의 레이아웃, 레이아웃 설정을 그대로 둡니다. 전체 넓이, 기본 설정입니다.
- 레이아웃: 전폭
영상
그런 다음 아래로 스크롤하여 영상 . 옵션을 선택하십시오 박스 섀도우 그리고 그것을 변경 뢰르 rgba의 음영(0,0,0,0.05).
- 상자 그림자: 4ème 선택권
- 그림자 색상: rgba(0,0,0,0.05)
텍스트
그런 다음 아래로 스크롤하여 본문. 변경 조정 가운데에. 필터, 제목 및 페이지 매김은 이미지의 중앙에 배치됩니다.
- 텍스트 정렬: 가운데
제목 텍스트
그런 다음 아래로 스크롤하여 제목 텍스트 . 변경 경찰 Merriweather로 변경하고 뢰르 검은색으로.
- 제목 글꼴 : Merriweather
- 제목 텍스트 색상: #000000
크기 변경 경찰 데스크톱의 경우 40픽셀, 태블릿의 경우 20픽셀, 휴대폰의 경우 18픽셀입니다.
- 제목 텍스트 크기: 데스크톱 40px, 태블릿 20px, 휴대폰 18px
필터 기준 텍스트
그런 다음 아래로 스크롤하여 필터 기준 텍스트 다음 설정을 변경합니다.
- 필터 기준:
- 글꼴: 몬세라트
- 글꼴 두께: 굵게
- 스타일: TT
- 텍스트 색상: #fd6927
페이지 매김 텍스트
그런 다음 아래로 스크롤하여 페이지 매김 텍스트. 변경 경찰 몬세라트에서 변경 poids 반 굵게 설정 글꼴 색상 #fd6927에서. 모듈을 닫고 설정을 저장합니다.
- 페이지 매김 글꼴: 몬세라트
- 색상: #fd6927
- 글꼴 두께: 반 굵게
CSS 제목 텍스트
탭 열기 Advnaced 그리고 스크롤 포트폴리오 제목. 바탕 화면 아이콘을 선택합니다. 다양한 화면 크기에 대해 아래 코드를 복사하십시오. 모듈을 닫고 설정을 저장합니다.
포트폴리오 제목:
- 데스크탑
padding-bottom:40px- 태블릿
padding-bottom:30px- 연락처
padding-bottom:20px
Résultats
그리드 레이아웃의 데스크탑 버전
그리드 레이아웃의 전화 버전
지금 DIVI를 다운로드하세요!!!
전체 너비 레이아웃의 데스크탑 버전
또한보십시오: Divi: 호버에서 배경의 그라디언트를 변경하는 방법
전체 너비 레이아웃의 전화 버전
지금 DIVI를 다운로드하세요!!!
결론
이것은 모듈에서 그리드와 비교하여 전체 너비 레이아웃을 사용하는 것에 대한 우리의 견해입니다. 필터링 가능한 포트폴리오 디비의. 두 레이아웃 옵션 중에서 선택하는 것은 쉽습니다.
각 옵션에는 장점이 있으며 사용자의 작업에 맞게 다르게 설계해야 합니다. 사이트 웹. 모듈이 모든 Divi 레이아웃과 잘 작동하도록 몇 가지 조정만 하면 됩니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
