Jede Landing Page braucht einen Spot, der den Besuchern sagt, wie es weitergeht Die kostenlose Call to Action-Widget In Master-Addons für Elementor Baut diesen Block: eine Überschrift, eine kurze Zeile unterstützenden Textes und eine Schaltfläche, verpackt in einem gestylten Feld, die Sie überall auf der Seite ablegen können.
Sie geben die Nachricht ein, setzen den Button-Link, wählen ein Layout voreingestellt, dann färben Sie den Hintergrund, Titel, und Button, um Ihre Marke zu entsprechen Diese Anleitung geht durch jede Einstellung im Widget.
Was das Call to Action Widget macht #
Das Widget rendert eine in sich geschlossene CTA-Box mit einem Titel, einer Beschreibung und einer Schaltfläche sowie einem Symbol auf der voreingestellten linken Symbolseite. Ein Dropdown für die Style-Voreinstellung ändert das Layout von einem Symbol auf der linken Seite in einen vollständig zentrierten Block, und die Style-Registerkarte färbt jeden Teil.
Es hat drei Laschen. Inhalt Hält den Text, die Schaltflächenbeschriftung, den Link und die Voreinstellung. Stil Steuert den Hintergrund, den Titel, die Beschreibung und den Button-Look. Fortgeschritten Die üblichen Elementorabstände und Sichtbarkeitsoptionen trägt.
Bevor Sie beginnen #
- Wordpress Mit Elementer Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Ihre CTA-Kopie und die Ziel-URL für den Button.
So fügen Sie das Call to Action-Widget hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Aufruf zum Handeln, oder scrollen Sie zum Abschnitt Master Addons (die Widgets tragen ein lila MA-Abzeichen) Ziehen Sie es auf Ihre Seite und es wird mit einem Muster-CTA geladen, das zum Bearbeiten bereit ist.
Es beginnt mit einem Symbol, einem Titel, einer Beschreibung und einer Schaltfläche Jetzt kaufen, sodass Sie aus einem Arbeitsblock statt aus einem leeren bearbeiten.
Legen Sie den Inhalt fest und wählen Sie eine Voreinstellung aus #
Öffnen Sie die Inhalt Tab. Die Stilvoreinstellung Dropdown sitzt oben, gefolgt von den Textfeldern.
- Stilvoreinstellung: Standardstil, Mittelstil, Zitatstil, Zitatstil 2 und linkes Symbol.
- CTA-Inhalt: Die Überschrift mit einer Schreib-mit-KI-Option.
- Beschreibung: Die Nebenlinie unter dem Titel.
- Tastentext: Die Button-Beschriftung, wie zum Beispiel Purchase Now oder Get Started.
- Call To Action-URL: Wo der Button zeigt Damit das ganze Kästchen anklickbar ist, fügen Sie das kostenlose Wrapper-Link Erweiterung.
Layout-voreinstellungen #
Die Voreinstellung ändert, wie der Block angeordnet ist, ohne Ihren Text zu berühren. Mittelstil Stapelt Titel, Beschreibung und Schaltfläche in der Mitte, was gut zu einem Abschnitt über die gesamte Breite passt.
Die anderen Voreinstellungen verschieben das Layout: Left Icon behält das Icon neben dem Text, Quote Style fügt links eine dicke Akzentleiste hinzu, und Zitatstil 2 umrahmt den Text mit Rändern auf beiden Seiten Probiere ein Paar aus, da sich dieselbe Kopie anders liest, sobald sich das Layout ändert.
Stil den Block #
Die Stil Tab zerlegt das Widget in Teile, die Sie selbst stylen können: Voreingestellte Stil, Titelstil, Beschreibung Stil, und Knopfstil. Wenn die freie Muster Erweiterung eingeschaltet ist, ein Muster Abschnitt für dekorative Überlagerungen erscheint auch in dieser Registerkarte.
Die Voreingestellte Stil Abschnitt stellt den Boxhintergrund ein Wechseln Sie den Hintergrundtyp zwischen klassisch (eine Farbe oder ein Bild) und Farbverlauf und wählen Sie dann die Farben aus.
Style den Knopf #
Offen Knopfstil Für den Call to Action Button Hat gewöhnlich und Schweben Tabs, so dass Sie einen Ruhe-Look und einen Hover-Look einstellen.
- Hintergrundfarbe und Textfarbe: Die Knopffüll- und Etikettenfarbe pro Bundesstaat.
- Breite und Polsterung: Die Knopfgröße.
- Grenztyp und Grenzradius: Umriss und abgerundete Ecken.
- Typografie: Die Button-Schriftart.
Häufige Anwendungsfälle #
- Landingpage CTAs Schieben einer Anmeldung, Demo oder eines Kaufs.
- Post-end-aufforderungen Verlinkung auf eine Produkt - oder Preisseite.
- Abschnittsbanner Bekanntgabe eines Angebots oder einer Markteinführung.
- Seitenleisten- oder Fußzeilen-Callouts Mit einer einzigen klaren Aktion.
- Artikelinterne Ankündigungen Umrahmt von den Zitat-Voreinstellungen.
Tipps für die Arbeit mit dem Call to Action Widget #
- Führen mit dem Nutzen. Im Titel sollte stehen, was der Besucher bekommt, nicht nur was er anklicken soll.
- Halten Sie die Beschreibung kurz. Über einem Knopf ist die eine oder andere Zeile reichlich.
- Verwenden Sie eine Taste. Eine einzelne klare Aktion konvertiert besser als zwei konkurrierende.
- Kontrastieren Sie die Schaltfläche. Heben Sie es vom Box-Hintergrund ab.
- Einen Hover-Zustand einstellen. Eine Farbverschiebung im Hover zeigt den Besuchern an, dass die Schaltfläche anklickbar ist.
Sehen Sie sich das Video-Tutorial an #
Folgen Sie lieber auf dem Bildschirm? Das Video-Tutorial unten durchläuft das Call to Action-Element von Anfang bis Ende und zeigt, wie jede Voreinstellung, jeder Hintergrund und jede Schaltflächenoption im Elementor-Editor funktioniert.
Häufig gestellte Fragen #
Was ist das Call to Action Widget in Master Addons?
Es handelt sich um ein kostenloses Elementor-Widget, das einen CTA-Block mit Titel, Beschreibung und Schaltfläche in einem gestylten Feld erstellt. Sie wählen ein voreingestelltes Layout, setzen den Schaltflächenlink und färben jedes Teil aus dem Elementor-Panel ohne benutzerdefinierten Code.
Welche Layout-Voreinstellungen enthält das Call to Action-Widget?
Fünftens: Standardstil, Mittelstil, Zitatstil, Zitatstil 2 und linkes Symbol. Jeder ordnet den Block neu an, z. B. zentriert alles oder behält das Symbol neben dem Text, ohne Ihren Titel, Ihre Beschreibung oder Ihre Schaltfläche zu ändern.
Kann ich dem CTA-Block ein Hintergrundbild hinzufügen?
Ja. Öffnen Sie im Tab Stil den Stil der Voreinstellungen und setzen Sie den Hintergrundtyp auf das Bild statt auf eine einfarbige Farbe, dann wählen Sie Ihr Bild aus Sie können auch bei einer einfarbigen Hintergrundfarbe bleiben und Titel, Beschreibung und Schaltfläche separat stylen.
Kann ich die ganze Box anklickbar machen?
Der Button verwendet die Call To Action URL aus dem Reiter Inhalt Das Widget verfügt außerdem über eine Wrapper Link Option, sodass Sie die gesamte Box mit einem Ziel verknüpfen können, anstatt nur den Button, der zu CTAs im Banner-Stil passt.
Kann ich den Button Hover-Zustand stylen?
Ja. Knopf-Stil in der Registerkarte Stil öffnen und zur Registerkarte Hover wechseln Sie können eine andere Hintergrundfarbe, Textfarbe, Breite, Polsterung und Randradius für Hover einstellen, so dass die Schaltfläche reagiert, wenn sich ein Besucher darüber bewegt.
Einwickelnd #
Das Call to Action Widget verwandelt eine Überschrift, eine Textzeile und einen Button in einen gestylten Block, der Klicks steuert Schreiben Sie die Nachricht, wählen Sie eine Voreinstellung wie Center Style, setzen Sie den Link, dann färben Sie den Hintergrund und den Button passend zu Ihrer Seite für eine Übersicht und einen Vergleich mit Elementor Pro siehe die Elementoraufruf-zu-Aktion-Widget Seite. Zu verwandten Konvertierungs-Widgets siehe die Preistabellen-Widget und die Info-Box-WidgetDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
