Divi로 모바일 우선 디자인을 만드는 방법

많은 웹 사이트는 모바일 장치에서 수많은 방문자를 얻습니다. 이것은 디자인이 더 작은 화면 크기에 충분히 최적화되어 있는지 여부에 대한 질문으로 이어집니다. Divi를 사용하면 데스크탑 경험을 위해 제작된 디자인도 즉각적으로 반응하게 됩니다. 그러나 반응이 좋다고 해서 최적화된 것은 아닙니다.

모바일이 방문자의 주요 소스인 경우 데스크톱이 아닌 모바일 관점에서 디자인 및 구축을 시작하는 것이 정말 도움이 될 수 있습니다. 이 포스트에서는 그 방법을 정확히 알려드리겠습니다. 명심해야 할 몇 가지 팁과 트릭을 살펴본 후 이러한 팁을 고려한 예제를 처음부터 다시 만들 것입니다.

가자!

시사

앞에서 언급했듯이 몇 가지 팁과 트릭을 살펴보는 것으로 시작하겠습니다. 그런 다음 이 팁을 사용하는 예제를 처음부터 다시 만들 것입니다. 결과를 살펴보겠습니다.

이동하는

데스크탑

접근하다

YouTube 채널 구독

1. 새 페이지 추가 후 바로 모바일 보기로 전환

새 페이지를 추가한 후 가장 먼저 해야 할 일은 즉시 모바일 보기로 전환하는 것입니다. 이를 통해 모바일 지향적이고 정확한 디자인을 만들 수 있습니다.

2. 각 디자인 요소에 대한 반응형 옵션을 활성화하고 모바일 값을 먼저 수정하십시오.

원하는 디자인을 디자인하기 시작하면 디자인 요소에 대한 반응형 옵션을 활성화하고 싶을 것입니다. 여기에는 텍스트 크기, 패딩 및 여백이 포함되지만 이에 국한되지 않습니다. 디자인이 모바일 우선적으로 최적화되도록 하기 위해 추가할 첫 번째 값은 데스크톱 값 대신 모바일 값이 됩니다.

3. 필요한 경우 열 사이의 기본 공간 제거 및 패딩 수동 추가

더 많은 수평 공간을 만들려면 열 사이의 기본 사용자 지정 패딩을 모두 제거하는 것이 좋습니다. 필요한 경우 항상 각 열이나 디자인 요소에 수동으로 패딩을 추가하고 원하는 거리를 직접 선택할 수 있습니다.

4. 가로 디자인을 만들기 위해 서로 옆에 2 또는 3개의 기둥을 배치합니다.

Divi의 반응형 구조는 수직 방향입니다. 즉, 모듈과 열이 서로 아래에 나타납니다. 그러나 이것은 더 많은 수직 스크롤이 필요합니다. 작업 중인 디자인에 따라 더 수평적인 흐름을 만드는 것이 실제로 차이를 만들 수 있습니다.

5. 도중에 또는 이후에 데스크탑 및 태블릿 보기 수정

모바일 우선 목적으로 디자인하더라도 다른 보기도 순서대로 유지하는 것이 중요합니다. 각 디자인 요소에 포함된 반응형 옵션은 이를 수행하는 데 도움이 됩니다. 나중에 또는 설계 프로세스 전반에 걸쳐 이러한 값을 수정하도록 선택할 수 있습니다.

예제를 다시 만들어 봅시다!

새 섹션 추가

새 페이지를 열고 모바일 보기로 전환한 다음 새 섹션을 추가하여 시작하세요.

행 #1 추가

열 구조

다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.

행에 텍스트 모듈 추가

H2 콘텐츠 추가

행의 열에 텍스트 모듈을 추가하고 일부 H2 제목 콘텐츠를 입력합니다.

H2 텍스트 설정

그런 다음 제목 텍스트 설정으로 이동하여 제목의 모양을 변경합니다.

• 제목 2 글꼴: Didact Gothic
• 제목 2 텍스트 정렬: 가운데
• 제목 2 텍스트 색상: #333333
• 제목 2 텍스트 크기: 5.5vw(전화), 5vw(태블릿), 2vw(데스크톱)

행에 구분선 모듈 추가

시계

추가한 Text Module 바로 아래에 Divider Module을 추가합니다. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

색상

그런 다음 디자인 탭으로 이동하여 구분선의 색상을 변경합니다.

• 색상: #333333

사이징

크기 설정도 수정합니다.

• 폭: 48%
• 모듈 정렬: 중앙

행 #2 추가

열 구조

다음 열 구조를 사용하여 섹션에 다른 행을 계속 추가합니다.

배경색

아직 모듈을 추가하지 않고 행 설정을 열고 행에 배경색을 추가하십시오.

• 배경색: #ffe69e

2열 배경색

행의 두 번째 열에도 배경색을 추가합니다.

• 2열 배경색: #ffd65b

조정

그런 다음 행 정렬을 변경합니다.

• 행 정렬: 왼쪽

사이징

다음으로 크기 설정을 엽니다. 여기에서는 열 사이의 모든 기본 공간을 제거하려고 합니다. 또한 열에 대한 사용자 정의 너비를 사용하여 데스크탑에서 보기 좋게 만듭니다.

• 사용자 정의 너비 사용: 예
• 단위: PX
• 맞춤 너비: 700px
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

간격

계속해서 간격 설정으로 이동하여 사용자 지정 여백 및 패딩 값을 수동으로 추가합니다.

• 최고 마진: 5vw
• 하단 여백: 5vw
• 상단 패딩: 0px
• 하단 패딩: 0px
• 열 1 상단 패딩: 10vw(전화), 8vw(태블릿), 4vw(데스크톱)
• 열 1 하단 패딩: 10vw(전화), 8vw(태블릿), 4vw(데스크톱)

국경

행에 둥근 모서리도 추가하십시오.

• 오른쪽 상단: 10px
• 오른쪽 하단: 10px

박스 섀도우

그리고 미묘한 상자 그림자도 줍니다.

• 상자 그림자 흐림 강도: 50px
• 그림자 색상: rgba(0,0,0,0.16)

맞춤 CSS

마지막으로 중요한 것은 가로 공간을 최대한 활용하기 위해 작은 화면 크기에서 열을 나란히 배치할 것입니다. 고급 탭으로 이동하여 기본 요소에 CSS 코드 한 줄을 추가합니다.

display: flex;

열 1에 텍스트 모듈 추가

H3 콘텐츠 추가

모듈 추가를 시작할 시간입니다! 첫 번째 열에 제목 텍스트 모듈을 추가하고 일부 H3 콘텐츠를 입력합니다.

H3 텍스트 설정

그런 다음 디자인 탭으로 이동하여 제목 텍스트 설정을 수정합니다.

• 제목 3 글꼴: Didact Gothic
• 제목 3 글꼴 두께: 굵게
• 제목 3 텍스트 정렬: 가운데
• 제목 3 텍스트 색상: #ee6f49
• 제목 3 텍스트 크기: 4vw(전화), 3vw(태블릿), 1.5vw(데스크톱)

열 1에 분배기 모듈 추가

시계

다음에 Divider 모듈을 추가합니다. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

색상

그런 다음 구분선의 색상을 변경합니다.

• 색상: #ffffff

사이징

크기 설정과 함께.

• 디바이더 무게: 4px
• 폭: 30%
• 모듈 정렬: 중앙

간격

모듈에 사용자 정의 상단 여백도 추가하십시오.

• 상단 마진: 4vw(전화), 2vw(태블릿), 1.5vw(전화)

열 1에 버튼 모듈 추가

사본 추가

첫 번째 열에 필요한 다음이자 마지막 모듈은 버튼 모듈입니다. 일부 사본을 입력하십시오.

조정

그런 다음 디자인 탭으로 이동하여 버튼 정렬을 변경합니다.

• 버튼 정렬: 중앙

버튼 설정

버튼 설정에서도 버튼의 모양을 수정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 3vw(전화), 2vw(태블릿), 1.5vw(데스크톱)
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #ee6f49
• 버튼 테두리 너비: 0px
• 버튼 글꼴: Didact Gothic
• 글꼴 두께: 굵게

2열에 이미지 모듈 추가

업로드 아이콘

2열에서 필요한 유일한 모듈은 이미지 모듈입니다. 원하는 이미지를 사용할 수 있지만 이 예에서 사용한 것과 똑같은 아이콘을 사용하려면 Furniture Store Layout Pack으로 이동하여 게시물 끝에서 다운로드할 수 있습니다.

조정

그런 다음 디자인 탭으로 이동하여 이미지 정렬을 변경합니다.

• 이미지 정렬: 중앙

복제 행 #2

행 수정이 완료되면 계속해서 복제할 수 있습니다.

행 배경색 변경

행 배경색부터 시작하여 이 복제본을 약간 변경해야 합니다.

• 배경색: #8ee5cf

열 2 배경색 제거

열 2 배경색을 제거하여 계속하십시오.

열 1 배경색 추가

대신 첫 번째 열에 배경색을 추가합니다.

• 열 1 배경색: #47e5bd

열의 모듈 변경

또한 모듈의 열을 전환하고 있습니다.

이미지 모듈에서 아이콘 변경

그런 다음 이미지 모듈에서 아이콘을 변경합니다.

이미지 모듈에 필터 추가

필터 설정에서 색조를 변경하여 새 행 및 열 배경색과 일치하도록 합니다.

• 색조: 65deg

행 정렬 변경

다음으로 행 정렬을 변경합니다.

• 행 정렬: 오른쪽

행 테두리 변경

둥근 모서리와 함께.

• 왼쪽 상단: 10px
• 왼쪽 하단: 10px

2열에서 텍스트 모듈의 텍스트 색상 변경

또한 2열의 텍스트 모듈에 다른 텍스트 색상을 사용하고 있습니다.

• 제목 3 텍스트 색상: #7b9710

버튼 배경색 변경

그리고 우리는 버튼 배경에 같은 색상을 사용하고 있습니다.

• 버튼 배경색: #7b9710

두 행 모두 복제

이제 행의 양면이 있으므로 필요한 만큼 두 쪽을 모두 복제하고 순서대로 배치할 수 있습니다.

중복 수정 #1

행 배경색 변경

첫 번째 복제본의 행 배경색을 변경하여 시작하겠습니다.

• 배경색: #ffc9cf

열 색상 변경

그런 다음 열 2 배경색도 수정합니다.

• 2열 배경색: #ffadb6

이미지 모듈에서 아이콘 변경

이미지 모듈의 아이콘을 원하는 다른 아이콘으로 변경합니다.

이미지 모듈에 필터 추가

그리고 필터 설정에서 색조를 변경하여 새 행 및 열 배경색과 일치하도록 합니다.

• 색조: 309deg

텍스트 색상 변경

텍스트 색상도 변경합니다.

• 제목 3 텍스트 색상: #f862b0

버튼 배경색 변경

그리고 우리는 버튼 배경에 같은 색상을 사용하고 있습니다.

• 버튼 배경색: #f862b0

중복 수정 #2

행 배경색 변경

다음과 마지막 복제에! 행 배경색을 변경합니다.

• 배경색: #b2c4ff

열 색상 변경

열 1 배경색에 대해서도 동일한 작업을 수행합니다.

• 열 1 배경색: #9eb4ff

이미지 모듈에서 아이콘 변경

그런 다음 사용 중인 아이콘을 변경합니다.

이미지 모듈에 필터 추가

이미지 모듈의 필터 설정에서 색조와 함께.

• 색조: 221deg

텍스트 색상 변경

다음으로 이미지 모듈의 텍스트 색상을 수정합니다.

• 제목 3 텍스트 색상: #6287f9

버튼 배경색 변경

버튼 배경에 동일한 색상을 사용합니다.

• 버튼 배경색: #6287f9

시사

모든 단계를 거쳤으므로 이제 최종 결과를 살펴보겠습니다.

이동하는

데스크탑

마지막 생각들

방문자의 주요 소스가 모바일 장치인 경우 특정 화면 크기에 맞게 모든 것을 최적화하는 것이 중요합니다. Divi를 사용하면 모든 것이 즉시 반응합니다. 그러나 반응이 좋다고 해서 특정 화면 크기에도 최적화된 것은 아닙니다. 모바일 디자인에 접근하는 또 다른 방법은 모바일 우선 관점에서 디자인을 시작하는 것입니다. 이 게시물에서는 이를 수행하는 방법에 대한 몇 가지 팁과 요령을 공유했습니다. 그 후에 우리는 이러한 규칙을 준수하고 놀라운 결과를 만들 수 있는 예제를 다시 만들었습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!