Elementor: Wie du einen Farbverlauf-Button erstellst

Buttons sind kleine, aber wichtige Elemente der Website. Mit der richtigen Gestaltung sind sie in der Lage, die Conversion zu steigern: 

• Das ist ein auffälliges UI-Element, das Besucher zu einer bestimmten Handlung auffordert - Abonnieren! Bestellen! Hinterlasse deine E-Mail!
• Sie erhöhen die Benutzerfreundlichkeit bei der Navigation - es ist einfacher, einmal auf den Homepage-Button als auf den Zurück-Button zu klicken. Ein auffälliger Button, der die Aufmerksamkeit der Besucher erregt, bewegt sie zur richtigen Handlung bzw. führt zur richtigen Seite.  
• Stylische Buttons können das Design der Website vervollständigen.

Buttons stehen als Vermittler zwischen einem Nutzer und einem Produkt. Sie weisen darauf hin, was als nächstes zu tun ist, um etwas zu erreichen (ein Produkt in den Warenkorb legen, mehr Informationen über das Produkt erhalten, es kaufen usw.). Buttons sind also ein unersetzlicher Bestandteil der Website. Die Frage ist nur, wie diese gestaltet werden. 

Ein Button muss mit der Vision der Website übereinstimmen. Er soll das Bild vervollständigen und darf nicht für Nutzer ein unlösbares Rätsel ein. Farbverlauf-Buttons gehören zu den schönsten Design-Varianten. Bei der richtigen Farbwahl können sie zum i-Tüpfelchen werden.  Die gute Nachricht ist, dass du keine Programmierkenntnisse benötigst, um einen Farbverlauf-Button zu erstellen. Du brauchst hierzu nicht einmal kostenpflichtige Tools. Mit Elementor gelingt es dir leicht, ansprechende Buttons mit Farbverläufen zu erstellen.  In diesem Beitrag zeigen wir dir, wie du einen Farbverlauf-Button ohne zusätzliche Hilfsmittel wie Addons, Plugins oder Elementor Pro erstellen kannst. Die kostenfreie Elementor-Version ist alles, was du dafür brauchst. 

So erstellst du einen Farbverlauf-Button mit Elementor 

Zuerst sollst du den Elementor Page-Builder öffnen, auf das Button-Widget klicken und es auf die Arbeitsfläche ziehen. Wähle große Arbeitsfläche, um die Bearbeitung bequem zu gestalten.  

Gehe jetzt auf Style  > Box Shadow, wo die ganze Magie geschieht. Wir erstellen einen Farbverlauf-Button gerade hier. 

Um den Unterschied zu sehen, lege die Hintergrundfarbe fest, zum Beispiel Orange.  

Nun, gehen wir zurück zum Farbverlauf. Ändere zunächst die Position von “outline” auf “insert”. Dadurch wird der Schatten von außen nach innen verschoben.

Um die Änderungen besser zu sehen, setze Blur auf ein Minimum. Du kannst den Bereich des Farbverlaufs ändern, indem du den horizontalen oder vertikalen Regler bewegst. 

“Spread” erhöht bzw. verringert auch die Fläche unter dem Schatten.

Also, nur wenige Schritte sind geblieben: 

1.Lege den Bereich fest, den der Schatten einnehmen soll (bewege den Spread-Regler).

2.Bewege den horizontalen oder vertikalen Regler, um den Beginn des Verlaufsbereiches  festzulegen.

3.Stelle die Intensität der Weichzeichnung ein.

4.Füge die zweite Farbe hinzu, indem du das Stift-Icon anklickst. Wähle die Farbe und stelle die Schieberegler erneut ein. Die Bibliothek verfügt über Hunderte von Farben.

5.Spiele mit Farben, bewege den horizontalen und vertikalen Regler, um den Winkel des Farbverlaufs zu ändern.

Das ist alles! Der Button mit Farbverlauf ist fertig. Speichere ihn und füge ihn in deine Website ein. 

Wenn du an weiteren Elementor-Produkten interessiert bist, dann kannst du durch den Marktplatz stöbern, wo die Auswahl recht groß ist. Zudem gibt es viele Preisnachlässe für Webentwickler und Designer.  

Bevor  ein Button auf deiner Website erscheint, solltest du die folgenden Punkte beachten:

1.Klickbares Aussehen.

 Als Designer kennst du deine Website bis ins kleinste Detail, während ein Besucher manchmal Zeit braucht, um die Bedeutung dieses oder jenes Elements zu verstehen. Um Missverständnisse zu vermeiden, versuche bekannte Formen für Buttons (quadratisch oder rund) zu verwenden. Eine gute Idee ist es, einen Schatten hinzuzufügen. Ein abgerundetes Quadrat mit einem Schatten gilt als anklickbar. Eine Mikrointeraktion mit dem Mouse-Over-Effekt würde auch gut funktionieren. 

2.Auffindbarkeit auf der Website.

Die meisten Benutzer sollen wissen, wo die gängigen Buttons platziert sind. Der Button “Zum Warenkorb” lässt sich normalerweise in der Nähe des Produkts finden. Du kannst zudem deinen Besuchern helfen,  den Button zu finden, indem du kontrastierende Farben verwendest. Idealerweise soll ein Button den Erwartungen des Benutzers entsprechen. Lass dich dazu bei einem Fachmann beraten. Du kannst auch ein paar Websites besuchen, deine Reaktion auf Buttons beobachten und dann eine benutzerfreundliche Navigation auf deiner Website umsetzen. 

3.Klare Botschaft kommunizieren. 

Ein Benutzer wird wahrscheinlich nicht auf den Button klicken, auf der "Abbrechen" steht. Was wird er dabei abbrechen - die gesamte Kette der Aktionen auf der Website oder nur die letzte? Ein guter Button enthält immer eine kurze Erklärung (bis zu einer Zeile) - Abonnement kündigen oder buchen.   

4.Zu kleine und zu große Buttons vermeiden.  

Im Jahr 2003 hat Touch Lab des Massachusetts-Instituts für Technologie fand heraus, dass die Fingerspitzen im Durchschnitt 8-10 mm breit sind. Das bedeutet, dass ein guter Knopf nicht kleiner als 10mm sein sollte. Das gilt insbesondere für mobile Bildschirme. Es ist sehr unbequem, zu kleine Buttons anzuklicken. Zu große Knöpfe wirken abstoßend.

Und zuletzt sei gesagt - du benötigst keinerlei Buttons für alles. Denn zu viele Optionen führen oft dazu, dass Benutzer überfordert sind. 

Diesen Beitrag hat Alma Diaz für den englischen Blog von TemplateMonster geschrieben.  Hier kannst du dich mit dem Original auf Englisch vertraut machen.