Elementorでフローティングバーを追加するための完全ガイド

フローティングバーとは、ウェブページの上部または下部に固定されたバナーのことで、プロモーション情報や重要なお知らせ、行動喚起（CTA）などを表示し、閲覧を妨げることなく訪問者の注意を引くためによく使用されます。

フローティング・バーは、ウィジェットではなくテンプレートであることに注意してください (ウィジェット)またはその他の要素に含まれていなければならない。これはワードプレスバックエンドで追加してください。エレメンタエディターで直接作成する。

一般的な使用シナリオ

事例
ヤンは洋服店を経営している。天気予報では数週間後に雨が降るということで、彼女はウェブサイトにフローティングバーを追加し、訪問者に傘を売っていることを思い出させる。このフローティングバーはすべてのページの一番下に表示されます。

その他の使用例::

プロモーション：割引コードをフローティングバーに表示可能
ナビゲーショナル・ジャンプ：ユーザーを新しいセクションや特別なページに誘導する。
アクション・トリガー：セットアップ CTA ユーザーを購読またはチャット機能をクリックするよう誘導するボタン

フローティング・バーの追加：ステップ・バイ・ステップ・ガイド

下記は、カスタマーサービスとのチャットにユーザーを誘導するフローティングバーを作成する完全な例です。このフローティングバーは、Elementorによって提供される定義済みのテンプレートに基づいて行われます。

注目してください：

フローティング・バーは、既存のテンプレートに基づいて作成されます。
コンテンツはカスタマイズできるが、構造はテンプレート・ライブラリから選択する必要がある。

ステップ1：フローティング・テンプレートの作成

フローティング・バーはテンプレート・タイプなので、まずテンプレートを作成する必要がある。

サインインワードプレスバックステージ、入場：
テンプレート > フローティング・エレメント

右のボタンをクリックしてください：新しいフローティング・エレメントの追加

ドロップダウンメニューから選択する：フローティング・バー

(オプション) フローティング・バーに名前を付けます（例：「Umbrella Promotional Bar」）。

打点フローティング・エレメントの作成

システムは自動的にElementorを開くテンプレートライブラリをクリックし、フローティング・バーのカテゴリーにジャンプします。この時点で、リストからテンプレートを選択する必要があります。

ヒント：「Pro」と表示されているテンプレートは、以下の場合にのみ使用できます。エレメンタル・プロユーザーの使い方。

ステップ2：テンプレートの挿入

お気に入りのテンプレートにカーソルを合わせて挿入

テンプレートはElementorエディタに読み込まれます。

ステップ3：フローティングバーの内容を編集する

で選択したテンプレートに応じて、フローティングバーを自由に調整できる。アイコンテキスト、CTAボタン、位置など。

以下はその例での操作である：

1.アイコンの修正

のパネルを見つける。 アイコン・フィールド

アイコンギャラリーを開くには、右側のアイコンボタンをクリックします。

傘のアイコンを探して選択し、「挿入」をクリックする。

2.バナーテキストの修正

見つける アナウンス（告知内容）フィールド
修正内容はこうだ：傘をご覧ください。(嵐ですか？傘を見に来てください)

3.CTAボタンの設定

とおす CTAボタン・フィールド

ボタンのテキストを次のように修正する：ドライでいること！

ボタンリンクにジャンプページリンクを追加

4.表示位置の変更

への切り替え 詳細タブ

一番下のアイコンをクリックする（ページの一番下にフローティングバーを置くことを表す）

プレビューの際、ブラウザの下部にフローティングバーが表示されます。

ステップ4：公開と表示条件の設定

右上のPublishボタンをクリックします。

ポップアップ・ウィンドウで条件追加

を使用している場合はエレメンタル・プロどのページ、記事、カテゴリーにフローティングバーを表示するかを設定できます。例えば、トップページにのみ表示する、商品ページに表示する、などです。

条件を設定したら保存して閉じる

この場合、フローティング・バーは指定されたページに表示され、訪問者の注意を引きます。

短い

フローティングバーは、プロモーションやお知らせ、インタラクティブなボタンを表示するのに適した、押し付けがましくないフロントエンドプロンプトです。作成はテンプレートに依存しますが、コンテンツとスタイルは自由です。使用方法エレメンタル・プロユーザーは、ウェブサイトのスタイルに合うように表示条件やページ範囲を設定することができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み