> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/german/plain-jane-interactive/sections-and-features/index-center-layout-section.md). # Index Center Layout-Abschnitt > **Was Sie lernen werden** > > * Wie man zentrierte Startseiten-Layouts mit ausgefeilten Navigationssteuerungen erstellt > * Konfigurationsoptionen für Menüpositionierung, Logodarstellung und Zeitzonenintegration > * Wie man Navigationsskalierungseffekte, Hover-Farben und Abstandssteuerungen einrichtet > * Best Practices für die Erstellung professioneller zentrierter Startseitenerlebnisse *** ## 🎯 Was ist der Index Center Layout-Bereich? Die **Index Center Layout-Abschnitt** ist ein ausgeklügeltes Startseiten-Layout-System, das speziell für Plain Jane Interactive entwickelt wurde und zentrierte Navigationserlebnisse mit professionellen Menüsteuerungen, Logo-Integration und Zeitzonenfunktionalität schafft. Dieser Abschnitt bietet umfassende Anpassungsoptionen zur Erstellung eleganter, zentrierter Startseiten-Layouts, die als primäres Navigationszentrum für interaktive Websites dienen. **Hauptfunktionen:** * **Zentriertes Menü-Layout**: Professionelle zentrierte Navigation mit präzisen Positionssteuerungen * **Logo-Integration**: Anpassbare Logodarstellung mit Größen- und Markenoptionen * **Zeitzonenanzeige**: Echtzeit-Anzeige von Datum und Uhrzeit mit Farboptionen * **Navigationsskalierung**: Interaktive Hover-Effekte mit Skalierungsanimationen * **Menüpositionierung**: Präzise vertikale Positionssteuerungen für die Menüplatzierung * **Integration von Kundenkonten**: Automatische Integration von Login-/Kontolinks * **Mobiloptimierung**: Responsives Design, optimiert für mobile Geräte * **Markenkonsistenz**: Nahtlose Integration mit der Markenidentität Verfügbar in: * ✅ Plain Jane Interactive v2+ **NUR** > 💡 **Hinweis**: Dieser Abschnitt erstellt das primäre Navigations­erlebnis der Startseite und dient als zentrales Hub für Benutzerinteraktionen in Plain Jane Interactive-Themes. *** ## 🔧 So fügen Sie den Index Center Layout-Bereich hinzu 1. Gehen Sie zu **Onlineshop > Themes > Anpassen** 2. Navigieren Sie zu **Startseite** Vorlage 3. Klicken Sie **Sektion hinzufügen** 4. Wählen Sie **Index Center** Layout-Bereich 5. Menülinks und Navigationsoptionen konfigurieren 6. Logodarstellung und Positionierungseinstellungen einrichten 7. Zeitzonen- und Datumsanzeigeoptionen konfigurieren 8. Navigation und interaktive Effekte testen > ⚠️ **Wichtig**: Dieser Abschnitt ist für die Verwendung auf der Startseite konzipiert und schafft das primäre Navigationserlebnis für Ihr Interactive-Theme. *** ## 🏠 Zentriertes Navigationssystem ### **Menü-Layout-Konfiguration** **Einstellungen für zentriertes Menü** * **Zentrum-Menü**: Primäre Navigationslinks für zentriertes Layout konfigurieren * **Menüpositionierung**: Vertikale Positionssteuerung für die Menüplatzierung (prozentbasiert) * **Menüabstand**: Höhensteuerung für den Abstand der Navigationslinks (pixelbasiert) * **Link-Ausrichtung**: Wählen Sie zwischen linksbündiger oder zentrierter Link-Ausrichtung * **Responsives Design**: Automatische Anpassung für mobile Geräte **Navigationsfunktionen** * **Professionelle Abstände**: Präzise Kontrolle über Abstände von Navigationselementen * **Visuelle Hierarchie**: Klare Organisation der Navigationselemente * **Markenintegration**: Nahtlose Integration mit Logo- und Markenelementen * **Benutzererlebnis**: Intuitiver Navigationsfluss für Interaktionen auf der Startseite ### **Interaktive Navigationseffekte** **Effekte zur Navigationsskalierung** * **Navigation skalieren aktivieren**: Umschalter für interaktive Skalierungseffekte bei Hover * **Skalierungsanimation**: Sanfte 1,1-fache Skalentransformation beim Hover * **Übergangskontrolle**: 0,3s Übergangsdauer für sanfte Animationen * **Hover-Rückmeldung**: Visuelles Feedback zur verbesserten Benutzerinteraktion **Hover- und Farb­anpassung** * **Farbe der Navigationslinks**: Standardfarbe für Navigationslinks * **Hover-Farbe der Navigationslinks**: Farbe der Navigationslinks beim Hover * **Hintergrundfarbe der Navigationslinks**: Hintergrundfarbe für Effekte der Navigationslinks * **Hervorhebungseffekte**: Optionale Animations­effekte zur Hervorhebung *** ## 🏢 Logo-Anzeigesystem ### **Logo-Konfiguration** **Logo-Einstellungen für die Startseite** * **Home-Logo anzeigen**: Umschalter zum Aktivieren/Deaktivieren des Logos auf der Startseite * **Enter-Screen-Logo hochladen**: Benutzerdefinierter Logo-Upload für die Anzeige auf der Startseite * **Größe des Enter-Screen-Logos**: Pixelbasierte Steuerung der Logogröße * **Logo-Positionierung**: Zentrierte Logo-Positionierung mit responsiver Skalierung * **Fallback-Logo**: Automatischer Fallback zu "Supreme-dummy.png", falls kein benutzerdefiniertes Logo vorhanden ist **Funktionen der Logo-Integration** * **Markenkonsistenz**: Logo behält konsistente Markenführung auf der Startseite bei * **Responsive Skalierung**: Logo skaliert automatisch für verschiedene Bildschirmgrößen * **Navigationsintegration**: Logo strategisch in Verbindung mit Navigationselementen positioniert * **Link-Funktionalität**: Logo verlinkt direkt zur Startseite (Root-URL) ### **Logo-Best Practices** **Professionelle Logo-Einrichtung** * **Hohe Auflösung**: Verwenden Sie hochwertige Logodateien für eine scharfe Darstellung * **Angemessene Größenwahl**: Wählen Sie eine Logogröße, die Präsenz und Navigation ausbalanciert * **Markenabstimmung**: Stellen Sie sicher, dass das Logo das gesamte Startseitendesign ergänzt * **Mobiloptimierung**: Überprüfen Sie das Erscheinungsbild und die Lesbarkeit des Logos auf mobilen Geräten *** ## ⏰ Zeitzonen- und Datumsanzeige ### **Datum- und Uhrzeitkonfiguration** **Einstellungen zur Zeitzonenanzeige** * **Datum/Zeit anzeigen**: Umschalter zum Aktivieren/Deaktivieren der Anzeige von Datum und Uhrzeit * **Index-Datum-Farbe**: Benutzerdefinierte Farbe für die Datumsanzeige auf der Startseite * **Index-Uhrzeit-Farbe**: Benutzerdefinierte Farbe für die Uhrzeitanzeige auf der Startseite * **Echtzeit-Aktualisierungen**: Live-Uhr-Funktionalität mit automatischen Aktualisierungen **Funktionen der Zeitzone** * **Shop-Integration**: Verwendet die im Shopify-Admin konfigurierte Shop-Zeitzone * **Professionelle Anzeige**: Saubere, lesbare Datums- und Zeitformatierung * **Markenintegration**: Farben stimmen mit dem Gesamtdesign der Startseite überein * **Benutzerkontext**: Bietet temporalen Kontext für Besucher der Startseite ### **Strategie zur Uhrintegration** **Platzierung der Startseiten-Uhr** * **Strategische Positionierung**: Uhr positioniert, um Navigation und Logo zu ergänzen * **Visuelles Gleichgewicht**: Uhr-Elemente tragen zum Gesamtausgleich der Startseite bei * **Markenstärkung**: Uhrfarben verstärken die Markenidentität * **Benutzererlebnis**: Uhr liefert nützliche Informationen, ohne das Layout zu überladen *** ## 👤 Integration von Kundenkonten ### **Anzeige des Account-Links** **Funktionen für Kundenkonten** * **Anmelde-Link anzeigen**: Optionen für die Platzierung des Anmelde-Links (obere Positionierung) * **Integration des Account-Links**: Automatischer Account-Link für eingeloggte Kunden * **Login-Link**: Anmelde-Link für Kunden, die noch nicht eingeloggt sind * **Kundenkonten**: Integration mit dem Shopify-Kundenkontosystem **Konfiguration des Account-Links** * **Bedingte Anzeige**: Links erscheinen abhängig vom Kunden-Anmeldestatus * **Professionelles Styling**: Account-Links einheitlich mit der Navigation gestylt * **Benutzererlebnis**: Klare Kontozugänge für den Komfort der Kunden * **Markenintegration**: Account-Links integrieren sich nahtlos in das Startseitendesign *** ## 🎨 Visuelles Design und Styling ### **Navigations-Styling** **Professionelles Navigations-Design** * **Schriftgrößensteuerung**: Pixelbasierte Steuerung der Schriftgröße für Navigationslinks * **Farbkoordination**: Umfassende Farbsteuerung für alle Navigationselemente * **Abstandsverwaltung**: Präzise Abstandssteuerungen für professionelles Layout * **Animationsintegration**: Sanfte Animationen für verbesserte Benutzerinteraktion **Visuelle Effekte** * **Hervorhebungsanimation**: Optionale Hervorhebungseffekte für Navigationinteraktion * **Hervorhebungseffekt deaktivieren**: Option zum Deaktivieren von Hervorhebungseffekten für ein minimalistisches Design * **Animationsdauer**: Steuerung über Animationszeit und -effekte * **Professionelles Erscheinungsbild**: Sauberes, ausgefeiltes Navigationsstyling ### **Layout-Responsivität** **Mobiloptimierung** * **Home-Menü-Gitter Mobil**: Dedizierte mobile Layout-Optimierung * **Responsives Navigationsverhalten**: Navigation passt sich elegant an mobile Bildschirme an * **Touch-freundlich**: Navigationselemente für Touch-Interaktion optimiert * **Leistung**: Effizientes Rendering für mobile Geräte *** ## 📱 Mobile Erfahrung ### **Anpassung des mobilen Layouts** **Funktionen des responsiven Designs** * **Mobile Navigation**: Dediziertes mobiles Navigationslayout * **Touch-Optimierung**: Navigationselemente angemessen für Touch dimensioniert * **Visuelle Konsistenz**: Einheitliches Erscheinungsbild über Gerätetypen hinweg * **Leistung**: Optimiertes Laden und Interaktion für mobile Geräte **Mobile-spezifische Überlegungen** * **Bandbreiten-Effizienz**: Effizientes Laden für mobile Verbindungen * **Akkuschonung**: Animationen und Effekte für Akkulaufzeit optimiert * **Benutzererlebnis**: Mobiloptimierter Navigationsfluss und Interaktion * **Markenkonsistenz**: Erhaltenes Markenerlebnis auf mobilen Geräten *** ## 🎛️ Erweiterte Konfiguration ### **Professionelle Startseiten-Strategie** **Navigationsstrategie** * **Nutzerreise**: Gestalten Sie den Navigationsfluss so, dass er Nutzer zu gewünschten Aktionen führt * **Inhalts­hierarchie**: Organisieren Sie die Navigation, um die Wichtigkeit der Inhalte widerzuspiegeln * **Markengeschichten**: Verwenden Sie die Navigation der Startseite, um die Marken­erzählung zu unterstützen * **Conversion-Optimierung**: Positionieren Sie die Navigation zur Unterstützung der Geschäftsziele **Performance-Optimierung** * **Effizientes Laden**: Optimieren Sie alle Startseitenelemente für schnelles Laden * **Animationsleistung**: Balancieren Sie visuelle Effekte mit Performance * **Mobile Überlegung**: Stellen Sie exzellente Leistung auf mobilen Geräten sicher * **Benutzererlebnis**: Priorisieren Sie Benutzererlebnis über visuelle Komplexität ### **Markenintegration** **Visuelle Marken­ausrichtung** * **Farbkoordination**: Alle Farben stimmen mit der Markenpalette überein * **Typografie**: Die Navigationstypografie spiegelt die Markenpersönlichkeit wider * **Logo-Integration**: Logo und Navigation schaffen ein kohärentes Markenerlebnis * **Professionelle Standards**: Bewahren Sie ein professionelles Erscheinungsbild über alle Elemente hinweg *** ## 🔧 Fehlerbehebung ### **Navigationsprobleme** **Häufige Probleme** * Navigationslinks werden nicht korrekt angezeigt * Menüpositionierung wird nicht wie erwartet angewendet * Interaktive Effekte funktionieren nicht richtig * Mobiles Navigationslayout bricht **Lösungen** * Überprüfen Sie, ob Menülinks in den Einstellungen des zentrierten Menüs korrekt konfiguriert sind * Prüfen Sie die prozentualen Einstellungen zur Menüpositionierung * Testen Sie interaktive Effekte in verschiedenen Browsern * Stellen Sie sicher, dass Navigationsskalierung und Hover-Effekte richtig aktiviert sind * Browser-Cache nach Änderungen an der Navigation leeren * Testen Sie das mobile Layout auf echten Geräten ### **Probleme mit der Logodarstellung** **Mögliche Probleme** * Logo erscheint nicht auf der Startseite * Logogröße wird nicht korrekt angewendet * Logo-Verlinkung funktioniert nicht richtig * Fallback-Logo erscheint statt des benutzerdefinierten Logos **Lösungen** * Überprüfen Sie, ob der Umschalter "Home-Logo anzeigen" aktiviert ist * Laden Sie ein hochwertiges Enter-Screen-Logo hoch * Passen Sie die Einstellung zur Größe des Enter-Screen-Logos an * Testen Sie die Logofunktionalität und Links * Prüfen Sie das Logo-Dateiformat und die Dateigröße * Stellen Sie sicher, dass der Logoupload erfolgreich abgeschlossen wurde ### **Zeitzonen- und Farbprobleme** **Häufige Probleme** * Datum und Uhrzeit werden nicht angezeigt * Farben werden nicht auf Navigationselemente angewendet * Zeitzone zeigt falsche Uhrzeit an * Hover-Effekte funktionieren nicht richtig **Lösungen** * Überprüfen Sie, ob der Umschalter "Datum/Zeit anzeigen" aktiviert ist * Überprüfen Sie die Einstellungen für Datum- und Uhrzeitfarben * Bestätigen Sie die Shop-Zeitzoneneinstellungen im Shopify-Admin * Testen Sie Hover-Farbeinstellungen und Effekte * Verifizieren Sie, dass alle Farbeinstellungen korrekt gespeichert sind * Prüfen Sie auf Konflikte mit benutzerdefiniertem CSS *** ## 📊 Performance-Auswirkungen ### **Optimierte Startseiten-Performance** **Effizienter Betrieb** * **Schnelles Laden**: Startseitenelemente für sofortige Anzeige optimiert * **Sanfte Animationen**: Navigationseffekte nutzen Hardwarebeschleunigung * **Mobile Performance**: Alle Elemente für mobile Geräte optimiert * **Speichereffizienz**: Effiziente Speichernutzung für anhaltende Performance **Vorteile für das Benutzererlebnis** * **Professionelle Navigation**: Ausgefeilte Navigation verbessert die Markenwahrnehmung * **Intuitive Interaktion**: Klare Navigation verbessert die Benutzererfahrung * **Markenwiedererkennung**: Konsistente Markenführung erhöht die Wiedererkennung der Marke * **Benutzerengagement**: Interaktive Elemente fördern die Nutzererkundung *** ## 🎯 Zusammenfassung der Best Practices ### **Einrichtungs-Checklist** ``` ✅ Konfigurieren Sie das zentrierte Menü mit geeigneten Navigationslinks ✅ Stellen Sie die Menüpositionierung für ein optimales Layout auf verschiedenen Bildschirmgrößen ein ✅ Laden Sie ein hochwertiges Enter-Screen-Logo hoch und legen Sie eine geeignete Größe fest ✅ Konfigurieren Sie Navigationsfarben, die mit der Markenpalette übereinstimmen ✅ Richten Sie die Anzeige von Datum und Uhrzeit mit markenkonformen Farben ein ✅ Testen Sie Navigationsskalierung und Hover-Effekte in verschiedenen Browsern ✅ Verifizieren Sie, dass die Integration von Kundenkonten korrekt funktioniert ✅ Testen Sie das mobile Navigationslayout und Touch-Interaktionen ✅ Prüfen Sie die Ladeleistung mit allen Startseitenelementen ✅ Verifizieren Sie die Zugänglichkeit der Navigationssteuerungen ✅ Testen Sie das vollständige Startseitenerlebnis aus Sicht des Nutzers ✅ Stellen Sie sicher, dass die Startseite gut in das Gesamtdesign der Website integriert ist ``` ### **Design-Strategie** **Professionelle Umsetzung** * **Benutzerzentriert**: Gestalten Sie die Navigation so, dass sie den Bedürfnissen der Nutzer und den Geschäftszielen dient * **Markenintegration**: Verwenden Sie Startseitenelemente, um die Markenidentität zu verstärken * **Leistungsbalance**: Balancieren Sie visuelle Attraktivität mit Ladegeschwindigkeit * **Mobile First**: Sorgen Sie für exzellente mobile Erfahrungen bei der Startseiten-Navigation **Technische Optimierung** * **Qualitäts-Assets**: Verwenden Sie hochwertige Assets für alle Startseitenelemente * **Responsives Design**: Stellen Sie sicher, dass die Startseite auf allen Geräten hervorragend funktioniert * **Barrierefreiheit**: Machen Sie die Navigation für alle Benutzer zugänglich * **Performance-Überwachung**: Testen Sie regelmäßig die Leistungs­auswirkungen der Startseite *** ## 🚀 Erweiterte Anwendungsfälle ### **Marken-Startseite** **Professionelle Markenpräsentation** * Verwenden Sie das zentrierte Layout, um eine ausgefeilte Marken-Startseite zu erstellen * Implementieren Sie interaktive Effekte für ein ansprechendes Markenerlebnis * Koordinieren Sie alle Elemente für eine kohärente Markenpräsentation * Gestalten Sie die Navigation so, dass sie das Markenerzählen unterstützt ### **E-Commerce-Startseite** **Conversion-optimierte Navigation** * Gestalten Sie die Navigation so, dass Nutzer zu wichtigen Produktbereichen geführt werden * Verwenden Sie interaktive Effekte, um die Navigationserkundung zu fördern * Positionieren Sie den Kontozugriff für die Bequemlichkeit der Kunden * Erstellen Sie ein Startseitenerlebnis, das Conversion-Ziele unterstützt ### **Portfolio-Startseite** **Kreative Portfolio-Navigation** * Verwenden Sie das zentrierte Layout für eine kreative, professionelle Portfolio-Präsentation * Implementieren Sie interaktive Effekte für eine ansprechende Portfolio-Navigation * Gestalten Sie die Navigation so, dass sie kreative Kompetenz präsentiert * Erstellen Sie eine Startseite, die Designfähigkeiten demonstriert *** Der Index Center Layout-Bereich bietet ausgefeilte zentrierte Navigationsfunktionen für Startseiten, die professionelle, interaktive Startseitenerlebnisse mit umfassenden Anpassungsoptionen für Branding, Navigation und Nutzerengagement schaffen. ### **Brauchen Sie Hilfe?** * 💬 **Treten Sie unserer Community auf Discord bei:** * 📧 **Schreiben Sie uns eine E-Mail an:** * 💻 **Chatten Sie live mit uns:** Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.openspaces.design/german/plain-jane-interactive/sections-and-features/index-center-layout-section.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.