{"id":21021,"date":"2019-10-25T09:41:17","date_gmt":"2019-10-25T09:41:17","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=21021"},"modified":"2020-04-02T13:44:20","modified_gmt":"2020-04-02T13:44:20","slug":"elementor-wie-du-einen-farbverlauf-button-erstellst","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/","title":{"rendered":"Elementor: Wie du einen Farbverlauf-Button erstellst"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Buttons sind kleine, aber wichtige Elemente der Website. Mit der richtigen Gestaltung sind sie in der Lage, die Conversion zu steigern:&nbsp;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Das ist ein auff\u00e4lliges UI-Element, das Besucher zu einer bestimmten Handlung auffordert - Abonnieren! Bestellen! Hinterlasse deine E-Mail!<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Sie erh\u00f6hen die Benutzerfreundlichkeit bei der Navigation - es ist einfacher, einmal auf den <\/span><span style=\"font-weight: 400\">Homepage-Button als auf den Zur\u00fcck-Button zu klicken. Ein auff\u00e4lliger Button, der die Aufmerksamkeit der Besucher erregt, bewegt sie zur richtigen Handlung bzw. f\u00fchrt zur richtigen Seite.&nbsp;&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Stylische Buttons k\u00f6nnen das Design der Website vervollst\u00e4ndigen.<\/span><\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" title=\"Gradient Button Elementor Tutorial | Elementor FREE, NO Plugins Or Add-Ons, SUPER Easy\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/_5DdSXUiE-E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400\">Buttons stehen als Vermittler zwischen einem Nutzer und einem Produkt. Sie weisen darauf hin, was als n\u00e4chstes zu tun ist, um etwas zu erreichen (ein Produkt in den Warenkorb legen, mehr Informationen \u00fcber das Produkt erhalten, es kaufen usw.). Buttons sind also ein unersetzlicher Bestandteil der Website. <\/span><span style=\"font-weight: 400\">Die Frage ist nur, wie diese gestaltet werden.&nbsp;<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-21024 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/buttons.jpg\" alt=\"\" width=\"1015\" height=\"558\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/buttons.jpg 1015w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/buttons-300x165.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/buttons-768x422.jpg 768w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/buttons-640x352.jpg 640w\" sizes=\"(max-width: 1015px) 100vw, 1015px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Ein Button muss mit der <\/span><span style=\"font-weight: 400\">Vision der Website \u00fcbereinstimmen. Er soll <\/span><span style=\"font-weight: 400\">das Bild vervollst\u00e4ndigen und darf nicht f\u00fcr Nutzer ein unl\u00f6sbares R\u00e4tsel ein. Farbverlauf-Buttons geh\u00f6ren zu den sch\u00f6nsten Design-Varianten. <\/span><span style=\"font-weight: 400\">Bei der richtigen Farbwahl k\u00f6nnen sie zum i-T\u00fcpfelchen werden.&nbsp;&nbsp;<\/span><span style=\"font-weight: 400\">Die gute Nachricht ist, dass du keine Programmierkenntnisse ben\u00f6tigst, um einen Farbverlauf-Button zu erstellen. Du brauchst hierzu nicht einmal kostenpflichtige Tools. Mit Elementor gelingt es dir leicht, ansprechende Buttons mit Farbverl\u00e4ufen zu erstellen.&nbsp;&nbsp;<\/span><span style=\"font-weight: 400\">In diesem Beitrag zeigen wir dir, wie du einen Farbverlauf-Button ohne zus\u00e4tzliche Hilfsmittel wie Addons, Plugins oder Elementor Pro erstellen kannst. Die kostenfreie Elementor-Version ist alles, was du daf\u00fcr brauchst.&nbsp;<\/span><\/p>\n<h2 style=\"text-align: center\"><span style=\"font-weight: 400\">So erstellst du einen Farbverlauf-Button mit Elementor&nbsp;<\/span><\/h2>\n<p><span style=\"font-weight: 400\">Zuerst sollst du den Elementor Page-Builder \u00f6ffnen, auf das Button-Widget klicken und es <\/span><span style=\"font-weight: 400\">auf die Arbeitsfl\u00e4che ziehen. W\u00e4hle gro\u00dfe Arbeitsfl\u00e4che, um die Bearbeitung bequem zu gestalten.&nbsp;&nbsp;<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-21026 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/1-6.jpg\" alt=\"\" width=\"985\" height=\"515\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/1-6.jpg 985w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/1-6-300x157.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/1-6-768x402.jpg 768w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/1-6-640x335.jpg 640w\" sizes=\"(max-width: 985px) 100vw, 985px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Gehe jetzt auf <\/span><b>Style <\/b><span style=\"font-weight: 400\">&nbsp;&gt; <\/span><b>Box Shadow<\/b><span style=\"font-weight: 400\">, wo <\/span><span style=\"font-weight: 400\">die ganze Magie geschieht. Wir erstellen einen Farbverlauf-Button gerade hier.&nbsp;<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-21028 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/2-5.jpg\" alt=\"\" width=\"987\" height=\"533\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/2-5.jpg 987w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/2-5-300x162.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/2-5-768x415.jpg 768w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/2-5-640x346.jpg 640w\" sizes=\"(max-width: 987px) 100vw, 987px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Um den Unterschied zu sehen, lege die Hintergrundfarbe fest, zum Beispiel Orange.&nbsp;&nbsp;<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-21029 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/3-4.jpg\" alt=\"\" width=\"986\" height=\"543\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/3-4.jpg 986w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/3-4-300x165.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/3-4-768x423.jpg 768w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/3-4-640x352.jpg 640w\" sizes=\"(max-width: 986px) 100vw, 986px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Nun, gehen wir zur\u00fcck zum Farbverlauf. \u00c4ndere zun\u00e4chst die Position von \u201coutline\u201d auf \u201cinsert\u201d. Dadurch wird der Schatten von au\u00dfen nach innen verschoben.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-21030 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/4-3.jpg\" alt=\"\" width=\"1012\" height=\"514\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/4-3.jpg 1012w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/4-3-300x152.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/4-3-768x390.jpg 768w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/4-3-640x325.jpg 640w\" sizes=\"(max-width: 1012px) 100vw, 1012px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Um die \u00c4nderungen besser zu sehen, setze Blur auf ein Minimum. <\/span><span style=\"font-weight: 400\">Du kannst <\/span><span style=\"font-weight: 400\">den Bereich des Farbverlaufs \u00e4ndern, indem du den <\/span><span style=\"font-weight: 400\">horizontalen oder vertikalen Regler bewegst.&nbsp;<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-21031 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/5-2.jpg\" alt=\"\" width=\"969\" height=\"478\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/5-2.jpg 969w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/5-2-300x148.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/5-2-768x379.jpg 768w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/5-2-640x316.jpg 640w\" sizes=\"(max-width: 969px) 100vw, 969px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-21032 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/6-2.jpg\" alt=\"\" width=\"970\" height=\"479\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/6-2.jpg 970w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/6-2-300x148.jpg 300w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/6-2-768x379.jpg 768w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/6-2-640x316.jpg 640w\" sizes=\"(max-width: 970px) 100vw, 970px\" \/><\/p>\n<p><span style=\"font-weight: 400\">\u201cSpread\u201d erh\u00f6ht bzw. verringert auch die Fl\u00e4che unter dem Schatten.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Also, nur w<\/span><span style=\"font-weight: 400\">enige Schritte sind geblieben<\/span><span style=\"font-weight: 400\">:&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">1.Lege den Bereich fest, den der Schatten einnehmen soll (bewege den Spread-Regler).<\/span><\/p>\n<p><span style=\"font-weight: 400\">2.Bewege den horizontalen oder vertikalen Regler, um den Beginn des <\/span><span style=\"font-weight: 400\">Verlaufsbereiches <\/span><span style=\"font-weight: 400\">&nbsp;festzulegen.<\/span><\/p>\n<p><span style=\"font-weight: 400\">3.Stelle die Intensit\u00e4t der <\/span><span style=\"font-weight: 400\">Weichzeichnung<\/span><span style=\"font-weight: 400\"> ein.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-21033 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/7-2.jpg\" alt=\"\" width=\"602\" height=\"312\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/7-2.jpg 602w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/7-2-300x155.jpg 300w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/p>\n<p><span style=\"font-weight: 400\">4.F\u00fcge die zweite Farbe hinzu, indem du das Stift-Icon anklickst. W\u00e4hle die Farbe und stelle die Schieberegler erneut ein. Die Bibliothek verf\u00fcgt \u00fcber Hunderte von Farben.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-21034 aligncenter\" src=\"https:\/\/www.templatemonster.com\/blog\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/8-2.jpg\" alt=\"\" width=\"602\" height=\"320\" srcset=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/8-2.jpg 602w, https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/11\/8-2-300x159.jpg 300w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/p>\n<p><span style=\"font-weight: 400\">5.Spiele mit Farben, bewege den horizontalen und vertikalen Regler, um den Winkel des Farbverlaufs zu \u00e4ndern.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Das ist alles! Der Button mit Farbverlauf ist fertig. Speichere ihn und f\u00fcge ihn in deine Website ein.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Wenn du an weiteren Elementor-Produkten interessiert bist, dann kannst du durch den <\/span><a href=\"https:\/\/www.templatemonster.com\/de\/elementor-marketplace\/\" target=\"_blank\"><span style=\"font-weight: 400\">Marktplatz<\/span><\/a><span style=\"font-weight: 400\"> st\u00f6bern, wo die Auswahl recht gro\u00df ist. Zudem gibt es viele Preisnachl\u00e4sse f\u00fcr Webentwickler und Designer.&nbsp;&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Bevor&nbsp; ein Button auf deiner Website erscheint, solltest du die folgenden Punkte beachten:<\/span><\/p>\n<p><b>1.Klickbares Aussehen.<\/b><\/p>\n<p><span style=\"font-weight: 400\">&nbsp;<\/span><span style=\"font-weight: 400\">Als Designer kennst du deine Website bis ins kleinste Detail, w\u00e4hrend ein Besucher manchmal Zeit braucht, um die Bedeutung dieses oder jenes Elements zu verstehen. Um Missverst\u00e4ndnisse zu vermeiden, versuche bekannte Formen f\u00fcr Buttons (quadratisch oder rund) zu verwenden. Eine gute Idee ist es, einen Schatten hinzuzuf\u00fcgen. Ein abgerundetes Quadrat mit einem Schatten gilt als anklickbar. Eine Mikrointeraktion mit dem <\/span><span style=\"font-weight: 400\">Mouse-Over<\/span><span style=\"font-weight: 400\">-Effekt w\u00fcrde auch <\/span><span style=\"font-weight: 400\">gut funktionieren.&nbsp;<\/span><\/p>\n<p><b>2.Auffindbarkeit auf der Website.<\/b><\/p>\n<p><span style=\"font-weight: 400\">Die meisten Benutzer sollen wissen, wo die g\u00e4ngigen Buttons platziert sind. Der Button \u201cZum Warenkorb\u201d l\u00e4sst sich normalerweise in der N\u00e4he des Produkts finden. Du kannst zudem deinen Besuchern helfen,&nbsp; 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.&nbsp;<\/span><\/p>\n<p><b>3.Klare Botschaft kommunizieren.&nbsp;<\/b><\/p>\n<p><span style=\"font-weight: 400\">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\u00e4lt immer eine kurze Erkl\u00e4rung (bis zu einer Zeile) - Abonnement k\u00fcndigen oder buchen.&nbsp;&nbsp;&nbsp;<\/span><\/p>\n<p><b>4.Zu kleine und zu gro\u00dfe Buttons vermeiden.&nbsp;&nbsp;<\/b><\/p>\n<p><span style=\"font-weight: 400\">Im Jahr 2003 hat <\/span><a href=\"http:\/\/touchlab.mit.edu\/publications\/2003_009.pdf\" target=\"_blank\" rel=\"nofollow\"><span style=\"font-weight: 400\">Touch Lab<\/span><\/a><span style=\"font-weight: 400\"> des Massachusetts-Instituts f\u00fcr Technologie fand heraus, dass <\/span><span style=\"font-weight: 400\">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\u00fcr mobile Bildschirme. Es ist sehr unbequem, zu kleine Buttons anzuklicken. Zu gro\u00dfe Kn\u00f6pfe wirken absto\u00dfend.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Und zuletzt sei gesagt - du ben\u00f6tigst keinerlei Buttons f\u00fcr alles. Denn zu viele Optionen f\u00fchren oft dazu, dass Benutzer \u00fcberfordert sind.&nbsp;<\/span><\/p>\n<p><b><i>Diesen Beitrag hat Alma Diaz f\u00fcr den englischen Blog von TemplateMonster geschrieben.&nbsp; <a href=\"https:\/\/www.templatemonster.com\/blog\/create-gradient-button-elementor\/\" target=\"_blank\">Hier<\/a> kannst du dich mit dem Original auf Englisch vertraut machen.<\/i><\/b><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Buttons sind kleine, aber wichtige Elemente der Website. Mit der richtigen Gestaltung sind sie in der Lage, die Conversion zu steigern:&nbsp; Das ist ein auff\u00e4lliges UI-Element, das Besucher zu einer bestimmten Handlung auffordert - Abonnieren! Bestellen! Hinterlasse deine E-Mail! Sie erh\u00f6hen die Benutzerfreundlichkeit bei der Navigation - es ist einfacher, einmal auf den Homepage-Button als [&hellip;]<\/p>\n","protected":false},"author":1657845,"featured_media":24782,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19,16],"tags":[48,214],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Elementor: Wie du einen Farbverlauf-Button erstellst - TemplateMonster Deutscher Blog Tutorial: So erstellst du Farbverkauf-Buttons mit Elementor<\/title>\n<meta name=\"description\" content=\"In diesem Tutorial erkl\u00e4ren wir Schritt-f\u00fcr-Schritt, wie du mit Elementor sch\u00f6ne Buttons mit Farbverlauf erstellen kannst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor: Wie du einen Farbverlauf-Button erstellst - TemplateMonster Deutscher Blog Tutorial: So erstellst du Farbverkauf-Buttons mit Elementor\" \/>\n<meta property=\"og:description\" content=\"In diesem Tutorial erkl\u00e4ren wir Schritt-f\u00fcr-Schritt, wie du mit Elementor sch\u00f6ne Buttons mit Farbverlauf erstellen kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Deutscher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/templatemonster.de\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-25T09:41:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-02T13:44:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/beitragsbild-gradient-buttons-mit-elementor-erstellen.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olga Kulmann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olga Kulmann\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/\"},\"author\":{\"name\":\"Olga Kulmann\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130\"},\"headline\":\"Elementor: Wie du einen Farbverlauf-Button erstellst\",\"datePublished\":\"2019-10-25T09:41:17+00:00\",\"dateModified\":\"2020-04-02T13:44:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/\"},\"wordCount\":909,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"keywords\":[\"Anpassung\",\"WordPress\"],\"articleSection\":[\"Anleitungen\",\"Webentwicklung\"],\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/\",\"url\":\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/\",\"name\":\"Elementor: Wie du einen Farbverlauf-Button erstellst - TemplateMonster Deutscher Blog Tutorial: So erstellst du Farbverkauf-Buttons mit Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#website\"},\"datePublished\":\"2019-10-25T09:41:17+00:00\",\"dateModified\":\"2020-04-02T13:44:20+00:00\",\"description\":\"In diesem Tutorial erkl\u00e4ren wir Schritt-f\u00fcr-Schritt, wie du mit Elementor sch\u00f6ne Buttons mit Farbverlauf erstellen kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor: Wie du einen Farbverlauf-Button erstellst\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/de\/#website\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"name\":\"TemplateMonster Deutscher Blog\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\",\"name\":\"MonsterPost Deutschland\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Deutschland\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg\",\"https:\/\/www.facebook.com\/templatemonster.de\/\",\"https:\/\/twitter.com\/TM_Deutschland\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130\",\"name\":\"Olga Kulmann\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Olga Kulmann\"},\"description\":\"Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing \u00fcber E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und gepr\u00fcftem Expertenwissen in diesen Bereichen vertraut zu machen. Olga auf Facebook.\",\"url\":\"https:\/\/monsterspost.com\/de\/author\/kulmann\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor: Wie du einen Farbverlauf-Button erstellst - TemplateMonster Deutscher Blog Tutorial: So erstellst du Farbverkauf-Buttons mit Elementor","description":"In diesem Tutorial erkl\u00e4ren wir Schritt-f\u00fcr-Schritt, wie du mit Elementor sch\u00f6ne Buttons mit Farbverlauf erstellen kannst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/","og_locale":"de_DE","og_type":"article","og_title":"Elementor: Wie du einen Farbverlauf-Button erstellst - TemplateMonster Deutscher Blog Tutorial: So erstellst du Farbverkauf-Buttons mit Elementor","og_description":"In diesem Tutorial erkl\u00e4ren wir Schritt-f\u00fcr-Schritt, wie du mit Elementor sch\u00f6ne Buttons mit Farbverlauf erstellen kannst.","og_url":"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/","og_site_name":"TemplateMonster Deutscher Blog","article_publisher":"https:\/\/www.facebook.com\/templatemonster.de\/","article_published_time":"2019-10-25T09:41:17+00:00","article_modified_time":"2020-04-02T13:44:20+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2019\/10\/beitragsbild-gradient-buttons-mit-elementor-erstellen.jpg","type":"image\/jpeg"}],"author":"Olga Kulmann","twitter_card":"summary_large_image","twitter_creator":"@TM_Deutschland","twitter_site":"@TM_Deutschland","twitter_misc":{"Verfasst von":"Olga Kulmann","Gesch\u00e4tzte Lesezeit":"5 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/"},"author":{"name":"Olga Kulmann","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130"},"headline":"Elementor: Wie du einen Farbverlauf-Button erstellst","datePublished":"2019-10-25T09:41:17+00:00","dateModified":"2020-04-02T13:44:20+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/"},"wordCount":909,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"keywords":["Anpassung","WordPress"],"articleSection":["Anleitungen","Webentwicklung"],"inLanguage":"de-DE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/","url":"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/","name":"Elementor: Wie du einen Farbverlauf-Button erstellst - TemplateMonster Deutscher Blog Tutorial: So erstellst du Farbverkauf-Buttons mit Elementor","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/#website"},"datePublished":"2019-10-25T09:41:17+00:00","dateModified":"2020-04-02T13:44:20+00:00","description":"In diesem Tutorial erkl\u00e4ren wir Schritt-f\u00fcr-Schritt, wie du mit Elementor sch\u00f6ne Buttons mit Farbverlauf erstellen kannst.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/de\/elementor-wie-du-einen-farbverlauf-button-erstellst\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/de\/"},{"@type":"ListItem","position":2,"name":"Elementor: Wie du einen Farbverlauf-Button erstellst"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/de\/#website","url":"https:\/\/monsterspost.com\/de\/","name":"TemplateMonster Deutscher Blog","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/de\/#organization","name":"MonsterPost Deutschland","url":"https:\/\/monsterspost.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Deutschland"},"image":{"@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg","https:\/\/www.facebook.com\/templatemonster.de\/","https:\/\/twitter.com\/TM_Deutschland"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/8da307d177541069e7bf4abccc1e6130","name":"Olga Kulmann","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/514d0fd5ba77426a747ad480e3c87ae5?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Olga Kulmann"},"description":"Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing \u00fcber E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und gepr\u00fcftem Expertenwissen in diesen Bereichen vertraut zu machen. Olga auf Facebook.","url":"https:\/\/monsterspost.com\/de\/author\/kulmann\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/21021"}],"collection":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/users\/1657845"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/comments?post=21021"}],"version-history":[{"count":7,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/21021\/revisions"}],"predecessor-version":[{"id":24783,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/21021\/revisions\/24783"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media\/24782"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media?parent=21021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/categories?post=21021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/tags?post=21021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}