Priorisierter Support
Help Center / Themes / Hello Biz Theme / Kontakt-Widget

Kontakt-Widget

Zuletzt aktualisiert: September 3, 2025

Das Widget hinzufügen

So greifen Sie auf ein Widget zu und verwenden es:

  1. Klicken Sie im Elementor Editor auf +.
    Alle verfügbaren Widgets werden angezeigt.

  2. Klicken oder ziehen Sie das Widget auf die Arbeitsfläche. Weitere Informationen finden Sie unter Elemente zu einer Seite hinzufügen.

Was ist das Kontakt-Widget?

Im Allgemeinen sollten Websites eine einfache Möglichkeit bieten, damit potenzielle Kunden oder Klienten Sie kontaktieren können. Das Kontakt-Widget ist eine schnelle Möglichkeit, Ihre Kontaktdaten zu einer Webseite hinzuzufügen.

Sehen Sie sich alle verfügbaren Optionen des Kontakt-Widgets an.

Häufiger Anwendungsfall

Blake erstellt eine Website für eine Sportsbar. Sie verwenden das Kontakt-Widget, um eine „Kontakt“-Seite zu erstellen, damit Kunden die Bar schriftlich oder telefonisch kontaktieren können, um Reservierungen vorzunehmen.

Beispiel

Zusätzliche Anwendungsfälle

  • Fügen Sie Kontaktinformationen zum Header und/oder Footer einer Website hinzu.

Ein Kontakt-Widget hinzufügen: Schritt für Schritt

Im folgenden Beispiel erstellen wir eine „Kontakt“-Seite.

Ein Kontakt-Widget hinzufügen

So fügen Sie ein Kontakt-Widget hinzu:

  1. Ziehen Sie das Kontakt-Widget auf die Arbeitsfläche.
  2. Wählen Sie im Bereich Layout des Panels eine von drei Voreinstellungen für die Kontaktinformationen.
  3. Öffnen Sie den Bereich Text.
  4. Geben Sie im Feld Überschrift ein: Kontakt.
  5. Geben Sie im Feld Beschreibung ein: Schreiben oder rufen Sie uns für Reservierungen oder andere Anfragen an.
  6. Öffnen Sie den Bereich Kontaktdetails.
    Standardmäßig gibt es vier Bereiche im Kontakt-Widget. Es gibt drei Arten von Bereichen:
    1. Kontakt-Links: Entwickelt, um E-Mail-Adressen, Telefonnummern und andere Kontaktdetails anzuzeigen.
    2. Text: Entwickelt, um freien Text anzuzeigen.
    3. Soziale Symbole: Entwickelt, um Links zu verschiedenen Social-Media-Seiten anzuzeigen.
  7. Gruppe 1 enthält Kontakt-Links, hier fügen wir Möglichkeiten hinzu, wie Kunden die Bar per E-Mail oder Telefon kontaktieren können.
  8. Geben Sie im Textfeld Unterüberschrift ein: Rufen Sie uns an.
  9. Klicken Sie im Bereich Links auf das Feld Anrufen.
  10. Geben Sie im Feld Nummer Ihre Telefonnummer ein.
  11. Klicken Sie auf das Feld E-Mail und geben Sie Ihre E-Mail-Adresse und eine Betreffzeile ein. Das Feld Nachricht lassen wir leer.
    Kontaktdetails ermöglicht es Ihnen, verschiedene Kontaktmöglichkeiten hinzuzufügen. Fügen wir eine WhatsApp-Nummer hinzu.
  12. Klicken Sie auf Element hinzufügen.
  13. Klicken Sie auf das Feld Symbol und wählen Sie Symbolbibliothek.
    Dadurch wird die Symbolbibliothek geöffnet.
  14. Wählen Sie das WhatsApp-Symbol aus der Bibliothek aus und klicken Sie auf Einfügen.
  15. Wählen Sie WhatsApp aus der Dropdown-Bibliothek „Plattform“ aus.
  16. Geben Sie eine WhatsApp-Nummer in das Feld Nummer ein.
  17. In unserem Fall möchten wir keine Öffnungszeiten anzeigen. Schalten Sie Gruppe 2 auf Ausblenden.
  18. Fügen wir eine Möglichkeit hinzu, wie Besucher die Bar finden können. Wählen Sie in Abschnitt 3 Waze aus dem Dropdown-Menü Plattform aus.
  19. Fügen Sie im Feld Link einen Waze-Link hinzu. Konsultieren Sie die Waze-Dokumentation für Details zur Erstellung eines Waze-Links.
  20. Abschnitt 4 enthält Links zu sozialen Medien. Die Bar hat nur ein Instagram-Konto, klicken Sie daher zuerst auf die Löschsymbole neben den X- und TikTok-Symbolen.
  21. Klicken Sie auf das Feld Instagram und geben Sie im Feld Link einen Link zu einem Instagram-Konto ein.
  22. Im Bereich Karte können Sie einen Link zu Google Maps hinzufügen. Details finden Sie unter Google Maps-Integration.

Einstellungen für das Kontakt-Widget

Sie können Ihre Widgets mithilfe von Inhalten, Stilen und anderen erweiterten Parametern anpassen, was Ihnen große Flexibilität bei der Anpassung an Ihre Bedürfnisse bietet. Klicken Sie auf die Registerkarten unten, um alle für dieses Widget verfügbaren Einstellungen anzuzeigen.

Tab „Inhalt“

Elemente und Steuerelemente hinzufügen, löschen und bearbeiten.

Wählen Sie eines von drei grundlegenden Layouts für Ihr Kontakt-Widget.

Ein kurzer Titel für Ihr Kontakt-Widget.

Verwenden Sie das Dropdown-Menü, um zeinen HTML-Tag für Ihre Überschrift auszuwählen. Zu den Optionen gehören H1 bis H6, Div, Span oder Paragraph. Wir empfehlen die Verwendung der Standardeinstellung.

Ein oder zwei Sätze, die den Inhalt des Kontakt-Widgets beschreiben. Wenn Sie beispielsweise möchten, dass Besucher Sie für Reservierungen kontaktieren, wäre dies der Ort, an dem Sie es erwähnen.

Verwenden Sie das Dropdown-Menü, um zeinen HTML-Tag für Ihre Überschrift auszuwählen. Zu den Optionen gehören H1 bis H6, Div, Span oder Paragraph. Wir empfehlen die Verwendung der Standardeinstellung.

Standardmäßig hat das Kontakt-Widget 4 Bereiche – Gruppen 1-4. Gruppe 1 muss sichtbar sein, aber die anderen Gruppen haben einen Schalter, mit dem Sie sie ausblenden können.

Verwenden Sie das Dropdown-Menü, um einen von drei Typen für jede Gruppe auszuwählen:

  • Kontakt-Links: Entwickelt, um Informationen wie die folgenden anzuzeigen:
    • E-Mail
    • Telefonnummern
    • WhatsApp-Nummern
    • Facebook Messenger-Links
    • Viber-Links
    • Google Maps-Links
    • Waze-Position
    • URL
  • Text: Fügen Sie der Gruppe Freitext hinzu.
  • Soziale Symbole: Fügt Symbole und Links zu Ihren Social-Media-Seiten hinzu. Wenn Sie beispielsweise ein Instagram-Konto haben, können Sie ein Instagram-Symbol mit einem Link zu Ihrem Konto hinzufügen.

Fügen Sie einer Gruppe einen Titel hinzu.

Links erscheinen in den Gruppen Kontaktdetails und Soziale Symbole.

  • Klicken Sie auf einen Link, um Informationen im Link zu bearbeiten. Klicken Sie beispielsweise auf den Link Anrufen, um eine Telefonnummer hinzuzufügen. Sie können auch die Beschriftung des Links und den Linktyp ändern.
  • Klicken Sie auf das Löschsymbol , um einen Link zu löschen.
  • Klicken Sie auf das Kopiersymbol , um einen Link zu duplizieren.

Verwenden Sie das Textfeld, um dem Abschnitt einige Sätze hinzuzufügen. Sie können dies beispielsweise verwenden, um Öffnungszeiten zur Gruppe hinzuzufügen.

Wird verwendet, um Ihren Standort auf Google Maps zu markieren. Details finden Sie unter Google Maps-Integration.

Tab „Stil“

Legen Sie das Aussehen und Verhalten von Menüpunkten und Steuerelementen fest.

Der Inhalt dieses Abschnitts hängt davon ab, welche Voreinstellung Sie ausgewählt haben.

Steuern Sie, ob die Gruppen in Ihrem Kontakt-Widget an den Rändern des Widgets – Anfang oder Ende – oder in der Mitte des Widgets positioniert werden.

Bei einigen Voreinstellungen können Sie auch die Inhaltsposition, die den Textblock steuert, entweder an den Anfangsrand oder in die Mitte des Widgets setzen.

Die Informationen im Kontakt-Widget können in bis zu 4 Spalten und eine festgelegte Anzahl von Zeilen unterteilt werden, abhängig von der gewählten Voreinstellung.

Verwenden Sie das Dropdown-Menü Spalten, um die Anzahl der Spalten festzulegen.

Verwenden Sie die Abstände-Zähler, um einen Abstand zwischen den Spalten und Zeilen des Widgets festzulegen.

Bei Voreinstellungen, die eine Karte enthalten, legen Sie fest, ob sich die Karte am Anfang oder Ende des Widgets befindet.

Legen Sie Größe, Farbe und Schriftart der Überschrift fest.

Legen Sie Größe, Farbe und Schriftart des Beschreibungstextes fest.

Verwenden Sie den Schieberegler, um den Abstand zwischen den Textzeilen zu vergrößern und zu verkleinern.

Legen Sie Farbe und Schriftart des Unterüberschriftstextes fest.

  • Textfarbe: Details finden Sie unter Farbe auswählen oder Globale Schriftarten und Farben verwenden.
  • Typografie: Legen Sie Schriftart und -größe der Unterüberschrift fest. Details finden Sie unter Typografie
  • Abstand: Verwenden Sie den Schieberegler, um einen Abstand zwischen der Unterüberschrift einer Gruppe und dem Inhalt festzulegen.

Dies gilt für Gruppen, die die Einstellung „Kontakt-Links“ verwenden.

  • Abstand: Verwenden Sie den Schieberegler, um einen Abstand zwischen den verschiedenen Kontaktfeldern festzulegen.
  • Typografie: Legen Sie Schriftart und -größe des Kontaktfeldes fest. Details finden Sie unter Typografie
  • Normal: Klicken Sie, um die Standard-Symbol- und Textfarbe festzulegen.
  • Hover: Legen Sie die Symbol- und Textfarbe fest, wenn Besucher mit der Maus über das Kontaktfeld fahren.
  • Symbolgröße: Verwenden Sie den Schieberegler, um die Größe des Symbols festzulegen, das den Kontakttyp symbolisiert.
  • Textfarbe: Details finden Sie unter Farbe auswählen oder Globale Schriftarten und Farben verwenden.
  • Symbolgröße: Verwenden Sie den Schieberegler, um eine Größe für die Symbole festzulegen, die den Kontakttyp symbolisieren.
  • Symbolabstand: Verwenden Sie den Schieberegler, um den Abstand zwischen den Symbolen, die den Kontakttyp symbolisieren, und dem Kontakttyp-Text festzulegen.

Dies gilt für Gruppen, die die Einstellung „Text“ verwenden.

Legen Sie Farbe und Schriftart des Textes fest.

Dies gilt für Gruppen, die die Einstellung „Soziale Symbole“ verwenden.

  • Normal: Klicken Sie, um die Standard-Symbolfarbe, -größe und den Standardabstand festzulegen.
  • Hover: Klicken Sie, um die Symbolfarbe, -größe und den Abstand festzulegen, wenn Besucher mit der Maus über die Symbole fahren.
  • Symbolfarbe: Legen Sie die Farbe der Symbole fest, die die sozialen Medien darstellen. Details finden Sie unter Farbe auswählen oder Globale Schriftarten und Farben verwenden.
  • Symbolgröße: Verwenden Sie den Schieberegler, um die Größe der Symbole festzulegen, die die sozialen Medien darstellen.
  • Symbolabstand: Verwenden Sie den Schieberegler, um den Abstand zwischen den Social-Media-Symbolen festzulegen.

Legen Sie den auf der Karte dargestellten Bereich fest.

Schalten Sie auf Ja, damit die Karte die Breite ihres Abschnitts abdeckt.

Verwenden Sie die Schieberegler, um die Kartengröße festzulegen.

Fügen Sie einen Rahmen um die Karte hinzu. Wenn Sie einen Rahmen hinzufügen, müssen Sie einen Rahmentyp auswählen. Erfahren Sie mehr über Rahmentypen.

Sie müssen auch eine Rahmenform auswählen:

  • Rund: Schaltflächen erscheinen mit glatten Ecken.
  • Abgerundet: Schaltflächen erscheinen mit gleichmäßig gekrümmten Kanten.
  • Oval: Sehr abgerundete Ecken.
  • Scharf: Rechteckige Schaltflächen.
  • Benutzerdefiniert: Passen Sie den Radius an, indem Sie die vier Zähler verwenden, um jede einzelne Ecke anzupassen. Erfahren Sie mehr über diese Messmethoden.

Klicken Sie auf das Bleistiftsymbol , um der Karte einen Schatten hinzuzufügen. Erfahren Sie mehr über Schatten.

Fügen Sie dem Kontakt-Widget einen Hintergrund hinzu. Details finden Sie unter Hintergrund erstellen.

Fügen Sie einen teilweise transparenten Hintergrund hinzu. Details finden Sie unter Hintergrund erstellen.

Verwenden Sie den Schieberegler, um den Abstand zwischen dem Überschriftenbereich und den Gruppen festzulegen.

Verwenden Sie den Schieberegler, um den Abstand zwischen der Karte und den restlichen Elementen festzulegen.

Schalten Sie auf Ja, um einen Rahmen um das Kontakt-Widget hinzuzufügen. Erfahren Sie mehr über Rahmentypen.

Wenn Sie einen Rahmen hinzufügen, müssen Sie eine Rahmenbreite und -farbe auswählen.

Wählen Sie, wie die Ecken des Kontakt-Widgets angezeigt werden sollen:

  • Abgerundet: Schaltflächen erscheinen mit gleichmäßig gekrümmten Kanten.
  • Scharf: Rechteckige Schaltflächen.
  • Benutzerdefiniert: Passen Sie den Radius an, indem Sie die vier Zähler verwenden, um jede einzelne Ecke anzupassen. Erfahren Sie mehr über diese Messmethoden.

Klicken Sie auf das Bleistiftsymbol , um dem Kontakt-Widget einen Schlagschatten hinzuzufügen. Erfahren Sie mehr über Schatten.

Fügen Sie Innenabstand im Kontakt-Widget hinzu oder entfernen Sie ihn. Erfahren Sie, wie Sie Abstand mit Innenabstand und Rändern erstellen

Schalten Sie auf Ja, wenn das Kontakt-Widget die gesamte Bildschirmhöhe einnehmen soll.

Tab „Erweitert“

Steuern Sie die Platzierung Ihres Widgets, fügen Sie Links ein, fügen Sie benutzerdefinierten Code hinzu und vieles mehr.

Erfahren Sie mehr über die Einstellungen des Tabs „Erweitert“.

Auf dieser Seite

Diesen Artikel teilen

Hosted with