Divi에서 기하학적 격자 레이아웃을 디자인하는 방법

웹사이트를 위한 기하학적 격자 레이아웃을 디자인하는 것은 매우 아름다울 수 있습니다. 내가 가장 좋아하는 기하학적 디자인 요소 중 하나는 육각형입니다. 육각형은 균형 잡히고 조화로운 그리드 레이아웃을 디자인하는 데 사용할 수 있습니다(벌집을 생각해 보세요). 그러나 디자인에는 어려움이 따를 수 있습니다. 콘텐츠의 배경으로 사용할 모양을 만들었습니다. 그런 다음 모양 안에 내용을 맞춰야 합니다. 그런 다음 다른 화면 크기에서 해당 모양의 간격이 올바른지 확인해야 합니다. 하지만 걱정하지 마십시오. 생각보다 어렵지 않습니다.

이러한 기하학적 모양을 만드는 것과 관련하여 고급 사용자 정의 CSS를 사용하여 이를 수행하는 방법이 있지만 가장 간단한 방법은 이미지를 만드는 것입니다. 그런 다음 나머지는 Divi의 힘을 사용할 수 있습니다.

이 튜토리얼에서는 육각형 이미지를 생성하여 Divi로 기하학적 격자 레이아웃을 디자인하는 것이 얼마나 쉬운지 보여 드리겠습니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 기하학적 격자 디자인을 살펴보겠습니다.

필요한 것

• 사진 편집기(Sketch를 사용하겠습니다)를 사용하여 육각형 이미지를 만듭니다. 또는 지금은 이 이미지를 바탕 화면으로 드래그하여 사용할 수 있습니다.
  
• Divi 테마(설치 및 활성)

육각형 배경 이미지 만들기

육각형 배경 이미지를 만들기 위해 사진 편집기 Sketch(Mac 전용)를 사용하겠습니다. 그러나 이것은 Photoshop, Illustrator 또는 Gimp와 같은 많은 사진 편집기에서 쉽게 만들 수 있는 모양이어야 합니다.

튜토리얼의 이 부분을 귀찮게 하고 싶지 않다면 지금은 언제든지 이 이미지를 바탕 화면으로 끌어다 놓을 수 있습니다. 어두운 반투명 육각형 이미지로 배경색이 비쳐 보일 수 있으므로 여러 디자인에서 사용할 수 있습니다.

다음은 스케치에서 이미지를 만드는 방법입니다. 먼저 오른쪽 상단의 삽입 아이콘을 클릭합니다. 그런 다음 모양 옵션 위로 마우스를 가져간 다음 육각형 모양을 선택합니다.

이제 Shift 키를 누른 상태에서 캔버스를 클릭(길게 유지)하고 마우스를 끌어 모양을 만든 다음 마우스를 놓습니다. Shift 키를 누르고 있으면 모양에 대한 완벽한 정사각형 치수를 만들 수 있습니다. 이제 다음과 같이 오른쪽 사이드바에서 모양의 속성을 업데이트합니다.

크기: 너비 360, 높이 360
측면: 6
채우기 색상: 000000 hex, 0 R, 0 G, 0 B, 30 A (기본적으로 이것은 30% 불투명도의 검정색입니다)

그런 다음 이미지를 png로 내보내고 나중에 사용할 수 있도록 WordPress 미디어 라이브러리로 가져옵니다.

세 개의 열이 있는 첫 번째 섹션 만들기

이 디자인에는 서로 다른 열 구조를 포함하는 행이 있는 세 개의 섹션이 서로 겹쳐져 있습니다. 첫 번째 섹션에는 세 개의 열 구조가 있고 두 번째 섹션에는 두 개의 열이 있으며 세 번째 섹션에는 하나의 열만 있습니다.

첫 번째 섹션을 만들려면 새 페이지를 만들고 비주얼 빌더를 배포하여 처음부터 새 레이아웃을 빌드합니다. 새로운 일반 섹션이 생성되고 시각적 빌더가 섹션의 열 구조를 선택하라는 메시지를 표시합니다. 3열 구조(1/3 1/3 1/3)를 선택합니다.

이제 행 편집 및 모듈 추가를 시작하기 전에 다음으로 섹션 설정을 업데이트하여 섹션에 배경색 그라디언트를 지정해 보겠습니다.

배경 그라데이션 왼쪽 색상: #2b87da
배경 그라데이션 오른쪽 색상: rgba(0,0,0,0.6)

행 설정을 사용자 정의하고 열 배경에 육각형 이미지 추가

원하는 디자인을 얻으려면 3열 행의 각 열에 배경 이미지를 추가해야 합니다. 따라서 각 열에 대해 육각형 이미지(360x360px여야 함)를 각 열에 추가합니다. 그런 다음 배경 이미지 크기를 "실제 크기"로 설정하고 배경 이미지 반복을 "반복 없음"으로 설정합니다.

열 1, 2 및 3 배경 이미지에 대해 이 작업을 수행하십시오.

다음으로 육각형 배경 이미지가 각 열에 올바르게 표시되는 데 필요한 간격을 만들기 위해 행 설정을 사용자 지정해야 합니다. 이 간격은 또한 응답성을 유지하고 모바일에서 수평 공간을 최대화하는 데 도움이 됩니다.

다음과 같이 행 설정을 업데이트합니다.

사용자 정의 너비 사용: 예
단위: %
사용자 정의 너비: 100%
사용자 지정 거터 너비 사용: 예
거터 폭: 2
열 높이 균등화: 예

사용자 정의 패딩(데스크탑): 0px 상단, 0px 하단, 10% 왼쪽, 10% 오른쪽
맞춤 패딩(태블릿): 왼쪽 0%, 오른쪽 0%

지금은 행 설정을 저장하십시오.

각 열에 Blurb 모듈 추가하기

첫 번째 열에 새 광고 문구 모듈을 추가하고 다음과 같이 광고 문구 설정을 업데이트합니다.

콘텐츠: “당신의 콘텐츠는 여기에 갑니다. 인라인 또는 모듈 콘텐츠 설정에서 이 텍스트를 편집하거나 제거하십시오." (육각형 이미지 내 공간이 제한되어 있으므로 짧게 유지)
아이콘 사용: 예
아이콘 선택(분명히 원하는 사람)

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

아이콘 색상: #66d1ff
아이콘 글꼴 크기: 66px
텍스트 방향: 중앙
텍스트 색상: 라이트
너비: 360px(육각형 배경 이미지의 너비와 동일)
모듈 정렬: 중앙
맞춤 패딩: 상단 85px, 하단 85px, 왼쪽 10%, 오른쪽 10%

배경 이미지를 완전히 나타내기 위해 블러 모듈의 간격을 조정하는 방법을 배우려면 먼저 육각형 앞에 표시하려는 콘텐츠를 추가하는 것이 중요합니다. 85px의 상단 및 하단 패딩을 추가했습니다. 이것은 브라우저를 모바일 장치 크기에 맞게 조정할 때도 육각형 배경을 노출하기에 충분합니다.

광고문안 모듈을 저장한 후 복사하여 열 2와 3에 붙여넣어 세 가지 광고문안이 모두 표시되도록 합니다.

이제 첫 번째 광고 문구 행에 육각형 배경을 성공적으로 추가했습니다.

두 개의 열이 있는 두 번째 섹션 만들기

두 번째 섹션을 만들려면 첫 번째 섹션을 복제한 다음 rgba(0,0,0,0.6) 배경색으로 섹션 설정을 업데이트하고 기존 그라디언트를 삭제합니다.

그런 다음 행의 열 구조를 두 개의 열로 변경하고 오른쪽 하단 열에서 추가 모듈을 삭제합니다.

다음과 같이 행 설정을 업데이트합니다.

거터 폭: 3
사용자 정의 여백(데스크톱): -145px 상단
사용자 정의 여백(태블릿): -70px 상단
맞춤 패딩(데스크톱): 왼쪽 24%, 오른쪽 24%

위 섹션의 광고 문구 사이에 육각형 배경을 배치하기 위해 왼쪽과 오른쪽에 더 많은 패딩을 추가했습니다(양쪽의 24% 패딩은 우리를 꽤 가깝게 만듭니다). 또한 행 패딩이 많아져 열 공간이 감소함에 따라 여백 너비를 다시 3으로 변경했습니다. 그런 다음 -145px 여백을 사용하여 행을 약간 위로 당겼습니다.

보시다시피 그리드 레이아웃이 함께 제공됩니다.

하나의 열로 세 번째 섹션 만들기

마지막 섹션의 경우 섹션 섹션을 복제하십시오. 그런 다음 첫 번째 섹션으로 이동하여 배경 그라디언트를 복사하여 방금 만든 세 번째 섹션에 붙여넣습니다. 그런 다음 그라디언트 색상 미리보기 위로 마우스를 가져갈 때 "전환" 아이콘을 클릭하여 그라디언트를 뒤집습니다. 그런 다음 세 번째 섹션에서 배경색을 삭제합니다.

이제 행 열 구조를 하나의 열로 업데이트하고 추가 블러브 모듈을 삭제합니다.

더 작은 브라우저 창에서 육각형 이미지 배경이 다른 블러브와 함께 확장되도록 하려면 행에 패딩을 더 추가해야 합니다. 이렇게 하면 육각형 이미지가 다른 이미지와 일치하도록 약간 뭉개집니다. 이것은 디자인을 보다 일관성 있게 만들기 위한 작은 세부 사항일 뿐입니다.

행 설정에서 다음과 같이 사용자 지정 패딩을 업데이트합니다.

맞춤 패딩(데스크톱): 왼쪽 37%, 오른쪽 37%

이제 기하학적 격자 레이아웃의 최종 결과를 확인하겠습니다.

모바일에서는 이렇게 보입니다.

다양한 화면 크기에 맞게 조정하는 방법은 다음과 같습니다.

최종 생각

이 튜토리얼은 육각형 모양 배경을 기둥에 추가하여 기하학적 격자를 만드는 방법을 보여주지만 이 동일한 기술을 쉽게 적용하여 원하는 배경 이미지를 추가할 수 있습니다. 이것은 웹사이트를 차별화하기 위해 아름다운 레이아웃을 디자인할 수 있는 많은 기회를 열어줍니다.

다음 프로젝트에 도움이 되었기를 바라며 댓글로 여러분의 의견을 기다리겠습니다.

건배!