Hinweise Zum Header-Mega-Menü: Reviere

Dieses Hinweisfeld ist nur im Elementor-Editor sichtbar. Es erklärt den Aufbau des Untermenüs Reviere. Bitte dieses Widget nicht löschen.

Widget-Reihenfolge

• KHP Header Mega Reviere CSS – NICHT LÖSCHEN
• KHP Header Mega Reviere Hinweise – NICHT LÖSCHEN

Section-Klassen

Die Section des Reviere-Untermenüs bekommt diese Klassen:

• khp-header-mega-menu
• khp-header-mega-reviere

Zusammen im Feld CSS Classes:

• khp-header-mega-menu khp-header-mega-reviere

Spaltenaufbau

• 1. Spalte: Bild + Button, Breite 30%
• 2. Spalte: Alle Destinationen / Europa, Breite 20%
• 3. Spalte: Karibik & Bahamas, Breite 20%
• 4. Spalte: Pazifik / Indischer Ozean, Breite 30%

Spaltenklassen

• Bildspalte: khp-header-mega-image-col khp-header-mega-col-30
• 2. Spalte: khp-header-mega-menu-col khp-header-mega-col-20
• 3. Spalte: khp-header-mega-menu-col khp-header-mega-col-20
• 4. Spalte: khp-header-mega-menu-col khp-header-mega-col-30

Bild Und Button

• Image-Widget: khp-header-mega-spotlight-image
• Button-Widget: khp-header-mega-spotlight-button

Besonderheit Bei Reviere

Bei Reviere gibt es nur eine echte Elementor-Überschrift:

• Alle Destinationen

Dieses Heading-Widget bekommt:

• khp-header-mega-heading

Die Begriffe Europa, Karibik & Bahamas, Pazifik und Indischer Ozean sind keine echten Elementor-Headings. Sie sind fett formatierte Zwischenüberschriften innerhalb der Vertical-Mega-Menu-Widgets.

Vertical Mega Menu

Jedes Vertical-Mega-Menu-Widget bekommt:

• khp-header-mega-list

Das gilt auch dann, wenn in einer Spalte zwei Menüblöcke untereinander stehen.

Inhaltliche Struktur

• Alle Destinationen steht als echtes Heading über dem ersten Menüblock.
• Europa: Westliches Mittelmeer, Östliches Mittelmeer, Kanarische Inseln, Ostsee
• Karibik & Bahamas: Kuba, Bahamas, British Virgin Islands, Französische Antillen, Grenadines
• Pazifik: Südsee, Neukaledonien
• Indischer Ozean: Seychellen

Wichtige Stellschrauben Im CSS

• --khp-reviere-image-margin-left – Bild horizontal verschieben
• --khp-reviere-image-margin-top – Bild vertikal verschieben
• --khp-reviere-text-padding-left – linker Abstand der Textspalten
• --khp-reviere-text-padding-top – oberer Abstand der Textspalten
• --khp-reviere-heading-bottom – Abstand zwischen echtem Heading und Menü
• --khp-reviere-label-top – Abstand oberhalb fetter Zwischenüberschriften
• --khp-reviere-label-bottom – Abstand unterhalb fetter Zwischenüberschriften
• --khp-reviere-list-block-gap – Abstand zwischen zwei Menüblöcken in derselben Spalte
• --khp-reviere-link-bottom – Abstand zwischen normalen Menüpunkten

Pflegeregeln

• Keine einzelnen Widgets manuell mit Margin verschieben.
• Widgets Space in den Columns möglichst auf 0 setzen.
• Leere Heading-Widgets löschen.
• Nur echte Elementor-Heading-Widgets bekommen khp-header-mega-heading.
• Neue Vertical-Mega-Menu-Widgets immer mit khp-header-mega-list klassifizieren.
• Fette Zwischenüberschriften im Menü werden über strong oder b formatiert.
• Der Abstand zwischen Pazifik und Indischer Ozean wird über --khp-reviere-list-block-gap gesteuert.