Divi에서 사이드바를 제거하는 방법
게시 됨: 2021-08-04Divi Builder를 사용할 때 Divi의 기본 페이지 템플릿에서 사이드바를 쉽게 제거할 수 있습니다. 그러나 Divi의 기본 페이지 템플릿(사이드바 포함)은 여전히 404 및 아카이브와 같은 페이지에 표시되므로 템플릿에서 사이드바를 모두 제거할 수 있습니다.
Divi의 기본 오른쪽 사이드바 레이아웃을 재정의하는 가장 확실한 방법은 Divi Builder를 사용하여 페이지 또는 게시물을 디자인하는 것입니다. 그러나 페이지나 게시물에 Divi Builder를 사용하지 않으려는 경우 사이드바를 제거하는 두 가지 주요 방법이 있습니다. 첫 번째는 개별 페이지나 게시물을 수정할 때 페이지 단위로 페이지 레이아웃을 변경하는 것입니다. 두 번째는 Divi 테마 빌더에서 사용자 정의 템플릿을 구축하여 기본 페이지 또는 게시물 템플릿을 재정의하는 것입니다.
오늘 저는 Divi의 기본 템플릿에서 사이드바를 제거하고 Divi Builder로 템플릿을 재정의하는 다양한 방법을 보여 드리겠습니다. 일관되게 디자인된 전폭 웹사이트를 만드는 데 필요한 도구를 갖추게 되기를 바랍니다.
시작하자!
Divi 페이지 설정을 사용하여 페이지에서 사이드바 제거하기
개별 게시물 또는 페이지의 기본 오른쪽 사이드바 레이아웃 변경
Divi Builder를 사용하지 않는 페이지 또는 게시물의 경우 기본 페이지 레이아웃에는 다음과 같은 오른쪽 사이드바가 포함됩니다.
해당 페이지 또는 게시물에 Divi Builder를 사용하지 않고 단순히 페이지별로 사이드바를 제거하려면 페이지를 편집할 때 사이드바에서 Divi 페이지 설정 상자를 찾아 전체 너비 (또는 아니요 사이드바 ) 페이지 레이아웃.
특정 게시물이나 페이지의 사이드바가 제거됩니다.
Divi 테마 옵션을 사용하여 WooCommerce Shop 페이지, 카테고리 페이지 및 제품 페이지에서 사이드바 제거
WooCommerce가 설치된 경우 Divi 테마 옵션 내에서 몇 가지 옵션을 찾아 WC Shop, 카테고리 및 제품 페이지의 페이지 레이아웃을 변경할 수 있습니다.
WC Shop 및 카테고리 페이지에서 사이드바를 제거하려면 Divi > 테마 옵션으로 이동하십시오. 일반 탭에서 "WooCommerce용 쇼핑 페이지 및 카테고리 페이지 레이아웃" 옵션을 찾아 레이아웃을 "사이드바 없음" 또는 "전체 너비"로 변경합니다.
제품 페이지의 사이드바를 제거하려면 Divi > 테마 옵션으로 이동합니다. 빌더 탭을 선택합니다. 게시물 유형 통합 아래의 드롭다운에서 "사이드바 없음" 제품 레이아웃을 선택합니다.
테마 빌더를 사용하여 사용자 정의 템플릿을 빌드하여 사이드바 제거
Divi 페이지 설정으로 각 페이지/게시물에 대한 사이드바를 제거하는 것은 새 게시물과 페이지를 개별적으로 생성할 때 좋은 솔루션입니다. 그러나 이것은 특히 모든 페이지에서 사이드바를 제거하기로 결정한 경우 상당히 번거로울 수 있습니다. 또한 기본 템플릿(사이드바 포함)은 여전히 404 및 아카이브와 같은 페이지에 표시됩니다. 따라서 페이지 또는 게시물 템플릿에서 사이드바를 모두 제거하고 싶을 수 있습니다. 이를 위해 Divi 테마 빌더를 사용하여 사용자 정의 템플릿을 만들 수 있습니다. 이렇게 하면 사이드바에 전 세계적으로 숨길 페이지를 완전히 제어할 수 있습니다.
Divi의 테마 빌더는 원하는 모든 페이지 또는 게시물에 적용할 글로벌 템플릿을 디자인하기 위한 강력한 도구입니다. 템플릿에 대한 새 본문 레이아웃을 만들 때마다 해당 템플릿은 Divi의 기본 페이지 레이아웃(사이드바 포함)을 재정의합니다. 따라서 템플릿 수준에서 사이드바를 제거하기 위해 해야 할 일은 Divi 테마 빌더에서 새 템플릿을 만들고 선택한 페이지 또는 게시물에 할당하는 것입니다.
Divi Builder를 사용하여 전각 블로그 게시물 템플릿 만들기
블로그 게시물은 사이드바가 없는 사이트 전체 템플릿이 필요할 수 있는 좋은 예입니다. Divi의 내장 동적 콘텐츠 옵션을 사용하면 Divi Builder 및 동적 콘텐츠를 사용하여 사이트 전체의 모든 블로그 게시물에 적용될 블로그 게시물 템플릿을 디자인할 수 있습니다. 완료되면 모든 향후 게시물에 대한 실제 본문 내용을 업데이트하기만 하면 됩니다. 새 게시물 콘텐츠는 사용자 지정 템플릿의 디자인을 상속합니다!
다음은 이 작업을 수행하는 방법에 대한 간단한 예입니다.
먼저 새 템플릿을 만들고 템플릿을 모든 게시물에 할당합니다.
그런 다음 템플릿에 사용자 정의 본문을 추가합니다. 
템플릿 레이아웃 편집기를 사용하여 Divi의 내장 동적 콘텐츠 모듈 및 옵션과 결합된 Divi Builder를 사용하여 전체 레이아웃을 디자인하십시오.
예를 들어 게시물 제목 모듈을 사용하여 게시물 제목을 동적으로 표시할 수 있습니다. 또는 게시물 제목을 동적 콘텐츠로 텍스트 모듈의 본문에 가져와서 H1 태그로 래핑할 수 있습니다.
이미지 모듈을 사용하여 추천 이미지를 동적 콘텐츠로 가져올 수 있습니다.
또는 게시물 작성자, 게시물 작성자 약력, 게시물 카테고리, 게시물 게시 날짜 및 댓글 수와 같은 동적 콘텐츠로 특정 메타데이터를 가져오는 일련의 블러브 모듈을 사용합니다.
가장 중요한 것은 템플릿에 대한 사용자 정의 본문 레이아웃을 구축할 때 Post Content 모듈을 포함해야 한다는 것입니다. 게시물 콘텐츠 모듈에는 템플릿의 본문 영역 내에 표시될 페이지 또는 게시물 콘텐츠에 대한 영역이 포함됩니다.
템플릿이 생성되면 기본 WordPress 게시물 편집기를 사용하여 새 블로그 게시물을 쉽게 만들고 해당 블로그 게시물이 Divi 테마 빌더를 사용하여 만든 블로그 게시물 템플릿의 디자인을 상속하도록 할 수 있습니다.
자세한 내용은 Divi의 테마 빌더로 블로그 게시물 템플릿을 디자인하는 방법에 대한 게시물을 확인하세요.
Divi Builder를 사용하여 전체 너비 WooCommerce 제품 페이지 템플릿 만들기
제품 페이지의 기본 사이드바를 제거하려면 모든 블로그 게시물에 대한 멋진 전체 너비 레이아웃 템플릿을 만들 수도 있습니다. 블로그 게시물 템플릿으로 수행한 것과 유사하게 Divi의 내장 WooCommerce(또는 Woo) 모듈을 사용하여 사이드바가 없는 맞춤형 사이트 전체 제품 페이지 템플릿을 구축할 수도 있습니다.
이렇게 하려면 새 템플릿을 만들고 템플릿을 "모든 제품"에 할당하기만 하면 됩니다.
그런 다음 템플릿에 사용자 정의 본문을 추가하고 클릭하여 템플릿 편집기를 사용하여 본문 레이아웃을 빌드합니다.
그런 다음 Divi Builder를 사용하여 동적 Woo 모듈을 포함하여 제품 페이지 템플릿을 디자인합니다.
이제 표준 제품 페이지 편집기를 사용하여 백엔드에서 새 제품을 생성하면 제품이 할당된 본문 템플릿의 디자인을 자동으로 상속합니다.
자세한 내용은 사이트 전체의 woo 제품 페이지 템플릿을 만드는 방법에 대한 게시물을 확인하세요.
Divi Builder를 사용하여 전체 너비 아카이브 페이지 템플릿 만들기
또한 Theme Builder를 사용하면 사이드바 없이 아카이브 페이지 템플릿을 쉽게 디자인할 수 있습니다. 카테고리 페이지용 템플릿을 만드는 핵심은 새 템플릿을 만들고 Divi Builder에서 사용할 수 있는 많은 아카이브 템플릿 중 하나에 할당하는 것입니다. 예를 들어 사이트 전체의 모든 아카이브 페이지에 할당하거나 카테고리 페이지 템플릿에 할당하여 카테고리 내 게시물 아카이브를 표시하는 페이지에만 표시되도록 할 수 있습니다.
아카이브 템플릿에 대한 동적 콘텐츠의 첫 번째 필수 요소에는 게시물/아카이브 제목이 포함되어야 합니다.
동적 콘텐츠의 두 번째 필수 요소는 표시할 게시물의 실제 아카이브입니다. 이렇게 하려면 블로그 모듈을 추가하고 현재 페이지의 게시물을 표시하는 옵션을 선택합니다.
전체 과정을 보려면 Divi 테마 빌더를 사용하여 블로그의 카테고리 페이지 템플릿을 구축하는 방법에 대한 게시물을 확인하세요.
Divi Builder를 사용하여 전체 너비 404 페이지 템플릿 만들기
또한 Theme Builder를 사용하면 기본 사이드바 없이 Divi 웹사이트용 404 페이지 템플릿을 쉽게 디자인할 수 있습니다. 404 페이지는 반드시 동적 콘텐츠에 의존하지 않으므로 Divi Builder를 사용하여 원하는 모든 것을 자유롭게 디자인할 수 있습니다.
전체 과정을 보려면 Divi 테마 빌더를 사용하여 404 페이지 템플릿을 만드는 방법에 대한 게시물을 확인하세요.
Divi Builder를 사용하여 전체 너비 검색 페이지 템플릿 만들기
또한 Theme Builder를 사용하면 기본 사이드바 없이 Divi 웹사이트의 검색 결과 페이지 템플릿을 쉽게 디자인할 수 있습니다. 카테고리 페이지 템플릿과 마찬가지로 검색 결과용 템플릿을 만드는 핵심은 사용자 정의 본문 영역을 만들고 다음을 포함하는 것입니다.
1: 동적 콘텐츠로서의 게시물/아카이브 제목
2: 현재 페이지에 대한 게시물을 표시하는 블로그 모듈.
3: 사용자가 필요에 따라 검색을 계속할 수 있도록 하는 검색 모듈.
전체 과정을 보려면 Divi 테마 빌더를 사용하여 웹사이트에 대한 검색 결과 페이지 템플릿을 구축하는 방법에 대한 게시물을 확인하세요.
특별한 이유가 없는 한 모든 페이지에 대한 전체 너비 본문 템플릿을 만들지 마십시오
모든 페이지에 대한 전체 너비 본문 레이아웃으로 사용자 정의 템플릿을 만드는 것은 처음에는 좋은 생각처럼 보일 수 있습니다. 그러나 예상대로 작동하지 않을 수 있습니다. 예를 들어 페이지에 Divi Builder를 사용할 수 있는 영역을 제한하거나 Divi Builder를 사용하지 않는 페이지에 대해 너무 넓은 본문 영역을 만들 수 있습니다. 그렇기 때문에 Divi Builder를 사용하지 않을 페이지에 대해서만 페이지 템플릿을 만드는 것이 좋습니다.
자세한 내용은 전역 본문 템플릿 작성에 대한 문서를 확인하세요.
사용자 정의 CSS로 기본 사이드바 꺼내기
Divi Builder를 사용하지 않고 Divi의 기본 테마 페이지 레이아웃을 사용하거나 개별 페이지 설정이나 테마 빌더 템플릿을 사용하여 재정의할 필요 없이 사이트 전체에서 사이드바를 제거하려는 경우 좋은 구식 CSS를 사용할 수 있습니다. .
Divi > 테마 옵션으로 이동합니다. 일반 탭에서 페이지 하단의 사용자 정의 CSS 상자에 다음 코드를 붙여넣습니다.
/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
/*** Hide Sidebar ***/
#sidebar {display:none;}
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
width: 100%;
padding: 23px 0px 0px !important;
float: none !important;
}
}
마지막 생각들
웹 사이트를 구축할 때 모든 페이지가 동일한 일관된 레이아웃과 디자인을 유지하는 것이 중요합니다. 따라서 Divi Builder를 사용하여 전체 너비 레이아웃으로 사이트를 구축하는 경우 기본적으로 모든 페이지에 대해 이 레이아웃을 유지하는 것이 좋습니다. 이것은 사용자 경험을 향상시킬 수 있습니다. 이제 사이드바 디스플레이를 원하는 대로 사용자 정의할 수 있습니다.
귀하의 사이트와 향후 프로젝트에 이 정보가 유용하기를 바랍니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!