Divi 5의 중첩 행으로 제작 된 6 개의 새로운 이미지 갤러리 (무료 다운로드)

이미지 갤러리를 수동으로 만들려고했다면 상황이 얼마나 빨리 지저분 해지는 지 알 수 있습니다. 고르지 않은 이미지, 잘못 정렬 된 행 및 응답이없는 디자인은 간단한 갤러리를 레이아웃 악몽으로 바꿉니다.

Divi 4에서도 복잡한 이미지 구조는 종종 여러 행과 특수 섹션을 쌓고 간격 조정 및 수동 사용자 정의 시간을 의미했습니다. 그러나 Divi 5를 사용하면 모든 것을 건너 뛸 수 있습니다.

새로운 중첩 행 기능 덕분에 고급 이미지 갤러리 구조를 구축 할 수 있습니다. 이 게시물에서는 헤드 스타트를 제공하기 위해 6 갤러리 레이아웃 디자인을 제공하는 방법과 제공 방법을 보여줍니다.

Divi 5는 새로운 웹 사이트에서 사용할 준비가되었지만 기존 웹 사이트를 마이그레이션하기 전에 조금 기다립니다.

중첩 행을 사용하여 복잡한 레이아웃을 구축합니다

Divi 4는 이미 이미지 갤러리를 구축하는 데 필요한 모든 것을 가지고 있었지만 복잡한 레이아웃을 만드는 경우가 많습니다. Divi 5는 해킹이 필요없이 고급 갤러리 레이아웃을 시각적으로 구축하는 더 빠르고 깨끗한 방법을 제공하는 중첩 행을 소개합니다.

YouTube 채널을 구독하십시오

중첩 행은 무엇입니까?

중첩 행은 Divi 5의 강력한 새로운 레이아웃 기능으로 한 행을 다른 행 안에 배치 할 수 있으므로 페이지 구조를 더 많이 제어 할 수 있습니다. 따라서 코드를 작성하거나 해결 방법에 의존하지 않고도 시각적 빌더 내부의 복잡한 섹션을 직접 설계 할 수 있습니다.

행을 중첩하는 것은 다른 모듈을 추가하는 것과 같습니다. 행을 배치하려는 요소 위로 마우스를 마련하고 플러스 버튼을 클릭하여 새 행을 선택하면됩니다. 그런 다음 다양한 갤러리 구조에 적합한 모든 행 레이아웃 중에서 선택할 수 있습니다.

이 중첩 행은 일반 행과 똑같이 동작합니다. 무한 중첩성 덕분에 열 구조를 선택하고 모듈을 추가하고 필요한 경우 다른 행을 둥지로 칠할 수 있습니다. 드래그하여 열 크기를 조정할 수 있으므로 너비를 조정하면 직관적 인 느낌이 들며 수학 또는 간격 해킹이 포함되지 않습니다.

중첩 행도 기본적으로 완전히 반응합니다. 빌더에서 바로 다양한 화면에서 레이아웃을 조정할 수 있습니다. Divi 5 프레임 워크의 일부이므로 옵션 그룹 사전 설정 및 디자인 변수와 같은 다른 기능과 완벽하게 작동합니다. 또한 중첩 행을 Divi 5의 고급 기능과 결합하여 갤러리 디자인 워크 플로우를 최적화하기위한 팁을 공유합니다.

Divi 5의 중첩 행에 대한 모든 것을 배우십시오

중첩 행을 다르게 만드는 것은 무엇입니까?

Divi 4에서는 더 많은 고급 디자인을 달성하기 위해 행, 특수 섹션 및 레이아웃을 사용하여 창의적으로 관련된 사용자 정의 이미지 갤러리 레이아웃을 구축합니다. 이것은 당신이 디자인 노하우가 없다면 도전적이라는 것을 의미했습니다. 그리고 경험이 있더라도 몇 가지 레이아웃 구조로 제한되었습니다.

중첩 행은보다 직관적 인 접근 방식을 제공합니다. 더 이상 별도의 행이나 특수 섹션에 의존 할 필요가 없습니다. 행을 쉽게 중첩하고 모듈과 혼합하여 일치시켜 무제한 디자인 패턴을 만들 수 있습니다. 제품 쇼케이스를 만들고 싶습니까? 2 열 줄을 만들고, 왼쪽에 특집 이미지를 추가하고 오른쪽에 설명을 추가하고, 왼쪽 이미지 아래에서 3 열 줄을 둥지하고,지지 이미지를 추가하십시오. 당신의 상상력은 한계입니다!

중첩 행으로 구축 할 수있는 6 개의 이미지 갤러리 레이아웃

가능한 것들을 엿볼 수 있도록 중첩 행이 어떻게 설계되었는지에 대한 지침으로 6 개의 이미지 갤러리 레이아웃 디자인을 만들었습니다. 그들을 넘어 가자.

레이아웃 1 : 인라인 CTA 갤러리

레이어드 그리드 레이아웃은 대형 비주얼, 지원 샷 및 신중하게 배치 된 텍스트의 조합으로 하나의 프로젝트를 강조하는 현대적인 잡지 스타일 그리드를 사용합니다. 첫 번째 섹션은 두 개의 이미지를 특징으로하는 2 열 중첩 행 (다른 2 열 줄에 중첩)이며 다음은 또 다른 큰 이미지입니다. 수평 텍스트 배너는 그리드를 깨뜨려 컨텍스트와 호출을 추가합니다. 하단 섹션에는 스토리를 계속하기 위해 또 다른 3 열 레이아웃이 있지만 더 긴 텍스트 설명을위한 공간이 있습니다.

이 디자인은 시각적 리듬과 명확한 콘텐츠 계층 구조가 필요한 포트폴리오, 부동산 쇼케이스 또는 편집 레이아웃에 적합합니다. 화면 크기에 따라 아름답게 작동하면서도 여전히 구조적이고 의도적 인 느낌이 듭니다.

그것을 구축하는 방법

2 열 줄로 시작하십시오. 오른쪽에 하나의 이미지를 추가하고 왼쪽 열에 다른 행을 둥지로써. 모두에 사진을 추가하십시오. 그런 다음 다른 중첩 행을 배너 아래에 배치하여 다른 시각적 세트와 함께 텍스트 단락을 고정합니다. 중첩 된 이미지에 대한 텍스트 행을 넣는 것과 같이 전체 구조를 반복하거나 몇 가지 변경하십시오.

이 레이아웃은 각 시각적 섹션 내에서 중첩 행을 사용하는 방식에서 독특합니다. Divi 5의 중첩 행은 구조적 유연성을 허용하여 단일 열 내부에 행 형식을 혼합하고 상황에 맞는 요소 아래에 레이어링합니다.

레이아웃 2 : 스플릿 포커스 갤러리

왼쪽 열이 짧은 텍스트 블록 위의 수직 이미지를 쌓는 2 열 레이아웃과 오른쪽 열에는 큰 이미지가 있으며 3 개의 작은지지 이미지가 있습니다. 이 배열은 하나의 주요 시각적 모멘트를 강조하면서 동일한 레이아웃 내에서 서면 컨텍스트와 보조 이미지 스트립을위한 공간을 허용합니다.

스플릿 포커스 갤러리 레이아웃은 각 비주얼 블록이 단일 순간이나 감정을 포착하는 결혼, 이벤트 또는 꽃 갤러리에 적합합니다. 또한 대담한 초점 이미지와 지원 썸네일 및 작은 인용문, 평가 또는 소개 메시지와 함께 결합하려는 경우에도 잘 작동합니다.

그것을 구축하는 방법

2 열 줄을 만듭니다. 왼쪽 열에서는 두 개의 별도 행을 사용하여 수직 이미지와 아래의 텍스트 모듈을 쌓습니다. 오른쪽 열에서 추천 사진의 상단에 단일 이미지 모듈을 삽입 한 다음 작은지지 이미지를 보유하기 위해 바로 아래에 3 개의 열이있는 중첩 행을 추가하십시오.

키는 모든 것을 단단하고 깨끗하게 유지하기 위해 중첩 행에서 패딩을 조정하고 거터 너비를 1 로 설정하는 것입니다. 나중에 이미지를 추가 할 때 테두리 사전 설정 ( 테두리 너비를 2 로, 흰색으로 설정 )을 만들고 모든 요소에 적용하십시오.

레이아웃 3 : 프로젝트 스포트라이트 갤러리

이 레이아웃은 이미지 갤러리를 개별 프로젝트 또는 제품의 쇼케이스로 변환합니다. 각 항목은 비주얼을 표시하는 대신 자체 레이블 및 호출 항목을 얻으므로 포트폴리오, 레시피, 제품 하이라이트 또는 사례 연구에 이상적입니다.

짧은 2 열 줄은 각 이미지를 따릅니다. 왼쪽에는 빠른 설명 또는 프로젝트 이름이 포함되어 있으며 오른쪽에는 사용자가 지금 주문 과 같이 작업을 수행하도록 초대하는 버튼이 있습니다. Project Spotlight Gallery 레이아웃은 갤러리에 더 많은 목적과 상호 작용을 제공합니다.

그것을 구축하는 방법

각 이미지에서 우리는 2 열 중첩 행을 추가했습니다. 간단한 설명을 위해 왼쪽 열을 사용했으며 호출 문안 버튼의 오른쪽 열을 사용했습니다. 그런 다음 글로벌 스타일을 사용하여 버튼을 스타일링하고 각 갤러리 항목에 대해이 구조를 반복하여 일관성을 유지했습니다. 행을 이미지를 오버레이하기 위해 세로 오프셋 40px 및 z Index 1000으로 위치를 절대로 설정했습니다.

우리는 또한 모든 이미지에 그림자 사전 설정을 추가했습니다. 갤러리에 세련된 모양을 주었을뿐만 아니라 몇 번의 클릭만으로 여러 모듈에서 일관된 브랜딩을 적용 할 수있게함으로써 시간을 절약했습니다.

레이아웃 4 : 공개 갤러리 스크롤

스크롤 공개 갤러리 레이아웃은 사용자가 스크롤함에 따라 전개되는 시각적 스토리 텔링을 위해 설계되었습니다. 각 섹션에는 작은지지 영상 (여러 행을 함께 중첩하여 생성)과 짝을 이루는 큰 이미지가 있습니다.

편집 갤러리, 레시피 쇼케이스 (단계 또는 재료 강조) 또는 그룹 순간을 대화식으로 캡처하려는 회사 팀 페이지에 적합합니다. 압도적 인 시청자 대신 한 번에 한 블록 씩 각 스토리를 시각적으로 안내합니다.

그것을 구축하는 방법

구조는 간단합니다 : 2 열 줄을 만듭니다. 왼쪽의 이미지 모듈, 제목, 텍스트 및 버튼을 추가하십시오. 오른쪽에는 두 개의 열이있는 새 행을 둥지하고 이미지 모듈을 각각에 삽입하여 비주얼을 지원하십시오. 그런 다음 대안으로 단일 및 2 열 행을 쌓아 벽돌 같은 그리드를 만들 수 있습니다.

이 레이아웃의 주요 플레이어는 왼쪽 섹션입니다. 추천 섹션 스틱을 만들려면 모듈 그룹을 만들고 스크롤 효과 설정을 활성화해야합니다. 모듈 그룹을 클릭하고 설정> 고급> 스크롤 효과로 이동하십시오.

모듈 그룹을 상단에 고수 하고 하단 끈적 끈적한 한계를 신체 영역으로 설정하십시오. 사용자가 아래로 스크롤하면 특집 이미지가 붙어 있고 다른 이미지는 계속 움직입니다.

레이아웃 5 : 스aggered 제품 갤러리

모든 갤러리에 초점 이미지 또는 복잡한 구조가 필요한 것은 아닙니다. 때때로, 당신이 필요로하는 모든 것은 비틀 거리는 구조로 배열 된 일련의 이미지 일 뿐이며, 그 곳에서 중첩 행이 조용히 빛납니다.

이 레이아웃은 전자 상거래 또는 제품 중심 사이트에 이상적입니다.이 사이트는 일반적인 그리드처럼 느껴지지 않고 컬렉션을 강조하려는 제품에 이상적입니다. 단일 섹션 내에서 1, 2 및 3 열 이미지 행을 혼합하여 시각적 단조 로움을 깨뜨리기 위해 많은 공백과 중첩 행을 사용합니다. 결과적으로 균형 잡힌 레이아웃은 수제 및 편집자를 느끼며 제품 세부 사항, 재료 클로즈업 또는 보완 항목을 보여주는 데 적합합니다.

가죽 제품, 도자기 또는 시각적 스토리 텔링이 중요한 수제 품목과 같은 촉각 또는 고급 제품이있는 브랜드에 특히 적합합니다.

그것을 구축하는 방법

2 열 줄을 만듭니다. 왼쪽 열에 중첩 행을 사용하여 이미지의 스택 레이아웃을 추가하십시오. 한 행에는 두 개의 작은 사진이 나란히 있고 다른 행에는 수직 이미지가 있습니다. 오른쪽 열에서 3 개의 열이있는 새 행을 둥지하고 제품 이미지를 삽입하십시오. 그 아래에 텍스트와 버튼을 놓으십시오.

겹치는 핸드백 효과 (손으로 만든 섹션과 같은) 를 만들려면 줄에 이미지 모듈을 추가하고 절대 포지셔닝 (고급> 위치> 절대 )을 사용하십시오. 그런 다음 오프셋 슬라이더와 Z-index를 사용하여 두 섹션 사이에 레이어를 겹치십시오. 이를 통해 이미지가 그리드를 깨뜨릴 수있는 매거진 스타일 레이아웃을 만들 수 있습니다.

레이아웃 6 : 비대칭 포트폴리오 그리드

비대칭 포트폴리오 그리드 레이아웃은 스토리 텔링과 이미지를 깨끗한 2 열 형식으로 결합합니다. 왼쪽 열을 사용하여 제목, 간단한 설명 및 CTA가있는 프로젝트를 소개하십시오. 오른쪽 열에서, 3 열 중첩 행은 큰 주요 이미지 위에 오면 지원 샷으로 주요 영상을 보여줄 수있는 완벽한 기회를 제공합니다.

이 디자인은 선별 된 사례 연구 또는 포트폴리오를 제시하는 디자이너, 사진 작가 또는 대행사에 이상적입니다. 자연스러운 스크롤 리듬과 모바일 친화적 인 흐름을 제공하면서주의를 끌고 있습니다.

그것을 구축하는 방법

2 열 줄로 시작하십시오. 왼쪽 열에서 제목 및 설명에 대한 텍스트 모듈을 추가 한 다음 버튼 모듈 (원하는 경우)을 추가하십시오.

오른쪽 열에 중첩 행을 추가하십시오. 3 열 레이아웃을 선택하고 다른 이미지 모듈을 쌓으십시오. 중첩 행에 3 개의지지 이미지를 삽입하고 쌓인 이미지 모듈에 큰 이미지를 삽입하십시오. 다른 행 구조를 사용하여 더 많은 패턴을 만듭니다.

모든 것을 정렬하게 유지하려면 거터 너비를 1 로 설정하고 업로드하기 전에 사진을 일관된 높이로 자릅니다. 글로벌 이미지 사전 설정 (소프트 테두리 또는 드롭 섀도우 등)과 호버 효과를 사용하여 물건을 대화식으로 유지하지만 세련되게 유지하십시오.

또한 이미지를 오버레이하는 또 다른 중첩 행을 알 수 있습니다. 오버레이 효과를 생성하기 위해 위치를 절대로 설정했습니다 .

대화식 이미지 갤러리를 구축하기위한 최고의 팁

레이아웃이 설치되면 몇 가지 추가 세부 사항을 뿌려 갤러리를 더 세련되게하십시오. 방법은 다음과 같습니다.

1. 호버 효과를 만듭니다

호버 효과를 추가하는 것은 이미지 갤러리를보다 역동적으로 느끼게하는 가장 쉬운 방법 중 하나입니다. 컨텐츠에서 산만하지 않고 상호 작용을 추가하고 사용자가 참여할 때 이미지가 살아남는 데 도움이됩니다.

Divi 5에서는 이미지에 호버 효과를 추가하는 것이 쉽습니다. 편집하는 동안 호버 (및 응답 모드) 로 쉽게 전환 하고 설정을 사용자 정의 할 수 있습니다.

모든 이미지 또는 설정 옵션에 대해 호버로 전환 할 필요는 없습니다. 한 번만 전환하고 사용자 정의하려는 모든 요소를 ​​변경하고 저장하십시오. 우리는 테두리 색상을 변경했지만 필터를 시도하고 변환하고 그림자를 추가하며 쉽게 추가 할 수 있습니다.

모든 이미지가 같은 방식으로 행동하기를 원한다면이를 개별 이미지에 적용하거나 사전 설정으로 저장할 수 있습니다. 작은 세부 사항이지만 갤러리가 사려 깊고 대화식을 느끼게하며 Divi는 그것을 쉽게 만듭니다.

2. 복사/붙여 넣기 속성을 사용하여 스타일을 이미지에 신속하게 적용하십시오.

갤러리에서 각 이미지를 수동으로 사용자 정의하는 것은 특히 경계, 그림자 또는 호버 효과와 같은 일관된 스타일을 적용 할 때 시간이 많이 걸릴 수 있습니다. 사전 설정은 글로벌 스타일에 적합하지만 모든 사소한 조정마다 새로운 사전 설정을 만들고 싶지 않을 수도 있습니다.

Divi 5의 속성 관리 시스템은 간소화 된 솔루션을 제공합니다. 몇 번의 클릭만으로 한 이미지에서 스타일을 복사하여 다른 이미지에 적용 할 수 있습니다. 모든 이미지에 대해 동일한 사용자 정의 프로세스를 수동으로 반복 할 필요는 없습니다. 일관성을 복사하고 붙여 넣고 유지할 수 있습니다.

예를 들어, 하나의 요소를 사용자 정의하고 다른 요소에 속성을 복사하여 붙여 넣어 스타일을 복제하십시오.

Divi 5는 또한보다 세분화 된 제어를 허용합니다. 예를 들어, 설계 설정 또는 호버 효과와 같은 특정 속성 그룹을 복사하여 붙여 넣을 수 있습니다. 이것은 워크 플로를 효율적이고 응집력있게 만듭니다.

3. 클램프를 사용하여 유동적이고 반응 형 이미지를 만듭니다

최신 갤러리 레이아웃에서 이미지는 스케일 스케일이 아니라 다른 화면 크기에 지능적으로 응답해야합니다. 이것이 바로 Clamp () 함수가 달성하는 데 도움이되는 것입니다.

Divi 5는 클램프 () 및 이미지 너비, 패딩 및 마진 필드를 포함하여 어느 곳에서나 크기 값을 수동으로 입력 할 수있는 기타 많은 고급 장치를 지원합니다. 클램프 ()는 응답성에 이상적입니다. 한 줄로 최소, 이상 및 최대 값을 설정할 수 있습니다.

예를 들어, 클램프 (1200px, 30VW, 1400px)는 Divi에게 1200px 이하로 이동하지 말고 뷰포트 너비의 최대 30%를 확장하지만 1400px로 캡처합니다.

이것은 중단 점이없는 유동성 그리드를 원하는 이미지 스트립 또는 비틀 거리는 레이아웃에 특히 유용합니다. 중첩 행과 결합되면 Clamp ()는 각 블록이 별도의 모바일 조정없이 자연스럽게 적응할 수 있도록 도와줍니다.

4. 다른 장치의 미리보기 및 조정

데스크탑에서 레이아웃이 좋아 보이면 Divi의 내장 응답 편집 도구를 사용하여 태블릿 및 모바일 용으로 쉽게 조정할 수 있습니다. 장치보기 사이를 전환하고 각 화면의 이미지 크기, 간격 및 텍스트 정렬과 같은 설정을 조정합니다.

예를 들어, 더 나은 스크롤 경험을 위해 모바일 또는 스택 열의 행 사이의 패딩을 다르게 줄일 수 있습니다. 이러한 설정을 조정하는 데 몇 분이 걸리면 갤러리가 모든 화면에서 깨끗하고 전문적으로 느껴질 수 있습니다.

갤러리 레이아웃을 무료로 다운로드하십시오

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의 새로운 Flexbox 기반 레이아웃 시스템을 찾아보십시오. 또한 광범위한 새로운 행 템플릿과 Flexbox 컨트롤을 소개하여 상상할 수있는 모든 레이아웃을 만들 수있는 모든 도구와 단순성을 제공하십시오.

Divi 5를 계속 개선함에 따라 설계 기능을 향상시키고 워크 플로를 단순화하는 더 많은 기능을 기대할 수 있습니다.

갤러리를 건설하고 있다면 이제 Divi 5를 시도하고 중첩 행과 시각적 레이아웃 도구가 모든 것을 단순화 할 수있는 방법을 경험하기에 완벽한 시간입니다.

Divi 5는 새로운 웹 사이트에서 사용할 준비가되었지만 기존 웹 사이트를 마이그레이션하기 전에 조금 기다립니다.