{"id":371930,"date":"2023-04-04T12:47:00","date_gmt":"2023-04-04T09:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371930"},"modified":"2023-04-04T12:47:13","modified_gmt":"2023-04-04T09:47:13","slug":"der-einfachste-weg-einen-wordpress-call-to-action-hinzuzufuegen","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/der-einfachste-weg-einen-wordpress-call-to-action-hinzuzufuegen\/","title":{"rendered":"Der einfachste Weg, einen WordPress-Call-to-Action hinzuzuf\u00fcgen"},"content":{"rendered":"\n

WordPress Call to Action oder CTA ist meistens eine Schaltfl\u00e4che auf einer Website, die den Benutzer auffordert, eine bestimmte Aktion auszuf\u00fchren<\/strong>. Aber ein CTA kann auch in Form eines Bildes, eines Inhalts, eines Textes und was auch immer vorliegen.<\/p>\n

WordPress CTAs sind eine gro\u00dfartige M\u00f6glichkeit, die Interaktion auf Ihrer Website zu f\u00f6rdern, den Verkauf zu f\u00f6rdern, den Benutzer zu einer bestimmten Aktion zu inspirieren<\/strong> und vieles mehr. Im Gegensatz zu Werbespots, Popups und \u00e4hnlichen Marketingmitteln sind sie einfach, unaufdringlich und f\u00fchren zu greifbaren Ergebnissen. Sie k\u00f6nnen eine gro\u00dfe Hilfe dabei sein, die Navigation durch Ihre Website unkompliziert und kristallklar zu gestalten<\/strong>. Die wesentliche Rolle eines WordPress Call To Action besteht darin, Besucher dazu zu bringen, die von Ihnen gew\u00fcnschte Aktion auszuf\u00fchren \u2013 und dies kann buchst\u00e4blich alles sein, vom Kauf und Abonnieren Ihrer E-Mail-Liste bis hin zur Einladung, den gesamten Text zu lesen.<\/p>\n

Zu wissen , wo man einen CTA platziert,<\/strong> ist eine Kunst f\u00fcr sich. Wenn Sie Ihre Website mit zu vielen CTAs \u00fcberh\u00e4ufen, kann dies den Benutzer \u00fcberw\u00e4ltigen und davon abhalten, \u00fcberhaupt etwas zu unternehmen. Auf der anderen Seite l\u00e4sst das Fehlen von CTAs den Benutzer in einer passiven Position zur\u00fcck und macht Ihre Website sogar weniger attraktiv<\/strong>.<\/p>\n

Es gibt viele M\u00f6glichkeiten, Ihrer Website einen WordPress-Call-to-Action hinzuzuf\u00fcgen. Fast jeder Seitenersteller erm\u00f6glicht es Ihnen, einen CTA mit einem Bild, einer Schaltfl\u00e4che und einem Text zu erstellen, und es stehen auch viele effektive WP-CTA-Plugins<\/a> zur Auswahl. Aber der schnellste und einfachste Weg, sch\u00f6ne und effektive CTAs hinzuzuf\u00fcgen, ist mit Qi Addons f\u00fcr das Elementor-Plugin.<\/p>\n

Warum Qi zum Hinzuf\u00fcgen von CTAs w\u00e4hlen?<\/h2>\n

Qi Addons for Elementor<\/a> ist eine hervorragende, abgerundete L\u00f6sung f\u00fcr jede Art von Elementor-Website. Es enth\u00e4lt 60 kostenlose und \u00fcber 40 Premium-Widgets, mit denen Sie alle Elemente erstellen k\u00f6nnen, die f\u00fcr eine funktionale und sch\u00f6ne Website erforderlich sind<\/strong>. Es ist intuitiv und \u00e4u\u00dferst benutzerfreundlich<\/strong> \u2013 es ist nicht einmal ein Tutorial erforderlich, und nachdem Sie ein wenig mit seinen Optionen experimentiert haben, werden Sie feststellen, dass es unglaublich vielseitig und leistungsstark ist.<\/p>\n

Wenn es um CTAs geht, k\u00f6nnen wir auf der Seite des Qi-Addons gro\u00dfartige Beispiele f\u00fcr CTAs<\/a> sehen, die von den Autoren des Tools erstellt wurden und die auch als Inspiration dienen k\u00f6nnen.<\/p>\n

\"Der<\/a><\/p>\n

Es ist wichtig, von Anfang an zu verstehen, was ein CTA enthalten kann. Der Titel ist optional, Sie k\u00f6nnen ihn haben oder nicht. Text ist ebenfalls optional und dient dazu, mehr Informationen \u00fcber die Aktion selbst zu geben. Die Aktionsschaltfl\u00e4che kann auf verschiedene Arten gestaltet werden und verf\u00fcgt \u00fcber eine eigene Animation. Bei diesem Widget muss nicht nur der Link anklickbar sein, sondern auch das gesamte CTA-Feld. Das n\u00e4chste, was Teil des CTA sein kann, ist der Hintergrund, der ebenso wie der Rahmen optional ist.<\/p>\n

So erstellen Sie einen WordPress-Call-to-Action mit Qi-Addons<\/h2>\n

Nachdem Sie die Qi-Addons installiert<\/strong> haben, finden Sie alle Elemente in den Widgets. Suchen Sie einfach das CTA-Element und ziehen Sie es per Drag-and-Drop dorthin, wo Sie den CTA haben m\u00f6chten<\/strong>.<\/p>\n

\"Der<\/a><\/p>\n

Nachdem Sie es eingef\u00fcgt haben, finden Sie wie bei jedem Widget auf der linken Seite die Einstellungen<\/strong>. Nach dem Einf\u00fcgen des CTA-Widgets stehen Ihnen einige Standardformulare zur Verf\u00fcgung, die Sie \u00e4ndern und an den Stil Ihrer Seite anpassen k\u00f6nnen.<\/p>\n

Die Registerkarten Inhalt und Stil<\/strong> sind die Einstellungen des CTA-Widgets. Hier legen Sie fest, welche Elemente Sie sehen m\u00f6chten, und gestalten Ihr CTA-Feld. Die Registerkarte \u201eErweitert“ ist, wie Sie wissen, die Standardelement-Registerkarte mit Einstellungen, die sich auf die Einstellungen der Spalte selbst oder eines anderen Elements beziehen.<\/p>\n

\"Der<\/a><\/p>\n

Einstellungen der Registerkarte \u201eInhalt“.<\/h3>\n

Beginnen wir mit den allgemeinen Einstellungen auf der Registerkarte Inhalt<\/strong>.<\/p>\n

\"Der<\/a><\/p>\n

Hier f\u00fcgen wir Titel und Text<\/strong> ein. Wie wir bereits erw\u00e4hnt haben, sind dies keine Pflichtfelder, wenn Sie sie nicht eingeben, haben Sie einfach keinen Text<\/strong>. Dies ist kaum jemals notwendig, da der Call-to-Action-Button erfordert, dass der Benutzer auf irgendeine Weise aufgefordert wird, eine Aktion durchzuf\u00fchren<\/strong>. Wenn die leere Schaltfl\u00e4che selbst ausreichen w\u00fcrde, um den Benutzer zum Ausf\u00fchren der Aktion zu inspirieren, w\u00fcrde jede Schaltfl\u00e4che die Arbeit erledigen, aber das ist nicht der Fall.<\/p>\n

Die n\u00e4chste Option ist Button Below und wir haben bestimmte Werte im Angebot. Was bedeutet das eigentlich?<\/p>\n

\"Der<\/a><\/p>\n

Das bedeutet, dass wir die Gr\u00f6\u00dfe des Bildschirms definieren, nach der die Schaltfl\u00e4che unter dem Titel und dem Text angezeigt wird und nicht<\/strong> wie bei gro\u00dfen Bildschirmen in einer Linie mit dem Text. Dies ist eine gro\u00dfartige Option, da es keinen Grund gibt, dieses Layout auch auf Mobilger\u00e4ten zu verwenden. Es w\u00e4re viel schwerer zu lesen und zu verstehen und w\u00fcrde weniger Aufmerksamkeit erregen.<\/p>\n

\"Der<\/a><\/p>\n

Hier k\u00f6nnen wir eine wichtige Sache bemerken<\/strong> und das ist, dass die Schaltfl\u00e4che ziemlich mit dem Text verklebt ist. Dies ist nat\u00fcrlich einfach zu beheben, und wir werden sp\u00e4ter zeigen, wie es behoben werden kann. Beachten Sie dies vorerst nur, um die Reaktionsf\u00e4higkeit f\u00fcr kleinere Ger\u00e4te zu \u00fcberpr\u00fcfen.<\/p>\n

Link-Overlay<\/strong> aktivieren, die letzte Option im allgemeinen Teil bezieht sich darauf, ob nur die Schaltfl\u00e4che oder der gesamte Call-to-Action-Bereich anklickbar sein soll. In unserem Fall ist derzeit der gesamte schwarze Bereich anklickbar. Achtung, am Anfang haben wir den Link, zu dem die Aktion f\u00fchren soll, nicht definiert und bis der Link gesetzt ist, ist nichts klickbar.<\/p>\n

Das n\u00e4chste Kapitel befasst sich mit Button<\/strong>. Hier passen wir an, woraus unser Button bestehen wird, aber nicht, wie er gestylt wird. Auch hier w\u00e4hlen wir den Text aus, der darauf zu finden ist, und f\u00fcgen einen Link hinzu.<\/p>\n

\"Der<\/a><\/p>\n

F\u00fcr Layouts stehen drei Optionen zur Verf\u00fcgung<\/strong>.<\/p>\n

\"Der<\/a><\/p>\n

Das gef\u00fcllte Layout hat einen Hintergrund und eine Textschaltfl\u00e4che<\/strong>. Mit dieser Schaltfl\u00e4che k\u00f6nnen wir sp\u00e4ter in den Stiloptionen einen Rahmen hinzuf\u00fcgen. Das skizzierte Layout hat nur Rahmen und Text<\/strong>, es ist nicht m\u00f6glich, die Farbe des Hintergrunds nachtr\u00e4glich zu \u00e4ndern. Das Textlayout enth\u00e4lt nur Text<\/strong> und es kann kein Hintergrund oder Rahmen hinzugef\u00fcgt werden.<\/p>\n

Au\u00dferdem gibt es drei verschiedene Schaltfl\u00e4chentypen, die f\u00fcr gef\u00fclltes und umrissenes Layout verf\u00fcgbar sind, aber nicht f\u00fcr Text.<\/p>\n

Der Standardtyp ist die Vorgabe. Die Option innerer<\/strong> Rahmentyp f\u00fcgt dem ausgew\u00e4hlten Layout den inneren Rahmen hinzu. Iconed Boxed-Typ<\/strong> wird nur f\u00fcr die Schaltfl\u00e4che verwendet, die ein Symbol hat und wo wir ein spezielles Feld f\u00fcr das Symbol wie dieses platzieren m\u00f6chten. Achtung, wir haben das Symbol und seinen Hintergrund unten hinzugef\u00fcgt und stilisiert.<\/p>\n

\"Der<\/a><\/p>\n

Hier haben wir auch die Option Unterstreichung<\/strong> von Schaltfl\u00e4chentext aktivieren, wenn wir m\u00f6chten, dass der Text unterstrichen wird, die Unterstreichung hat auch eine Animation.<\/p>\n

\"Der<\/a><\/p>\n

In den Schaltfl\u00e4cheneinstellungen k\u00f6nnen wir auch die Gr\u00f6\u00dfe ausw\u00e4hlen<\/strong>, aber sp\u00e4ter im Stil k\u00f6nnen wir sie genauer festlegen und erreichen, dass die Gr\u00f6\u00dfen zu anderen Elementen auf der Website passen. Wir geben auch Button-Text und Link ein<\/strong>.<\/p>\n

Schaltfl\u00e4chensymboleinstellungen werden<\/strong> verwendet, um ein Symbol aus der Symbolbibliothek oder durch Hochladen Ihres SVG-Symbols hinzuzuf\u00fcgen, wir geben hier auch die Symbolposition (rechts\/links) an.<\/p>\n

\"Der<\/a><\/p>\n

Wie wir bereits gesehen haben, k\u00f6nnen wir das Symbol mit dem Typ Iconed Boxed verwenden<\/strong>, aber dies gilt nur f\u00fcr die Schaltfl\u00e4che, wo das Symbol in unserer Box sein soll, ansonsten k\u00f6nnen wir allen anderen Typen und Layouts ein beliebiges Symbol hinzuf\u00fcgen.<\/p>\n

\"Der<\/a><\/p>\n

Einstellungen der Registerkarte "Stil".<\/h3>\n

Dies sind die Styling-Einstellungen. Alle Einstellungen sind nach Gruppen und es ist ziemlich offensichtlich, worauf sich jede Einstellung bezieht<\/strong>. Wenn wir f\u00fcr unsere Schaltfl\u00e4che die Option Unterstreichen nicht ausgew\u00e4hlt haben, haben wir nat\u00fcrlich nicht einmal Einstellungen daf\u00fcr.<\/p>\n

\"Der<\/a><\/p>\n

Stil wird verwendet, um die Typographie und Farbe des Textes und des Titels festzulegen<\/strong>.<\/p>\n

\"Der<\/a><\/p>\n

Hier legen wir auch den Hintergrund des Call-to-Action-Feldes fest. Sie k\u00f6nnen eine Farbe oder einen Farbverlauf ausw\u00e4hlen, und was n\u00fctzlich ist, wenn Sie keinen Hintergrund m\u00f6chten, dh transparent, ist dies eine Option daf\u00fcr<\/strong>. Dieser Tisch ist mit einem Pfeil markiert, lege diesen Ball einfach an den Anfang. Nur das Standardfeld hat eine Farbe, und wenn Sie den Hintergrund \u00e4ndern und die Hintergrundfarbe der Website anpassen, bedeutet dies, dass Sie den Hintergrund ben\u00f6tigen, wenn Sie die Farbe der Seite \u00e4ndern. Wenn Sie einen transparenten Hintergrund verwenden, ist es nicht erforderlich, den Hintergrund des Felds mit der \u00c4nderung des Hintergrunds der Seite zu \u00e4ndern.<\/p>\n

\"Der<\/a><\/p>\n

Wir k\u00f6nnen auch einen Hintergrund hinzuf\u00fcgen, es gibt ein paar Bildoptionen.<\/p>\n

\"Der<\/a><\/p>\n

Abstandsstile sind Optionen zum Festlegen des Abstands zwischen Untertiteln, Text und Schaltfl\u00e4chen<\/strong>.<\/p>\n

Die Halterungspolsterung<\/strong> bezieht sich auf den Raum um den Inhalt herum.<\/p>\n

\"Der<\/a><\/p>\n

Textrand oben<\/strong> \u2013 der Rand \u00fcber dem Text wird bestimmt, dh wir ordnen den Abstand zwischen Text und Titel an.<\/p>\n

Content Padding Right<\/strong> \u2013 Padding um den Text rechts herum, dient dazu, den Text von der Schaltfl\u00e4che zu trennen, wenn er zu lang ist.<\/p>\n

\"Der<\/a><\/p>\n

Schaltfl\u00e4chenrand<\/strong> \u2013 durch Festlegen des Werts k\u00f6nnen wir die Schaltfl\u00e4chenposition festlegen und die R\u00e4nder um die Schaltfl\u00e4che bestimmen. Hier m\u00fcssen wir besonders auf den responsiven und beabstandeten Text-Button achten. Der obere Schaltfl\u00e4chenrand wird verwendet, um diesen Abstand anzupassen.<\/p>\n

\"Der<\/a><\/p>\n

Mit dem Schaltfl\u00e4chenstil- Men\u00fc<\/strong> k\u00f6nnen Sie eine Vielzahl von Details Ihrer Schaltfl\u00e4chen festlegen, z. B. Schriftfarbe, Rahmenfarbe, Breite und Radius sowie Hintergrundfarbe und Polsterung. Die wichtigste Einstellung hier ist, ob Ihre Schaltfl\u00e4che beim Hover funktionieren soll, was bedeutet, dass es zum Klicken ausreicht, den Mauszeiger dar\u00fcber zu bewegen<\/strong>. Wenn Sie hier die Option Normal<\/strong> w\u00e4hlen, funktioniert die Schaltfl\u00e4che, wenn Sie darauf klicken.<\/p>\n

\"Der<\/a><\/p>\n

In den Einstellungen<\/strong> f\u00fcr den Schaltfl\u00e4chensymbolstil k\u00f6nnen Sie die Symbolgr\u00f6\u00dfe mit einem Schieberegler festlegen, Sie k\u00f6nnen auch zwischen der normalen und der Hover-Option w\u00e4hlen und auch die Symbolfarbe und den Rand festlegen.<\/p>\n

\"Der<\/a><\/p>\n

Mit den Einstellungen<\/strong> f\u00fcr den inneren Rand der Schaltfl\u00e4che k\u00f6nnen Sie Farbe, Breite und Versatz des inneren Rands festlegen.<\/p>\n

\"Der<\/a><\/p>\n

Mit den Einstellungen<\/strong> f\u00fcr den Unterstreichungsstil von Schaltfl\u00e4chen k\u00f6nnen Sie Farbe, Breite, Versatz, Dicke und Ausrichtung der Unterstreichung der Schaltfl\u00e4che festlegen. Es ist sehr praktisch, dass Sie alle \u00c4nderungen, die Sie vornehmen, sofort sehen k\u00f6nnen.<\/p>\n

\"Der<\/a><\/p>\n

Das ist praktisch alles. Wenn Sie mit dem Aussehen Ihrer Schaltfl\u00e4che zufrieden sind, k\u00f6nnen Sie den Editor schlie\u00dfen und \u00fcberpr\u00fcfen, wie sie live auf der Seite aussieht.<\/p>\n

Jetzt, da Sie wissen, wie einfach es ist, CTAs \u00fcberall auf Ihrer Website hinzuzuf\u00fcgen, m\u00fcssen Sie nur noch sorgf\u00e4ltig \u00fcberlegen, wo genau Sie CTAs auf Ihrer Website platzieren k\u00f6nnen. Wenn Sie Ihr Publikum gut kennen, k\u00f6nnen Sie die effektivsten CTAs erstellen, und es gibt auch viele Tools, mit denen Sie die Eigenschaften und das Verhalten Ihres Publikums besser verstehen k\u00f6nnen. Wenn Sie Fragen zur Verwendung von Qi Addons haben, k\u00f6nnen Sie diese gerne im Kommentarbereich stellen \u2013 wir teilen gerne unsere Erfahrungen und unser Wissen.<\/p>\n

Aufnahmequelle: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Erfahren Sie, wie Sie mit Qi Addons f\u00fcr Elementor auf einfachste und schnellste Weise WordPress CTAs zu Ihrer Website hinzuf\u00fcgen.<\/p>\n","protected":false},"author":1,"featured_media":279438,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[567],"tags":[845],"class_list":["post-371930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-grundlagen","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/371930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=371930"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/371930\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/279438"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=371930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=371930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=371930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}