ElementorWebサイトでダークモードを有効にする最も簡単な方法

公開: 2021-09-10

Elementorは、WordPressWebサイトを簡単に構築するために長年にわたって人気を博しています。 Elementorには、Webサイトに高度な機能を追加するための便利な機能が多数付属しています。 ただし、Elementorにはまだ魔法の袋に入っていない機能があります。 そのような例の1つは、Elementorを利用したWebサイトにダークモードを追加するオプションです。

それで、それはあなたがあなたのウェブサイトのためにElementorダークモードを有効にすることができないことを意味しますか?
答えは、はい、できます

Elementorにはデフォルトの機能はありませんが、互換性のあるサードパーティのプラグインを使用して有効にすることができます。 Elementorの人気が高まっているため、ほとんどの開発者はElementor互換のプラグインを構築しています。

このガイドでは、そのようなプラグインの1つを使用して、Webサイトでダークモードを有効にします。 しかしその前に、ダークモードの人気が急上昇した理由を知るために回り道をしてみましょう。

Drakモードとは何ですか?なぜ人気が出ているのですか

Elementorのダークモード

ダークモードは、ウェブサイトやアプリの最近の傾向です。 フォーブスによると–

ダークモードは、スマートフォンやラップトップなどのユーザーインターフェイスの表示設定です。

これは、明るい画面に対して表示されるデフォルトの暗いテキスト(「ライトモード」と呼ばれる)の代わりに、暗い画面または黒い画面に対して明るい色のテキスト(白または灰色)が表示されることを意味します。

ダークモードは新しい概念ではありません。 しかし、近年、絶大な人気を博しています。 ダークモードの人気の背後にある主な理由は、読者が夜間に情報をより簡単に読むのに役立つことです。 その人気のもう1つの理由は、現在のスマートフォンとラップトップに共通の問題であるバッテリーの消耗を減らすためです。

しかし、もう1つの理由は、ダークモードが単にクールに見えることです。

そのため、トップWebサイトのほとんどがこの機能を1つずつ追加しています。 最も人気のある2つのスマートフォンオペレーティングシステムであるAndroidとiOSでさえ、ダークモード機能が組み込まれています。 同じことが、人気のあるデスクトップオペレーティングシステムであるWindowsおよびMacOSにも当てはまります。

フロントエンドでElementorダークモードをオンにする方法

Elementorには組み込みのバックエンドダークモード機能があり、エディターはダークテーマの編集ダッシュボードを見ることができます。

ただし、デフォルトでElementorWebサイトにダークモード機能を追加するオプションはありません。 最近のほとんどのブラウザでは、ユーザーが選択してダークモードでWebサイトを表示できます。

ただし、Elementorを利用したWebサイト自体にダークモード機能を追加したいと考えています。 そのために、サードパーティのプラグインであるWPダークモードを使用します。 明らかに、前提条件は–ElementorがインストールされたWordPressWebサイトを持っていることです。 前提条件が満たされたら、ガイドに進むことができます。

WPダークモードをインストールしてアクティブ化する

ウェブサイトでダークモードを有効にするには、まずプラグインWPダークモードをインストールする必要があります

そのために–

  1. WP管理ダッシュボード>プラグイン>新規追加に移動します
  2. WPダークモードを検索
  3. プラグインをインストールしてアクティブ化する

インストールプロセスが完了しました。 これで、単一のページまたはWebサイト全体に対してダークモードを有効にできます。 両方のプロセスを理解しましょう。

WPダークモードを追加

単一ページのダークモードを有効にする

単一のElementorページでダークモードを有効にするには、最初にページを追加するか、既存のページを選択する必要があります。 全体のプロセスは次のとおりです–

ステップ1: [WP管理ダッシュボード]> [ページ]> [新規追加]に移動します

新しいページを追加

ステップ2:ページに名前を付けます。

右側のサイドバーから、ページテンプレートをElementor FullWidthとして選択します。

次に、[ Elementor編集]をクリックします

ページを編集する

ステップ3:検索ウィジェットオプションから、ダークモードを検索します

Elementorキャンバス

次に、ウィジェットをメインキャンバスにドラッグアンドドロップします。

ElementorにWPダークモードウィジェットを追加する

ページを公開すると完了です。

サイト全体でWPダークモードを有効にする

サイト全体でWPダークモードを有効にすることもできます。 その場合、流れるトリガーボタンがWebサイトのすべてのページの右下に表示されます。 このトリガーにより、訪問者はダークモードをオンまたはオフにできます。

トリガーとダークモード機能をオンにするには、以下の方法に従います。

ステップ1: WP管理ダッシュボード> WPダークモード>設定に移動します

WPダークモード設定

手順2: [一般設定]から、[フロントエンドダークモード有効にする]をオンにします

WPダークモードの一般設定

ステップ3: [設定のナビゲート]に移動し、 [フローティングスイッチの表示]をオンにします

WPダークモードスイッチ設定

ステップ4:新しく表示されたオプションからお好みのフローティングスイッチスタイルを選択し、 [設定保存]まで下にスクロールします。

WPダークモードフローティングスイッチ

これで、すべてのページでダークモードがアクティブになります。 ライトモードとダークモードでそれぞれどのように見えるかを次に示します

WPライトモード
ライトモード
WPダークモード
ダークモード

それはどれくらいクールですか?

WPダークモードの無料バージョンでは、基本的な機能をカバーできます。 ただし、OSベースのカラーモード、タイマー、既製のカラースキーマなどの高度な機能については、プレミアムバージョンをインストールする必要があります。

無料版をダウンロード
プロバージョンをダウンロード

ElementorWebサイトでのダークモードの実装に関する一般的な質問

このセクションでは、Elementorにダークモード機能を追加することに関してユーザーからよく寄せられるいくつかの一般的な質問に答えようとしました。 追加する質問がありますか? 以下にコメントしてください。私たちはあなたの質問に答えようとします。

  1. Elementorでダークモードをオンにするにはどうすればよいですか?

    Elementorでダークモードをオンにするには、プラグインWPダークモードを試すことができます。 プラグインをインストールしたら、 [WPダークモード]> [設定]> [一般]に移動し、フロントエンドのダークモードオプションを有効にすることで、ダークモードを有効にできます。

  2. Elementorダークモードをどのように変更しますか?

    WPダークモードのフロントエンドダークモードオプションを有効または無効にすることで、Elementorダークモードを変更できます

  3. WordPressにはダークモードがありますか?

    WordPressには、デフォルトでダークモード機能はありません。 ただし、サードパーティのプラグインを使用して、Webサイトでダークモード機能を有効にすることができます。

  4. WordPressダークモードとは何ですか?

    WordPressダークモードは、ディスプレイインターフェイスを明るい背景から暗い色に変更する方法です。 これにより、読者は夜間にテキストを読みやすくなります。

Elementorが構築したWebサイトにダークモードを追加する準備はできていますか

Webサイトにダークモードを追加すると、見た目の美しさだけでなく、読者にとっても便利です。 現代のデザイン業界がますますユーザー中心になっているので、あなたのウェブサイトのそのようなデザイン改善の必要性は有用であるだけでなく必要です。

Elementorを利用したWebサイトにダークモードを追加することを検討している場合は、このチュートリアルが簡単で効果的な方法でガイドされることを願っています。 このガイドが気に入った場合は、ニュースレターの購読を検討してください。 FacebookやTwitterからの最近の更新も見つけることができます。