Divi 5의 중첩 행 및 모듈 그룹으로 생성 된 9 개의 카드 레이아웃

Divi 5를 사용하면 놀랍고 전문적인 웹 사이트를 구축하는 것이 그 어느 때보 다 쉬워집니다. 중첩 행 및 모듈 그룹과 같은 기능을 사용하면 고급 카드 레이아웃을 만들고 몇 번의 클릭만으로 사이트 전체에서 재사용 할 수 있습니다. Divi 5는 현대화 된 코드베이스와 개선 된 성능을 도입하여 복잡한 레이아웃을 구축하는 데 적합합니다. 이 새로운 기능을 사용하면 무제한 유연성으로 구축 할 수 있습니다.

이 게시물에서는 Divi 5의 중첩 행 및 모듈 그룹으로 구축 된 9 개의 카드 레이아웃을 보여 주어 유연하고 재사용 가능한 디자인을 만드는 것이 얼마나 쉬운지를 보여줍니다. 서비스를 선보이거나 증언을 강조하거나 포트폴리오 구축을하든이 레이아웃은 세련되고 일관된 결과를 달성하는 데 도움이됩니다. 결국, Divi 5의 이러한 새로운 기능이 시간을 절약하고 프로젝트에서 설계 일관성을 보장하는 시각적으로 놀랍고 재사용 가능한 모듈을 만드는 데 어떻게 도움이되는지 알 수 있습니다.

다이빙하자!

Divi 5의 중첩 행 및 모듈 그룹 이해

Divi 5의 중첩 행 및 모듈 그룹은 고급 카드 레이아웃을 쉽게 만들 수있는 기능입니다. 이러한 도구가 어떻게 작동하는지, 왜 복잡한 레이아웃을 구축하는 데 완벽한 지 살펴 보겠습니다.

YouTube 채널을 구독하십시오

중첩 행

중첩 행을 사용하면 행 내부에 행을 배치 할 수 있으므로 시각적 빌더 내에서 무한 중첩성을 제공합니다. 이 기능은 전통적인 레이아웃의 한계를 중단하여 유연성으로 복잡한 디자인을 구축 할 수 있습니다. 중첩 행을 사용하면 단일 열 내에서 깔끔하게 구성된 고급 카드 레이아웃을 만들 수 있습니다. 이점은 분명합니다. 중첩 행은 장치 전체에 매끄럽게 적응하는 반응 형 컬럼 구조를 제공합니다.

모듈 그룹

모듈 그룹은 Divi 5의 새로운 컨테이너 요소로, 통합 스타일 및 관리를 위해 열 내에서 여러 모듈을 그룹화 할 수 있습니다. 이 기능은 한 번의 작업으로 스타일, 이동 또는 전체 그룹을 복제 할 수있게하여 워크 플로를 간소화합니다. 모듈 그룹은 또한 Flexbox 및 Loop Builder와 같은 다가오는 기능과 통합되도록 설계되어 동적 레이아웃을위한 미래를 방지합니다.

그들이 함께 잘 일하는 이유

중첩 행과 모듈 그룹을 결합하면 복잡하고 재사용 가능한 카드 레이아웃을 생성하는 기능이 잠금 해제됩니다. 중첩 행은 복잡한 요소를 구성하는 구조 유연성을 제공하는 반면, 모듈 그룹은 해당 요소를 단일 장치로 취급하여 스타일링 및 관리를 단순화합니다. 함께 사이트에서 쉽게 복제 된 레이아웃을 구축 할 수 있습니다. 팀원, 서비스 또는 FAQ를 선보이든이 듀오는 전문적이고 확장 가능한 디자인을 간단하게 만듭니다.

Divi 5에 대한 9 개의 카드 레이아웃

아래에서는 Divi 5의 중첩 행 및 모듈 그룹의 힘을 보여주는 9 개의 고급 카드 레이아웃을 살펴 봅니다. 가격 책정 페이지부터 비디오 갤러리에 이르기까지 이러한 레이아웃은 시각적으로 놀랍고 반응이 좋은 디자인을 쉽게 만드는 방법을 보여줍니다. 일관된 스타일 및 재사용을 위해 유연한 구조 및 모듈 그룹을위한 중첩 행을 활용하면 모든 목적으로 전문적이고 확장 가능한 레이아웃을 구축 할 수 있습니다. 각 예제는 Divi 웹 사이트를 높이기위한 실제 예와 시간 절약 기술을 강조합니다.

1. 가격 계획

중첩 행과 모듈 그룹을 결합하는 것은 웹 사이트에서 가격을 보여주는 좋은 방법입니다. Divi 5의 중첩 행을 사용하면 각 가격 책정 카드가 자체 모듈 그룹 내에있는 구조화 된 레이아웃을 만들 수 있으므로 쉽게 복사하여 붙여 넣을 수있는 유연한 레이아웃이 가능합니다. 이 예에서는 모듈 그룹으로 시작하여 스타일링하고 버튼에 중첩 행을 통합했습니다. 모듈 그룹으로 카드 레이아웃을 만들면 사이트 전체에서 쉽게 저장하고 재사용 할 수 있습니다.

2. 서비스

서비스 페이지는 명확하고 시각적으로 매력적인 방식으로 제품을 강조하려는 비즈니스에 필수적입니다. Divi 5를 사용하면 각 서비스 카드가 모듈 그룹 내에있는 다중 계층 레이아웃을 만들어 독특한 스타일링 및 컨텐츠 깊이가 가능합니다. 예를 들어, 헤딩 및 링크를 위해 그룹 내의 행을 둥지하고, 제목 및 바디 텍스트에 대한 단일 열 행을 만들고, 버튼의 2 열 중첩 행으로 팔로우하십시오. 모듈 그룹을 복사하고 몇 초 만에 작은 디자인을 변경할 수 있습니다.

3. 식당 메뉴 항목

식당 메뉴에는 시각적 매력과 조직화 된 정보의 균형이 필요합니다. Divi 5를 사용하면 각 메뉴 항목 카드가 모듈 그룹 내에 포함 된 그리드와 같은 구조를 만들 수 있습니다. 일관된 스타일을 위해 그룹에 디자인 요소를 추가하면 전체 카드를 반복적으로 재 설계하지 않고도 메뉴에 새 항목을 쉽게 추가 할 수 있습니다.

4. 팀원 BIOS

팀을 선보이는 것은 브랜드의 신뢰와 개성을 구축합니다. Divi 5를 사용하면 단일 열 내에서 사진, 이름, 역할 및 바이오와 같은 계층화 된 콘텐츠로 동적 팀 멤버 카드를 만들 수 있습니다. 그런 다음 소셜 미디어 링크와 개별 팀 페이지에 대한 링크를 위해 중첩 행을 레이아웃에 통합 할 수 있습니다. 모듈 그룹을 Divi Library에 저장하고 앞으로 새로운 팀원을 추가하는 것은 산들 바람입니다.

5. 고객 평가

증언은 신뢰성을 추가하고 Divi 5는 시각적으로 인상적입니다. 중첩 행을 사용하여 그리드 레이아웃에서 증언 카드를 구성하십시오. 각 고객의 견적, 이름 및 작업 제목이 포함되어 있습니다. 모듈 그룹을 사용하면 통합 스타일을 위해 이러한 요소를 묶을 수 있습니다. 이 설정을 통해 디자인 일관성을 유지하면서 평가를 쉽게 추가하거나 재 배열 할 수 있습니다. Divi 5의 반응 형 컨트롤을 사용하면 보는 장치에 관계없이 레이아웃이 멋지게 보일 수 있습니다.

6. 이벤트 목록

이벤트 프로모션 페이지는주의를 끌고 주요 세부 정보를 전달해야합니다. Divi 5의 중첩 행을 사용하면 이벤트 이미지, 위치, 제목, 날짜 및 참석 링크와 같은 계층 컨텐츠로 이벤트 카드를 구조화 할 수 있습니다. 모듈 그룹은 이러한 요소를 그룹화하여 스타일을 간소화하여 여러 이벤트에 대한 빠른 복제를 가능하게합니다.

7. 부동산 목록

부동산 목록은 분명하고 매력적인 부동산 프레젠테이션을 요구합니다. Divi 5에서 중첩 행 및 모듈 그룹을 사용하면 계층화 된 쉽게 복사 할 수있는 컨텐츠로 목록 카드를 구조화 할 수 있습니다. 이 접근법은 새로운 목록을 추가 할 수 있으므로 반복적 인 비용으로 고가의 목록 서비스를 피할 수 있습니다.

8. 제품 디스플레이

전자 상거래 제품 페이지는 제품을 효과적으로 강조해야합니다. 모듈 그룹과 중첩 행 덕분에 Divi 5를 사용하면 단일 열 내에 여러 열이있는 제품 카드를 만들 수 있습니다. 이 방법으로 제품 목록 페이지를 만들 수 있습니다. 바닐라 우호 상거래 웹 사이트의 제약 조건에서 벗어나 방문자에게 특집 제품을 탐색 할 수있는 아름다운 방법을 제공합니다.

9. 비디오 갤러리

비디오 갤러리는 자습서, 데모 또는 기타 창의적인 비디오 컨텐츠를 표시하는 데 적합합니다. 중첩 행 및 모듈 그룹을 사용하면 각 비디오 카드가 고유 한 레이아웃이있는 자체 열에있는 그리드를 만들 수 있습니다. 이 설정을 통해 응집력 있고 전문적인 모습을 유지하면서 새 비디오를 쉽게 추가 할 수 있습니다.

고급 카드 레이아웃 작성 및 재사용 모범 사례

고급 카드 레이아웃을 생성 할 때 Divi 5의 중첩 행 및 모듈 그룹의 잠재력을 최대화하려면 전략적 접근 방식을 채택하면 효율성, 일관성 및 확장 성이됩니다. 다음은 웹 사이트의 미적 및 기능을 향상시키는 전문적이고 재사용 가능한 디자인을 만드는 데 도움이되는 몇 가지 팁입니다.

일관되게 스타일

Divi 5의 디자인 변수를 사용하면 글꼴, 색상, 간격 등에 대한 보편적 스타일을 정의 할 수 있습니다. 이러한 변수를 처음에 설정하면 모든 카드 레이아웃이 사이트 전체에서 응집력있는 모습을 유지해야합니다. 예를 들어, 변수 관리자의 기본 색상 팔레트, 타이포그래피 설정 및 간격 값을 정의하십시오. 반복적 인 수동 스타일을 피하기 위해 모듈 그룹에이를 적용하십시오.

재사용을 위해 모듈 그룹을 저장하십시오

여러 페이지 나 프로젝트에서 쉽게 액세스 할 수 있도록 스타일의 모듈 그룹을 Divi Library 또는 Divi Cloud에 저장하십시오. 예를 들어, 가격 책정 카드 레이아웃을 만들면 저장하면 처음부터 재건하지 않고 다른 웹 사이트 나 페이지에서 재사용 할 수 있습니다. 명확하고 설명적인 이름으로 레이아웃을 구성하여 나중에 빠르게 찾을 수 있습니다.

반응 형 디자인

다양한 장치와 스크린 크기가 증가함에 따라 반응 형 디자인이 필수입니다. Divi 5의 사용자 정의 가능한 중단 점을 사용하면 모든 장치의 카드 레이아웃을 미세 조정할 수 있습니다. 레이아웃을 설계 할 때는 다른 중단 점에서 레이아웃을 테스트하여 모든 설계 요소가 의도 한대로 스케일을 보장합니다.

빠른 업데이트를 위해 사전 설정을 활용하십시오

Divi 5의 요소 및 옵션 그룹 사전 설정을 사용하면 모듈 또는 특정 설계 요소의 모든 인스턴스에서 스타일 변경 사항을 적용 할 수 있습니다. 예를 들어, 카드 레이아웃에서 버튼 스타일을 업데이트하기로 결정한 경우 사전 설정은 모든 관련 모듈에 대한 변경 사항이 즉시 전파되는지 확인하십시오. 이것은 여러 레이아웃이있는 대형 웹 사이트를위한 훌륭한 도구입니다. 레이아웃 내에서 버튼, 제목 또는 이미지와 같은 일반적으로 사용되는 요소에 대한 사전 설정을 작성하는 것은 일관성을 유지하고 설계 프로세스 속도를 높이는 좋은 방법입니다.

이러한 모범 사례를 따르면 Divi 5의 중첩 행 및 모듈 그룹의 잠재력을 최대한 활용하여 시각적으로 놀랍고 응답하며 유지 관리가 쉬운 고급 카드 레이아웃을 만들 수 있습니다.

카드 레이아웃을 무료로 다운로드하십시오

Divi 5 내부의 카드 레이아웃을 시작하고 싶으십니까? JSON 파일에 액세스하려면 아래를 구독하십시오. 이들을 Divi 라이브러리에 업로드하여 나중에 페이지로 가져올 수 있습니다.

파일을 다운로드하십시오

무료로 다운로드하십시오

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

다운로드

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

Divi 5로 카드 레이아웃을 만드는 것은 산들 바람입니다

Divi 5의 중첩 행 및 모듈 그룹은 고급 카드 레이아웃을 구축하는 방법을 변경하여 타의 추종을 불허하는 유연성과 효율성을 제공합니다. 가격 책정 페이지에서 비디오 갤러리에 이르기까지 이러한 기능을 사용하면 시간을 절약하고 웹 사이트 전체에서 일관성을 보장하는 놀라운 재사용 가능한 디자인을 만들 수 있습니다. 이러한 기능을 결합하면 모든 장치에 원활하게 적응하는 전문적인 레이아웃을 구축 할 수 있습니다. Divi 5를 사용하면 복잡하고 시각적으로 매력적인 카드 레이아웃을 만드는 것은 결코 쉬운 일이 아닙니다.

Divi 5가 제공하는 모든 것을 경험하기 위해 최신 Divi 5 알파 릴리스를 다운로드하고 오늘이 도구를 실험하는 것이 좋습니다. 소셜 미디어 채널에서 귀하의 창조물을 우리와 공유하거나 아래 의견을 삭제하여 카드 레이아웃에 Divi 5를 사용하는 방법을 알려주십시오.