Priorisierter Support
Help Center > Editor V4 > Elements > Button-Element

Button-Element

Zuletzt aktualisiert: September 3, 2025

Dieser Beitrag wurde mithilfe maschineller Übersetzung übersetzt, und daher kann es zu geringfügigen Ungenauigkeiten oder Unterschieden in der Formulierung im Vergleich zum Original kommen. Wir entschuldigen uns für etwaige Unannehmlichkeiten. Bitte kontaktieren Sie uns, falls Sie eine Klärung benötigen.

Wer diese Funktion nutzen kann:
Dieser Artikel richtet sich an Benutzer von Editor v4. Wenn Sie Editor v3 verwenden, lesen Sie den entsprechenden Artikel hier: Button-Widget

Element hinzufügen und löschen

So greifen Sie auf ein Widget zu und verwenden es:

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

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

So löschen Sie das Widget:

  1. Wählen Sie das Element auf der Arbeitsfläche aus, indem Sie darauf klicken.
  2. Drücken Sie die Entf-Taste auf Ihrer Tastatur. Weitere Informationen finden Sie unter Elemente von einer Seite löschen.

Was ist das Button-Element?

Schaltflächen auf einer Website sind entscheidend, um Benutzeraktionen zu leiten, klare Handlungsaufforderungen zu geben und die allgemeine Benutzerbindung zu verbessern. Mit Schaltflächen können Sie interaktive und visuell ansprechende Schaltflächen auf Ihrer Website hinzufügen.

Häufiger Anwendungsfall

Blair erstellt eine Website für ein Fitnessstudio. Oben auf der Startseite möchten sie einen Button zum Hero-Bereich hinzufügen. Besucher, die auf den Button klicken, gelangen zu einer Registrierungsseite. Ein auffälliger Button, der die Aufmerksamkeit potenzieller Kunden auf sich zieht.

Anstatt Sterne für ihre Bewertungen zu verwenden, entscheidet sich Jaime, Dollarzeichen für die Wertbewertung und Herzen für die Reaktionsbewertung zu verwenden. Außerdem wird der Wert von 1-5 und die Reaktion von 1-10 bewertet.

Zusätzliche Anwendungsfälle

  • Verwenden Sie das Button-Element, um eine beeindruckende Portfolio-Galerie zu erstellen. Jeder Button kann mit einer Projektseite oder einer Detailansicht verknüpft werden.
  • Wenn Sie eine Veranstaltung oder ein Webinar veranstalten, kann Ihnen das Button-Element helfen, visuell ansprechende Banner oder Poster zu erstellen.
  • Verwenden Sie Buttons, um Vorher-Nachher-Transformationen für Hausrenovierungen, Fitnessfortschritte oder jede andere Transformationsreise anzuzeigen.

Ein Button-Element hinzufügen: Schritt für Schritt

  1. Fügen Sie das Button-Element zur Arbeitsfläche hinzu. Details finden Sie unter Elemente zu einer Seite hinzufügen.

    Die Optionen für das Button-Element erscheinen im linken Bereich.

  2. Geben Sie im Tab Allgemein, im Textfeld für den Button, Jetzt starten ein.
    Wir möchten, dass der Button auf eine Registrierungsseite verlinkt.
  3. Klicken Sie auf das Pluszeichen neben Link.
  4. Geben Sie im Link-Textfeld die URL der Seite ein, auf die Sie verlinken möchten.
    Der Button ist etwas groß für unser Design, also machen wir ihn kleiner.

  5. Öffnen Sie das Feld Größe.
  6. Stellen Sie die Breite auf 200 und die Höhe auf 50 ein.

  7. Klicken Sie auf den Stil-Tab.
    Wir ändern den Textstil, damit er zum Rest der Website passt.

  8. Öffnen Sie das Feld Typografie.
  9. Wählen Sie im Dropdown-Menü Schriftfamilie die Option Sora aus.. Details finden Sie unter Stil-Tab – Typografie.
  10. Wählen Sie im Dropdown-Menü Schriftstärke die Option 600 aus.
  11. Wählen Sie im Feld Schriftgröße die Option 16 aus.
    Das Design erfordert einen transparenten Hintergrund.

  12. Öffnen Sie den Bereich Hintergrund.
  13. Klicken Sie auf das Farbfeld, um die Farbauswahl zu öffnen. Details finden Sie unter Farbauswahl verwenden.

  14. Stellen Sie die Deckkraft auf 0 % ein.
    Nun formen wir den Button. In diesem Fall möchten wir einen abgerundeten Button mit einem weißen Rand.

  15. Öffnen Sie den Bereich Rahmen.
  16. Klicken Sie auf das Ränder anpassen-Symbol.

  17. Geben Sie 50 in das Zahlenfeld für alle Ecken ein.

  18. Klicken Sie auf das Pluszeichen bei Rahmen.

  19. Verwenden Sie das Zahlenfeld, um die Rahmenbreite auf 2 zu erhöhen.

  20. Stellen Sie die Farbe auf #FFFFFF ein..
    Damit der Button hervorsticht, können wir sein Aussehen ändern, wenn Benutzer mit der Maus darüberfahren. Hover wird als Zustand bezeichnet, und Elemente können bearbeitet werden, um ihr Aussehen je nach Zustand zu ändern. Details finden Sie unter Elementzustände.

  21. Klicken Sie im Textfeld Klassen auf die Auslassungspunkte neben dem Wort lokal.
  22. Wählen Sie hover aus. aus dem Dropdown-Menü.
    Beachten Sie, dass das Wort hover im Textfeld Klassen erscheint und rosa gefärbt ist. Dies zeigt an, dass wir nun bearbeiten, wie der Button aussieht, wenn Besucher mit der Maus darüberfahren.

  23. Klicken Sie auf das Farbfeld bei Farbe, um die Farbauswahl zu öffnen.
  24. Ändern Sie die Hex-Farbnummer auf #FFFFFF und die Deckkraft auf 100 %.
    Wenn Benutzer mit der Maus über den Button fahren, wird er weiß.

    Der Button ist fertig.

Einstellungen für das Button-Element

Sie können Ihre Elemente mithilfe von Inhalt und Stil anpassen, was Ihnen große Flexibilität bei der Anpassung an Ihre Bedürfnisse bietet. Klicken Sie auf die Tabs unten, um alle verfügbaren Einstellungen für dieses Element anzuzeigen.

Tab „Allgemein“

Der Text, der im Button erscheint.

Klicken Sie auf das Pluszeichen, um einen Link einzugeben. Besucher, die auf den Button klicken, öffnen den Link.

In neuem Tab öffnen: Wenn der Button einen Link enthält, aktivieren Sie diese Option, wenn der Link in einem neuen Tab geöffnet werden soll.

Ermöglicht es Ihnen, einzelne Elemente auf einer Seite zu markieren. Auf diese Weise können Sie auf dieses spezifische Element verlinken.

Tab „Stil“

Siehe die einzelnen Artikel zu den Stiloptionen:

Auf dieser Seite

Diesen Artikel teilen

Hosted with