Elementorでオフキャンバスコンテンツを作成する方法：ガイド

ユーザーを混乱させることなく、小さなWebスペースで多くのコンテンツを提示することは、Webデザイナーにとって課題です。オフキャンバスコンテンツは、このコンテキストで役立つトレンディで新しい、スマートなソリューションです。

Elementor Page Builderプラグインを使用すると、ウェブサイトでオフキャンバスメニュー、プロモーションバナー、サイドバーなどを簡単に作成できます。これは、コンテンツのプレゼンテーションに役立つだけでなく、ナビゲーションを簡素化し、読みやすさを改善し、ユーザーを変換することもできます。

サイトがElementorで構築されている場合、サイトのCanvasコンテンツをオフにするのに数分しかかかりません。このブログ投稿では、段階的なガイドを使用してElementorのCanvasコンテンツを追加する方法について説明します。始めましょう！

オフキャンバスコンテンツとは何ですか？

オフキャンバスコンテンツは、ユーザーインタラクションによってトリガーされるまでコンテンツを非画面から隠したままにするElementorウィジェットです。通常、このウィジェットは画面上のボタンに接続されています。ユーザーがボタンをクリックするたびに、オフキャンバスのコンテンツが即座にスライドして追加情報を紹介します。

上記のように、オフキャンバスコンテンツウィジェットは、メニュー、プロモーションバナー、サイドバー、ログインとサインアップパネル、ショッピングカート、コンテンツフィルター、クイックビューオプションなどのコンテンツをカバーしています。必要に応じて簡単にアクセスできる清潔で整理されたレイアウトを維持するのに役立ちます。

ElementorでCanvasコンテンツをオフにする方法

次に、このセクションでは、段階的なガイドを使用して、Elementorでオフキャンバスコンテンツを作成する方法について説明します。ただし、チュートリアルに飛び込む前に、サイトに次のプラグインがインストールされ、アクティブ化されていることを確認してください。

• Elementor
• HappyAddons
• HappyAddons Pro

彼らがあなたのサイトで準備ができたら、以下で説明するチュートリアルに従ってください。

ステップ01：オフキャンバスコンテンツウィジェットをElementorキャンバスに追加する

Elementor Canvasで投稿またはページを開きます。 Elementorパネルの検索ボックスに名前を入力して、ウィジェットを見つけます。ウィジェットが表示されたら、キャンバスにドラッグしてドロップします。

キャンバスに追加されたボタンまたはアイコンが表示されます。クリックすると、オフキャンバスセクションを開くことができます。以下に添付されているビデオクリップを見ることができます。

ステップ02：オフキャンバスウィジェットをWebページに追加する

上記では、ウィジェットを空白のキャンバスに配置しました。ただし、Webページの特定の部分に追加できます。それを説明するために、装飾されたWebページを開きました。次に、ウィジェットをヒーローセクションに配置しました

Webページのヘッダーセクションにウィジェットが追加されたことがわかります。

Elementorを使用してWordPressのローカルSEOを改善する方法を確認してください。

ステップ03：オフキャンバスウィジェットのカスタムコンテンツタイプを選択します

コンテンツ> Offcanvasコンテンツに移動します。 [コンテンツタイプ]オプションの横にあるドロップダウンリストをクリックします。

表示するコンテンツのタイプに基づいて、ウィジェットのドロップダウンリストから適切なコンテンツタイプを選択する必要があります。

このチュートリアルでは、カスタムコンテンツタイプを選択しました。

WordPressで知識ベースを設計する方法に関するこのガイドを調べてください。

ステップ04：ウィジェットに情報を追加します

これらのボックスを使用して、目的のコンテンツをウィジェットに追加します。ボックスをクリックすると、それらが展開され、情報を追加できるスペースが作成されます。

ボックスを拡張して、コンテンツを追加したことがわかります。それぞれのオプションをクリックして、テキストファイルとメディアファイルを追加できます。

Elementorで見事なインフォグラフィックWebページを作成する方法を学びます。

ステップ05：トグルソースを選択します

トグルセクションから、トグルソースタイプ、位置、アニメーション、およびラベルを変更できます。

トグルソースオプションの横にあるドロップダウンリストを開きます。必要なトグルタイプを選択します。このチュートリアルのトグルタイプとしてボタンを選択しました。

次に、ボタンのテキストオプションからボタンコピーを変更します。ボタンアイコンを追加することもできます。キャンバスのボタンのすべての変更を確認してください。

ステップ06：クローズバーアイコンをカスタマイズします

オフキャンバスセクションには、右上隅にクロスアイコン（x）が付属しています。それをカスタマイズするには、Elementorパネルのクローズバーセクションを展開します。

そこからそれぞれのオプションを使用して、アイコンを無効にし、アライメントを変更し、アイコンタイプ、アイコンタイトルを変更することができます。あなたがこれらを自分で行うことができることを願っています。

WordPressでイベントカレンダーを作成する方法に関するチュートリアルを次に示します。

ステップ07：ウィジェットの設定を変更します

設定セクションを展開します。方向オプションから、オフキャンバスウィジェットの位置を変更できます。左、右、上、または下部に配置できます。

次に、コンテンツ遷移効果を選択できます。アニメーション効果をWebページに追加し、ボタンがクリックされたときに表示されます。

たとえば、コンテンツトランジションタイプとして展開を選択しました。次に、以下に添付されているビデオクリップを参照してください。ボタンがクリックされると、ページはオフキャンバスセクションとともに移動します。

同様に、他のオプションを構成します。

ステップ08：オフキャンバスウィジェットを様式化します

[スタイル]タブにアクセスして、 Offcanvasコンテンツを展開します。

ここから、オフキャンバスサイズを変更し、境界線タイプを追加し、境界幅を増やし、境界色の色を変更し、境界半径を設定できます。私たちがやったように、あなたが自分でできることを願っています。

コンテンツセクションを展開します。オフキャンバスウィジェットを使用して、コンテンツのコンテンツアライメント、バックグラウンドカラー、ボーダー幅、ボーダー幅、境界線の色、境界半径をカスタマイズするオプションを取得します。

同様に、タイポグラフィ、フォントサイズ、テキストの色を変更できます。

WordPressに360回転する製品写真を表示する方法に関する簡単なガイドを以下に示します。

ステップ09：トグルボタンをスタイライズします

同様に、トグルセクションを展開します。これにより、ボタンアライメント、タイポグラフィ、テキスト色、ボーダー半径、ボタンの背景などをカスタマイズできます。

ステップ10：クローズバーアイコンをカスタマイズします

クローズバーセクションを拡張することにより、閉じるアイコンの色、サイズ、その他のものをカスタマイズできます。

ステップ11：オフキャンバスウィジェットモバイルを応答します

各Web要素は、すべてのデバイスタイプに適切に表示されるように、モバイルデバイス用に最適化する必要があります。それ以外の場合は、ほとんどのWebサイトのすべてのトラフィックの約50％がモバイルユーザーから来ているため、大きなトラフィックの可能性を見逃す可能性があります。

モバイル最適化については、Elementorパネルの下部にある応答モードアイコンをクリックします。 Topbarは、異なる画面サイズを切り替えることができるオプションで表示されます。

次に、異なる画面サイズを切り替えて、それぞれのデバイスで設計が問題ないかどうかを確認します。問題がある場合は、必要に応じてフォントサイズ、ボタンサイズ、キャンバス幅、高さ、その他のオプションを変更できます。

変更は、他の画面に影響を与えることなく、その特定の画面サイズに対してのみ保存されます。したがって、オフキャンバスウィジェットモバイルを応答することができます。

ステップ12：オフキャンバスコンテンツウィジェットをプレビューします

次に、Webページのプレビューオプションに移動し、ウィジェットが正常に動作するかどうかを確認します。ご覧のとおり、それは私たちの側でうまく機能しています。

オフキャンバスコンテンツウィジェットを使用する際に考慮すべきこと

ウィジェットを最大限に活用するには、オフキャンバスコンテンツウィジェットを使用する際に注意深く考慮する必要があるいくつかのポイントがあります。以下でそれらを見てください。

• スムーズなユーザーエクスペリエンス

オフキャンバスコンテンツは、ユーザーが経験を乱すのではなく、サイトをナビゲートするのをサポートする必要があります。適切に調整されたアニメーションでウィジェットがスムーズに動作することを確認してください。ただし、特に携帯電話でパフォーマンスを低下させる可能性のある重いモーション効果を最小限に抑えます。

• 携帯電話に最適化します

すでに述べたように、今日のかなりの数のWeb訪問者は通常、モバイルデバイスユーザーから来ています。すべてのデバイスタイプに対してウェブサイトを適切に最適化する必要があります。それ以外の場合、モバイル中心のユーザーは非常に否定的な経験をします。

• 簡単な閉鎖

オフキャンバスコンテンツウィジェットには、簡単なクロージングオプションを組み込む必要があります。見つけるのが難しい場合、ユーザーは確かにイライラします。したがって、簡単にナビゲートできるようになるような方法で、閉じるアイコンを高く評価することを忘れないでください。

• コンテンツの関連性

オフキャンバスのコンテンツは、ナビゲーションツールやプロモーションバナーなどの特定の機能を満たすために、簡潔で集中する必要があります。過剰な情報や無関係な要素を含めることは、集中的でシームレスなユーザーエクスペリエンスを提供する目的を損なうことです。

最後の言葉！

オフキャンバスコンテンツウィジェットは、ユーザーをエンゲージし、コンバージョンを高める方法がわかったら、コンバージョンを高めるための強力な方法になる可能性があります。ウィジェットの基本的なチュートリアルをカバーしようとしました。ウィジェットのすべての機能とそれらの使用方法を議論することは本当に難しいからです。

したがって、このチュートリアルを超えて、ウィジェットで他にできることについてもっとアイデアを持ちたい場合は、Canvas Content DemoページのElementor Off Off Canvas Demoページにアクセスできます。サイトに直接コピーして貼り付けることができるオフキャンバスのデザインの良いコレクションを入手できます。

これ以上未回答のクエリがある場合は、下のコメントボックスからお知らせください。すぐに役立つ回答をご連絡いたします。