WordPressにフローティングボタンを追加する完全な方法（Elementor Templates）

フローティングボタンフローティングボタンは、フローティングアクションボタン（FAB）と呼ばれることもあります。この記事では、フローティングボタンのコア機能、使用シナリオを理解し、追加する手順を説明します。

フローティングボタンとは？

フローティングボタンは一般的なWebインタラクション要素で、通常はページの隅や端に固定され、ページのスクロールに合わせて連続的に表示されます。

主な特徴のいくつかを以下に挙げる：

ハイライトフローティングボタン再懸濁ページのコンテンツの上に、常に表示され、ユーザーがいつでも簡単にクリックできる。
重要な操作通常、カスタマーサービスへの連絡、チャットの開始、新しいコンテンツの追加など、重要なアクションをホストするために使用されます。
マテリアルデザインのスタイルグーグルのマテリアルデザイン・ガイドラインは、多くの場合、アニメーションと視覚的アピールを用いて、それを標準化している。
アイコン認識フローティングボタンは通常、アイコンを含みます。例えば、プラスは "追加"、鉛筆は "編集 "などです。
双方向性ボタンは、デフォルト、押された、フォーカスされた、無効など、ユーザーのアクションに応じて異なる状態を表示し、インタラクティブなフィードバックを向上させることができます。

一般的な使用シナリオ

例えば、ヤンはフラワーショップをオープンしたばかりだ。見込み客を逃さないために、彼女はフローティングボタンを追加し、訪問者がウェブサイトのどのページを訪れても、いつでも簡単に店主に連絡できるようにした。

その他のケース

新しいコンテンツを作成するフローティングボタンは、メールやメモアプリで新しいコンテンツを素早く作成するためによく使われます。
クイックナビゲーション一部の画面では、フローティングボタンで特定のエリアやページにジャンプできます。
トリガー操作タスク管理クラスのアプリケーションでは、新しいタスクを追加するために使用されます。

フローティングボタンを追加する方法

注：フローティング・ボタンはテンプレートであり、ウィジェットや通常の要素ではありません。これらはワードプレスバックエンドに追加する。エレメンタエディターで直接。

以下は追加ステップの説明である。

フローティングボタンの追加: フルステップ

以下は、「カスタマーサービスとチャット」フローティングボタンの作成例です。このボタンは Elementor のフローティングボタンテンプレートに基づいて実装されています。

⚠️ 注意を引くフローティングボタンはプリセットのテンプレートを使用する必要があり、内容をカスタマイズすることは可能ですが、ゼロから新しいテンプレートを作成することはできません。

ステップ1：テンプレートの作成

フローティング・ボタンはテンプレートをベースにしているので、最初にテンプレートを作成する必要があります。

サインインワードプレスバックステージ、入場：テンプレート > フローティングボタン(テンプレート > フローティングボタン)

右側にフローティングエレメントの作成パネルが開きます。

💡 ヒント: 最初のフローティングエレメントを作成したら、Template > Newをクリックして、いつでもフローティングボタンを追加できます。

Add New Floating Element]（新しいフローティング要素を追加）をクリックします。

ページはテンプレートギャラリーを開き、自動的に「フローティングボタン」カテゴリーに切り替わります。

お気に入りのテンプレートにカーソルを合わせ、[挿入]をクリックします。

テンプレートはエレメンタエディター・キャンバスで

🔔 注意: あなたのサイトへの訪問者には、最初はメッセンジャーのアイコンのみが表示されます。クリックされると、フローティングボタンのインターフェイスが広がります。

ステップ2：フローティングボタンの内容を編集する

テンプレートによって提供されるセットアップ項目は異なりますが、以下はセットアップフローのサンプルです：

チャットを受信するためのカスタマーサービス・アカウントの設定
- パネルで ユーザー名フィールド対話の受信元となるカスタマーサービスアカウント番号を入力してください。
- 訪問者がチャットボタンをクリックすると、そのアカウントにメッセージが送信されます。

📚 ソーシャルアプリのユーザー名を取得する方法を知りたいですか？公式ドキュメント「ウィジェットからスマートリンクを作成するには？

トップバーに表示されるカスタマーサービス名の設定
- トップバーの設定を開きます。
- 名前]フィールドに入力します：アレックス・スミス

メッセージバブルにニックネームを設定する
- メッセージバブルの設定を開く。
- 名前]フィールドに入力します：アレックス

スタイルとシェイプの調整
- スタイルタブに切り替える。
- チャットボックスの設定を開きます。
- コーナー "のドロップダウンメニューから"かんじょう「チャットボックスの形状を変更する

フローティングボタンの位置を調整する
- 詳細タブに切り替える。
- 設定"水平位置「のために左
- 設定"縦位置「のためにセンター

編集が終わったら、右上の[Publish]（発行）をクリックします

ステップ3：フローティングボタンの表示範囲の設定（Elementor Pro）

エレメンタル・プロユーザーは、フローティングボタンをどのページに表示するかを設定できます。推奨設定はサイト全体表示すべてのページでアクションボタンを使用するためです。

短い

フローティングボタンフローティングボタンはデザイン要素であるだけでなく、ユーザーが効率的にアクションを完了できるようサポートする重要な機能でもあります。インタラクションを増やすためであれ、迅速なサポートを提供するためであれ、ページ全体の機能を向上させるためであれ、フローティングボタンには本当の意味があります。

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