Divi로 최소한의 웹사이트를 만드는 8가지 기술

미니멀 웹사이트는 지난 몇 년 동안 정말 인기를 끌 정도로 성장했습니다. 탐색할 때 방문자에게 신선하고 깨끗한 느낌을 주는 데 집중할 수 있습니다. 미니멀한 웹 디자인 스타일은 스칸디나비아 인테리어 디자인 스타일의 영향을 받습니다. 인터넷에서 스칸디나비아 거실 사진을 본 적이 있을 것입니다. 가구를 줄이고 대부분 흰색 또는 회색을 사용하여 빛과 평온이 방에 자유롭게 들어옵니다. 그것이 바로 최소한의 웹사이트도 하는 일입니다. 방문자가 압도되지 않고 가져온 콘텐츠에 집중할 수 있도록 차분한 느낌을 주는 데 중점을 둡니다.

이것은 4가지 웹사이트 스타일과 Divi를 사용하여 이를 달성하는 방법을 다룰 포스트 시리즈의 두 번째 포스트입니다.

1. 깨끗하고 추상적인
2. 최소한의
3. 평평한
4. 대담하고 다채로운

가자!

1. 적을수록 좋다

최소한의 웹사이트를 만들 때 가장 먼저 염두에 두어야 할 것은 웹사이트에서 사용하는 디자인 요소를 줄이는 것입니다. 더 많이 사용하기보다 사용하는 몇 가지 요소를 최대한 활용하십시오.

상호 보완적인 방식으로 디자인 요소를 미세 조정하여 디자인에서 얼마나 많은 것을 얻을 수 있는지 놀랄 것입니다. 웹사이트에서 더 적은 수의 요소를 사용하면 개요를 유지하고 보다 일관되고 명확한 방식으로 메시지를 전달할 수 있습니다.

2. 마진과 패딩은 가장 친한 친구입니다

최소한의 웹 사이트에는 일반적으로 많은 공백이 있습니다. 페이지와 게시물의 공백은 방문자가 웹사이트를 방문하는 내내 숨을 쉴 수 있도록 합니다. 평온함을 주고 공유하고 싶은 콘텐츠에 집중할 수 있습니다.

웹사이트에 공백을 추가하는 가장 좋은 방법은 흰색 및/또는 밝은 회색 배경색을 추가 패딩 및/또는 여백과 함께 사용하는 것입니다. 다른 값을 가지고 놀면서 어떤 결과가 나오는지 확인하는 것을 두려워하지 마십시오.

3. 원액센트 컬러 사용

웹사이트를 가능한 한 최소화하고 싶다면 너무 많은 색상을 사용하는 것도 피해야 합니다. 흰색과 회색을 많이 사용하여 최대한 중립적으로 이동합니다. 작성된 내용에 더 어두운 색상을 사용하십시오. 디자인을 좀 더 엣지 있게 만들려면 한 가지 강조 색상을 선택하세요. 이 색상은 일반적으로 로고에 사용하는 색상과 동일합니다.

4. 이미지 또는 일러스트레이션 중 하나 - 둘 다 아님

일반적으로 웹사이트를 구축할 때 실제 이미지나 일러스트레이션 중에서 선택하는 것이 좋습니다. 두 가지를 동시에 사용하면 웹사이트가 정말 복잡해지고 다양한 웹사이트 스타일이 뒤섞일 수 있으므로 반드시 피하고 싶은 것입니다.

하지만 한 가지 예외가 있습니다. 예를 들어 Blurb 모듈에서 아이콘 일러스트레이션과 함께 이미지를 자유롭게 사용하십시오. 그것들이 최소한이고 페이지의 콘텐츠를 지원한다면 계속 가도 좋습니다.

5. CTA용 버튼 모듈 대신 텍스트 모듈 사용 고려

버튼 모듈 대신 텍스트 모듈을 사용해 본 적이 있습니까? 당신은 확실히해야합니다. 버튼 모듈은 Visual Builder에서 익숙한 대부분의 옵션을 제공하지만 버튼의 모든 면에 테두리를 추가하는 경향이 있습니다. 텍스트 모듈을 사용하면 이를 방지할 수 있습니다. 아래 인쇄 화면에서 볼 수 있는 것처럼 사본을 클릭 가능하게 만들고 하단 테두리를 추가하기만 하면 됩니다.

6. 구분선은 공백의 균형을 유지하는 데 도움이 될 수 있습니다.

웹사이트에 현대적인 감각을 추가하려면 웹사이트에서 여러 구분선을 사용하고 나머지 레이아웃과 일치하도록 스타일을 지정해야 합니다.

그들은 서로 다른 디자인 요소를 연결하고 일관된 결과를 만드는 경향이 있습니다.

7. 단순하고 미묘한 모양 사용

이것은 내가 가장 좋아하는 것 중 하나입니다. 때때로 우리는 그라데이션 배경과 같이 가장 익숙한 기능을 무시하는 경향이 있습니다. 물론 배경 이미지를 사용하는 것도 매력은 있지만, 방사형 그라데이션 배경을 미묘한 방식으로 사용해 본 적이 있나요? 방문자가 헤드라인에 집중할 수 있도록 하고 행동을 유발하는 데 도움이 됩니다.

8. 미묘한 애니메이션 사용(필요한 경우)

마지막으로, 최소한의 웹사이트는 일반적으로 미묘한 애니메이션을 사용할 때 훨씬 더 좋아집니다. 그리고 우리가 미묘하다고 말할 때, 우리는 정말로 미묘하다는 것을 의미합니다. Animation Intensity를 크게 줄이면 효과가 얼마나 매끄럽게 보일 수 있는지 놀랄 것입니다. 애니메이션이 미묘하기만 하면 모든 요소에 추가할 수 있으며 웹사이트의 가독성과 사용자 경험에 영향을 미치지 않습니다.

시사

이제 모든 기술을 살펴보았으므로 실전에 적용해 보겠습니다. 다음 예제를 단계별로 다시 만들 것입니다.

만들기 시작: 새 표준 섹션 추가

섹션 설정

간격

위의 예를 만들려면 총 두 개의 섹션이 필요합니다. 새 페이지나 기존 페이지에 첫 번째 페이지를 추가하고 다음 간격을 추가하여 시작하겠습니다.

• 상단 및 하단 패딩: 50px

새 행 추가

열 구조

하나의 열을 포함하는 새 행을 추가하여 계속하십시오.

열 그라데이션 배경

이 행의 설정을 열고 다음 열 그라데이션 배경을 추가하십시오.

• 색상 #1: #ffffff
• 색상 #2: #에페프
• 기둥 그라데이션 유형: 방사형
• 기둥 반경 방향: 중심
• 컬럼 시작 위치: 40%
• 열 끝 위치: 40%

사이징

그런 다음 크기 조정 설정을 다음과 같이 변경하여 행의 너비를 늘립니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 2

간격

마지막으로 행에 다음 Spacing도 추가하십시오.

• 상단 및 하단 패딩: 0px
• 열 상단 및 하단 패딩: 250px
• 열 왼쪽 패딩: 150px(데스크톱), 20px(태블릿), 0px(전화)

첫 번째 텍스트 모듈

텍스트 설정

행 설정을 수정했으면 필요한 모듈을 추가할 수 있습니다. 다음 텍스트 설정을 사용하여 간단한 설명 텍스트 모듈로 시작하겠습니다.

• 텍스트 글꼴 두께: 반 굵게
• 텍스트 글꼴 스타일: 대문자
• 텍스트 문자 간격: 8px

생기

이 텍스트 모듈부터 시작하여 이 레이아웃에 매우 미묘한 애니메이션도 추가하고 있습니다. 애니메이션 설정을 열고 다음 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 오른쪽
• 애니메이션 강도: 5%

두 번째 텍스트 모듈

H1 텍스트 설정

이전 텍스트 모듈 바로 아래에 다음 H2 텍스트 설정이 포함된 H1 텍스트 모듈을 추가합니다.

• 제목 글꼴: 조지아
• 제목 텍스트 색상: #666666
• 제목 텍스트 크기: 78px(데스크톱), 50px(태블릿), 40px(전화)
• 제목 문자 간격: 3px

간격

다음 Spacing 설정을 사용하여 이 모듈 주위에 공간을 만들 것입니다.

• 상단 및 하단 여백: 100px
• 왼쪽 여백: 100px(데스크톱 및 태블릿), 20px(전화)
• 왼쪽 패딩: 40px

국경

왼쪽 테두리도 필요하므로 다음 설정으로 왼쪽 테두리를 추가합니다.

• 왼쪽 테두리 너비: 6px
• 왼쪽 테두리 색상: #d67787

버튼 텍스트 모듈

링크 추가

버튼 모듈을 사용하는 대신 링크를 추가할 텍스트 모듈을 사용하고 있습니다. 콘텐츠 상자 안에 CTA와 링크를 추가합니다.

링크 텍스트 설정

그런 다음 텍스트 모듈에 다음 링크 텍스트 설정을 적용합니다.

• 링크 글꼴 두께: 반 굵게
• 링크 글꼴 스타일: 기울임꼴 및 대문자
• 링크 텍스트 정렬: 왼쪽
• 링크 텍스트 색상: #666666
• 링크 문자 간격: 8px

사이징

아래쪽 테두리를 사용할 것이기 때문에 나중에 이 텍스트 모듈의 너비도 줄일 것입니다.

• 폭: 46%
• 모듈 정렬: 왼쪽

간격

하단 테두리가 텍스트에 너무 가깝지 않도록 '10px' 하단 패딩도 추가합니다.

• 하단 패딩: 10px

국경

이제 다음 설정을 사용하여 아래쪽 테두리를 추가할 수 있습니다.

• 하단 테두리 너비: 1px
• 하단 테두리 색상: #666666

생기

미묘한 애니메이션도 추가하고 있습니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 오른쪽
• 애니메이션 지연: 100ms
• 애니메이션 강도: 5%

디바이더 모듈 추가

시계

이 행에서 필요한 마지막 모듈은 Divider 모듈입니다. '표시 구분선' 옵션을 활성화된 상태로 두십시오.

색상

제목 Text Module: '#d67787'의 왼쪽 테두리에 사용한 것과 동일한 색상을 이 구분선에 사용하고 있습니다.

사이징

다음에 Sizing 설정을 열고 Divider Weight를 '2px'로 변경합니다.

간격

다음 Spacing 설정을 사용하여 Divider Module을 오른쪽으로 밉니다.

• 왼쪽 여백: 200px
• 오른쪽 여백: -100px

생기

마지막으로 다음 애니메이션을 포함합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 왼쪽
• 애니메이션 지연: 150ms
• 애니메이션 강도: 5%

두 번째 표준 섹션 추가

섹션 설정

간격

첫 번째 섹션은 완료되었으므로 이제 이전 섹션 바로 아래에 새 섹션을 추가할 수 있습니다. 섹션 설정을 열고 다음 여백을 추가합니다.

• 상단 및 하단 여백: 80px

새 행 추가

열 구조

다음 열 구조로 행을 추가하여 계속하십시오.

사이징

그런 다음 행 설정을 열고 다음 설정을 사용하여 행의 너비를 늘립니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 2

간격

2열 패딩도 추가해야 합니다.

• 열 2 왼쪽 패딩: 100px(데스크톱), 0px(태블릿 및 휴대전화)

열 1에 이미지 모듈 추가

이미지 업로드

이제 두 열에 모듈을 추가할 수 있습니다. 먼저 이미지 모듈을 첫 번째 열에 추가하고 선택한 이미지를 업로드하십시오.

간격

음수 오른쪽 여백을 추가하여 이미지 모듈의 너비를 늘립니다.

• 오른쪽 여백: -100px

박스 섀도우

또한 다음 상자 그림자를 사용하여 페이지에 추가 디자인 요소를 만듭니다.

• 상자 그림자 수평 위치: 100px
• 상자 그림자 수직 위치: 100px
• 상자 그림자 확산 강도: -14px
• 섀도우 컬러: #efefef

버튼 텍스트 모듈 복제 및 이미지 모듈 아래에 배치

버튼 텍스트 모듈 찾기 및 복제

버튼 텍스트 모듈로 시작하는 첫 번째 섹션의 세 가지 텍스트 모듈을 모두 재사용할 것입니다. 계속해서 복제하십시오.

이미지 아래에 배치

그런 다음 첫 번째 열의 Image Module 바로 아래에 배치합니다.

첫 번째 섹션의 첫 번째 텍스트 모듈을 복제하고 열 2에 배치

텍스트 모듈 찾기 및 복제

다음으로 필요한 텍스트 모듈은 섹션의 첫 번째 모듈입니다. 계속해서 이것도 복제하십시오.

2열에 배치

첫 번째 열에 배치하는 대신 두 번째 열에 놓습니다.

제목 텍스트 모듈 복제 및 2열에 배치

텍스트 모듈 찾기 및 복제

마지막으로 제목 텍스트 모듈도 재사용할 것입니다.

2열에 배치

복제한 후 새 행의 두 번째 열에 배치합니다.

콘텐츠를 H2로 변경

콘텐츠 상자의 콘텐츠를 H2로 변경합니다.

H2 텍스트 설정

그런 다음 H2 텍스트 설정에 다음 설정을 추가합니다.

• 제목 2 글꼴: 조지아
• 제목 2 텍스트 색상: #666666
• 제목 2 텍스트 크기: 58px
• 제목 2 글자 간격: 3px

설명 텍스트 모듈 추가

텍스트 설정

제목 텍스트 모듈 아래에 다음 텍스트 설정으로 설명 텍스트 모듈을 추가합니다.

• 텍스트 글꼴 두께: 가벼움
• 텍스트 문자 간격: 1px

사이징

계속해서 이 텍스트 모듈의 크기를 변경하십시오.

• 폭: 70%
• 모듈 정렬: 오른쪽

분배기 모듈 #1 추가

시계

다음으로 필요한 모듈은 Divider 모듈입니다. 구분선 표시 옵션이 활성화되어 있는지 확인하십시오.

색상

구분선의 색상을 '#666666'으로 변경합니다.

간격

다음에 약간의 간격을 추가하십시오.

• 상단 여백: 100px
• 왼쪽 여백: 400px(데스크톱), 300px(태블릿), 200px(휴대폰)
• 오른쪽 여백: -100px

생기

물론 미묘한 애니메이션도 사용할 것입니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 왼쪽
• 애니메이션 강도: 5%

분배기 모듈 #2 추가

시계

마지막으로 다른 Divider 모듈을 추가할 것입니다. 다시, Show Divider 옵션이 활성화되어 있는지 확인하십시오.

색상

구분선의 색상을 '#d67787'로 변경합니다.

사이징

디바이더 가중치에 '2px'를 사용합니다.

간격

다음 간격 설정을 추가합니다.

• 왼쪽 여백: 200px(데스크톱 및 태블릿), 150px(전화)
• 오른쪽 여백: -100px

생기

마무리하려면 구분선에 미묘한 애니메이션을 추가하십시오.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 왼쪽
• 애니메이션 지연: 100ms
• 애니메이션 강도: 5%

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.

마지막 생각들

이 게시물에서 우리는 최소한의 웹사이트를 만드는 방법에 대한 몇 가지 훌륭한 Divi 기술을 보여주었습니다. 이것은 창의력과 Divi의 가장 훌륭한 내장 옵션을 사용하여 아름다운 디자인 스타일을 구현하는 방법에 대한 시리즈의 두 번째 게시물입니다. 다음 게시물에서 우리는 더 멋진 디자인 스타일을 달성하는 방법에 대한 기술을 공유할 것입니다. 질문이나 제안 사항이 있으면 아래에 의견 섹션을 남겨주세요!