Websitetitel statt Logo im Divi-Header anzeigen

6. Januar 2021 | CSS-Stylesheet, Divi-Theme, header.php

Das Divi-Theme sieht standardmässig ein Logobild vor, welches im Header angezeigt wird. Viele GestalterInnen möchten aber lieber den Seitentitel im Header anzeigen. Diese Möglichkeit existiert, ist aber ein wenig versteckt.

Die Anpassung geschieht im Template-File header.php des Divi Themes. Sie rufen es auf über Design/Theme-Editor. In diesem File ist folgende Zeile enthalten:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Nun haben Sie zwei Möglichkeiten:

Variante A

Wenn Sie nur den Website-Titel anzeigen möchten, ersetzen Sie oben genannte Codezeilen mit folgenden:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<span class="custom_header"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></span>
</a>

Variante B

Wenn Sie den Website-Titel und zusätzlich die Unterzeile anzeigen möchten, setzen Sie stattdessen folgende Codezeilen ein:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<span class="custom_header"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></span>
</a>
<p class="custom_tagline"><?php echo get_bloginfo( 'description', 'display' ); ?></p>

Nun können Sie die header.php speichern. Wechseln Sie jetzt in Ihr CSS-Stylesheet. Dieses finden Sie unter Design/Customizer/Zusätzliches CSS.

Dort können Sie die soeben im Template hinterlegten Klassen gestalten. Das Beispiel der Website dr-code.ch hat folgenden CSS-Code:

.custom_header {
font-size: 50px;
font-weight: 900;
font-family: 'Roboto Slab';
letter-spacing: 0.1em;
}

.custom_tagline {
font-size: 23.5px;
font-weight: 400;
font-family: 'Roboto Slab';
letter-spacing: 0.05em;
}

Auch keine grosse Sache.

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