Was ist der Unterschied zwischen Header und Hero?

Question

Was ist der Unterschied zwischen Header und Hero?

Antwort

Verwandte Fragen

Wie füge ich in Kadence ein Bild als Hintergrund ein und platziere einen Hero-Bereich darauf?

Wie baue ich in Kadence 1.4.2 auf der Startseite einen Hero-Bereich in voller Breite mit 600 px Höhe ein?

Wo kann ich in Kadence 1.4.2 die Höhe des Hero-Bereichs einstellen?

Warum erscheint die Handynummer im Elementor Header & Footer Builder verdunkelt?

Gibt es eine andere kostenlose Möglichkeit, den mit Astra Free erstellten Header sticky zu machen?

Wie erhalte ich einen Sticky Header für meinen Astra Free und Elementor Free One Pager?

Wie kann ich kostenlos einen transparenten und fixierten Header mit Elementor erstellen?

Warum ist oberhalb des Headers bei Elementor ein weißer Rand?

Wie erstelle ich bei meinem WordPress mit Astra und Elementor One-Pager einen kostenlosen Sticky Header?

Wie kann ich bei meinem mit Elementor erstellten One Pager einen fixierten Header erstellen?

Accepted Answer

Der Unterschied zwischen „Header“ und „Hero“ liegt im Webdesign in ihrer Funktion und Gestaltung: **Header:** Der Header ist der obere Bereich einer Webseite, der auf allen Seiten gleich oder ähnlich aussieht. Er enthält meist das Logo, die Navigation (Menü), eventuell Kontaktdaten oder einen Login-Bereich. Der Header ist also ein funktionaler Bereich für Orientierung und Navigation. **Hero:** Der Hero (oder Hero-Section) ist ein auffälliger, meist großflächiger Bereich direkt unter dem Header auf der Startseite (manchmal auch auf Unterseiten). Er enthält oft ein großes Bild, einen Slogan, eine Überschrift und einen Call-to-Action (z. B. „Jetzt kaufen“). Ziel des Hero-Bereichs ist es, Aufmerksamkeit zu erregen und die Hauptbotschaft der Seite zu vermitteln. **Zusammengefasst:** - **Header:** Funktional, Navigation und Branding, auf allen Seiten sichtbar - **Hero:** Visuell auffällig, zentrale Botschaft, meist nur auf der Startseite Beispiel: Oben auf der Seite siehst du das Logo und das Menü (Header). Darunter folgt ein großes Bild mit Überschrift und Button (Hero).

Accepted Answer

Um bei Kadence (dem WordPress-Theme bzw. -Block-Plugin) ein Bild als Hintergrund einzufügen und darauf einen Hero-Block zu platzieren, gehst du wie folgt vor: 1. **Seite oder Beitrag bearbeiten:... [mehr]

Accepted Answer

Um bei Kadence (dem WordPress-Theme bzw. -Block-Plugin) ein Bild als Hintergrund einzufügen und darauf einen Hero-Block zu platzieren, gehst du wie folgt vor: 1. **Seite oder Beitrag bearbeiten:** Öffne die gewünschte Seite oder den Beitrag im WordPress-Editor. 2. **Kadence Row Layout Block einfügen:** Klicke auf das Plus-Symbol (+) und suche nach „Row Layout“ (Kadence-Block). Füge diesen Block ein. 3. **Hintergrundbild einstellen:** - Wähle den eingefügten Row Layout Block aus. - In der rechten Seitenleiste findest du die Einstellungen für den Block. - Unter „Hintergrund“ kannst du „Bild“ auswählen. - Lade dein gewünschtes Bild hoch oder wähle eines aus der Mediathek. - Passe ggf. die Einstellungen für Position, Größe (z.B. „Cover“), Wiederholung und Überlagerung (Overlay) an. 4. **Hero-Element hinzufügen:** - Innerhalb des Row Layout Blocks kannst du weitere Blöcke einfügen, z.B. Überschrift, Text, Button usw. - Gestalte diese Elemente nach deinen Wünschen – das ist dann dein „Hero“. 5. **Abstände und Design anpassen:** - Passe ggf. Padding/Margin an, damit der Hero-Bereich gut aussieht. - Du kannst auch eine Farbüberlagerung (Overlay) auf das Hintergrundbild legen, um den Text besser lesbar zu machen. **Tipp:** Kadence bietet viele Designoptionen direkt im Block-Editor. Falls du weitere Anpassungen brauchst, findest du mehr Infos in der [Kadence Dokumentation](https://www.kadencewp.com/help-center/). So kannst du einfach ein Bild als Hintergrund setzen und darauf einen Hero-Bereich gestalten.

Accepted Answer

Um im Kadence Theme (Version 1.4.2) auf der Startseite einen Hero-Bereich mit voller Breite und einer festen Höhe von 600 px einzubauen, gehe wie folgt vor: 1. **Seite bearbeiten:** Gehe im... [mehr]

Accepted Answer

Um im Kadence Theme (Version 1.4.2) auf der Startseite einen Hero-Bereich mit voller Breite und einer festen Höhe von 600 px einzubauen, gehe wie folgt vor: 1. **Seite bearbeiten:** Gehe im WordPress-Backend zu „Seiten“ und bearbeite deine Startseite. 2. **Kadence-Block hinzufügen:** Füge einen neuen „Row Layout“-Block von Kadence Blocks hinzu. 3. **Volle Breite einstellen:** Wähle im Block-Editor den Row Layout-Block aus. Stelle unter „Layout“ die Option „Fullwidth“ (Volle Breite) ein. Setze die „Content Max Width“ auf „Fullwidth“ oder lasse sie leer, damit der Inhalt ebenfalls die volle Breite nutzt. 4. **Höhe festlegen:** Scrolle im Block-Editor zu den Einstellungen für den Row Layout-Block. Unter „Design“ findest du das Feld „Min Height“ (Mindesthöhe). Trage dort „600px“ ein. 5. **Hintergrundbild oder Farbe hinzufügen (optional):** Im selben Bereich kannst du unter „Background Settings“ ein Bild oder eine Farbe für den Hero-Bereich festlegen. 6. **Inhalt einfügen:** Füge Überschriften, Text oder Buttons in den Row Layout-Block ein, wie du möchtest. 7. **Seite aktualisieren:** Speichere oder aktualisiere die Seite. **Hinweis:** Falls du den Gutenberg-Editor nicht nutzt, sondern den klassischen Editor oder einen anderen Page Builder, kann die Vorgehensweise abweichen. **Weitere Infos:** - [Kadence Blocks Dokumentation](https://www.kadencewp.com/kadence-blocks/documentation/) - [Kadence Theme Support](https://www.kadencewp.com/support/) So erhältst du einen Hero-Bereich mit voller Breite und einer festen Höhe von 600 px auf deiner Startseite.

Accepted Answer

In Kadence (Version 1.4.2) kannst du die Höhe des Hero-Bereichs (meist als „Hero Section“, „Hero Header“ oder „Page Title Area“ bezeichnet) auf verschiedene Ar... [mehr]

Accepted Answer

In Kadence (Version 1.4.2) kannst du die Höhe des Hero-Bereichs (meist als „Hero Section“, „Hero Header“ oder „Page Title Area“ bezeichnet) auf verschiedene Arten anpassen, je nachdem, wie du den Hero erstellt hast: **1. Über den Customizer (bei Standard-Page-Title-Hero):** - Gehe zu **Design > Customizer**. - Navigiere zu **Seitenkopf > Seiten-Titel-Layout** (oder ähnlich, je nach Spracheinstellung). - Dort findest du Einstellungen für den Abstand oben/unten oder die Höhe des Hero-Bereichs. Passe die Werte nach deinen Wünschen an. **2. Über Kadence Blocks (bei individuellem Hero mit Block-Editor):** - Öffne die Seite oder den Beitrag im WordPress-Editor. - Wenn du den Hero mit einem „Row Layout“-Block von Kadence erstellt hast, wähle diesen Block aus. - In der rechten Seitenleiste findest du unter „Layout“ die Option **Minimale Höhe** (z.B. in Pixel oder VH – Viewport Height). - Trage dort den gewünschten Wert ein, z.B. „500px“ oder „80vh“, um die Höhe festzulegen. **3. Über individuelles CSS:** Falls die obigen Optionen nicht ausreichen, kannst du eigenes CSS verwenden: - Gehe zu **Design > Customizer > Zusätzliches CSS**. - Füge z.B. Folgendes ein (ersetze `.dein-hero-selector` durch die tatsächliche CSS-Klasse deines Hero-Bereichs): ```css .dein-hero-selector { min-height: 500px; } ``` **Tipp:** Um die richtige CSS-Klasse zu finden, kannst du im Browser mit Rechtsklick auf den Hero-Bereich und „Element untersuchen“ arbeiten. **Weitere Infos:** Offizielle Kadence-Dokumentation: https://www.kadencewp.com/help-center/ **Hinweis:** Die genauen Bezeichnungen können je nach Theme-Einstellungen und Sprache leicht abweichen. Bei individuellen Seitenbaukästen (z.B. Elementor) gelten andere Wege. Falls du eine bestimmte Seite oder einen bestimmten Block meinst, prüfe, ob du den Hero mit Kadence Blocks oder über die Theme-Einstellungen erstellt hast – davon hängt der genaue Weg ab.

Accepted Answer

Im Elementor Header & Footer Builder kann die Handynummer aus verschiedenen Gründen verdunkelt erscheinen. Mögliche Ursachen sind: 1. **CSS-Stile**: Es könnte sein, dass bestimmte... [mehr]

Accepted Answer

Im Elementor Header & Footer Builder kann die Handynummer aus verschiedenen Gründen verdunkelt erscheinen. Mögliche Ursachen sind: 1. **CSS-Stile**: Es könnte sein, dass bestimmte CSS-Regeln auf die Handynummer angewendet werden, die sie dunkler oder weniger sichtbar machen. 2. **Text**: Die Textfarbe der Handynummer könnte auf eine dunklere Farbe eingestellt sein, die sich nicht gut vom Hintergrund abhebt. 3. **Transparenz**: Möglicherweise ist die Transparenz des Textes so eingestellt, dass die Handynummer weniger sichtbar ist. 4. **Plugin-Konflikte**: Manchmal können Konflikte mit anderen Plugins oder Themes dazu führen, dass bestimmte Elemente nicht korrekt angezeigt werden. Um das Problem zu beheben, kannst du die Einstellungen für die Textfarbe und die CSS-Stile überprüfen und gegebenenfalls anpassen.

Accepted Answer

Ja, es gibt eine andere Möglichkeit, deinen Header sticky zu machen, ohne CSS-Code zu verwenden. Du kannst ein kostenloses Plugin für WordPress nutzen, das speziell dafür entwickelt wur... [mehr]

Accepted Answer

Ja, es gibt eine andere Möglichkeit, deinen Header sticky zu machen, ohne CSS-Code zu verwenden. Du kannst ein kostenloses Plugin für WordPress nutzen, das speziell dafür entwickelt wurde. Ein beliebtes Plugin ist "Sticky Menu (or Anything!) on Scroll". Hier sind die Schritte, um es zu verwenden: 1. **Installiere das Plugin:** - Gehe in deinem WordPress-Dashboard zu "Plugins" > "Installieren". - Suche nach "Sticky Menu (or Anything!) on Scroll". - Installiere und aktiviere das Plugin. 2. **Konfiguriere das Plugin:** - Gehe zu "Einstellungen" > "Sticky Menu (or Anything!)". - Gib die CSS-Klasse oder ID deines Headers ein (z.B. `#header` oder `.site-header`). - Passe die weiteren Einstellungen nach Bedarf an, wie z.B. den Abstand vom oberen Rand. 3. **Speichere die Einstellungen:** - Klicke auf "Änderungen speichern". Das Plugin sollte nun deinen Header sticky machen, ohne dass du zusätzlichen CSS-Code schreiben musst. Weitere Informationen zum Plugin findest du hier: [Sticky Menu (or Anything!) on Scroll](https://de.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/).

Accepted Answer

Um einen Sticky Header für deinen mit Astra Free und Elementor Free erstellten One Pager zu erstellen, kannst du die folgenden Schritte befolgen: 1. **Astra Theme Customizer verwenden:** - Ge... [mehr]

Accepted Answer

Um einen Sticky Header für deinen mit Astra Free und Elementor Free erstellten One Pager zu erstellen, kannst du die folgenden Schritte befolgen: 1. **Astra Theme Customizer verwenden:** - Gehe zu deinem WordPress-Dashboard. - Navigiere zu "Design" > "Customizer". - Gehe zu "Header" > "Primary Header". - Aktiviere die Option "Sticky Header". Diese Option ist jedoch möglicherweise nur in der Pro-Version von Astra verfügbar. 2. **Custom CSS verwenden:** - Wenn die Sticky Header-Option in der kostenlosen Version nicht verfügbar ist, kannst du benutzerdefiniertes CSS verwenden. - Gehe zu "Design" > "Customizer" > "Zusätzliches CSS". - Füge den folgenden CSS-Code hinzu: ```css .ast-primary-header-bar { position: -webkit-sticky; position: sticky; top: 0; z-index: 999; } ``` 3. **Elementor verwenden:** - Erstelle einen neuen Header mit Elementor. - Gehe zu "Templates" > "Theme Builder" > "Header" und erstelle einen neuen Header. - Füge deine gewünschten Elemente hinzu. - Gehe zu den erweiterten Einstellungen des Abschnitts, den du sticky machen möchtest. - Unter "Erweitert" > "Bewegungseffekte" > "Sticky" wähle "Oben". - Speichere und veröffentliche den Header. Diese Schritte sollten dir helfen, einen Sticky Header für deinen One Pager zu erstellen. Weitere Informationen findest du auf den offiziellen Seiten von [Astra](https://wpastra.com/) und [Elementor](https://elementor.com/).

Accepted Answer

Um einen transparenten und fixierten Header mit Elementor zu erstellen, kannst du die folgenden Schrittefolgen: 1.Erstelle einen neuen Header**: - Gehe zu deinem WordPressashboard. - Navigiere zu... [mehr]

Accepted Answer

Um einen transparenten und fixierten Header mit Elementor zu erstellen, kannst du die folgenden Schrittefolgen: 1.Erstelle einen neuen Header**: - Gehe zu deinem WordPressashboard. - Navigiere zu "Templates" > "Theme Builder". - Klicke auf "Add New" und wähle "Header" aus dem Dropdown-Menü. - Gib deinem Header einen Namen und klicke auf "Create Template". 2. **Füge den Header-Inhalt hinzu**: - Wähle ein vorgefertigtes Header-Template oder erstelle deinen eigenen Header von Grund auf. - Füge die gewünschten Elemente wie Logo, Navigation, etc. hinzu. 3. **Stelle den Header transparent ein**: - Wähle die Sektion deines Headers aus. - Gehe zu den "Style"-Einstellungen. - Unter "Background Type" wähle "Classic" und setze die Hintergrundfarbe auf transparent (Schieberegler auf 0). 4. **Fixiere den Header**: - Gehe zu den "Advanced"-Einstellungen der Header-Sektion. - Unter "Motion Effects" aktiviere "Sticky" und wähle "Top". - Stelle sicher, dass "Sticky On" auf "Desktop", "Tablet" und "Mobile" gesetzt ist, je nach Bedarf. 5. **Veröffentliche den Header**: - Klicke auf "Publish". - Wähle die Bedingungen aus, unter denen der Header angezeigt werden soll (z.B. auf der gesamten Website). Weitere Informationen und detaillierte Anleitungen findest du auf der offiziellen Elementor-Website: [Elementor](https://elementor.com/). Diese Schritte sollten dir helfen, einen transparenten und fixierten Header mit Elementor zu erstellen.

Accepted Answer

Ein weißer Rand oberhalb des Headers bei Elementor kann verschiedene Ursachen haben. Hier sind einige mögliche Gründe und Lösungen: 1. **Theme-Einstellungen**: Manche Themes habe... [mehr]

Accepted Answer

Ein weißer Rand oberhalb des Headers bei Elementor kann verschiedene Ursachen haben. Hier sind einige mögliche Gründe und Lösungen: 1. **Theme-Einstellungen**: Manche Themes haben standardmäßig Abstände oder Margins, die oberhalb des Headers eingefügt werden. Überprüfe die Einstellungen deines Themes und passe sie gegebenenfalls an. 2. **Padding und Margin**: Überprüfe die Padding- und Margin-Einstellungen des Headers in Elementor. Es könnte sein, dass dort ein Abstand definiert ist, der den weißen Rand verursacht. 3. **Custom CSS**: Falls du benutzerdefiniertes CSS verwendest, könnte dort ein Code vorhanden sein, der den weißen Rand verursacht. Überprüfe dein benutzerdefiniertes CSS und entferne oder passe den entsprechenden Code an. 4. **Header-Template**: Wenn du ein Header-Template in Elementor verwendest, überprüfe die Einstellungen des Templates. Es könnte sein, dass dort ein Abstand definiert ist. 5. **Browser-Cache**: Manchmal kann der Browser-Cache veraltete Versionen der Seite anzeigen. Leere den Cache deines Browsers und lade die Seite neu. 6. **Plugins**: Manchmal können Plugins Konflikte verursachen. Deaktiviere vorübergehend alle Plugins außer Elementor und Elementor Pro, um zu sehen, ob der weiße Rand verschwindet. Aktiviere die Plugins dann nacheinander wieder, um den Verursacher zu identifizieren. Falls diese Schritte das Problem nicht lösen, könnte es hilfreich sein, den Support von Elementor oder deinem Theme zu kontaktieren.

Accepted Answer

Um einen Sticky Header in einem mit WordPress, Astra und Elementor erstellten One-Pager kostenlos zu erstellen, kannst du die folgenden Schritte befolgen: 1. **Astra Theme Customizer verwenden:**... [mehr]

Accepted Answer

Um einen Sticky Header in einem mit WordPress, Astra und Elementor erstellten One-Pager kostenlos zu erstellen, kannst du die folgenden Schritte befolgen: 1. **Astra Theme Customizer verwenden:** - Gehe zu deinem WordPress-Dashboard. - Navigiere zu **Design** > **Customizer**. - Gehe zu **Header** > **Primary Header**. - Aktiviere die Option **Sticky Header**. Diese Funktion ist in der kostenlosen Version von Astra verfügbar. 2. **Elementor verwenden:** - Öffne die Seite mit Elementor. - Wähle den Header-Bereich aus, den du sticky machen möchtest. - Gehe zu den **Erweiterten Einstellungen** des Abschnitts. - Unter **Bewegungseffekte** findest du die Option **Sticky**. Wähle hier **Oben** aus. - Du kannst auch festlegen, auf welchen Geräten der Sticky Header angezeigt werden soll (Desktop, Tablet, Mobil). 3. **Custom CSS verwenden:** - Falls die oben genannten Optionen nicht verfügbar sind, kannst du auch benutzerdefiniertes CSS verwenden. - Gehe zu **Design** > **Customizer** > **Zusätzliches CSS**. - Füge den folgenden CSS-Code hinzu: ```css .your-header-class { position: -webkit-sticky; position: sticky; top: 0; z-index: 9999; } ``` - Ersetze `.your-header-class` durch die tatsächliche CSS-Klasse deines Headers. Diese Methoden sollten dir helfen, einen Sticky Header kostenlos zu erstellen.

Accepted Answer

Um einen fixierten Header in einem mit Elementor erstellten One Pager zu erstellen, kannst du folgende Schritte befolgen: 1. **Elementor öffnen**: Öffne die Seite, die du bearbeiten mö... [mehr]

Accepted Answer

Um einen fixierten Header in einem mit Elementor erstellten One Pager zu erstellen, kannst du folgende Schritte befolgen: 1. **Elementor öffnen**: Öffne die Seite, die du bearbeiten möchtest, mit Elementor. 2. **Header auswählen**: Wähle den Header-Bereich aus, den du fixieren möchtest. Dies kann entweder ein bereits vorhandener Header sein oder du erstellst einen neuen Header. 3. **Erweiterte Einstellungen**: Klicke auf den Header-Bereich, um die Einstellungen zu öffnen. Gehe dann zu den erweiterten Einstellungen. 4. **CSS-Klasse hinzufügen**: Füge eine benutzerdefinierte CSS-Klasse hinzu, z.B. `fixed-header`. 5. **Benutzerdefiniertes CSS hinzufügen**: Gehe zu den Seiteneinstellungen oder zu den globalen Einstellungen von Elementor und füge folgendes benutzerdefiniertes CSS hinzu: ```css .fixed-header { position: fixed; top: 0; width: 100%; z-index: 9999; } ``` 6. **Abstände anpassen**: Stelle sicher, dass der restliche Inhalt der Seite nicht vom fixierten Header verdeckt wird. Du kannst dies erreichen, indem du dem ersten Abschnitt unter dem Header einen oberen Rand hinzufügst, der der Höhe des Headers entspricht. 7. **Speichern und Vorschau**: Speichere deine Änderungen und überprüfe die Seite in der Vorschau, um sicherzustellen, dass der Header wie gewünscht fixiert ist. Diese Schritte sollten dir helfen, einen fixierten Header in deinem Elementor One Pager zu erstellen.