Divi 5의 중첩 행으로 만든 10 개의 그리드 레이아웃 (무료 다운로드)

그리드 레이아웃은 컨텐츠를 구성하고 사용자 경험을 향상 시키며 장치 전체의 원활한 응답 성을 보장하는 구조적이지만 유연한 방법을 제공합니다. Divi 5 Public Alpha가 출시되면서 웹 디자이너는 창의적인 경계를 넓히는 아름다운 그리드 레이아웃을 만드는 새로운 도구 세트를 가지고 있습니다. 완전히 재 설계된 시각적 빌더와 중첩 행, 고급 장치 및 모듈 그룹과 같은 강력한 새로운 기능을 사용하면 계층화 된 복잡한 레이아웃을 쉽게 구축 할 수 있습니다.

이 게시물에서는 대칭 기능 그리드에서 동적 벽돌 블로그 및 대화식 포트폴리오 쇼케이스에 이르기까지 Divi 5로 쉽게 구축 할 수있는 그리드 레이아웃을 보여 드리겠습니다. 포트폴리오, 전자 상거래 상점 또는 회사 웹 사이트를 설계하든이 레이아웃은 디자인을 높이고 잠재 고객을 사로 잡을 수 있도록 영감을줍니다.

Divi 5의 고급 기능이 이러한 창의적인 그리드 스타일 레이아웃을 어떻게 사용할 수 있는지 살펴 보겠습니다.

Divi 5는 새로운 웹 사이트에서 사용할 준비가되었지만 기존 사이트를 Divi 5로 변환하는 것은 권장하지 않습니다.

그리드 레이아웃의 주요 디비 5 기능

Divi 5의 Rebuilt Foundation은 그리드 레이아웃을 더 쉽게 만들 수있는 기능을 소개합니다. 이 도구를 사용하면 설계자가 장치 전체에서 유연성을 유지하면서 정밀하고 효율성으로 복잡하고 시각적으로 매력적인 그리드를 만들 수 있습니다. 아래에서는 아름다운 그리드 레이아웃을 만들 수있는 주요 Divi 5 기능을 탐색합니다.

YouTube 채널을 구독하십시오

중첩 행

Divi 5의 중첩 행 기능을 사용하면 행에 행을 배치 할 수 있으므로 직관적 인 드래그 앤 드롭 인터페이스로 복잡한 그리드 구조를 만들 수있는 무한 중첩성을 제공합니다. 이 기능은 다층 그리드의 설계를 단순화하여 모듈 배치를 정확하게 제어 할 수 있습니다.

복잡한 제품 쇼케이스를 구축하든 계층화 된 포트폴리오 그리드를 구축하든 Nexted 행을 사용하면 콘텐츠를보다 현명하게 구성 할 수 있으므로 레이아웃을 동적으로 시각적으로 매력적으로 만듭니다.

사용자 정의 가능한 중단 점

반응 형 디자인은 최신 웹 사이트에 중요하며 Divi 5의 사용자 정의 가능한 브레이크 포인트로 인해 모든 장치에서 그리드가 완벽하게 보일 수 있습니다. 7 개의 데스크톱, 태블릿 및 모바일 중단 점을 활용하여 그리드가 다양한 화면 크기에 완벽하게 적응할 수 있습니다.

시각적 빌더 내의 다른 중단 점에서 레이아웃의 실시간 미리보기를 제공하는 캔버스 스케일링과 짝을 이루는이 기능은 그리드가 응답 성을 위해 최적화되어 모든 장치에서 일관된 사용자 경험을 제공 할 수 있도록합니다.

모듈 그룹

모듈 그룹은 일관된 그리드 미학을 설계하고 유지하는 프로세스를 간소화합니다. 모듈을 함께 그룹화하면 집단 스타일을 적용하고 여러 페이지에서 이러한 그룹을 재사용하여 시간을 절약하고 설계 일관성을 보장 할 수 있습니다.

이는 블로그 게시물이나 제품 카드와 같은 그리드 레이아웃에 특히 유용하며, 글꼴, 색상 또는 호버 효과와 같은 일관된 디자인 요소가 사이트 전체에서 응집력있는 모습에 필수적입니다.

디자인 변수

디자인 변수를 통해 Divi 5는 색상, 글꼴, 링크, 타이포그래피 등과 같은 주요 디자인 요소의 중앙 집중식 관리를 제공합니다. 이 기능은 그리드 레이아웃과 전체 웹 사이트 전체에서 균일 성을 보장하여 일관된 시각적 정체성을 쉽게 유지할 수 있습니다. 스타일은 변수 관리자에 설정되어 원하는 곳에 적용 할 수 있습니다.

색상 또는 글꼴 스타일을 업데이트해야합니까? 디자인 변수를 사용하면 한 곳을 변경하여 모든 섹션과 페이지에 즉시 적용하고 워크 플로우를 간소화하며 디자인을 세련되게 유지할 수 있습니다.

고급 장치

Divi 5의 고급 장치는 VW, VH, REM 및 EM과 같은 옵션으로 간격 및 크기를 세분화하는 제어를 제공합니다. 이 장치는 장치 전체에서 완벽하게 확장되는 동적 및 반응 형 그리드 레이아웃을 가능하게합니다. 변수 관리자로 패딩, 여백 또는 요소 크기를 조정할 수 있습니다. 고급 장치는 그리드 구성 요소를 정렬하고 정확하게 스케일링 할 수있는 유연성을 제공하여 레이아웃이 기능적이고 시각적으로 조화롭게 보장합니다.

속성 관리

속성 관리는 디자인 요소에서 속성을 복사, 붙여 넣기 및 재설정 할 수있게하여 설계 프로세스를 가속화합니다. 이 기능은 호버 효과 또는 간격과 같은 일관된 스타일을 여러 모듈에 적용하는 데 가장 중요합니다. 반복적 인 작업을 줄임으로써 속성 관리를 통해 복잡한 그리드 레이아웃의 개발 속도를 높이면서 창의성에 집중할 수 있습니다.

이 Divi 5 기능은 비교할 수없는 유연성과 효율성을 제공하기 위해 함께 작동하여 사용자 경험을 향상시키고 웹 디자인을 향상시키는 놀랍고 반응적인 그리드 레이아웃을보다 쉽게 ​​만들 수 있습니다.

Divi 5의 창조적 인 그리드 레이아웃 예제 10

그리드 레이아웃은 현대적인 웹 디자인의 초석이며 Divi 5를 사용하면 결코 더 쉬운 것이 아닙니다. 제품, 포트폴리오, 팀원 또는 FAQ를 선보이든 Divi 5는 기능적이고 시각적으로 놀라운 레이아웃을 구축 할 수 있습니다. Divi 5로 만들 수있는 그리드 레이아웃의 10 가지 예를 살펴 보겠습니다.

1. 대칭 기능 그리드

대칭 기능 그리드는 제품, 서비스 또는 포트폴리오 품목을 깨끗하고 정리할 수있는 좋은 방법을 제공합니다. 이 그리드 스타일은 구조화 된 컨텐츠를 강조하는 데 적합하며 애플리케이션에서 다재다능합니다. 비즈니스 웹 사이트, 포트폴리오 및 방문 페이지에 사용될 수 있으며, 정보를 쉽게 정보를 통해 안내하는 세련된 모양을 제공합니다.

아래의 예에서, 우리는 약종적 사업을 선보이기 위해 4 열 그리드를 구축했습니다. 중첩 행, 모듈 그룹 및 속성 관리를 사용하여 몇 분 안에 전문적이고 세련된 모양을 달성 할 수 있습니다.

2. 석조 그리드

Masonry Grid는 블로그 게시물, 포트폴리오 항목 또는 시각적으로 매력적이고 단단히 포장 된 그리드에서 다양한 높이의 레시피를 배열하는 역동적 인 Pinterest 스타일 레이아웃입니다. 고정 행 높이가있는 기존 그리드와 달리 석공 그리드는 컨텐츠가 자연스럽게 흐르도록하여 수직 간격을 채워서 원활하고 유기적 인 모양을 만듭니다. 이 그리드 스타일은 블로그, 잡지 또는 크리에이티브 포트폴리오와 같은 시각적 스토리 텔링의 우선 순위를 정하는 웹 사이트에 적합합니다. Divi 5의 기본 기능을 사용하면 세련되고 반응이 좋은 벽돌 그리드를 만드는 것은 직관적이고 효율적입니다.

아래의 예에서, 우리는 중첩 행과 모듈 그룹을 결합하여 Divi의 바로 가기를 사용하여 더 빨리 복제하는 메이슨 그리드를 만들었습니다.

3. 대화식 포트폴리오 그리드

대화식 포트폴리오 그리드 레이아웃은 작업을 전시하는 매력적인 방법을 제공합니다. 사용자가 콘텐츠를 탐색 할 수 있도록 Lightbox 팝업, 호버 효과, 버튼 등을 통합 할 수 있습니다. 이 그리드 스타일은 사진, 디자인 또는 둘 다와 같은 시각적 작업으로 잠재 고객을 사로 잡는 동시에 원활한 내비게이션 및 상호 작용을 제공하는 웹 사이트에 적합합니다.

Divi 5의 고급 기능을 통해 디자이너는 창의적인 작업을 효과적으로 강조하는 반응 형이며 사용자 친화적 인 포트폴리오 그리드를 만들 수 있습니다.

4. 제품 쇼케이스 그리드

제품 쇼케이스 그리드는 베스트셀러, 주요 제품 또는 세계에 소개하는 새로운 제품을 특징으로하는 독특한 방법을 제공합니다. 전자 상거래 상점에 최적화 된 이미지, 제목, 가격 및 버튼으로 구조화되고 시각적으로 매력적인 레이아웃을 만들 수 있습니다. 그리드 레이아웃을 사용하면 깨끗하고 정리 된 레이아웃을 만들어 사용자가 쉽게 찾아보고 구매 결정을 내릴 수 있습니다.

Divi 5를 사용하면 강력한 기능을 활용하여 참여와 전환을 유도하는 반응 형 브랜드와 일관된 레이아웃을 만들 수 있습니다.

5. 팀원 그리드

팀원 그리드를 사용하면 이미지, 이름, 역할 및 소셜 링크로 팀 프로필을 선보일 수 있습니다. 이 그리드 스타일은 전문적이고 접근하기 쉬운 프레젠테이션을 만들어 팀의 전문 지식과 성격을 강조하는 웹 사이트에 이상적입니다. 팀 그리드는 기업 사이트, 대행사 또는 비영리 단체에 적합하지만 사람들을 전시 해야하는 모든 사이트에 적용 할 수 있습니다.

아래의 예에서는 중첩 행이있는 3 열 그리드를 사용하고 설계 변수를 적용하여 글꼴 크기를 적절하게 제어합니다.

6. 서비스 그리드

그리드 레이아웃은 회사의 서비스를 선보이는 좋은 방법입니다. 조직을 구성하고 스캔 가능한 형식으로 강조하므로 가치 제안을 전달 해야하는 웹 사이트에 이상적입니다. 대행사, 프리랜서 또는 서비스 기반 비즈니스에 적합한 GRID는 Divi 5의 고급 기능을 사용하여 클라이언트 문의 및 전환을 유도하는 반응적이고 매력적인 레이아웃을 만듭니다.

아래의 예에서, 우리는 4 열 행을 사용하고 행 간격을위한 calc () 공식을 할당하고, 설계 프로세스 속도를 높이기 위해 모듈 그룹과 중첩 행을 통합했습니다.

7. 이벤트 일정 그리드

이벤트 스케줄 그리드 스타일은 전문적이고 깔끔한 시간에 민감한 정보를 구성하고 제시하는 데 적합하여 컨퍼런스, 워크샵 또는 커뮤니티 모임과 같은 이벤트를 호스팅하는 웹 사이트에 이상적입니다. Divi 5의 기능을 사용하면 그리드 형식의 날짜, 제목 및 설명을 추가 할 수 있으므로 방문자가 원하는 것을 쉽게 찾을 수 있습니다.

아래의 예는 기능적으로나 미적으로 이벤트를 표시하기 위해 중첩 행이있는 3 열 레이아웃을 보여줍니다.

8. 가격 책정 테이블 그리드

Divi 4 (및 Divi 5)에는 가격 책정 모듈이 제공되지만 가격, 버튼 및 총알 포인트로 제한됩니다. Divi의 기본 기능을 확장하고 자신의 요구에 맞는 가격 책정 그리드를 구축하려는 사람들을 위해 Divi 5는이를 수행하는 방법을 제공합니다. 중첩 행, 모듈 그룹 및 속성 관리를 사용하여 컨텐츠를 놀랍게 표시하는 가격 책정 그리드를 만들 수 있습니다.

예를 들어 내장 가격 모듈의 한계를 준수하지 않고도 가격, 기능 및 여러 버튼을 제공하는 3 열 레이아웃을 만들 수 있습니다. 작은 화면에 대한 응답 형 설정을 조정 한 다음 50% 너비 열에 대한 옵션 그룹 사전 설정을 만들어 열이 태블릿과 모바일에 완벽하게 정렬되도록 할 수 있습니다.

9. FAQ 아코디언 그리드

웹 사이트에 FAQ 섹션이 있으면 사용자가 자주 묻는 질문 목록에 액세스하는 데 도움이 될 수있어 제공하는 내용에 대한 더 나은 아이디어를 얻을 수 있습니다. 이 그리드 스타일은 그리드의 명확성을 아코디언 모듈의 상호 작용성과 결합하여 간결하고 액세스 가능한 정보를 제공 해야하는 웹 사이트에 이상적입니다. 지원 페이지, 도움말 센터 또는 정보 사이트에 적합한 FAQ 그리드는 Divi 5의 강력한 기능을 활용하여 사용자 경험을 향상시키는 반응적이고 매력적인 레이아웃을 만듭니다.

이 예에서는 중첩 행을 사용하여 정보 비디오와 Q & A가 포함 된 매력적인 FAQ 섹션을 만들어 정보에 근거한 결정을 내리는 데 필요한 관련 정보를 제공했습니다.

10. 이미지 갤러리 그리드

Lightbox 팝업이 장착 된 갤러리 그리드는 사진, 포트폴리오 예 또는 기타 이미지를 보여주는 시각적으로 눈에 띄는 방법입니다. 이 그리드 스타일은 시각적 스토리 텔링을 선보이는 데 적합하여 아트 갤러리, 여행 블로그 또는 사진과 같은 멋진 이미지를 우선시하는 웹 사이트에 이상적입니다. Divi 5를 사용하면 디자이너는 사로 잡힌 반응 형 갤러리 그리드를 만들 수 있습니다.

아래의 예에서는 단순한 4 열 레이아웃을 사용하여 이미지를 보여줍니다. 터치를 추가하기 위해 이미지에서 LightBox를 활성화하고 각 사진의 오른쪽 하단에 소셜 공유 모듈을 추가했습니다.

Divi 5에서 효과적인 그리드 레이아웃 생성을위한 팁

Divi 5의 강력하고 유연한 기능 덕분에 효과적인 그리드 레이아웃을 구축하는 것이 그 어느 때보 다 쉬워집니다. 오버레이 요소가 장착 된 기능 그리드 또는 동적 이미지 갤러리를 구축하든이 팁을 사용하면 Divi 5의 기능을 최대화하여 웹 사이트의 사용자 경험을 향상시키는 반응 형, 응집력 있고 효율적인 디자인을 생성하는 데 도움이됩니다.

1. 레버리지 중첩 행

Divi 5의 중첩 행 기능은 복잡한 다층 그리드 구조를 만듭니다. 정확한 정렬을 위해 단일 그리드 셀에 이미지와 텍스트를 배치하는 것과 같이 행 내에서 행을 중첩하여 콘텐츠를 구성 할 수 있습니다. 중첩 행은 포트폴리오 그리드 또는 이벤트 일정과 같은 레이아웃을 구축하는 데 적합하여 창의적이고 구조화 된 그리드를 설계 할 수있는 유연성을 제공합니다.

2. 응답 성을 최적화하십시오

캔버스 스케일링 및 사용자 정의 가능한 중단 점을 사용하면 모든 장치에서 그리드가 완벽하게 보일 수 있습니다. 시각적 빌더 내의 레이아웃을 실시간으로 테스트하여 데스크탑, 태블릿 및 모바일 장치에 적응하는 방법을 미리 봅니다. 특정 중단 점에서 열 폭, 간격 또는 글꼴 크기를 조정하여 유용성 및 시각적 호소를 유지할 수 있습니다. Divi 5의 사용자 정의 가능한 브레이크 포인트를 사용하면 대형 화면에서 스마트 폰에 이르기까지 모든 사용자에게 완벽한 경험을 보장 할 수 있습니다.

3. 효율성을 위해 모듈 그룹을 사용하십시오

Divi 5의 모듈 그룹은 제품 카드 또는 팀 구성원 프로파일과 같은 유사한 그리드 요소를 그룹화하여 워크 플로를 간소화 할 수 있습니다. 일관된 스타일 (글꼴, 색상, 호버 효과 등)을 여러 모듈에 적용하여 페이지 전체에서 재사용 할 수 있습니다. 이것은 가격 테이블 또는 FAQ와 같은 그리드의 균일 성을 유지하고 반복 편집을 줄이며 세련된 외관을 보장하기위한 타임 절약입니다.

4. 설계 변수와 일관성을 유지하십시오

설계 변수를 사용하여 색상, 글꼴, 간격, 링크 등을 중앙 집중화합니다. 이러한 요소를 한 곳에서 정의하면 전 세계적으로 스타일을 업데이트 할 수 있으며 서비스 그리드 또는 갤러리 레이아웃을 시각적으로 조화롭게 유지하는 데 적합합니다.

5. 고급 장치를 실험하십시오

동적 간격 및 크기를 위해 VH, VW, REM, Calc () 또는 Clamp ()와 같은 고급 장치를 사용하여 그리드의 유연성을 향상시킵니다. 이 장치를 사용하면 그리드 요소가 뷰포트 크기 또는 글꼴 설정에 따라 유동적으로 확장하여 응답 성 및 시각적 균형을 보장합니다.

그리드 섹션 레이아웃을 무료로 다운로드하십시오

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는 특징 그리드에서 대화식 포트폴리오에 이르기까지 모든 유연성, 정밀도 및 효율성을 제공합니다. 전자 상거래 웹 사이트, About Page 또는 FAQ 섹션을 구축하든 Divi 5의 최신 인터페이스 및 향상된 기능은 창의적인 비전을 단순하게 만듭니다.

가능성을 탐구 할 준비가 되셨습니까? 그리드 레이아웃 생성을 실험하기 위해 Divi 5 Public Alpha로 뛰어 들어보십시오. 앞에서 언급했듯이 Divi 5는 새로운 웹 사이트에 적합하지만 최소한 아직 기존 사이트에서는 사용하지 않는 것이 좋습니다.

우리는 당신의 창조물을보고 싶습니다. 소셜 미디어에서 고유 한 그리드 레이아웃을 공유하거나 아래의 의견을 공유하십시오.