Divi 5의 루프 빌더로 포트폴리오 그리드를 구축하는 방법

포트폴리오 그리드는 작업을 전시하는 간단하고 효과적인 방법입니다. Divi 5의 루프 빌더를 사용하면 재사용 가능한 카드 레이아웃을 설계하고 시각적 빌더에서 직접 콘텐츠에서 자동 인구를 제공 할 수 있습니다.

단일 목적 모듈과 달리 Loop Builder를 사용하면 Divi 요소를 사용하고 게시물 또는 사용자 정의 게시물 유형에 대한 쿼리를 설정하고 전역 스타일을 상속하는 응답 형 그리드를 출력 할 수 있습니다. 이 튜토리얼에서는 프로젝트 사용자 정의 게시물 유형을 사용하여 포트폴리오 그리드를 단계별로 구축합니다.

Divi 5의 루프 빌더 이해

Divi 5의 루프 빌더는 컨텐츠 레이아웃을 쉽게 생성 할 수있는 새로운 기능입니다. 블로그 또는 포트폴리오 모듈과 달리 Loop Builder를 사용하면 모든 Divi 요소를 쉽게 고정하여 게시물, 이용물 또는 사용자를 표시 할 수 있습니다. 즉, WordPress 사이트의 컨텐츠로 자동으로 채워진 단일 템플릿을 작성할 수 있습니다.

Loop Builder는 CPT (Custom Post Type), WooCommerce 제품 및 ACF (Advanced Custom Fields)를 포함한 다양한 컨텐츠 유형을 지원하므로 원하는 방식을 정확히 표시 할 수 있습니다.

루프 빌더의 주요 이점

강력한 사용자 정의 옵션 덕분에 Loop Builder는 포트폴리오 그리드를 만드는 데 적합합니다. 다음은 눈에 띄는 기능입니다.

• 맞춤형 루프 템플릿을 설계 할 수있는 유연성 : 루프 빌더를 사용하면 사전 정의 된 레이아웃에 국한되지 않습니다. 모든 Divi 모듈을 사용하여 각 포트폴리오 항목에 대한 고유 한 템플릿을 설계 할 수 있습니다.
• 사용자 정의 가능한 쿼리 : Loop Builder를 사용하면 그리드에 컨텐츠가 표시되는 컨텐츠를 미세 조정할 수 있습니다. 원하는 항목 만 선호하는 순서로 표시하기 위해 카테고리, 포스트 유형 또는 사용자 정의 필드별로 필터링하십시오.
• 동적 컨텐츠 통합 : 프로젝트 제목, 주요 이미지, 설명 또는 사용자 정의 메타 데이터와 같은 동적 컨텐츠 데이터를 원활하게 가져와 각 포트폴리오 항목을 참여시킵니다.

이러한 기능은 Divi 5의 루프 빌더가 완전히 사용자 정의 할 수 있고 탐색하기 쉬운 세련되고 전문적인 포트폴리오를 만드는 데 이상적인 도구입니다.

루프 빌더로 포트폴리오 구축

우리는 Divi의 내장 프로젝트를 사용하여 CPT (Custom Post Type)를 사용하여 루프 빌더와 함께 포트폴리오를 만듭니다. 프로젝트 CPT는 포트폴리오 스타일 컨텐츠를 선보이기 위해 설계되어 레이아웃에 이상적인 선택입니다. Divi는 포트폴리오 모듈을 제공하지만 고유 한 포트폴리오를 생성하기위한 무제한 옵션을 제공하기 때문에 루프 빌더를 사용할 것입니다.

페이지에 새 행을 추가하여 시작하십시오. 이를 위해 3 열 레이아웃을 사용하겠습니다.

첫 번째 열에 제목 모듈을 추가하겠습니다.

제목을 입력하거나 Divi AI를 사용하여 하나를 생성하십시오.

디자인 탭으로 이동하여 제목 글꼴 의 인터를 선택하고 제목 글꼴 무게 의 빛을 선택하고 제목 텍스트 크기를 2EM 으로 설정하고 1.3EM 제목 선 높이를 할당하십시오.

이제 루프를 구축합시다. 우리 행의 두 번째 열로 이동하십시오.

루프 탭을 찾아 확장하고 루프 요소 전환을 활성화하십시오.

다음으로 쿼리 유형을 선택하십시오. 이 튜토리얼의 경우 Divi의 내장 CPT 프로젝트를 사용하겠습니다. 우편 유형 에서 프로젝트를 선택하십시오. 우리는 모든 프로젝트를 선보이고 싶어서 모든 것을 그대로 남겨 둘 것입니다.

설정, 페이지 당 게시물 및 사후 오프셋 으로 순서를 선택할 수 있습니다. 첫 번째 열에는 제목 모듈이 포함되어 있으므로 페이지 당 게시물을 8 로 설정합니다. 그렇게하면 출력은 우리의 3 열 줄에 걸쳐있을 것입니다 .

우리의 루프가 모든 열을 쌓으려고한다는 것을 알 수 있습니다. 이 문제를 해결하려면 행 설정으로 이동해야합니다. 3 열 줄로 이동하여 디자인 탭을 클릭하고 레이아웃 설정을 찾으십시오.

레이아웃 설정 탭을 확장하십시오. 레이아웃 랩핑 설정을 찾아 랩을 선택하십시오. 이것은 우리의 루프를 3 개의 열로 다시 감싸게됩니다.

루프 열 스타일링

루프 설정이 제자리에 있으므로 이제 열을 스타일링해야합니다. 여기서 선택한 스타일 설정은 루프의 나머지 열에 영향을 미칩니다. 3 열 행에서 두 번째 열을 클릭하고 디자인 탭을 클릭하십시오. 테두리 드롭 다운으로 이동하여 15px 테두리 반경을 열에 할당하십시오. 테두리 스타일 에서 1px 테두리 너비를 추가하고 #000000을 테두리 색상 으로 사용하십시오.

루프에 컨텐츠를 추가하십시오

열의 스타일이 지정된 상태에서 루프에 컨텐츠를 추가하기 시작할 수 있습니다. 두 번째 열에 이미지 모듈을 추가하려면 클릭하십시오. 일단 추가되면 루프 내의 각 열에는 이미지 자리 표시자가 표시됩니다.

Divi 5의 동적 컨텐츠 파워를 사용하여 프로젝트의 주요 이미지를 가져옵니다. 아이콘을 드러내려면 이미지 위에 호버링하십시오. 동적 콘텐츠 아이콘을 클릭하여 계속하십시오.

옵션이 나타나면 루프 추천 이미지를 선택하십시오.

우리의 루프는 각 프로젝트 의 주요 이미지를 포트폴리오 루프에 직접 배치합니다.

다음으로 특집 이미지 아래의 두 번째 열에 제목 모듈을 추가하십시오. 이것은 프로젝트 제목 에 사용됩니다. 제목을 추가하려면 위의 단계를 반복하십시오. 그러나 이번에는 루프 게시물 제목을 선택하십시오.

디자인 탭에서 헤딩 레벨 의 H3 , 제목 글꼴 의 인터 , 헤딩 텍스트 정렬 센터 및 제목 텍스트 크기 의 경우 20px를 선택하십시오.

마지막으로 각 프로젝트 에 연결되는 버튼을 추가합니다. 게시물 제목 아래의 두 번째 열에 버튼 모듈을 추가하십시오. 버튼 링크 URL 에서 동적 콘텐츠 아이콘을 클릭하고 루프 링크를 선택하십시오.

설계 탭으로 전환하고 정렬을 중앙 으로 설정하십시오.

버튼 드롭 다운 설정을 확장하고 버튼에 사용자 정의 스타일을 사용 하십시오. 다음 설계 설정을 입력하십시오.

• 버튼 배경 : #000000
• 버튼 테두리 반경 : 15px
• 버튼 테두리 너비 : 0px
• 버튼 글꼴 : 인터
• 버튼 텍스트 색상 : #ffffff
• 버튼 텍스트 크기 : 16px
• 여백 : 15px 하단
• 패딩 : 15px 상단 및 하단, 35px 왼쪽 및 오른쪽

그게 다야! 보시다시피, Divi 5로 루프를 만드는 것은 간단한 프로세스입니다.

루프 빌더로 변화하는 스타일

루프 스타일을 편집하는 것은 루프 자체를 만드는 것만 큼 간단합니다. 루프의 빛에서 어두운 테마로 바꾸고 싶다고 가정 해 봅시다. 디자인 변경은 몇 초 밖에 걸리지 않습니다. 섹션의 배경색을 변경 한 다음 몇 번의 클릭으로 개별 루프 요소를 변경할 수 있습니다.

루프 항목을 개별적으로 편집 할 필요가 없습니다. 모두 연결되어 있으므로 모듈을 한 번만 편집하면되며 Divi 5는 루프의 모든 모듈에서 업데이트 된 스타일을 자동으로 적용합니다.

프로젝트 발췌 , 게시 날짜, 댓글 카운트 , 저자 바이오 , 사용자 정의 필드 등과 같이 루프에 더 많은 모듈을 추가 할 수 있습니다.

루프 내 항목 주변의 공간을 조이려면 행 과 열 설정의 수직 간격을 조정할 수 있습니다. 이렇게하면 Divi 5의 Flexbox 레이아웃 시스템을 사용하여 각 행과 개별 모듈 사이의 공간의 양을 제어하여 루프 모양을 완벽하게 완벽하게 할 수 있습니다.

포트폴리오 루프 테스트 및 정제

포트폴리오를 구축 한 후에는 모든 것이 의도 한대로 작동하도록 테스트해야합니다. 시각적 빌더의 상단 막대에서 미리보기 링크를 사용하여 프론트 엔드에서 그리드를 미리보기 시작하십시오.

각 프로젝트의 제목 , 주요 이미지 , 발췌 및 루프 링크가 프로젝트 CPT에서 올바르게 당기고 있는지 확인하십시오. 자리 표시자가 나타나는 요소가 부러 지는지 확인하십시오.

시각적 빌더로 돌아가서 Divi 5의 사용자 정의 가능한 반응 형 중단 점을 사용하여 레이아웃이 올바르게 적응하는지 확인하십시오. Divi 5는 기본적으로 데스크탑 , 태블릿 및 전화 용 3 가지 중단 점을 제공하지만 Visual Builder의 상단 막대 중간에서 Ellipsis 메뉴를 클릭하여 최대 7을 활성화 할 수 있습니다.

각 중단 점을 탐색하고 레이아웃을 점검하고 필요에 따라 조정하십시오.

레이아웃을보다 모바일 친화적으로 만들기 위해 Divi 5의 Change Column 구조 설정을 사용하여 더 작은 장치에 표시된 열 수를 변경할 수 있습니다.

모범 사례 및 팁

Divi 5 및 Loop Builder를 최대한 활용할 수 있도록 포트폴리오를 구축 할 때 따라야 할 모범 사례는 다음과 같습니다.

1. 설계 변수와 설계 일관성을 확인하십시오

Divi 5의 설계 변수 기능을 사용하면 포트폴리오 페이지에서 일관된 타이포그래피, 색상 및 간격을 정의 할 수 있습니다. 시각적 빌더에서 글꼴, 색상 및 패딩/여백에 대한 글로벌 변수를 설정하여 모든 포트폴리오 항목이 균일 해 보이도록하십시오. 변수를 만들려면 시각적 빌더의 왼쪽 메뉴에서 변수 관리자 아이콘을 클릭하십시오.

여기에서 글로벌 글꼴 , 색상 등을 지정하여 포트폴리오 페이지뿐만 아니라 전체 웹 사이트에서 디자인이 일관되도록 할 수 있습니다.

2. 접근성을 고려하십시오

접근성은 장애가있는 사용자를 포함한 모든 사용자가 작업을 탐색하고 즐길 수 있도록합니다. 미디어 갤러리에 업로드 할 때 이미지에 대한 대체 텍스트를 추가하십시오. 이를 통해 스크린 리더는 컨텐츠를 시각적으로 손상시키는 사용자에게 전달하는 데 도움이됩니다.

시각 장애가있는 사용자의 가독성을 보장하기 위해 충분한 대비 비율의 색상을 선택하는 것도 좋습니다.

3. 템플릿을 저장하고 재사용하십시오

루프 빌더 템플릿을 완성한 후 포트폴리오 섹션을 마우스 오른쪽 버튼으로 클릭하고 라이브러리로 저장을 선택하여 Divi 라이브러리 에 저장 하십시오 . 쉽게 참조 할 수 있도록 설명적인 이름을 알려주십시오. 이를 통해 처음부터 재건하지 않고 다른 페이지에서 템플릿을 재사용 할 수 있습니다.

다른 웹 사이트의 템플릿을 사용하려면 한 번의 클릭으로 Divi Cloud 에 저장하여 다른 웹 프로젝트로 가져올 수 있습니다.

템플릿 저장은 워크 플로를 간소화하고 향후 프로젝트를 위해 전문 포트폴리오 그리드를 신속하게 배포 할 수 있도록합니다.

파일을 다운로드하십시오

무료로 다운로드하십시오

Divi 뉴스 레터에 가입하면 Ultimate Divi Landing Page Layout Pack의 사본과 다른 놀라운 무료 Divi Resources, Tips 및 Tricks를 이메일로 보내 드리겠습니다. 따라 오면 당신은 곧 Divi Master가 될 것입니다. 이미 구독 한 경우 아래의 이메일 주소를 아래에 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

당신은 성공적으로 구독했습니다. 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하려면 이메일 주소를 확인하십시오!

오늘 Divi 5의 루프 빌더를 사용해보십시오

Divi 5의 루프 빌더를 사용하면 동적 포트폴리오 그리드를 쉽게 만들 수 있으므로 스타일과 효율성으로 작업을 선보일 수 있습니다. 내장 프로젝트 CPT와 루프 빌더의 강력한 기능을 활용하면 프로젝트 컨텐츠를 동적으로 당기는 유연하고 완전히 사용자 정의 할 수있는 그리드를 만들 수 있습니다. 유연성을 사용하면 모든 Divi 모듈을 사용하여 고유 한 레이아웃을 설계하고 특정 프로젝트를 표시하기 위해 쿼리를 설정하고 모든 장치에서 빛나는 반응 형 그리드를 만들 수 있습니다.

포트폴리오를 생생하게 할 준비가 되셨습니까? Divi 5의 최신 공개 알파 릴리스로 뛰어 들어 포트폴리오 레이아웃을 실험하십시오. 프리랜서를 선보이는 프로젝트를 선보이든 고객 작업을 강조하는 비즈니스이든, Loop Builder를 사용하면 전문적이고 역동적 인 디스플레이를 쉽게 만들 수 있습니다.