주요 내용으로 건너 뛰기

Divi를 사용하여 사이트에서 다크 모드를 구현하는 방법

Divi : 사용하기 가장 쉬운 WordPress 테마

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 전문적인 모양으로 웹 사이트 디자인을 쉽게 만들 수 있습니다. 자신이 할 수있는 일에 대해 비용을 지불하지 마십시오. [무료]

다크 모드는 사용자가 눈에 부담을주지 않고 웹을 경험할 수있는 편리한 옵션으로 계속 인기를 얻고 있습니다. 현실을 직시하자면, 우리 모두는 예상보다 화면을 응시하는 데 더 많은 시간을 보내는 경향이 있으므로 사용자 경험에 추가 된 편의성 (예 : 다크 모드)은 먼 길을 갈 수 있습니다. 

운영 체제, 프로그램 및 브라우저에는 일반적으로 기본 제공되는 다크 모드 기능이 포함되어 있지만 일부 개발자는 웹 사이트에 대한 사용자 지정 다크 모드 환경을 포함하여 다른 수준으로 끌어 올립니다. 아이디어는 브랜딩 및 / 또는 디자인을 타협하지 않고도 웹 사이트가 어두운 모드에서 어떻게 보이는지 더 많이 제어하는 ​​것입니다.

이 튜토리얼에서는 플러그인없이 처음부터 Divi에서 커스텀 다크 모드 토글을 만드는 방법을 보여줍니다. 이 다크 모드 토글 기능을 사용하면 다크 모드 디자인을 제어하고 브랜드에 맞는 더 나은 사용자 경험을 얻을 수 있습니다.

시작하자!

측량

다음은이 튜토리얼에서 빌드 할 디자인의 미리보기입니다.

다음은 우리가 만들 맞춤형 어두운 모드 토글입니다.

다크 모드 전환

여기에 사전 정의 된 레이아웃 중 하나에 적용된 다크 모드의 전후가 있습니다.

그리고 여기에 글로벌 헤더에 추가 된 다크 모드 토글이 있습니다. 사이트를 탐색 할 때 밝음 / 어두움 모드가 어떻게 유지되는지 확인하십시오.

1 부 : 어두운 모드에서 스위치 빌드

이 튜토리얼의 첫 번째 부분에서는 Divi의 페이지로 다크 모드 토글을 빌드 할 것입니다. 코드로 토글이 생성되면 Divi 라이브러리에 저장하고 웹 사이트의 어느 위치 에나 추가 할 수 있습니다.

시작하려면 프런트 엔드에 Divi를 사용하여 처음부터 빌드 할 때 기본 섹션에 한 열 행을 추가합니다.

Divi 섹션

요약 모듈 추가

커스텀 토글을 만들기 위해 약간의 커스텀 CSS로 Blurb 모듈을 디자인 할 것입니다.

Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다. [추천]

줄에 새 프리젠 테이션 텍스트 모듈을 추가하십시오.

내용

제목 및 본문에 대한 기본 더미 콘텐츠를 제거합니다. 그런 다음 이미지 대신 사각형 아이콘을 추가합니다.

Divi 요약 모듈

임신

디자인 설정으로 이동하여 다음을 업데이트하십시오.

  • 아이콘 색상 : # 666666
  • 이미지 / 아이콘 정렬 : 왼쪽
  • 아이콘 글꼴 크기 : 22 픽셀
Divi 아이콘 구성
  • 너비 : 50px
  • 모듈의 정렬 : 중심
  • 높이 : 25px
Divi 사이징 구성
  • 여백 : 0px 낮음
  • 둥근 모서리 : 4px
  • 테두리 너비 : 2px
  • 테두리 색상 : # 666666
Divi 테두리 구성

맞춤 CSS

디자인이 제자리에 있으면 고급 탭으로 전환하십시오. Custom CSS에서 다음 사용자 지정 CSS를 기본 요소에 추가하여 둥근 모서리의 스타일로 인해 오버플로가 가려지지 않도록합니다.

오버플로 : 표시! 중요;

그런 다음 After 요소에 다음 사용자 지정 CSS를 추가합니다.

내용 : "빛"; 위치 : 절대; 왼쪽 : -35px; 위쪽 : 0px;

클릭하면 "라이트"에서 "어두운"로 변경되는 레이블이 Blurb 모듈에 추가됩니다.

Divi 토글 버튼

본문 디자인

포스트 의사 요소 텍스트는 본문 텍스트 스타일을 상속하므로 다음과 같이 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 클래스를 추가하십시오.

최고의 WordPress 테마 및 플러그인을 찾고 계십니까?

Envato에서 최고의 플러그인과 WordPress 테마를 다운로드하고 쉽게 웹 사이트를 만드십시오. 이미 49.720.000 다운로드 이상. [EXCLUSIVE]

  • CSS 클래스 : et-dark-toggle
코드 css divi

어두운 모드가 가능한 클래스

또한 다크 모드 기능을 사용하려는 각 Divi 요소에 사용자 정의 CSS 클래스를 추가해야합니다. 요소에 CSS 클래스가 있으면 해당 요소는 다크 모드가 활성화 된 후 추가 한 코드에서 사용자 정의 "다크 모드"CSS를 상속합니다. 이 방법을 사용하면 일부 요소가 다크 모드에서 스타일링이 필요하지 않을 수 있으므로 다크 모드 디자인을 더 잘 제어 할 수 있습니다.

먼저 어두운 모드 토글이 포함 된 섹션에 어두운 모드를 추가 할 수 있습니다.

섹션 매개 변수를 열고 다음 CSS 클래스를 추가하십시오.

  • CSS 클래스 : et-dark-mode-capable
CSS 선택기 Divi 섹션

2 부 : Divi 페이지에 어두운 모드 기능 추가

이제 CSS 코드와 클래스가 준비되었으므로 Divi의 전체 페이지에 다크 모드 기능과 디자인을 적용 할 준비가되었습니다. 이를 위해 모바일 앱 랜딩 페이지의 미리 만들어진 레이아웃을 사용합니다.

레이아웃을 추가하려면 비주얼 빌더 하단의 설정 메뉴를 열고 새 레이아웃 추가 아이콘을 클릭합니다.

그런 다음 사전 정의 된 레이아웃 탭에서 모바일 앱의 랜딩 페이지 레이아웃을 선택합니다.

"기존 콘텐츠 교체"옵션이 선택되지 않았는지 확인합니다. 다크 모드 토글로 섹션을 지우고 싶지 않습니다.

divi 1 레이아웃 선택

다크 모드 스타일은 "capable and-dark-mode"CSS 클래스가있는 요소에만 적용되므로 다른 방식으로 페이지에 추가하도록 선택할 수 있습니다.

  1. CSS 클래스를 페이지의 각 요소에 개별적으로 추가 할 수 있습니다.
  2. CSS 클래스를 페이지 전체의 요소로 확장 할 수 있습니다 (수동으로 수행하는 것보다 빠릅니다). 예를 들어 상단 섹션의 섹션 설정을 열고 해당 섹션의 CSS 클래스를 페이지의 모든 섹션으로 확장 할 수 있습니다.
  3. CSS 클래스를 요소의 전역 기본값에 추가 할 수 있습니다. 이것은 CSS 클래스를 모든 사이트 전체 요소에 적용하여 사이트 전체에 다크 모드 기능을 추가합니다. 예를 들어 섹션 설정을 열고 전역 기본 아이콘을 클릭하여 전역 섹션 기본값을 변경할 수 있습니다. 그런 다음 CSS 클래스를 추가하고 사이트의 모든 섹션에 대해 CSS 클래스로 등록 할 수 있습니다.

페이지 요소에 CSS 클래스 추가

이 예에서는 CSS 클래스를 섹션 및 텍스트 모듈의 전역 기본값에 추가하여 페이지 요소를 업데이트합니다. 또한 진행하면서 다른 페이지 요소에 몇 가지 사항을 추가 할 것입니다.

모든 섹션

모든 섹션에 CSS 클래스를 추가하려면 다크 모드 토글이 포함 된 상단 섹션의 설정을 엽니 다. 그런 다음 섹션 전역 기본값을 변경하고 다음 CSS 클래스를 전역 기본값 섹션에 추가합니다.

  • CSS 클래스 : et-dark-mode-capable

모든 전문 섹션

또한 전문화 된 섹션에서 CSS 클래스를 전역 기본값에 추가하십시오.

모든 전문 섹션에 추가

텍스트 모듈

그런 다음 페이지에서 텍스트 모듈 중 하나의 설정을 열고 동일한 CSS 클래스를 전역 텍스트 기본값에 추가합니다.

텍스트 모듈에 추가

결과를 테스트하려면 라이브 페이지로 이동하여 페이지 상단의 어두운 모드 토글을 클릭하십시오.

온라인 상점을 쉽게 만들 수 있습니다.

무료 WooCommerce를 다운로드하십시오. 전자 상거래 플러그인은 WordPress에서 실제 제품과 디지털 제품을 판매하는 플러그인입니다. [추천]

클리어 모드에서 페이지 모양은 다음과 같습니다.

클리어 모드

그리고 다음은 어두운 모드에서 페이지 모양입니다.

어두운 모드

추가 자료

관심을 가질만한 다른 리소스는 다음과 같습니다.

마지막 생각

Divi 사이트에 커스텀 다크 모드 토글을 장착하면 사용자 경험을 향상시키고 눈을 즐겁게하고 편안하게하는 완전히 새로운 디자인을 만들 수 있습니다. 도움이 되셨기를 바랍니다.

이 문서에는 메모의 0을 포함

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.

맨 위로
0 주식
짹짹
레지스터