To add a WhatsApp button in Elementor, enable the WhatsApp widget In ElementsKit-Widgets 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:

1. Enable the Widget: Gehe zu ElementsKit → Widgets und schalten Sie das ein WhatsApp widget, then save.
2. Add to Page: Edit your page/template with Elementor and drag the WhatsApp Button/Chat widget into the design area.
3. Enter Contact Info: In the widget settings, add your WhatsApp contact number so clicks open a chat.
4. Configure the Chatbox: Set header text, default messages, and footer style (input/button/inner input) as needed.
5. 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.

Lesen Sie diese Dokumentation, um zu erfahren, wie Sie das Elementor WhatsApp-Schaltflächen-Widget von ElementsKit verwenden.

Schritt 1: Holen Sie sich den Elementor WhatsApp Button auf der Website – ElementsKit #

Um die WhatsApp-Schaltfläche auf Ihrer Website zu erhalten, aktivieren Sie zunächst das WhatsApp-Widget von ElementsKit, öffnen Sie dann den Elementor-Editor und ziehen Sie das Widget per Drag & Drop in den Designbereich.

WhatsApp-Widget aktivieren: #

Um das Widget zu aktivieren:

1. Navigieren Sie zu ElementsKit > Widgets.
2. Finden Sie die WhatsApp and Aktivieren Sie das Widget.
3. Klicken Sie auf ÄNDERUNGEN SPEICHERN.

Ziehen Sie das Widget per Drag-and-Drop: #

Ziehen Sie anschließend das ElementsKit Content Ticker-Widget per Drag & Drop in den Designbereich des Elementor-Editors.

Schritt 2: WhatsApp-Widget konfigurieren #

Sie können Kopfzeile, Textkörper, Fußzeile, Schaltfläche und Einstellungen des ElementsKit WhatsApp-Widgets konfigurieren.

Header #

1. Wählen Sie Profilfoto: Sie können der WhatsApp-Chatbox ein Profilfoto hinzufügen. Laden Sie ein Foto hoch oder wählen Sie eines aus der WordPress-Medienbibliothek aus.
2. Nutzername: Geben Sie Ihren Namen in das Feld „Benutzername“ ein.
3. Benutzertext: Sie können einen kurzen Text eingeben, der unter dem Benutzernamen erscheint.
4. Aktiven Punkt aktivieren: Zeigen Sie Ihren aktiven Status an, indem Sie den aktiven Punkt aktivieren.

5. Aktivieren Sie die benutzerdefinierte aktive Zeit(Verfügbar, wenn Active Dot aktiviert ist): Sie können den aktiven Status für eine bestimmte Tageszeit anzeigen, indem Sie diese Funktion aktivieren. Wenn diese Option aktiviert ist, sind die folgenden Optionen verfügbar:
   • Startzeit: Legen Sie eine Tageszeit fest, zu der Sie online sein werden.
   • Endzeit: Legen Sie eine Tageszeit fest, zu der Sie nicht mehr online verfügbar sein werden.
   • Wählen Sie Feiertage: Wählen Sie die freien Tage.
   • Geben Sie die Urlaubsnachricht ein: Sie können eine Nachricht für die Kunden festlegen, wenn Sie im Urlaub sind.

Körper #

• Loader aktivieren: Wenn diese Option aktiviert ist, wird beim Tippen eine Tippanimation auf dem Bildschirm des Benutzers angezeigt.

• Benutzernamen anzeigen: Sie können den Benutzernamen mit der Nachricht anzeigen, wenn Sie diese Option aktivieren.

• Asking Text: This text will appear by default when a user clicks the WhatsApp button.
  Notiz: If you’ve set a closing text, the asking text will not be displayed.

Fusszeile #

Das ElementsKit WhatsApp-Widget verfügt über drei verschiedene Stile für den Fußzeilenbereich.

Stil: Eingabe

Ein einfaches Chat-Feld, in dem Benutzer eine Nachricht schreiben und senden können.

• Wählen Sie Stil: Wählen Sie den Stil „Eingang".
• Eingabeplatzhalter: Geben Sie einen Platzhaltertext ein.
• Option „Link öffnen“: Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, wählen Sie aus, wohin er weitergeleitet werden soll. Es stehen drei Optionen zur Verfügung: 1. Gleiche Seite, 2. Neuer Tab und 3. Popup.

Stil: Knopf

In diesem Stil wird eine Schaltfläche angezeigt. Durch Klicken auf die Schaltfläche können Benutzer Ihnen Nachrichten über WhatsApp Web senden.

1. Wählen Sie Stil: Wählen Sie den Stil „Taste".
2. Symbol: Sie können der Nachrichtenschaltfläche ein Symbol hinzufügen. Laden Sie ein Symbol als SVG hoch oder wählen Sie eines aus der Elementor-Symbolbibliothek aus.
3. Text: Geben Sie einen Schaltflächentext ein.
4. Option „Link öffnen“: Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, können Benutzer zu einer der folgenden Seiten weitergeleitet werden: 1. Gleiche Seite, 2. Neuer Tab und 3. Popup.

Stil: Innerer Eingang

Ein einfaches Chat-Feld, aber das Feld ist innerhalb des WhatsApp-Fensters gefaltet.

1. Wählen Sie Stil: Wählen Sie den Stil „Innerer Input“.
2. Eingabeplatzhalter: Geben Sie einen Platzhaltertext ein.
3. Option „Link öffnen“: Wenn der Benutzer auf die Schaltfläche „Senden“ klickt, wählen Sie aus, wohin er weitergeleitet werden soll. Es stehen drei Optionen zur Verfügung: 1. Gleiche Seite, 2. Neuer Tab und 3. Popup.

Taste #

• Wählen Sie Stil: Wählen Sie den Schaltflächenstil aus den angegebenen Optionen aus.
• Symbol: Sie können ein Symbol für die WhatsApp-Schaltfläche von Elementor hinzufügen (sofern für den von Ihnen gewählten Stil eine Symboloption verfügbar ist).
• Text: Fügen Sie einen Text auf der Schaltfläche hinzu (wenn für den von Ihnen gewählten Stil eine Symboloption verfügbar ist).
• Subtext: This is a short supporting line that appears below or alongside the main button text.

Einstellungen #

1. WhatsApp-Nummer: Hier können Sie die Kontaktnummer Ihres WhatsApp-Dienstes eingeben. Dies ist die Nummer, für die Sie das WhatsApp-Widget für Benutzer festgelegt haben.
2. Von Anfang an anzeigen: Wenn Sie einstellen Zeigen Dann erscheint das Chat-Feld von Anfang an, wenn ein Besucher Ihre Website besucht. Und wenn Sie einstellen Verstecken Dann sehen sie nur das Symbol und müssen darauf klicken, um einen Chat zu starten.

Schritt 3: Passen Sie die Elementor WhatsApp-Schaltfläche an #

Mit ElementsKit können Sie den Stil und das Erscheinungsbild der WhatsApp-Schaltfläche und der Chatbox ändern.

Klebriger Knopf #

1. Knopfbreite: Sie können die Breite der WhatsApp-Kontaktschaltfläche anpassen.
2. Knopfhöhe: Sie können auch die Höhe der WhatsApp-Kontaktschaltfläche anpassen.
3. Randradius: Ändern Sie die Form der Schaltfläche mithilfe des Randradius.
4. Schaltflächenhintergrund: Wählen Sie eine Farbe für die WhatsApp-Schaltfläche.
5. Box Schatten: It adds a subtle shadow around the WhatsApp button to make it stand out from the background.

6. Symbolfarbe: Wählen Sie mit der Schaltfläche eine Farbe für das WhatsApp-Symbol.
7. Symbolhintergrund: Wählen Sie eine Hintergrundfarbe für das Symbol.
8. Symbolgröße: Passen Sie die Symbolgröße an.
9. Symbolauffüllung: Sie können den Abstand für das Schaltflächensymbol anpassen.

10. Textfarbe: Wählen Sie eine Farbe für den Schaltflächentext.
11. Typografie: Legen Sie die Typografie des Schaltflächentextes fest.
12. Abstand zwischen: Passen Sie den Abstand zwischen dem Schaltflächentext und dem Symbol an.

Header #

• Header-Hintergrund: Wählen Sie eine Farbe für den Header-Hintergrund der WhatsApp-Chatbox.
• Benutzerbildstil – Rahmentyp, Breite und Farbe: Sie können einen Rahmentyp für das Benutzerbild auswählen, die Rahmenbreite festlegen und eine Rahmenfarbe auswählen.

• Farbe des Benutzernamens: Wählen Sie eine Farbe für den Benutzernamen in der Kopfzeile.
• Benutzertextfarbe: Wählen Sie eine Farbe für den Text unter dem Benutzernamen.
• Benutzertypografie: Legen Sie die Typografie für den Benutzernamen in der Kopfzeile fest.
• Typografie des Benutzertextes: Legen Sie die Typografie für den Text unter dem Benutzernamen fest.

• Aktiver / inaktiver Punkt – Größe: Passen Sie die Größe des aktiven/inaktiven Punkts an.
• Aktiver/inaktiver Punkt – Rahmenfarbe: Wählen Sie eine Rahmenfarbe für den aktiven/inaktiven Punkt.
• Schließen-Symbol – Farbe: Legen Sie eine Farbe für das Symbol zum Schließen der Chatbox fest.
• Schließen-Symbol – Hover-Farbe: Wählen Sie eine Farbe für das Symbol zum Schließen der Chatbox, wenn Sie mit der Maus darüber fahren.

Körper #

• Themenfarbe: Wählen Sie eine Farbe für den Körperbereich.
• Textfarbe erfragen: Wählen Sie eine Textfarbe für die Nachricht aus.
• Fragetext-Typografie: Legen Sie die Typografie des Nachrichtentextes fest.

Fusszeile #

• Farbe des Eingabeplatzhalters: Wählen Sie eine Farbe für den Platzhaltertext des Eingabefelds.
• Eingabe-Platzhalter-Typografie: Legen Sie die Typografie für den Platzhaltertext des Eingabefelds fest.

Content-Wrapper #

In diesem Abschnitt können Sie die anpassen Breite der WhatsApp-Chatbox.

Wie das WhatsApp-Widget enthält ElementsKit Hunderte von erweiterten Elementen für Elementor. Holen Sie sich ElementsKit und verwenden Sie diese Elemente, um WordPress-Websites mit zahlreichen Funktionen zu erstellen.