To add a WhatsApp button in Elementor, enable the WhatsApp widget で ElementsKit ウィジェット and then drag and drop the WhatsApp Button/Chat widget into your Elementor layout where you want it to appear. After placing it, enter your WhatsApp number and customize titles, styles, and behavior so visitors can easily message you.
Steps to Add a WhatsApp Button:
- Enable the Widget: に行く ElementsKit → Widgets そして、 ワッツアップ widget, then save.
- Add to Page: Edit your page/template with Elementor and drag the WhatsApp Button/Chat widget into the design area.
- Enter Contact Info: In the widget settings, add your WhatsApp contact number so clicks open a chat.
- Configure the Chatbox: Set header text, default messages, and footer style (input/button/inner input) as needed.
- Style the Button: Use style options to adjust colors, size, position, icon, spacing, and typography.
Once published, your WhatsApp button will appear on the page and let visitors start chats directly with your chosen number.
ElementsKit の Elementor WhatsApp ボタン ウィジェットの使用方法については、このドキュメントをお読みください。
ステップ 1: ウェブサイトに Elementor WhatsApp ボタンを取得する - ElementsKit #
ウェブサイトに WhatsApp ボタンを追加するには、まず ElementsKit WhatsApp ウィジェットを有効にし、次に Elementor エディターを開いてウィジェットをデザイン領域にドラッグ アンド ドロップします。
WhatsAppウィジェットを有効にする: #
ウィジェットを有効にするには:
- 案内する ElementsKit > ウィジェット.
- を見つける WhatsApp and ウィジェットを有効にする.
- 「変更を保存」をクリックします.
ウィジェットをドラッグアンドドロップします: #
その後、ElementKit コンテンツ ティッカー ウィジェットを Elementor エディターのデザイン領域にドラッグ アンド ドロップします。
ステップ2: WhatsAppウィジェットを設定する #
ElementsKit WhatsApp ウィジェットのヘッダー、本文、フッター、ボタン、設定を構成できます。
ヘッダ #
- プロフィール写真を選択: WhatsApp チャットボックスにプロフィール写真を追加できます。写真をアップロードするか、WordPress メディア ライブラリから選択します。
- ユーザー名: ユーザー名フィールドに名前を入力します。
- ユーザーテキスト: ユーザー名の下に表示される短いテキストを入力できます。
- アクティブドットを有効にする: アクティブ ドットを有効にしてアクティブ ステータスを表示します。
- カスタムアクティブ時間を有効にする(アクティブドットが有効な場合に使用可能): この機能を有効にすると、特定の時間帯のアクティブ ステータスを表示できます。有効にすると、次のオプションが利用できるようになります。
- 始まる時間： オンラインになる時間を設定します。
- 終了時間： オンラインで利用できなくなる時間帯を設定します。
- 休日を選択: 休日を選択してください。
- 休暇メッセージを入力してください: 休暇中に顧客に送信するメッセージを設定できます。
体 #
- ローダーを有効にする: 有効にすると、入力時にユーザーの画面に入力アニメーションが表示されます。
- ユーザー名を表示: このオプションを有効にすると、メッセージとともにユーザー名を表示できます。
- Asking Text: This text will appear by default when a user clicks the WhatsApp button.
注記： If you’ve set a closing text, the asking text will not be displayed.
フッター #
ElementsKit WhatsApp ウィジェットには、フッター セクション用の 3 つの異なるスタイルが付属しています。
スタイル: 入力
ユーザーがメッセージを書いて送信できるシンプルなチャット フィールド。
- スタイルを選択してください: スタイルを選択してください入力".
- プレースホルダーを入力: プレースホルダーテキストを入力します。
- リンクを開くオプション: ユーザーが送信ボタンをクリックしたときにリダイレクトされる場所を選択します。 使用できるオプションは 3 つあります: 1. 同じページ、2. 新しいタブ、3. ポップアップ。
スタイル: ボタン
このスタイルでは、ボタンが表示されます。ボタンをクリックすると、ユーザーは WhatsApp Web を使用してメッセージを送信できます。
- スタイルを選択してください: スタイルを選択してくださいボタン".
- アイコン： メッセージ ボタンにアイコンを追加できます。アイコンを SVG としてアップロードするか、Elementor アイコン ライブラリから選択します。
- 文章： ボタンのテキストを入力します。
- リンクを開くオプション: ユーザーが送信ボタンをクリックすると、ユーザーは次のいずれかにリダイレクトされます: 1. 同じページ、2. 新しいタブ、3. ポップアップ。
スタイル: 内部入力
シンプルなチャット フィールドですが、フィールドは WhatsApp ウィンドウ内に折りたたまれています。
- スタイルを選択してください: スタイルを選択してください内部入力“.
- プレースホルダーを入力: プレースホルダーテキストを入力します。
- リンクを開くオプション: ユーザーが送信ボタンをクリックしたときにリダイレクトされる場所を選択します。 使用できるオプションは 3 つあります: 1. 同じページ、2. 新しいタブ、3. ポップアップ。
ボタン #
- スタイルを選択してください: 指定されたオプションからボタンのスタイルを選択します。
- アイコン： Elementor WhatsApp ボタンにアイコンを追加できます (選択したスタイルにアイコン オプションがある場合)。
- 文章： ボタン上のテキストを追加します (選択したスタイルにアイコン オプションがある場合)。
- Subtext: This is a short supporting line that appears below or alongside the main button text.
設定 #
- WhatsApp番号: ここで、WhatsApp サービスの連絡先番号を入力できます。これは、ユーザー用に WhatsApp ウィジェットを設定した番号です。
- 最初から表示: 設定した場合 見せる 訪問者がウェブサイトを訪問した際に最初からチャットボックスが表示されます。 隠れる すると、アイコンのみが表示され、チャットを開始するにはそれをクリックする必要があります。
ステップ3：Elementor WhatsAppボタンをカスタマイズする #
ElementsKit を使用すると、WhatsApp ボタンとチャットボックスのスタイルと外観を変更できます。
スティッキーボタン #
- ボタンの幅: WhatsApp の連絡ボタンの幅を調整できます。
- ボタンの高さ: WhatsApp 連絡ボタンの高さを調整することもできます。
- 境界線の半径: border-radius を使用してボタンの形状を変更します。
- ボタンの背景: WhatsApp ボタンの色を選択します。
- ボックスシャドウ: It adds a subtle shadow around the WhatsApp button to make it stand out from the background.
- アイコンの色: ボタンを使用して WhatsApp アイコンの色を選択します。
- アイコンの背景: アイコンの背景色を選択します。
- アイコンサイズ: アイコンのサイズを調整します。
- アイコンのパディング: ボタンアイコンのパディングを調整できます。
- テキストの色： ボタンのテキストの色を選択します。
- タイポグラフィ： ボタンテキストの書体を設定します。
- 間のスペース: ボタンのテキストとアイコン間のスペースを調整します。
ヘッダ #
- ヘッダーの背景: WhatsApp チャットボックスのヘッダーの背景の色を選択します。
- ユーザー画像スタイル - 境界線の種類、幅、色: ユーザー画像の境界線の種類を選択し、境界線の幅を設定し、境界線の色を選択できます。
- ユーザー名の色: ヘッダーのユーザー名の色を選択します。
- ユーザーテキストの色: ユーザー名の下のテキストの色を選択します。
- ユーザータイポグラフィ: ヘッダーのユーザー名の書体を設定します。
- ユーザーテキストのタイポグラフィ: ユーザー名の下のテキストの書体を設定します。
- アクティブ/非アクティブドット – サイズ: アクティブ/非アクティブドットのサイズを調整します。
- アクティブ / 非アクティブ ドット – 境界線の色: アクティブ/非アクティブ ドットの境界線の色を選択します。
- 閉じるアイコン – 色: チャットボックスの閉じるアイコンの色を設定します。
- 閉じるアイコン – ホバー色: チャットボックスにマウスを置いたときの閉じるアイコンの色を選択します。
体 #
- テーマカラー: 本文部分の色を選択します。
- 質問テキストの色: メッセージのテキストの色を選択します。
- テキストのタイポグラフィに関する質問: メッセージテキストの書体を設定します。
フッター #
- プレースホルダーの色を入力してください: 入力フィールドのプレースホルダーテキストの色を選択します。
- 入力プレースホルダーの書体: 入力フィールドのプレースホルダーテキストの書体を設定します。
コンテンツラッパー #
このセクションでは、 WhatsAppチャットボックスの幅.
WhatsApp ウィジェットと同様に、ElementKit には Elementor 用の高度な要素が何百も付属しています。ElementKit を入手して、それらの要素を使用して、機能が充実した WordPress ウェブサイトを構築してください。
