Divi 테마 빌더를 사용하여 모바일에서 사이드바를 최적화하는 방법

어떤 경우에는 모바일에서 사이드바를 유지하는 것이 약간 과도할 수 있습니다. 사용자는 태블릿과 휴대폰에서 관련 정보를 스크롤하여 만족합니다. 그러나 페이지의 주요 콘텐츠 뒤에 상당한 양의 사이드바 콘텐츠가 있는 경우 사용자는 일반적으로 몇 가지 중요한 클릭 유도문안으로 구성된 바닥글에 도달하지 못할 수 있습니다. 그렇기 때문에 모바일에서 사이드바를 최적화하는 것이 중요합니다.

이 튜토리얼에서는 Divi Theme Builder를 사용하여 모바일 디스플레이에서 사이드바를 최적화하는 방법을 살펴보겠습니다. 이 기사에서 다룰 내용은 다음과 같습니다.

• 사이드바가 있는 템플릿을 만드는 방법
• Divi 모듈 및 WordPress 위젯을 사용하여 사이드바 콘텐츠 만들기
• 여러 위젯 영역을 사용하여 모바일에서 특정 위젯 숨기기/표시
• 모바일에서 사이드바 콘텐츠 사이의 간격 제어
• 모바일에서 사이드바 콘텐츠를 완전히 숨기기
• 모바일에서 일부 사이드바 콘텐츠 숨기기
• 모바일에서 콘텐츠를 최소화하기 위해 모듈 내에 요소 숨기기
• 텍스트 크기와 간격을 조정하여 반응형 사이드바 콘텐츠 만들기
• 모바일에서 사이드바의 스태킹 순서를 변경하는 방법

시작하자.

엿보기

다음은 데스크톱의 사이드바 레이아웃과 모바일 디스플레이에 최적화된 방법에 대한 간략한 설명입니다.

모바일에 최적화된 사이드바가 있는 무료 템플릿 다운로드

이 튜토리얼의 템플릿을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. 당신은 iresubscribedi하거나 추가 이메일을받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

YouTube 채널 구독

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

튜토리얼로 가볼까요?

시작하는 데 필요한 것

시작하려면 Divi 테마를 설치하고 활성화해야 합니다. 최신 버전의 Divi가 있는지 확인하십시오.

또한 페이지 콘텐츠가 실제로 결과를 표시하려면 테스트 목적으로 생성된 일부 게시물/페이지가 필요합니다.

그 후, 당신은 갈 준비가되었습니다.

모바일에서 Divi 템플릿의 사이드바를 최적화하는 방법

모바일에서 사이드바 최적화를 시작하기 전에 먼저 작동하는 모델을 설정하고 실행해야 합니다. Divi Theme Builder를 사용하여 페이지 템플릿에 사이드바를 만들 것입니다. 이를 통해 모바일에서 사이드바를 최적화하는 방법을 더 잘 이해할 수 있도록 Divi에서 사이드바 구축과 관련된 내용을 더 잘 이해할 수 있습니다.

사이드바로 템플릿 만들기

Divi 테마 빌더 팩 #3 가져오기

일을 시작하기 위해 Divi 테마 빌더 팩 #3을 사용하여 사이트 디자인을 빠르게 시작할 것입니다. 그런 다음 템플릿 중 하나를 사용하여 모바일에 최적화할 사이드바를 추가합니다.

팩을 다운로드한 후 폴더의 압축을 풉니다.

WordPress 대시보드에서 Divi > 테마 빌더로 이동합니다. 그런 다음 페이지의 오른쪽 상단 메뉴에서 이식성 아이콘을 클릭합니다. 이식성 모달에서 가져오기 탭을 선택하고 이전에 다운로드한 폴더에서 divi-theme-builder-pack-3-all.json 파일을 선택합니다. 그런 다음 가져오기 버튼을 클릭합니다.

중요: 웹사이트의 라이브 콘텐츠를 무시하거나 무언가를 중단하지 않도록 Divi를 새로 설치한 테스트 사이트를 사용하십시오.

모든 템플릿이 테마 빌더로 가져온 것을 볼 수 있습니다.

카테고리 페이지 템플릿 내부에 사이드바 레이아웃 만들기

모든 카테고리 페이지 템플릿을 찾아 클릭하여 사용자 정의 본문 레이아웃을 편집하십시오.

페이지의 현재 레이아웃은 페이지의 기본 콘텐츠 영역에 대해 한 열 행을 사용합니다. 이것을 사이드바 레이아웃 구조로 변경해야 합니다. 이렇게 하려면 두 번째 행의 행 메뉴에서 "레이아웃 선택" 아이콘을 클릭하고 2/3의 1/3 열 레이아웃 구조를 선택합니다.

이제 사이드바의 오른쪽에 영역이 생깁니다.

주의 사항: 이 사이드바 레이아웃에는 특수 섹션을 사용하지 않습니다. 페이지의 사이드바 레이아웃을 생성할 때 특수 섹션은 필요하지 않지만 기본 콘텐츠 영역에 대해 별도의 행 기능을 유지하려면 특수 섹션을 사용하는 것이 좋습니다.

우리는 이 튜토리얼에서 모듈의 정확한 디자인을 재창조하는 데 너무 많은 집중을 하지 않을 것입니다. 대신 모바일에서 사이드바를 최적화하는 데 도움이 되는 요소에 집중할 것입니다.

즉, 사이드바 열에 배경색과 패딩을 추가해야 합니다.

사이드바 열 설정

사이드바에 지정된 열에 대한 설정을 열고 다음을 업데이트합니다.

• 배경색: #f2f5f9
• 패딩: 상단 25픽셀, 하단 25픽셀, 왼쪽 25픽셀, 오른쪽 25픽셀

Divi 모듈 및 WordPress 위젯으로 사이드바 콘텐츠 만들기

사이드바 콘텐츠는 웹사이트의 필요에 따라 달라집니다. 그러나 블로그 사이트에 대해 이야기하는 경우 일반적으로 다음 사이드바 콘텐츠 요소의 조합을 찾을 수 있습니다.

• 작성자 정보(이름, 사진, 약력)
• 소셜 미디어 팔로우 버튼
• 이메일 수신 동의
• 제품 및/또는 서비스에 대한 링크
• 광고
• 카테고리
• 최근/인기 게시물

Divi에서 이러한 요소를 만드는 것은 Divi 모듈의 조합을 사용하여 수행할 수 있습니다. 이 예에서는 사이드바 콘텐츠를 빌드하기 위해 다음 Divi 모듈을 추가합니다.

1. 검색 모듈 - 검색 양식으로 사용됩니다.
2. 이메일 옵틴 모듈 – 이메일 옵틴 양식으로 사용됩니다.
3. 텍스트 모듈 – 소셜 미디어 팔로우 버튼의 제목이 됩니다.
4. 소셜 미디어 팔로우 모듈 – 소셜 미디어 팔로우 버튼을 보여줍니다.
5. 텍스트 모듈(bg 이미지 포함) – 사이드바의 예시 광고로 사용됩니다.
6. Blurb 모듈(저자 콘텐츠 포함) – 사이드바의 저자 정보 영역으로 사용됩니다.
7. 텍스트 모듈 – 아래에 있는 블로그 모듈의 제목으로 사용됩니다.
8. 블로그 모듈 – 사이드바에서 최근/추천 게시물 콘텐츠로 사용됩니다.

사이드바 모듈을 사용하여 WordPress 위젯 가져오기

아직 익숙하지 않다면 Divi에는 위젯 영역 콘텐츠(또는 위젯)를 Divi 사이드바 영역으로 가져올 수 있는 사이드바 모듈이 있습니다. 사실, 이 템플릿은 우리가 작업하고 있는 바로 아래 행에 있는 사이드바 위젯을 이미 사용하고 있습니다.

행에서 사이드바 모듈을 끌어 이메일 선택 모듈 바로 아래에 배치합니다.

그런 다음 사이드바 모듈 설정을 엽니다. WordPress에 기본 설정이 있는 경우 모듈이 사이드바 위젯 영역을 끌어오는 것을 볼 수 있습니다. 이 영역은 다음과 같아야 합니다.

여러 위젯 영역 사용

현재 "사이드바" 위젯 영역은 사이드바 위젯 영역 내부에 여러 위젯이 있기 때문에 여러 위젯을 표시합니다. 그러나 실제로 단일 위젯이 포함된 여러 위젯 영역을 사용하여 Divi의 사이드바 디자인을 더 많이 제어할 수 있습니다. 여러 위젯 영역을 사용하면 위젯 디자인과 모바일 위젯의 가시성을 더 잘 제어할 수 있습니다.

여러 위젯을 만들려면 새 탭을 열고 WordPress 대시보드로 이동하세요. 모양 > 위젯으로 이동합니다.

이름을 입력하고 만들기 버튼을 클릭하여 새 위젯 영역을 만듭니다. 이 위젯 영역은 범주 위젯을 추가하는 곳이므로 영역 이름을 "Categories"로 지정하겠습니다. 위젯 영역을 보려면 페이지를 새로고침하세요. 그런 다음 카테고리 위젯을 카테고리 위젯 영역으로 드래그하십시오.

프로세스를 반복하여 "Archives"라는 새 위젯 영역을 만듭니다. 그런 다음 아카이브 위젯을 아카이브 위젯 영역으로 드래그하십시오.

사이드바 레이아웃이 있는 카테고리 페이지 템플릿으로 돌아가서 사이드바 모듈 콘텐츠를 업데이트하여 카테고리 위젯 영역을 표시하십시오.

사이드바 모듈 복제(디자인 유지)

아카이브 위젯 영역을 가져오도록 복제 사이드바 모듈을 업데이트합니다.

사이드바 모듈 사이의 간격 제어하기

현재 사이드바가 포함된 행의 거터 너비 값은 2입니다. 이는 사이드바 내부의 각 모듈 사이에 기본 하단 여백/간격이 있음을 의미합니다. 이 간격을 더 잘 제어하기 위해 사이드바 열에서 모든 모듈의 하단 여백을 삭제할 수 있습니다. 이렇게 하려면 검색 모듈 설정을 열고 다음을 업데이트하십시오.

• 여백 하단: 0px(데스크톱), 15px(태블릿)

그런 다음 여백 옵션에서 추가 설정 아이콘(또는 오른쪽 클릭 메뉴)을 클릭합니다. 그런 다음 "여백 확장"을 선택합니다.

스타일 확장 모듈에서 옵션을 업데이트하여 "이 열"의 "모든 모듈"로 여백을 확장합니다.

그런 다음 분할기 모듈을 사용하여 모듈 사이에 간격을 추가할 수 있습니다.

모바일에서 사이드바 최적화하기

모바일에서 사이드바 숨기기

때로는 모바일에서 사이드바를 완전히 숨기고 싶을 수도 있습니다. 이렇게 하려면 태블릿 및 휴대폰에서 사이드바가 포함된 열의 가시성을 비활성화해야 합니다.

행 설정을 열고 사이드바에 지정된 열의 설정을 엽니다. 그런 다음 다음과 같이 가시성을 업데이트합니다.

• 비활성화 켜기: 태블릿, 전화

이렇게 하면 태블릿 및 모바일 디스플레이에서 전체 사이드바가 숨겨집니다.

모바일에서 사이드바 콘텐츠 일부 숨기기

데스크탑에서는 콘텐츠에서 너무 많은 주의를 산만하게 하지 않으면서 사이드바 콘텐츠의 대부분(또는 전체)을 보관할 수 있는 공간이 있을 수 있습니다. 그러나 모바일에서 사용자는 관심이 거의 없는 많은 사이드바 콘텐츠를 스크롤해야 합니다. 따라서 Divi 테마 빌더에서 사이드바를 구축할 때 가시성 옵션을 활용하여 모바일 디스플레이에서 일부 사이드바 요소를 비활성화하십시오. 그리고 사이드바 콘텐츠에 WordPress 위젯을 사용하는 경우 모바일에서도 특정 위젯을 디자인하고 숨길 수 있도록 여러 위젯 영역을 만듭니다.

모바일에서 모듈을 숨기려면 와이어프레임 보기 모듈을 연 다음 Divi의 다중 선택 기능을 사용하여 태블릿과 휴대폰에서 숨기거나 비활성화하려는 모든 모듈을 선택합니다. 그런 다음 선택한 모듈 중 하나에 대한 설정을 열고 다음을 업데이트합니다.

• 비활성화 켜기: 전화, 태블릿

이 그림에서는 두 개의 사이드바 모듈(카테고리 및 아카이브 위젯 포함)과 텍스트 모듈(광고 포함)을 제외한 모든 모듈(디바이더 포함)을 태블릿 및 휴대폰 디스플레이에서 숨겼습니다. 다시 말해 카테고리, 아카이브, 광고만 모바일에 표시됩니다.

블로그 페이지에서 결과 미리보기

라이브 페이지에서 결과를 보기 전에 먼저 사이트의 블로그 페이지에 할당해 보겠습니다. 이렇게 하려면 템플릿 위의 톱니바퀴 아이콘을 클릭하고 목록에서 블로그를 선택한 다음 저장합니다.

모양 > 읽기에서 게시물 페이지가 선택되어 있는지 확인하십시오.

결과

데스크톱 사이드바와 모바일 사이드바의 차이점은 다음과 같습니다. 모바일 사이드바에 강의 콘텐츠가 어떻게 포함되어 있는지 확인하십시오.

모바일에서 중복되는 사이드바 및 바닥글 콘텐츠 방지

데스크톱에서는 사이드바와 바닥글에 중복 콘텐츠를 추가하는 일을 피할 수 있습니다. 사실 이것은 전환율을 높이는 좋은 방법입니다. 예를 들어 데스크탑에서는 사이드바 상단 과 바닥글 내부에 이메일 수신 선택 모듈을 포함하여 사용자가 게시물의 내용과 게시물 끝을 읽는 동안 이메일 수신 선택을 볼 수 있도록 하는 것이 좋습니다. 그러나 모바일에는 사이드바 레이아웃이 없습니다. 모든 것이 하나의 열(두 개)에 표시됩니다. 오른쪽 사이드바는 게시물/페이지 콘텐츠 아래에 쌓이고 왼쪽 사이드바는 게시물/페이지 콘텐츠 위에 쌓입니다. 따라서 사이드바 이메일 선택 모듈이 게시물/페이지 콘텐츠 아래에 쌓이면 사용자는 둘 이상의 이메일 선택 모듈(사이드바에 하나, 바닥글에 하나)을 스크롤할 수 있습니다. 또한 오른쪽 사이드바 하단에 이메일 옵션이 있고 바닥글 상단에 하나가 있는 경우 사용자는 모바일에서 두 개의 연속 이메일 옵션을 스크롤합니다.

모바일에서 콘텐츠를 최소화하기 위해 모듈 내에 요소 숨기기

모바일에서 전체 모듈을 숨길 필요가 없다고 결정할 수도 있습니다. 대신 모바일 디스플레이에서만 특정 요소를 숨겨 모듈 콘텐츠를 최소화할 수 있습니다.

예를 들어 데스크톱 사이드바에 추천 이미지와 추천 게시물의 발췌문을 표시할 수 있습니다. 그러나 모바일에서는 추천 이미지와 발췌 부분을 숨겨 콘텐츠의 최소화된 버전을 만들 수 있습니다.

반응형 사이드바 콘텐츠 만들기

모든 사이드바 콘텐츠를 모바일 디스플레이에 유지하기로 결정할 수 있습니다. 왜 안 돼? 사용자가 높이 평가할 가치 있는 정보가 있다면 반드시 보관하십시오. 그러나 사이드바 콘텐츠가 반응하는지 확인하기 위한 조치를 취하고 싶을 것입니다. 즉, 더 작은 화면에 맞게 요소의 크기와 간격을 조정해야 합니다. 이렇게 하면 페이지의 스크롤 거리가 줄어들고 콘텐츠를 더 쉽게 읽을 수 있습니다.

모바일에서 텍스트 크기 조정

세로 간격을 최소화하고 모바일에서 가독성을 높이는 한 가지 쉬운 방법은 사이드바에서 모듈 콘텐츠의 텍스트 크기를 조정하는 것입니다. 예를 들어, 제목 텍스트를 데스크톱의 24픽셀에서 모바일의 14픽셀로 조정할 수 있습니다.

모바일에서 간격/분할 조정

이 예에서는 공간을 만들기 위해 모듈 사이에 구분선을 추가했습니다. 그러나 Divi의 Divider 설정을 사용하여 모바일에서 해당 구분선의 간격을 조정할 수 있습니다. 이렇게 하면 스크롤할 때 낭비되는 공간이 줄어듭니다.

예를 들어 태블릿과 휴대폰에서 Divider의 위쪽 및 아래쪽 여백을 30px에서 15px로 변경할 수 있습니다.

모바일에서 사이드바의 스태킹 순서 변경

스태킹 순서는 사이드바의 일반적인 문제입니다. 이것은 특히 왼쪽 사이드바에 해당됩니다. 앞에서 언급했듯이 오른쪽 사이드바는 게시물/페이지 콘텐츠 아래(또는 이후)에 쌓이고 왼쪽 사이드바는 게시물/페이지 콘텐츠 위(또는 앞)에 쌓입니다. 즉, 모바일에서 왼쪽 사이드바가 있는 페이지를 볼 때 사용자가 가장 먼저 보게 되는 것은 게시물/페이지의 기본 콘텐츠 대신 사이드바 콘텐츠입니다. 이것은 UX에 좋지 않습니다. 이 문제를 해결하려면 사이드바를 완전히 숨기거나 왼쪽 사이드바가 모바일의 게시물/페이지 콘텐츠 아래로 오도록 스택 순서를 변경할 수 있습니다.

모바일에서 페이지 콘텐츠 아래(또는 뒤에) 쌓이도록 왼쪽 사이드바의 스택 순서를 변경하려면 사이드바 레이아웃이 포함된 행의 행 설정을 엽니다. 그런 다음 기본 요소에 다음 사용자 정의 CSS를 추가합니다.

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

그런 다음 사이드바로 지정된 열의 열 설정을 열고 다음 사용자 정의 CSS를 기본 요소 태블릿 디스플레이에 추가합니다.

order: 2;

추측하지 못했다면 이 작은 조각은 순서를 기본값("1")에서 "2" 값으로 변경하여 전체 열/사이드바가 기본 콘텐츠가 포함된 열 아래/뒤에 쌓이도록 합니다.

마지막 생각들

사이드바는 사용자가 페이지의 주요 콘텐츠에 참여할 때 유용한 보조 콘텐츠를 제공하는 친숙한 공간입니다. 그러나 모바일에서 동일한 사이드바 콘텐츠가 주의를 산만하게 할 수 있습니다. 이 게시물을 통해 사이드바가 태블릿과 휴대폰에서 마땅히 받아야 할 관심을 끌 수 있기를 바랍니다. 즉, 사이드바를 완전히 숨기거나, 사이드바 콘텐츠 중 일부만 표시하거나, 모바일 디스플레이용으로 기존 콘텐츠를 간단하게 최적화할 수 있습니다.

이 튜토리얼에서 템플릿용으로 빌드된 사이드바는 테마 빌더 레이아웃 팩 #3에 있는 기존 디자인 요소를 사용하여 디자인되었습니다. 사이드바가 있는 이 템플릿의 디자인이 마음에 들면 위에서 다운로드하여 자세히 살펴보십시오.

자세한 내용은 Divi 테마 빌더에서 사이드바 사용에 대한 이 가이드를 확인하세요.

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

건배!