Divi QuickTip #1 – Wie Du einen CTA Button zum Menü hinzufügst

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.

Divi Menu CTA

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.

Hier kannst Du weiter lesen…

Divi Quick-Tip #2 – Hamburger Menus ausschalten

Divi Quick-Tip #2 – Hamburger Menus ausschalten

Der erste DIVI Quick-Tip ist tatsächlich schon ein bisschen her, aber da das Format so gut ankam, dachte ich, wir könnten die Reihe wieder aufleben lassen. Heute soll es also um Hamburger Menüs gehen - und nein, ich rede nicht von Big M*cs and Doppelten Cheeseburgern,...

Wie läuft ein Re-Launch einer Website eigentlich so ab?

Wie läuft ein Re-Launch einer Website eigentlich so ab?

Eine Website ist Dein Aushängeschild im World Wide Web. Dort finden Dich Deine Kunden, dort können sie mit Dir Kontakt aufnehmen oder mehr über Dich erfahren. Und genauso wie Deine Visitenkarte sollte sie immer schön gepflegt und brandneu aussehen. Da kann ein...

WordPress QuickTip #1 – Was ist eine XML Sitemap?

WordPress QuickTip #1 – Was ist eine XML Sitemap?

Vielleicht hast Du ihn beim durchforsten Deiner Google Search Console schon einmal gesehen - den Sitemap-Reiter - und Dich, wie bei vielen anderen Funktionen der umfangreichen Search Console, gefragt: "Was zum Geier will ich denn damit?" Deshalb gibt es heute einen...