Lesefortschritt:

Divi-Theme-Builder: Kopfzeile mit Telefon und E-Mail in einem Modul erstellen

5. November 2023 | Divi-Theme

Dieser Beitrag beinhaltet 344 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Die Divi-Standardkopfzeile kann mit einer sekundären Kopfzeile konfiguriert werden, die unter anderem eine Telefonnummer und eine E-Mail-Adresse anzeigt. Wenn Sie jedoch eine mit dem Divi-Builder eine benutzerdefinierte Kopfzeile verwenden, können Sie diese sekundäre Kopfzeile nicht nutzen. Hier erfahren Sie, wie Sie den Telefon-/E-Mail-Teil in einem Modul nachbilden können.

Im Theme-Builder Ihres Divi-Themes bearbeiten Sie die Kopfzeile. Fügen Sie dort ein Codemodul hinzu und fügen Sie dann das Folgende ein:

<style>
  .telefon { 
  	margin-right: 20px;
  }
  .telefon:before {
    font-family: ETmodules;
    content: "\e090";
    position: relative;
    top: 2px;
    margin-right: 2px;
  }
  .mailadresse:before {
    font-family: ETmodules;
  	content: "\e076";
    margin-right: 4px;
  }
</style>
<a class="telefon" href="tel:+41123456789">+41 (0)12 345 67 89</a>
<a class="mailadresse" href="mailto:vorname.nachname@domain.ch">vorname.nachname@domain.ch</a>

Der Code wird auf der Website in dieser Art dargestellt:

+41 (0)12 345 67 89 vorname.nachname@domain.ch

So einfach!

Natürlich müssen Sie insbesondere Zeile 18 und 19 mit Ihren Angaben bestücken. Auch die anderen Zeilen können Sie nach Gusto anpassen.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This