Divi 사이트에서 다크 모드 토글을 구현하는 방법

다크 모드는 사용자가 눈의 피로를 덜고 웹을 경험할 수 있는 편리한 옵션으로 계속해서 인기를 얻고 있습니다. 사실을 직시하자. 우리 모두는 생각보다 화면을 보는 데 더 많은 시간을 보내는 경향이 있으므로 사용자 경험에 대한 추가적인 편안함(예: 다크 모드)은 먼 길을 갈 수 있습니다. 운영 체제, 프로그램 및 브라우저에는 일반적으로 기본 제공 다크 모드 기능이 포함되어 있지만 일부 개발자는 웹 사이트에 대한 사용자 지정 다크 모드 환경을 포함하여 다른 수준으로 끌어올리고 있습니다. 아이디어는 브랜딩 및/또는 디자인을 타협하지 않고 웹사이트가 다크 모드에서 어떻게 보이는지 더 많이 제어하는 ​​것입니다.

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

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

다음은 우리가 만들 커스텀 다크 모드 토글입니다.

그리고 여기에 미리 만들어진 레이아웃 중 하나에 적용된 다크 모드의 전후가 있습니다.

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

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

1부: 다크 모드 토글 만들기

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

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

광고 추가

사용자 지정 토글을 만들기 위해 약간의 사용자 지정 CSS를 사용하여 블러브 모듈을 디자인할 것입니다.

행에 새 광고 문구 모듈을 추가합니다.

콘텐츠

제목과 본문에 대한 기본 모의 콘텐츠를 가져옵니다. 그런 다음 이미지 자리에 사각형 아이콘을 추가합니다.

설계

디자인 설정으로 이동하여 다음을 업데이트합니다.

• 아이콘 색상: #666666
• 이미지/아이콘 정렬: 왼쪽
• 아이콘 글꼴 크기: 22px

• 너비: 50px
• 모듈 정렬: 중앙
• 높이: 25px

• 여백: 0px 하단
• 둥근 모서리: 4px
• 테두리 너비: 2px
• 테두리 색상: #666666

맞춤 CSS

디자인이 준비되면 고급 탭으로 이동합니다. 사용자 지정 CSS 아래에서 다음 사용자 지정 CSS를 기본 요소에 추가하여 둥근 모서리 스타일에서 오버플로가 숨겨지지 않도록 합니다.

overflow: visible !important;

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

content: "light";
position: absolute;
left: -35px;
top:0px;

이렇게 하면 클릭 시 "밝음"에서 "어두움"으로 변경할 레이블이 블러 모듈에 추가됩니다.

본문 텍스트 디자인

after pseudo-element의 텍스트는 본문 텍스트 스타일을 상속하므로 다음과 같이 Divi 옵션을 사용하여 본문 텍스트 스타일을 추가할 수 있습니다.

• 본문 글꼴: Roboto
• 본문 색상: #666666
• 본문 텍스트 크기: 13px
• 본문 문자 간격: 1px

코드 모듈로 사용자 정의 코드 추가

다크 모드 토글이 마법처럼 작동하도록 하는 데 필요한 코드(CSS/JQuery)를 추가하려면 코드 모듈을 사용합니다.

같은 열의 blurb 모듈 아래에 새 코드 모듈을 만듭니다.

그런 다음 코드 상자에 다음 코드를 붙여넣습니다.

<style>
/**
 * 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;
}
</style>
<script>
  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 Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.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");
      }
  });
</script>

사용자 정의 CSS 클래스 추가

사용자 정의 코드를 사용하려면 사용자 정의 CSS 클래스를 blurb 모듈 또는 토글에 추가해야 합니다. 이렇게 하면 광고 문구가 클릭 시 다크 모드 토글 및 기능을 트리거할 수 있습니다.

Blurb 모듈 클래스

Blub 모듈 설정을 열고 다음과 같이 사용자 정의 CSS 클래스를 추가하십시오.

• CSS 클래스: et-dark-toggle

다크 모드 가능 클래스

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

시작하려면 다크 모드 토글이 포함된 섹션에 다크 모드를 추가할 수 있습니다.

섹션 설정을 열고 다음 CSS 클래스를 추가합니다.

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

2부: Divi 페이지에 다크 모드 기능 추가

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

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

그런 다음 미리 만들어진 레이아웃 탭에서 모바일 앱 랜딩 페이지 레이아웃을 선택합니다.

"기존 콘텐츠 바꾸기" 옵션이 선택되어 있지 않은지 확인하십시오. 다크 모드 토글로 섹션을 지우고 싶지 않습니다.

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

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

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

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

모든 섹션

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

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

모든 전문 섹션

전문 섹션의 전역 기본값에도 CSS 클래스를 추가합니다.

텍스트 모듈

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

블러브

다음으로, 페이지 레이아웃에서 블러브 중 하나에 대한 설정을 열고 CSS 클래스를 블러브 전역 기본값에 추가합니다.

추천 칼럼

페이지 레이아웃을 더 아래로 내려가면 맞춤 흰색 배경이 있는 열 내부에 몇 가지 평가가 있습니다. 다크 모드에서 열 스타일을 재정의하려면 CSS 클래스를 열 중 하나에 추가하고 행 내의 다른 열로 확장합니다.

참고: CSS 클래스를 열의 전역 기본값에 추가하는 것은 디자인 요소 중 일부를 손상시키므로 좋은 생각이 아닙니다. 투명하다).

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

다음은 라이트 모드에서 페이지의 모습입니다.

다음은 페이지가 다크 모드에서 어떻게 보여야 하는지입니다.

3부: 전역 헤더에 다크 모드 토글 추가

다크 모드 기능을 사이트 전체로 확장하려면 Divi 글로벌 헤더에 다크 모드 토글을 추가하는 것이 좋습니다. 그렇게 하면 사이트 전체의 사용자가 편리한 한 곳에서 사용할 수 있습니다.

다크 모드 토글 및 코드를 Divi 라이브러리에 저장

그러나 그렇게 하기 전에 다크 모드 토글과 코드를 Divi 라이브러리에 저장해야 합니다. 이렇게 하면 글로벌 헤더를 포함하여 사이트의 다른 영역에 쉽게 추가할 수 있습니다.

프런트 엔드에 배포된 Divi로 구축한 레이아웃으로 돌아갑니다. 그런 다음 다크 모드 토글을 빌드하는 데 사용되는 블러브 모듈에 대한 메뉴를 열고 라이브러리에 저장을 선택합니다. 레이아웃 이름을 지정하고 라이브러리에 저장합니다.

그런 다음 코드 모듈도 Divi 라이브러리에 저장합니다.

미리 만들어진 글로벌 헤더 템플릿 가져오기

글로벌 헤더가 아직 없는 경우 자체 헤더를 작성하거나 사전 제작된 테마 빌더 팩 중 하나를 사용해야 합니다.

이 튜토리얼에서는 다섯 번째 테마 빌더 팩에 포함된 전역 헤더를 사용할 것입니다. 테마 빌더를 사용하여 전역 헤더를 추가하려면 테마 빌더 팩을 다운로드한 다음 이식성 옵션을 사용하여 "divi-theme-builder-pack-5-default-website-template.json"이라는 JSON 파일을 가져와야 합니다. .

템플릿이 로드되면 클릭하여 전역 머리글을 편집합니다.

그런 다음 라이브러리에서 헤더의 두 번째 행에 있는 열 1에 다크 모드 토글을 추가합니다.

다크 모드 토글/블러브 모듈 아래에서 라이브러리에 저장한 코드 모듈을 다크 모드 토글 바로 아래에 추가합니다.

모든 섹션의 기본값으로 "et-dark-mode-capable" CSS 클래스가 있으므로 헤더 내부의 섹션에도 기본적으로 이 클래스가 있습니다. 이것을 비활성화하려면 재정의 CSS 클래스를 지정하기만 하면 됩니다.

최종 결과

다음은 다크 모드 토글 페이지의 최종 결과입니다.

그리고 여기 헤더의 다크 모드 토글이 있습니다. 선택한 모드(어두움 또는 밝음)는 사이트의 다른 페이지로 이동할 때 유지됩니다.

사용자 정의 CSS 다크 모드 스타일 조정

토글 또는 Divi 요소의 다크 모드 스타일을 조정하려면 코드 모듈 내의 코드 내에서 조정해야 합니다.

코드에는 현재 다크 모드에서 한 번만 각 요소에 적용된 기본 다크 모드 스타일만 있습니다. 이것은 어두운 배경색과 밝은 텍스트 색상으로 구성됩니다.

마지막 생각들

Divi 사이트에 맞춤형 다크 모드 토글을 장착하면 UX를 향상하고 눈을 즐겁게 하고 편안하게 해주는 완전히 새로운 디자인을 만드는 좋은 방법이 될 수 있습니다. 도움이 되셨길 바랍니다.

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

건배!