Zum Inhalt springen

Professionelle Buttons erstellen mit Elementor Free

teil
mich

Um ein professionelles Design zu haben muss man nicht unbedingt einen teuren Designer engagieren. Mit Elementor hat man alle notwendigen Tools um auch als Nicht-Designer hochwertige Webseiten zu gestalten

Ein wichtiges Designelement, was jedoch viele dabei vergessen oder sogar unterschätzen ist der Button. Wie du ein einfaches, hochwertige und gleichzeitig professionelles Design erstellen kannst, zeige ich dir in diesem kleinen Tutorial. 

Wir werden gemeinsam ein Button mit Farbverlauf erstellen und das beste ist: Die kostenlose Version von Elementor reicht hierfür komplett aus!

Inhalt

Eine neue Seite erstellen

Im ersten Schritt musst du natürlich erst mal eine Seite deiner Wahl öffnen und mit Elementor bearbeiten. 

Alternativ kannst du natürlich auch eine neue Seite erstellen.

Button auswählen

Wenn du die Seite mit Elementor bearbeitest, solltest du links das Elementor Menü sehen. 

Im Reiter „Grundlegend“ findest du anschließend den Baustein Button.

Wähle diesen aus und schiebe ihn an die von dir gewünschte Stelle auf deiner Seite.

Button Farbverlauf hinzufügen

Um einen Button mit einem Farbverlauf zu erstellen, hat man grundsätzlich die Möglichkeit den Hintergrundtyp auf Verlauf umzustellen.

Hier stößt man jedoch schon ziemlich schnell an seine Grenzen, was das Design angeht, weil man nur einen radialen oder linearen verlauf einstellen kann.

Um einen Button noch individueller und professioneller zu designen, benutzen wir einen kleinen Hack:  Den Box-Schatten!

Schritt 1: Box-Schatten auswählen

Als erstes musst du sicherstellen, dass du den zu bearbeitenden Button aktiviert hast und diesen bearbeiten kannst. Das erkennst du an dem Titel „Button bearbeiten“ in der Elementor Leiste.

Navigiere danach auf den Stil Tab.

Anschließend lässt du alles so, wie es ist und wählst das Stift-Symbol neben Box-Schatten aus um fortzufahren.

Schritt 2: Verlaufsposition einstellen

Sobald du die Einstellungen für den Box-Schatten vornehmen kannst, solltest du zunächst die Position des Schattens auf „Innen“ umstellen.

Anschließend wählst du eine Farbe aus, welche sich zwar von deiner aktuellen Buttonfarbe unterscheiden sollte, aber zumindest ähnlich ist.

Anschließend sind dir deiner Kreativität keine Grenzen gesetzt. Für den Anfang kannst du jedoch die Werte aus dem Screenshot übernehmen:  

Schritt 3: Hover nicht vergessen!

Natürlich brauchst du nicht zwingend einen Hover-effekt, aber eine visuelle Response ist grundsätzlich immer zu empfehlen!

Vergiss deshalb nicht eine Farbe unter dem Hover Reiter zu erstellen. 

Box Schatten:

Box- Schatten Details:


Fazit

Wie du siehst, kann man schon mithilfe der kostenlosen Elementor Version in nur wenigen Handgriffen super professionelle Button Designs erstellen. Wenn du die obigen Schritte befolgt hast, müsst du einen Blauen Button erstellt haben, wie du den auch in den Button Designbeispielen siehst. 

Ich habe dir noch weitere Buttons in verschiedenen Farben hinzugefügt. Kopiere dir gerne die Farbcodes rüber und spiel ein wenig mit den Box-Schatten Einstellungen rum. 

Button Designbeispiele

Button Blau

#0170B9
#02CDFF

Button Rot

#F30707
#E6740A

Button Lila

#0170B9
#C5003B

Button Grün

#37925A
#04D1DA

Ein Gedanke zu „Professionelle Buttons erstellen mit Elementor Free“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

eugen

eugen

Scrum Master und so. Hab bock auf digitalen Erfolg. Fußball, kochen und digitaler Nomade. Test. 123.

Leave a Replay

Wer bin ich

eugen

eugen

Scrum Master und so. Hab bock auf digitalen Erfolg. Fußball, kochen und digitaler Nomade. Test. 123.

Letzte Beiträge

Lass mir doch nen Follow da!