Contao Tipps und Tricks: Call-To-Action (CTA).
Mit Contao einen Call-to-Action (CTA) erstellen und individuell gestalten.
CTAs sind eine essenzielle Komponente im Webdesign, da sie nicht nur die Benutzererfahrung (User Experience) verbessern, sondern auch den Erfolg einer Webseite beeinflussen können. Sie dienen dazu, Besucher zu leiten, Interaktionen zu fördern und letztendlich die gewünschten Conversion-Ziele zu erreichen. Die sorgfältige Gestaltung und Platzierung von Call-to-Action-Elementen ist daher entscheidend für den Erfolg einer Website.
1) Artikel für den Call-to-Action anlegen:
Leg einen neuen Artikel mit dem Titel „CTA“ an und füge über die Experteneinstellungen die Klasse cta
hinzu.
2) Text-Element für die Textinhalte erstellen:
Um ein neues Textelement zu erstellen, füge den folgenden HTML-Code über den TinyMCE-Button „Quellcode“ ein.
<!-- CTA: Ueberschrift -->
<p class="cta-headline">CTA Überschrift</p>
<!-- CTA: Text -->
<p class="cta-text">CTA Text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<!-- CTA: Link -->
<p class="cta-link"><a href="#">CTA Link</a></p>
3) „Bild-Element“ für ein Bild / eine Grafik erstellen:
Um ein neues Bild-Element zu erstellen, navigiere zu den Experteneinstellungen und füge die Klasse cta-img
hinzu.
4) CSS-Anweisung:
/* CSS für Handys und Smartphones */
@media screen and (min-width: 100px) {
/* CTA Container, Text und Bild werden untereinander platziert */
.cta {
width: calc(100% - 4rem);
max-width: 1000px; /* max. Gesamtbreite */
display: flex;
flex-direction: column-reverse; /* Reihenfolge aendern */
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
padding: 2rem;
margin: 0 auto;
background: #fac1cb;
}
/* CTA Ueberschrift */
.cta-headline {
font-size: 2rem;
line-height: 2.4rem;
font-weight: bold;
}
/* CTA Text */
.cta-text {
font-size: 1rem;
line-height: 1.4rem;
font-weight: normal;
margin-bottom: 4rem;
}
/* CTA Link */
.cta-link a:link {
background: #ffffff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 1.5rem;
}
/* CTA Bild */
.cta-img img {
width: auto;
}
}
/* CSS für Tablets und Desktops */
@media screen and (min-width: 768px) {
/* CTA Container, Text und Bild werden nebeneinander platziert */
.cta {
flex-direction: row;
align-items: center;
gap: 4rem;
}
}
5) Fertiges Beispiel eines Call-to-Action-Banners:
Der Call-to-Action (CTA) wird von einer vertikalen zu einer horizontalen Ausrichtung geändert, wenn die Breite des Browserfensters 768 Pixel erreicht. Zum Testen verkleinere einfach mal das Browserfenster!
CTA Überschrift
CTA Text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.