Diviを使用してサイトにダークモードを実装する方法

パー ブレアJersyer | Divi

ダークモードは、ユーザーが目に負担をかけずにWebを体験できる便利なオプションとして人気を集め続けています。 それに直面してみましょう。私たちは皆、おそらく必要以上に画面を見つめることに多くの時間を費やす傾向があるため、ユーザーエクスペリエンスの利便性の向上（ダークモードなど）は大いに役立ちます。 

オペレーティング システム、プログラム、およびブラウザーには通常、組み込みのダーク モード機能が含まれていますが、一部の開発者は、独自のダーク モード エクスペリエンスを含めることで、別のレベルに引き上げています。 サイトのWeb. アイデアは、彼らの外観をより制御することです サイトのWeb ブランドやデザインに妥協することなく、ダークモードで。

このチュートリアルでは、プラグインを使用せずに、Diviでカスタムダークモードトグルを最初から作成する方法を示します。 このダークモードトグル機能を使用すると、ダークモードのデザインを制御し、ブランドに合わせたユーザーエクスペリエンスを向上させることができます。

のは、始めましょう！

概要

これが、このチュートリアルで作成する設計のプレビューです。

これが、これから作成するカスタムのダークモードトグルです。

ダークモードを切り替えます

そして、これが事前定義されたレイアウトのXNUMXつに適用されるダークモードの前後です。

ダークモード ライトモードの比較

そして、これがグローバルヘッダーに追加されたダークモードトグルです。 サイトを閲覧すると、ライト/ダークモードがどのように維持されるかに注意してください。

パート1：ダークモードからスイッチを構築する

チュートリアルの最初の部分では、Divi のページを使用してダーク モード切り替えを構築します。 コードでトグルを作成したら、それを Divi ライブラリに保存し、ファイル内のどこにでも追加できるようになります。 サイトのWeb.

開始するには、フロントエンドでDiviを使用して最初から構築するときに、デフォルトのセクションにXNUMX列の行を追加します。

ディビセクション

要約モジュールを追加

カスタムトグルを構築するために、少しカスタムCSSを使用してBlurbモジュールを設計します。

新しいプレゼンテーションテキストモジュールを行に追加します。

中身

を削除します コンテンツ タイトルと本文のデフォルトのダミー。 次に、画像の代わりに正方形のアイコンを追加します。

Diviサマリーモジュール

概念

設計設定に移動し、次を更新します。

  • アイコンの色：＃666666
  • 画像/アイコンの配置：左
  • アイコンのフォントサイズ：22ピクセル
Diviアイコンの構成
  • 幅：50px
  • モジュールの配置：中央
  • 高さ：25px
分割サイジング構成
  • マージン：0ピクセル低
  • 角丸：4px
  • ボーダー幅：2px
  • ボーダー色：＃666666
ディビボーダー構成

カスタムCSS

デザインが配置されたら、[詳細設定]タブに切り替えます。 [カスタムCSS]で、次のカスタムCSSをメイン要素に追加して、丸みを帯びた角のスタイルによってオーバーフローが隠されないようにします。

オーバーフロー：表示！重要;

次に、次のカスタムCSSをAfter要素に追加します。

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

これにより、Blurbモジュールにラベルが追加され、クリックすると「明るい」から「暗い」に変わります。

ディビトグルボタン

本文のデザイン

post疑似要素テキストは本文テキストスタイルを継承するため、次のように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クラスの追加

カスタムコードでは、カスタムCSSクラスをBlurbモジュールまたはスイッチに追加する必要があります。 これにより、ブラーがダークモードの切り替えとオンクリック機能をトリガーできるようになります。

Blurbモジュールクラス

Blurbモジュール設定を開き、次のようにカスタムCSSクラスを追加します。

  • CSSクラス：et-dark-toggle
コードcssdivi

ダークモード対応クラス

また、ダークモード機能が必要な各Divi要素にカスタムCSSクラスを追加する必要があります。 要素にCSSクラスが含まれると、その要素は、ダークモードが有効になった後に追加したコードのカスタム「ダークモード」CSSを継承します。 一部の要素はダークモードでのスタイリングを必要としない場合があるため、この方法ではダークモードの設計をより細かく制御できます。

まず、ダークモードの切り替えを含むセクションにダークモードを追加します。

セクションパラメータを開き、次のCSSクラスを追加します。

  • CSSクラス：et-dark-mode-capable
Cssセレクターディビセクション

パート2：Diviページにダークモード機能を追加する

CSSコードとクラスが配置されたので、Diviのページ全体にダークモードの機能とデザインを適用する準備が整いました。 これを行うには、モバイルアプリのランディングページの既成のレイアウトを使用します。

レイアウトを追加するには、ビジュアルビルダーの下部にある設定メニューを開き、[新しいレイアウトの追加]アイコンをクリックします。

次に、[定義済みのレイアウト]タブからモバイルアプリのランディングページのレイアウトを選択します。

「交換」オプションが選択されていることを確認してください コンテンツ 「既存」は選択されていません。 ダークモードの切り替えを使用してセクションをクリアする必要はありません。

divi1レイアウトを選択

ダークモードスタイルは「capableand-dark-mode」CSSクラスの要素にのみ適用されるため、さまざまな方法でページに追加することを選択できます。

  1. CSSクラスをページの各要素に個別に追加できます。
  2. CSSクラスをページ全体の要素に拡張できます（手動で行うよりも高速です）。 たとえば、上部セクションのセクション設定を開き、そのセクションのCSSクラスをページのすべてのセクションに拡張できます。
  3. CSSクラスを要素のグローバルデフォルトに追加できます。 これにより、CSSクラスがサイト全体のすべての要素に適用され、サイト全体にダークモード機能が追加されます。 たとえば、セクション設定を開き、グローバルデフォルトアイコンをクリックして、グローバルセクションのデフォルトを変更できます。 次に、CSSクラスを追加して、サイトのすべてのセクションのCSSクラスとして登録できます。

CSSクラスをページ要素に追加する

この例では、CSSクラスをセクションとテキストモジュールのグローバルデフォルトに追加して、ページ要素を更新します。 また、ページ上の他の要素にもいくつか追加していきます。

すべてのセクション

すべてのセクションにCSSクラスを追加するには、ダークモードトグルを含む上部セクションの設定を開きます。 次に、セクションのグローバルデフォルトを変更し、次のCSSクラスをセクションのグローバルデフォルトに追加します。

  • CSSクラス：et-dark-mode-capable
すべてのセクションに CSS コードを追加します

すべての専門セクション

また、CSSクラスを特別なセクションのグローバルデフォルトに追加します。

すべての専門セクションに追加

テキストモジュール

次に、ページ上のテキストモジュールのXNUMXつの設定を開き、同じCSSクラスをグローバルテキストのデフォルトに追加します。

テキストモジュールに追加

結果をテストするには、ライブページに移動し、ページの上部にあるダークモードトグルをクリックします。

クリアモードでのページの外観は次のとおりです。

クリアモード

ダークモードでのページの外観は次のとおりです。

ダークモード

追加のリソース

ここに他のものがあります ressources それはあなたに興味があるかもしれません。

最終的な考え

Diviサイトにカスタムのダークモードトグルを装備することは、ユーザーエクスペリエンスを向上させ、目を楽しませ、安心させるまったく新しいデザインを作成するための優れた方法です。 これがお役に立てば幸いです。

コメントを投稿

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。 コメントデータの使用方法の詳細.