Divi로 반응형 5열 "쇼케이스" 레이아웃을 디자인하는 방법

콘텐츠를 위한 충분한 공간이 있는 5열 레이아웃을 디자인하는 것은 어려울 수 있습니다. 모든 브라우저 크기에서 잘 확장되는지 확인하는 더 큰 도전은 말할 것도 없습니다. 이 튜토리얼에서는 더 작은 화면 크기(예: 태블릿 및 스마트폰)에서 디자인을 손상시키지 않으면서 5열 레이아웃 안에 콘텐츠를 맞추는 데 필요한 공간을 최대화하는 방법을 보여 드리겠습니다. 이 디자인은 제품, 서비스 및 프로젝트를 보여주는 데 이상적입니다. 약간의 영감을 얻기 위해 몇 가지 보너스 디자인 기능을 추가할 것입니다.

시작하자.

엿보기

사용된 반응 기술

사용자 정의 행 너비 및 거터 너비 사용

5열 레이아웃을 반응형으로 만드는 핵심은 먼저 콘텐츠를 담을 수 있는 충분한 공간을 열에 제공하는 것입니다. 이 튜토리얼의 디자인에서는 5개의 열을 포함하는 행에 사용자 정의 너비를 89%로 지정하겠습니다. 그런 다음 기본적으로 열 사이의 여백을 없애는 거터 너비를 1로 설정하여 더 많은 공간을 만듭니다. 이 디자인의 경우 행을 전체 너비로 설정하는 대신 89%의 사용자 정의 너비를 사용하는 것이 중요합니다. 여백 너비를 1로 설정하고 행의 양쪽에 여백을 유지할 수 있기 때문입니다. 당신은 내가 의미하는 것을 볼 것입니다.

간격 및 제목 텍스트에 vw 길이 단위 사용

5열 레이아웃에서 반응을 유지하는 또 다른 핵심은 vw 길이 단위를 사용하여 콘텐츠의 간격을 지정하는 것입니다. 그리고 모든 간격에서 vw를 일관되게 사용하는 것이 중요합니다. 이렇게 하면 창 너비를 조정하는 동안 요소가 깨지거나 뛰어다니지 않고 모든 브라우저 크기에서 일관되게 크기를 조정할 수 있습니다. 제목 텍스트에 vw 길이 단위를 사용하는 것도 중요하므로 텍스트가 더 작은 브라우저 창에서 새 줄로 나뉘지 않습니다. 그러나 제목 텍스트의 경우 너무 많이 축소되는 텍스트를 수용하기 위해 태블릿 및 스마트폰에 px 단위를 할당해야 합니다.

1부: 시작하기

이 튜토리얼에 필요한 것은 Divi 테마뿐입니다. Architecture Firm 홈 페이지 레이아웃과 함께 Visual Builder를 사용할 것입니다.

시작하려면 새 페이지를 만들고 페이지에 제목을 지정한 다음 Visual Builder를 배포하세요. "미리 만들어진 레이아웃 선택" 옵션을 선택합니다. 라이브러리에서 로드 팝업에서 Interior Design 레이아웃 팩을 선택한 다음 Architecture Firm 홈 페이지 레이아웃을 페이지에 로드하십시오.

2부: 제목 섹션 만들기

우선, 세 개의 광고 문구가 포함된 두 번째 섹션을 복제합니다.

상단 섹션은 두 가지 용도로 사용되기 때문에 이 디자인에는 두 개의 섹션이 필요합니다. 먼저 아래 섹션의 제목을 유지합니다. 둘째, 섹션 구분선을 사용하여 독특한 디자인을 추가할 수 있습니다.

계속하자.

원본 섹션(복제본 아님)에서 3개의 광고문안을 삭제하고 행의 열 구조를 1열로 변경합니다.

그런 다음 레이아웃의 맨 아래로 스크롤하여 마지막 섹션으로 이동하고 왼쪽 열에 있는 텍스트 모듈을 복사합니다.

그런 다음 방금 만든 한 열 행에 붙여넣고 "Let's Build Something"만 남도록 h2 제목 아래의 모든 텍스트 내용을 삭제합니다.

3부: 5열 레이아웃을 위한 Blurbs 사용자 지정

이제 3열 행 내부에 원래 3개의 광고 문구로 복제한 섹션을 방문할 시간입니다. 먼저 행 구조를 5열 레이아웃으로 변경해 보겠습니다.

첫 번째 열의 blurb 모듈의 blurb 설정을 연 다음 아이콘으로 사용 중인 이미지를 삭제합니다.

그런 다음 첫 번째 열에 있는 광고 문구 모듈을 복제합니다. 우리는 배경 이미지를 담기 위해 상단 광고문이 필요하기 때문에 이 디자인에 대해 열당 2개의 광고문안을 사용할 것입니다.

첫 번째 열에서 상단 광고에 대한 설정을 열고 콘텐츠 상자에서 본문 텍스트를 삭제합니다.

상단 Blurb 모듈에 배경 이미지 및 그라디언트 추가

그런 다음 동일한 광고 문구를 배경 이미지로 지정하고 그라디언트를 추가하여 다음과 같이 이미지를 오버레이합니다.

배경 이미지 추가
배경 그라데이션 왼쪽 색상: rgba(255,255,255,0)
배경 그라데이션 오른쪽 색상: rgba(18,18,18,0.65)
시작 위치: 50%
배경 이미지 위에 그라디언트 배치: 예

더 밝은 배경 이미지로 제목 텍스트를 더 읽기 쉽게 하려면 그라디언트가 필요합니다.

제목 텍스트 및 간격에 VW 단위 사용

그런 다음 디자인 탭 설정을 다음과 같이 업데이트합니다.

제목 텍스트 크기: 2.7vw(데스크톱), 46px(태블릿), 36px(스마트폰)
제목 문자 간격: -3px
사용자 정의 여백: 왼쪽 1.5vw, 오른쪽 1.5vw
맞춤 패딩: 상단 35vw, 하단 2vw, 왼쪽 1vw, 오른쪽 1vw

설정을 저장합니다.

35vw의 맞춤형 상단 패딩은 독특한 긴 수직 이미지 디자인을 만드는 것입니다. 제목 텍스트에는 다양한 브라우저 너비에서 일관되게 텍스트 크기를 유지하기 위해 2.7vw 값이 지정됩니다. 나중에 행에 더 많은 간격을 추가하면 나머지 간격이 더 의미가 있습니다.

하단 광고 사용자 정의

그런 다음 첫 번째 열 아래에 있는 두 번째 광고 모듈의 설정을 열고 제목 텍스트를 삭제합니다. 그런 다음 다음을 업데이트합니다.

본문 텍스트 정렬: 왼쪽
본문 색상: #666666
맞춤 패딩: 상단 2vw, 하단 2vw, 왼쪽 2vw, 오른쪽 2vw

이제 첫 번째 열에 두 개의 광고 문구가 디자인되었습니다. 둘 다 복사하여 나머지 각 열에 붙여넣습니다. 먼저 2열과 3열에 있는 원래의 블러브 모듈을 먼저 삭제해야 합니다. 이제 디자인이 다음과 같아야 합니다.

4부: 섹션 설정 사용자 정의

이제 섹션 설정을 업데이트하여 행이 겹칠 공간을 만들 흰색 배경과 하단에 상자 그림자를 갖도록 하겠습니다.

배경색: #ffffff
사용자 지정 패딩: 기본 상단, 5vw 하단, 기본 왼쪽, 기본 오른쪽
박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: -200px
상자 그림자 흐림 강도: 0px
그림자 색상: #121212

5부: 행 설정 사용자 정의

이제 행으로 돌아가 다음과 같이 설정을 업데이트하겠습니다.

배경 이미지: #ffffff
행 정렬: 가운데
사용자 정의 너비: 89%
거터 폭: 1
사용자 정의 여백: -10vw
맞춤 패딩: 상단 3vw, 하단 3vw, 왼쪽 1.5vw, 오른쪽 1.5vw
박스 섀도우: 스크린샷 참조
상자 그림자 흐림 강도: 80px

튜토리얼의 앞부분에서 언급했듯이 사용자 정의 너비와 여백 너비는 5열 레이아웃에 필요한 콘텐츠 공간을 만드는 데 필수적입니다.

이 시점에서 디자인의 기본 구조가 완성됩니다. 지금까지의 디자인은 이렇습니다.

6부: 최종 수정 추가

이제 몇 가지 디자인 조정을 더 추가하여 마무리할 수 있습니다.

깜짝 놀라게 하는 광고

먼저, 몇 개의 패딩을 줄여서 블러브 배경 이미지의 높이를 엇갈리게 합시다. 두 번째 행에서 상단 블러 모듈의 설정을 열고 다음과 같이 패딩을 업데이트합니다.

사용자 정의 패딩: 28vw 상단

그리고 세 번째 열의 상단 광고에 대해 상단 패딩을 30vw로 변경합니다.

섹션 구분선을 추가하여 5열 행에 텍스처 추가

멋진 디자인 기법 중 하나는 5개의 열이 있는 섹션 바로 위 섹션에 상단 섹션 구분선을 추가하는 것입니다. 구분선 배경은 위의 섹션과 겹치더라도 5열 행의 배경에 표시됩니다. 이렇게 하려면 "Let's Build Something"이라는 제목이 포함된 섹션으로 이동하여 다음과 같이 구분선을 지정합니다.

구분선의 색상은 불투명도 15%의 섹션 배경색과 동일하기 때문에 구분선은 상단 섹션에서 보이지 않지만 아래 섹션과 겹치는 행에서 볼 수 있습니다. 그리고 행에 상자 그림자를 주었기 때문에 독특한 디자인이 만들어집니다.

다른 이미지로 디자인이 어떻게 보일지 더 잘 이해하기 위해 몇 가지 배경 이미지를 업데이트했습니다.

다음은 최종 디자인입니다.

5열 레이아웃의 좋은 점 중 하나는 태블릿에서 멋진 2열 레이아웃을 얻을 수 있다는 것입니다.

그리고 스마트폰에서는 이렇게 생겼습니다.

마지막 생각들

나는 반응형 레이아웃을 만드는 Divi의 힘을 탐구하는 것을 좋아합니다. 5열 레이아웃의 문제는 모든 브라우저 크기에서 적절하게 확장되도록 콘텐츠의 간격을 적절하게 유지하는 올바른 기술을 사용하지 않는 한 콘텐츠를 위한 공간이 별로 없다는 것입니다. 이 디자인이 다음 프로젝트에 5열 레이아웃을 사용할 가능성을 소개하는 데 도움이 되었기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!