ElementorでWordPressサイトにダークモードを追加する方法

あなたのウェブサイトにダークパターンを追加することは、より良いユーザーエクスペリエンスを提供し、あなたのウェブサイトをよりアクセスしやすくするために重要です。Elementorは、WordPress用の最も人気のあるページビルダーツールの1つであり、わずか数ステップで簡単にダークパターンを追加することができます。

なぜダークカラーモードを追加するのですか？

Elementorにダークモードを実装する方法を探る前に、ウェブサイトにとってのダークモードの利点を理解しましょう。ユーザーエクスペリエンスの向上とアクセシビリティの向上です。

• ユーザーエクスペリエンスの向上ダークモードは、特に薄暗い環境において、より快適なブラウジング体験を提供します。目の疲れを最小限に抑え、読みやすさを向上させ、訪問者にとってより魅力的なサイトになります。
• アクセシビリティの向上ダークモードは、視覚障害者や明るい光に敏感な人々のアクセシビリティも向上させます。これにより、不便を感じることなく、より快適にサイトのコンテンツを閲覧することができます。

ステップ1：ElementorのUnlimited Elementsの無料版をインストールし、有効化します。

Unlimited Elements for Elementorの無料版をインストールし、有効化する必要があります。

ステップ 2: アンリミテッドエレメンツにダークモードウィジェットをインストールします。

検索 "ダークモード "ウィジェットにカーソルを合わせると、"インストール "ボタンが表示されます。そのボタンをクリックして、ウィジェットを設定してください。

ステップ3：Elementorページにダークモードウィジェットを追加します。

ダークモードウィジェットをページにドラッグ＆ドロップします。

ダークモードの設定をお好みに合わせてカスタマイズできます。

1.アニメーション速度

ライトモードとダークモードの切り替え時に発生するトランジションのスピードを調整します。

2、ボタン水平位置

ウィジェットのダークモードトグルボタンの水平位置を決定します。

3、ボタン縦位置

ウィジェットのダークモード切り替えボタンの垂直位置を指定します。

4、ボタン垂直オフセット

ダークモードトグルボタンの垂直方向の配置をデフォルトの位置から微調整します。

5.ボタン水平オフセット

ダークモードトグルボタンの水平アライメントをデフォルト位置から相対的に調整します。

6.ボタンアイコン

ダークモードトグルボタンに表示されるアイコンをカスタマイズできます。

7.クッキーに保存

ユーザーのダークモード設定をクッキーに保存し、将来アクセスできるようにするかどうかを選択します。

8、画像には影響しません

より見やすく、より美しくするために、ダークモード変換から画像を除外することを選択します。

9.オペレーティングシステムのテーマの自動マッチング

ウィジェットのダークモードをオペレーティングシステムのテーマと自動的に同期します(利用可能な場合)。

10、ダークモード混合色

読みやすさやデザインの一貫性を向上させるために、ダークモードの背景と混合するブレンドカラーを定義します。

11、ダークモード背景色

ウィジェット内のダークモード表示の背景色を設定します。

概要

Elementorを使用してWordPressサイトにダークモードを追加すると、ユーザーが好みに合わせてブラウジングできるだけでなく、サイトをユニークなものにし、多様性とユーザーエクスペリエンスの重要性を示すことができます。目標は、ユーザーが自分の習慣に基づいてブラウジング方法を選択できる柔軟な環境を作ることで、ユーザーがより興味を持ち、満足を感じやすくすることです。ダークモードの設定にお困りの方は、こちらの "質疑応答コミュニティ「助けを求めるか、見つけるかお問い合わせカスタマーサービスのヘルプ。