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
