Der Header deiner Webseite ist oft der erste Eindruck, den Besucher von deinem Unternehmen bekommen. Mit dem WordPress Theme Enfold hast du die Möglichkeit, diesen Eindruck maßgeblich zu gestalten und an deine Marke anzupassen. In dieser umfassenden Anleitung zeigen wir dir, wie du deinen Enfold Header wie ein Profi bearbeiten und ein einzigartiges Design erstellen kannst.
Warum ein individueller Header wichtig ist
Ein gut gestalteter Header:
- Stärkt deine Markenidentität
- Verbessert die Benutzererfahrung
- Erhöht die Conversion Rate
- Differenziert dich von der Konkurrenz
Ein Standard-Header ist langweilig und vermittelt keine Botschaft. Ein individueller Header hingegen erzählt eine Geschichte und lädt Besucher ein, mehr zu entdecken.
Grundlagen des Enfold Headers
Bevor wir uns in die fortgeschrittenen Anpassungen stürzen, ist es wichtig, die Grundlagen des Enfold Headers zu verstehen. Enfold bietet verschiedene Header-Layouts und Optionen, die du im Theme Options Panel konfigurieren kannst. Gehe zu Enfold > Theme Options > Header, um die folgenden Einstellungen zu finden:
- Header Layout: Wähle aus verschiedenen Layouts wie „Left Menu”, „Right Menu”, „Stacked Center” oder „Header Top and Main Menu”.
- Header Behavior: Bestimme, ob der Header fixiert sein soll (sticky), verkleinert werden soll (shrink) oder transparent sein soll.
- Logo Position: Lege die Position deines Logos fest.
- Main Menu Appearance: Passe das Aussehen des Hauptmenüs an, z.B. Schriftart, Farbe und Größe.
- Header Mobile Behavior: Definiere, wie der Header auf mobilen Geräten aussehen soll.
Experimentiere mit diesen grundlegenden Einstellungen, um ein Gefühl für die Möglichkeiten zu bekommen. Diese Optionen bilden die Basis für alle weiteren Anpassungen.
Fortgeschrittene Header-Anpassungen mit CSS
Für tiefgreifendere Anpassungen des Enfold Headers kommst du um CSS nicht herum. Enfold bietet ein benutzerdefiniertes CSS-Feld im Theme Options Panel. Gehe zu Enfold > Theme Options > General Styling > Quick CSS, um deinen eigenen CSS-Code hinzuzufügen.
Hier sind einige Beispiele für fortgeschrittene Header-Anpassungen mit CSS:
1. Header-Hintergrundfarbe ändern
Um die Hintergrundfarbe des Headers zu ändern, füge folgenden CSS-Code hinzu:
#header {
background-color: #YOUR_COLOR_CODE; /* Ersetze #YOUR_COLOR_CODE mit deiner Wunschfarbe */
}
2. Header-Höhe anpassen
Passe die Höhe des Headers mit diesem CSS-Code an:
#header {
height: 100px; /* Ersetze 100px mit deiner gewünschten Höhe */
}
3. Logo-Größe ändern
Um die Größe deines Logos zu ändern, verwende folgenden CSS-Code:
.logo img {
max-height: 80px; /* Ersetze 80px mit deiner gewünschten Höhe */
}
4. Menu-Farben ändern
Um die Farben der Menu-Items anzupassen, verwende folgenden Code:
#top .main_menu ul:first-child > li > a {
color: #YOUR_COLOR_CODE; /* Ersetze #YOUR_COLOR_CODE mit deiner Wunschfarbe */
}
#top .main_menu ul:first-child > li > a:hover {
color: #YOUR_HOVER_COLOR_CODE; /* Ersetze #YOUR_HOVER_COLOR_CODE mit deiner Hover-Farbe */
}
#top .main_menu ul:first-child > li.current-menu-item > a,
#top .main_menu ul:first-child > li.current_page_item > a {
color: #YOUR_ACTIVE_COLOR_CODE; /* Ersetze #YOUR_ACTIVE_COLOR_CODE mit deiner Active-Farbe */
}
5. Sticky Header anpassen
Um das Aussehen des Sticky Headers anzupassen, verwende folgenden CSS-Code:
.header-scrolled #header {
background-color: rgba(255, 255, 255, 0.9); /* Füge eine leicht transparente Hintergrundfarbe hinzu */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Füge einen Schatten hinzu */
}
Dies sind nur einige Beispiele. Die Möglichkeiten mit CSS sind nahezu unbegrenzt. Nutze die Entwicklertools deines Browsers (Rechtsklick > Untersuchen), um die CSS-Klassen und IDs der Header-Elemente zu identifizieren und diese gezielt anzupassen.
Header bearbeiten mit dem Enfold Layout Builder
Enfold bietet auch einen visuellen Layout Builder, mit dem du den Header-Bereich teilweise gestalten kannst. Dies ist besonders nützlich, um Widgets oder andere Elemente in den Header einzufügen. Um den Layout Builder für den Header zu nutzen, musst du zunächst ein Child-Theme erstellen (siehe unten).
Innerhalb des Child Themes kannst du spezielle Header-Elemente bearbeiten und Widgets hinzufügen. Diese Methode ist komplexer, bietet aber deutlich mehr Flexibilität.
Wichtige Hinweise: Child Theme erstellen und verwenden
Es ist *absolut entscheidend*, dass du ein Child Theme verwendest, wenn du CSS-Änderungen an deinem Enfold Theme vornimmst. Warum? Weil bei jedem Theme-Update deine individuellen Anpassungen überschrieben werden würden! Ein Child Theme ist im Grunde ein separates Theme, das die Stile und Funktionen des Original-Themes erbt, aber deine Anpassungen sicher speichert.
So erstellst du ein Child Theme:
- Erstelle einen neuen Ordner im Verzeichnis
/wp-content/themes/. Der Name des Ordners sollte im Formatenfold-childsein. - Erstelle in diesem Ordner eine Datei namens
style.css. - Füge in die
style.cssDatei folgenden Code ein:
/*
Theme Name: Enfold Child
Description: Enfold Child Theme
Author: Dein Name
Template: enfold
Version: 1.0
*/
@import url("../enfold/style.css");
/* Hier kannst du deine individuellen CSS-Anpassungen hinzufügen */
- Aktiviere das Child Theme im WordPress Dashboard unter Design > Themes.
Nun kannst du deine CSS-Anpassungen im Quick CSS Feld des Child Themes (Enfold > Theme Options > General Styling > Quick CSS) vornehmen. Deine Änderungen bleiben erhalten, auch wenn du das Enfold Theme aktualisierst.
Häufige Fehler und wie man sie behebt
- CSS-Änderungen werden nicht angezeigt: Stelle sicher, dass du ein Child Theme verwendest, deinen Browser-Cache geleert hast und der CSS-Code korrekt ist. Überprüfe auch, ob es CSS-Fehler gibt, die die Interpretation des Codes verhindern.
- Header sieht auf mobilen Geräten komisch aus: Überprüfe die Einstellungen unter Enfold > Theme Options > Header > Header Mobile Behavior und passe diese an. Verwende Media Queries in deinem CSS, um spezifische Stile für verschiedene Bildschirmgrößen festzulegen.
- Logo wird nicht korrekt angezeigt: Stelle sicher, dass dein Logo die richtige Größe und das richtige Format hat. Überprüfe die CSS-Anpassungen für die Logo-Größe und Position.
Inspiration für dein Header Design
Lass dich von anderen Webseiten inspirieren und überlege dir, welches Design am besten zu deiner Marke passt. Achte auf die folgenden Aspekte:
- Farbschema: Verwende Farben, die zu deiner Marke passen und eine positive Wirkung haben.
- Schriftarten: Wähle gut lesbare und ästhetisch ansprechende Schriftarten.
- Bilder und Grafiken: Verwende hochwertige Bilder und Grafiken, die deine Botschaft unterstützen.
- Benutzerfreundlichkeit: Stelle sicher, dass dein Header intuitiv bedienbar ist und die Navigation erleichtert.
Fazit
Die Bearbeitung des WordPress Enfold Headers erfordert zwar etwas Einarbeitung, bietet aber die Möglichkeit, einen einzigartigen und professionellen ersten Eindruck zu hinterlassen. Mit den hier vorgestellten Techniken und Tipps kannst du deinen Header an deine individuellen Bedürfnisse anpassen und deine Marke optimal präsentieren. Denke immer daran, ein Child Theme zu verwenden, um deine Anpassungen zu schützen und regelmäßig Backups deiner Webseite zu erstellen.