Ein was, bitte?
Ein Call-To-Action, zu gut deutsch, ein Handlungsaufruf┬áfordert, wie der Name schon sagt, Deine Website-Besucher:innen auf, eine bestimmte Handlung zu unternehmen. Meistens findet man diesen in Form eines Buttons oder Links und er dient dazu, Deine Besucher:innen auf ihrer Reise anzuleiten. Denn wenn die nicht wissen, was sie als nächstes tun sollen, tun sie in der Regel gar nichts.
Da Deine Website in den meisten Fällen aber ein Ziel verfolgt (Newsletter Abonnenten sammeln, Produkte verkaufen, Termine buchen, etc), wollen wir natürlich vermeiden, dass Besucher:innen einfach so wieder gehen.
Wie Du einen guten CTA erstellst, findest Du in diesem Artikel von allcodesarebeautiful
Design und Aufruf fertig?
Super, dann zeige ich Dir jetzt wie Du diesen mit ein ganz klein bisschen CSS einfach in Deinen Standard-Divi Header einbauen kannst.
Denk immer daran, bevor Du große Änderungen an Deiner Seite vornimmst, mache ein Back-Up!
1. WordPress Menü erstellen
Im WordPress Dashboard unter Design -> Menüs bearbeite Dein Hauptmenü und füge Die Seite hinzu, auf die Dein CTA verlinken soll. (Bei mir ist es die Kontaktseite)
Das fügt einfach einen neuen Menüeintrag hinzu, der genauso aussieht wie die restliche Navigation.
Jetzt wollen wir den Button ja aber noch hervorheben.
2. CSS-Klasse hinzufügen
Im Dropdown Menü des neuen Seiteneintrags kannst Du zunächst einmal den angezeigten Namen ändern (z.B. Erstgesrpäch buchen) und dann eine benutzerdefinierte CSS-Klasse festlegen. Damit können wir diesen Punkt im CSS stylesheet ganz gezielt bearbeiten. Ich nenne die CSS-Klasse hier menu_cta
Falls Dir die CSS-Klasse nicht angezeigt wird, scroll ganz nach oben zu Ansicht anpassen -> und bei CSS-Klasse ein Häkchen setzen.
Jetzt kannst Du Dein Menü speichern.
3. CSS einfügen, um den Button zu stylen
Nun fügen wir nur noch das CSS unten in Divi ein und konfigurieren es nach unseren Anforderungen.
/* Divi CTA Normal */
@media (min-width: 980px) {
.menu_cta {
padding: 0!important;
border-radius: 30px;
border: solid 2px #19ba97; /* Umrandungsfarbe ändern */
transition: 0.3s;
background-color: #19ba97; /* Hintergrundfarbe ändern */
}
.menu_cta a{
color: #f4f4f4!important; /* Textfarbe ändern */
padding: 15px 30px 15px 30px!important;
}
/* Divi call to action button hover state */
#top-menu-nav .menu_cta a:hover {
opacity: 1;
}
.menu_cta:hover {
border: solid 2px #fe8400; /* Unrandungsfarbe im Hover State ändern */
background: #fe8400; /* Hintergrundfarbe im Hover State ändern */
}
}
Bitte stelle sicher, dass Du die richtige CSS Klasse verwendest (menu_cta), wenn Du in Schritt 2 eine andere Klasse eingegeben hast, dann passe das im Skript an.
Benutzerdefiniertes CSS kannst Du in Divi auf verschiedene Weise einfügen. Einmal natürlich im stylesheet Deines Child Themes (dazu später mehr) oder in den Divi -> Theme Optionen ganz nach unten scrollen und bei Eigene CSS einfügen.
Änderungen speichern und sich über das Resultat freuen 😉
Falls Du irgendwo festhängst, schreib mir einfach ein kurze Nachricht.
