Avada Off Canvas パネルをマスターしましょう！ポップアップ、サイドバーメニュー、スライダーをワンステップで作成できます！

アバダのテーマオフキャンバスビルダーツールを使用すると、以下の機能を簡単に実装できます。ポップアップウィンドウそしてスライド式サイドバーそしてモーダルボックスそしてフライアウトメニューなどの効果があり サードパーティのプラグインは不要そしてゼロ・コード・オペレーションこのチュートリアルでは、ビジュアルなインターフェイスを使用して作成する方法を紹介します。このチュートリアルでは メール購読用スライドバー訪問者が4秒間滞在すると自動的に表示されるように設定します。潜在顧客の電子メールを収集したり、イベントプロモーションを行ったり、重要なメッセージを表示したりするのに最適です。

アバダ・オフ・キャンバス・パネル

アバダ・オフ・キャンバス・ビルダー はアバダテーマに付属する高度な機能モジュールで、以下のようなさまざまな「ページ外」コンテンツエリアを簡単に作成できます。ポップアップスライドバー、フライアウトメニュー、モーダルなど。追加のプラグインをインストールする必要がないまた、ユーザーの行動と高度に統合することで、精密なマーケティング、ユーザーとのインタラクション、機能強化、その他の目的を達成します。

Avadaのオフキャンバスビルダーは、以下の一般的なフォームをサポートしています：

手続き

I. キャンバスビルダーをオフにする

• WordPressのバックエンドにログインします。
• 左のメニューバーへ アバダ > オフ・キャンバス.
• ページ右上をクリック "新しいオフキャンバスを追加"(新しいオフキャンバスを追加）。
• 例えば、この項目に名前を付ける：購読サイドバー.
• オフキャンバスの新規作成」をクリックする。

II. テンプレートを選ぶか、ゼロから始めるか

• スクラッチコンテナを追加し、コンテンツを手動でレイアウトします。
• Avada Studioテンプレートの使用(初心者にお勧め）：
  • 打点 「アバダ・スタジオ ボタン。
  • ポップアップしたテンプレートギャラリーで、"サブスクリプション分類
  • お好きなスライダー・テンプレートをお選びください：スライディング・バー).
  • インポート」をクリックし、「ローカルの色とフォント設定を使用する」にチェックを入れ、テンプレートをインポートします。

カスタム・オフ・キャンバス・コンテンツ

テンプレートがインポートされると、プリセットの構成が表示されます：

• 写真
• タイトルと説明文
• フォーム（通常はアバダフォーム）

あなたのブランド・スタイルに合わせて、以下の変更を加えることができる：

• 画像を置き換える（［画像］＞［メディアを置き換える］をクリック）。
• テキスト内容を修正する（テキストエディタを直接クリック）。
• ボタンのコピーを調整する。例えば、「今すぐ購読する」を「今すぐ購読する」に変更する。
• フォームの内容を編集する必要がある場合は、別の アバダ > フォーム ページ設定。

オフキャンバスの外観と動作の設定

エディターの右側にはいくつかのタブがありますが、順番に説明します：

1.全般

• タイプスライディングバー」を選択。
• 初期状態クローズに設定
• ポジション右」に設定。
• トランジションプッシュ」を選択します。

2.デザイン

• セットアップ背景色写真でもいい。
• ボーダーやシャドウを追加して、より立体的なビジョンに。
• 幅、間隔、アライメントを設定する。

3.オーバーレイ

• マスクの背景を有効にするチェックを入れると、ポップアップ・ウィンドウが表示されたときにページが暗くなり、より注目を集めます。

4.閉じる

• マスクエリアをクリックすると閉じるように設定できる。
• 打点 エスケープ 近い。
• 閉じるボタンを表示するかどうか、ボタンの位置を設定します。

5.アニメーション

• スライドイン、フェードインなどの入退場アニメーションを設定可能。

V. トリガー条件の設定

このステップでは、オフキャンバスを決定する。 いつ、どのように？.

1.条件（どのページで）

• デフォルトは「サイト全体」。
• トップページ、記事ページ、特定のカテゴリーページのみに表示するように設定できます。

2.トリガー

トリガーは1つだけでなく、2つ選ぶこともできる：

• 終了の意図: ユーザーがページを離れる準備ができていることを検知する（しばしばポップアップウィンドウアラート).
• ページ掲載時間例えば、タイムディレイを設定する：
  • ページ滞在時間」を有効にする
  • に設定します。 4秒。

3.規則（頻度と条件を示す）

• 一度だけ表示するか、数日おきに表示するかを設定する。
• ログイン状況やデバイス（携帯電話/パソコン）に応じて表示されます。
• 例えば、ログインしていないユーザーにはモバイルでのみ表示される。

第6に、効果を保存してテストする。

1. 右上の「保存」ボタンをクリックします。
2. サイトのトップページに戻り、ページを更新する。
3. スライダーが右からページに押し込まれ、設定したものが表示されるまで4秒待ちます。

高度なヒント

• 例えば、告知ポップアップ用とナビゲーションメニュー用など、複数のOff Canvasを作成することができます。
• インポート/エクスポート」機能を使えば、オフキャンバスの設定を他のサイトに素早くコピーできます。
• Avada Forms + メールサービスの組み合わせ (例) メールチンプ)を使って自動メールマーケティングを行うことができる。

概要

Avada Off Canvas Builder では以下のことが可能です。美しく効率的なポップアップやスライドパネルを簡単に作成できます。これは、ユーザーの注意を引き、コンバージョンを高めるために使用されます。直感的なインターフェイス、セルフテンプレートライブラリまた、プログラミングの経験がなくても、複雑なインタラクションのための豊富なビヘイビア設定が可能です。Avadaテーマについてもっと知りたい方は、こちらの記事をご覧ください。Avadaテーマの子守チュートリアル"には、Avadaテーマのテンプレートインポート、ページ設定、ページレイアウト、Woocommerce統合設定など、Avadaテーマの操作に関するすべての知識が含まれています。