Buttons erstellen: Elementor vs. JetElements

Button-Widgets in Elementor und bei JetElements sind für den gleichen Zweck gedacht. Während das Elementor-Tool mit der Einfachheit punktet, bietet das Widget bei JetElements erweiterte Gestaltungsmöglichkeiten.

Kannst du dir eine Website ohne Buttons vorstellen? Das ist etwa wie ein Auto ohne Räder und Pedale - wenn auch es eine teure Lederausstattung hat, kommt es nicht von der Stelle. Buttons sind jedenfalls für jede Website unentbehrlich. Denn die ganze Website-Navigation erfolgt über Schaltflächen - sie führen zu verschiedenen Bereichen, helfen Termine zu vereinbaren und unter Spoilern versteckte Informationen einzublenden. Vorgefertigte Buttons sind normalerweise im Template-Paket enthalten, deshalb musst du dich nicht um deren Anpassung kümmern. Aber was machst du, wenn du plötzlich ein paar animierte oder auffällig gestaltete Buttons brauchst? Hier erweist sich der Elementor Page-Builder als sehr hilfreich.

Wenn du keine Elementor-Plugins hast, die in Elementor verfügbare Optionen erweitern, kannst du einfach das Button-Widget nutzen. Verwendest du den Page-Builder häufig, dann hast du wahrscheinlich das JetElements-Plugin griffbereit, mit dem sich viele nützliche Werkzeuge zu deiner Elementor-Toolbox hinzufügen lassen. Bei JetElements gibt es ein eigenes Button-Widget, das sich vom Standard-Widget etwas unterscheidet.  

Also, die Frage ist: Welches davon ist besser? Sowohl der Elementor-Button als auch der JetElements-Button haben ihre Vorteile. Jetzt zeigen wir dir diese auf, damit die Auswahl für dich viel einfacher wird. Wir gehen auf den ganzen Anpassungsprozess und Unterschiede etwas genauer ein und sehen, wozu sich jedes der Widgets perfekt eignet.

Zur Seite hinzufügen

Die beiden Button-Widgets finden sich leicht und können ins zu bearbeitende Feld auf der Website per Drag-and-Drop einfach gezogen werden. Wenn du das Elementor-Menü öffnest, siehst du den Basis-Button. Nachdem du diesen auf die Seite gezogen hast, erscheint ein kleiner Button mit dem Text "Click here".

Um den JetElements-Button zu finden, sollst du zum Abschnitt “Elements” scrollen. Er befindet sich im Arbeitsbereich, ist etwas größer als Basis-Button und verfügt über einen voreingestellten Hover-Animationseffekt. Es gibt auch Einstellungen zu Farbe, Icon und Text.

Content-Tab

Dieser Tab ist beim Basis-Button recht einfach. Es gibt einen einzigen Abschnitt, wo alle Einstellungen vorgenommen werden können. Mit der Option "Type" lässt sich die Farbe eines Buttons schnell ändern. Du kannst hier Text, Link, Ausrichtung, Größe ändern sowie ein Icon festlegen.

Beim JetElements-Button enthält der Content-Tab zwei Sektionen  - “Content” und “Settings”. Die erste erlaubt es dir, Icon, Text und Link auf den normalen Button und auf seine Hover-Variante anzuwenden. Die zweite Sektion bietet Optionen, um den Hover-Effekt, Icons und Position einzustellen.

Style-Tab

Es sei wiederum erwähnt, dieser Tab ist beim Elementor Basic-Button sehr einfach. Es gibt nur einen Abschnitt, wo du das Design dieses Elements anpassen kannst. Es gibt Optionen, um Typografie, Text- und Hintergrundfarbe, Ränder und Innenabstand zu ändern. Du kannst hier auch die Hover-Animation einschalten und alle Designoptionen auf den Hover-Button anwenden.  

Der JetElements-Button ist viel flexibler. Der Style-Tab hat 4 Sektionen: “General”, “Plane”, “Icon” und “Label”. Jede davon hat eine normale Variante und eine mit dem Hover-Effekt und ermöglicht es dir, buchstäblich alles beim Button-Element zu bearbeiten. Du kannst Farben, Formen und Schriften für jedes Detail des Buttons ändern.

Video-Tutorials

Alle Elementor-Features kommen mit den ausführlichen Tutorials - sowohl in Video- als auch in Textform. Die Widgets von JetElements sind hier keine Ausnahme. Es gibt Videos für jedes Addon im Set, die zeigen alle Features zeigen, die Benutzer ändern können sowie das Ergebnis, das erzielt werden kann. Wenn du diesen Tutorials Schritt für Schritt folgst, erstellst du erstaunliche Buttons, die die Aufmerksamkeit deiner Besucher auf sich ziehen werden können.

Wann du die beiden Buttons verwenden sollst

Es ist an der Zeit, eine Art Schlussfolgerung aus dem Gesagten zu ziehen und zu definieren, für welche Zwecke jede der Buttons besser funktioniert. Jedes Tool ist für  bestimmte Arbeit kreiert, so wäre es besser, diese nicht zu vermischen, sonst ist es den Aufwand nicht wert. 

Du benötigst den Elementor-Button, wenn du ein Element schnell und einfach erstellen willst. Es ist perfekt für jene Fälle geeignet,  wenn man mit dem aktuellen Design grundsätzlich zufrieden ist und es nicht ändern möchte. Dieser Button ist ein einfaches Tool, das auch ohne Tutorials intuitiv verständlich ist.

Der JetElements-Button lässt sich viel präziser anpassen. Es gibt eine Reihe von Einstellungen, mit deren Hilfe du einen Button von Grund auf neu erstellen kannst. Das Widget passt dir, wenn du verschiedene Vorlagen kombinieren und einmalige Buttons erstellen möchtest, um das Benutzerinteresse zu wecken.

Also, verwende diese Tools mit Blick auf deine Aufgaben, und deine Arbeit wird ein echtes Vergnügen sein. Wenn du Kommentare oder Fragen hast, kannst du sie gerne im Kommentarbereich unten hinterlassen. Wenn du bereits eines oder beide Widgets verwendet hast, würden wir uns auf deine Meinung dazu freuen.

Diesen Beitrag hat Elisabeth Thistle für unseren englischsprachigen Blog verfasst. Hast du Interesse für den Originaltext auf Englisch, dann schau doch mal bei MonsterPost vorbei.