다크 모드는 사용자가 눈에 부담을주지 않고 웹을 경험할 수있는 편리한 옵션으로 계속 인기를 얻고 있습니다. 현실을 직시하자면, 우리 모두는 예상보다 화면을 응시하는 데 더 많은 시간을 보내는 경향이 있으므로 사용자 경험에 추가 된 편의성 (예 : 다크 모드)은 먼 길을 갈 수 있습니다.
운영 체제, 프로그램 및 브라우저에는 일반적으로 내장된 다크 모드 기능이 포함되어 있지만 일부 개발자는 사용자 지정 다크 모드 경험을 포함하여 다른 수준으로 끌어 올립니다. 사이트 웹. 아이디어는 그들의 외모를 더 잘 통제하는 것입니다. 사이트 웹 브랜드 및/또는 디자인을 타협하지 않고 어두운 모드에서.
이 튜토리얼에서는 플러그인없이 처음부터 Divi에서 커스텀 다크 모드 토글을 만드는 방법을 보여줍니다. 이 다크 모드 토글 기능을 사용하면 다크 모드 디자인을 제어하고 브랜드에 맞는 더 나은 사용자 경험을 얻을 수 있습니다.
시작하자!
측량
다음은이 튜토리얼에서 빌드 할 디자인의 미리보기입니다.
다음은 우리가 만들 맞춤형 어두운 모드 토글입니다.
여기에 사전 정의 된 레이아웃 중 하나에 적용된 다크 모드의 전후가 있습니다.
그리고 여기에 글로벌 헤더에 추가 된 다크 모드 토글이 있습니다. 사이트를 탐색 할 때 밝음 / 어두움 모드가 어떻게 유지되는지 확인하십시오.
1 부 : 어두운 모드에서 스위치 빌드
튜토리얼의 첫 번째 부분에서는 Divi의 페이지를 사용하여 어두운 모드 토글을 구축합니다. 코드로 토글이 생성되면 이를 Divi 라이브러리에 저장하고 라이브러리 어디에나 추가할 수 있습니다. 사이트 웹.
시작하려면 프런트 엔드에 Divi를 사용하여 처음부터 빌드 할 때 기본 섹션에 한 열 행을 추가합니다.
요약 모듈 추가
커스텀 토글을 만들기 위해 약간의 커스텀 CSS로 Blurb 모듈을 디자인 할 것입니다.
줄에 새 프리젠 테이션 텍스트 모듈을 추가하십시오.
내용
레티레즈 르 내용 제목과 본문에 대한 기본 더미입니다. 그런 다음 이미지 위치에 사각형 아이콘을 추가합니다.
임신
디자인 설정으로 이동하여 다음을 업데이트하십시오.
- 아이콘 색상 : # 666666
- 이미지 / 아이콘 정렬 : 왼쪽
- 아이콘 글꼴 크기 : 22 픽셀
- 너비 : 50px
- 모듈의 정렬 : 중심
- 높이 : 25px
- 여백 : 0px 낮음
- 둥근 모서리 : 4px
- 테두리 너비 : 2px
- 테두리 색상 : # 666666
맞춤 CSS
디자인이 제자리에 있으면 고급 탭으로 전환하십시오. Custom CSS에서 다음 사용자 지정 CSS를 기본 요소에 추가하여 둥근 모서리의 스타일로 인해 오버플로가 가려지지 않도록합니다.
오버플로 : 표시! 중요;
그런 다음 After 요소에 다음 사용자 지정 CSS를 추가합니다.
내용 : "빛"; 위치 : 절대; 왼쪽 : -35px; 위쪽 : 0px;
클릭하면 "라이트"에서 "어두운"로 변경되는 레이블이 Blurb 모듈에 추가됩니다.
본문 디자인
포스트 의사 요소 텍스트는 본문 텍스트 스타일을 상속하므로 다음과 같이 Divi 옵션을 사용하여 본문 텍스트 스타일을 추가 할 수 있습니다.
- 바디 폰트 : Roboto
- 본문 텍스트 색상 : # 666666
- 본문 텍스트 크기 : 13px
- 본문의 간격 : 1px
코드 모듈로 사용자 정의 코드 추가
다크 모드 토글을 작동하는 데 필요한 코드 (CSS / JQuery)를 추가하기 위해 코드 모듈을 사용합니다.
같은 열의 Blurb 모듈 아래에 새 코드 모듈을 만듭니다.
그런 다음 코드 영역에 다음 코드를 붙여 넣습니다.
/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});
사용자 정의 CSS 클래스 추가
사용자 지정 코드를 사용하려면 Blurb 모듈 또는 스위치에 사용자 지정 CSS 클래스를 추가해야합니다. 이렇게하면 블 러브가 다크 모드 토글 및 온 클릭 기능을 트리거 할 수 있습니다.
블 러브 모듈 클래스
Blurb 모듈 설정을 열고 다음과 같이 사용자 정의 CSS 클래스를 추가하십시오.
- CSS 클래스 : et-dark-toggle
어두운 모드가 가능한 클래스
또한 다크 모드 기능을 사용하려는 각 Divi 요소에 사용자 정의 CSS 클래스를 추가해야합니다. 요소에 CSS 클래스가 있으면 해당 요소는 다크 모드가 활성화 된 후 추가 한 코드에서 사용자 정의 "다크 모드"CSS를 상속합니다. 이 방법을 사용하면 일부 요소가 다크 모드에서 스타일링이 필요하지 않을 수 있으므로 다크 모드 디자인을 더 잘 제어 할 수 있습니다.
먼저 어두운 모드 토글이 포함 된 섹션에 어두운 모드를 추가 할 수 있습니다.
섹션 매개 변수를 열고 다음 CSS 클래스를 추가하십시오.
- CSS 클래스 : et-dark-mode-capable
2 부 : Divi 페이지에 어두운 모드 기능 추가
이제 CSS 코드와 클래스가 준비되었으므로 Divi의 전체 페이지에 다크 모드 기능과 디자인을 적용 할 준비가되었습니다. 이를 위해 모바일 앱 랜딩 페이지의 미리 만들어진 레이아웃을 사용합니다.
레이아웃을 추가하려면 비주얼 빌더 하단의 설정 메뉴를 열고 새 레이아웃 추가 아이콘을 클릭합니다.
그런 다음 사전 정의 된 레이아웃 탭에서 모바일 앱의 랜딩 페이지 레이아웃을 선택합니다.
"교체"옵션을 확인하십시오 내용 기존”이 선택되지 않았습니다. 어두운 모드 토글로 섹션을 지우고 싶지 않습니다.
다크 모드 스타일은 "capable and-dark-mode"CSS 클래스가있는 요소에만 적용되므로 다른 방식으로 페이지에 추가하도록 선택할 수 있습니다.
- CSS 클래스를 페이지의 각 요소에 개별적으로 추가 할 수 있습니다.
- CSS 클래스를 페이지 전체의 요소로 확장 할 수 있습니다 (수동으로 수행하는 것보다 빠릅니다). 예를 들어 상단 섹션의 섹션 설정을 열고 해당 섹션의 CSS 클래스를 페이지의 모든 섹션으로 확장 할 수 있습니다.
- CSS 클래스를 요소의 전역 기본값에 추가 할 수 있습니다. 이것은 CSS 클래스를 모든 사이트 전체 요소에 적용하여 사이트 전체에 다크 모드 기능을 추가합니다. 예를 들어 섹션 설정을 열고 전역 기본 아이콘을 클릭하여 전역 섹션 기본값을 변경할 수 있습니다. 그런 다음 CSS 클래스를 추가하고 사이트의 모든 섹션에 대해 CSS 클래스로 등록 할 수 있습니다.
페이지 요소에 CSS 클래스 추가
이 예에서는 CSS 클래스를 섹션 및 텍스트 모듈의 전역 기본값에 추가하여 페이지 요소를 업데이트합니다. 또한 진행하면서 다른 페이지 요소에 몇 가지 사항을 추가 할 것입니다.
모든 섹션
모든 섹션에 CSS 클래스를 추가하려면 다크 모드 토글이 포함 된 상단 섹션의 설정을 엽니 다. 그런 다음 섹션 전역 기본값을 변경하고 다음 CSS 클래스를 전역 기본값 섹션에 추가합니다.
- CSS 클래스 : et-dark-mode-capable
모든 전문 섹션
또한 전문화 된 섹션에서 CSS 클래스를 전역 기본값에 추가하십시오.
텍스트 모듈
그런 다음 페이지에서 텍스트 모듈 중 하나의 설정을 열고 동일한 CSS 클래스를 전역 텍스트 기본값에 추가합니다.
결과를 테스트하려면 라이브 페이지로 이동하여 페이지 상단의 어두운 모드 토글을 클릭하십시오.
클리어 모드에서 페이지 모양은 다음과 같습니다.
그리고 다음은 어두운 모드에서 페이지 모양입니다.
추가 자료
여기 다른 사람들이 있습니다 능숙 관심을 가질 수 있습니다.
- Divi에서 타이포그래피 및 레이아웃을 사용자 정의하는 방법
- Divi에서 재 폐쇄 가능한 슬라이딩 클릭 유도 문안을 추가하는 방법
- Divi에서 같은 줄의 요소를 정렬하는 방법
- Divi Builder를 클릭하여 애니메이션 섹션을 만드는 법
마지막 생각
Divi 사이트에 커스텀 다크 모드 토글을 장착하면 사용자 경험을 향상시키고 눈을 즐겁게하고 편안하게하는 완전히 새로운 디자인을 만들 수 있습니다. 도움이 되셨기를 바랍니다.
