Die Seitenhierarchie verläuft von der Markenbotschaft zur Leistungspräsentation.
Die Seitenstruktur lässt sich am einfachsten als Abfolge zusammengehöriger Blöcke nachvollziehen. Ein Text-auf-Bild-Intro stellt die Marke mit einer prominenten Überschrift, unterstützendem Text, Businessfotos und einem „Mehr erfahren“-Button vor. Der nächste Block ändert den Maßstab und präsentiert drei gleichwertige Wertversprechen: Qualitätsprodukt, Wachstumsstrategie und Wettbewerbsfähiger Preis. Diese Abfolge führt von einer umfassenden Einführung zu prägnanten, unterstützenden Aussagen.
Der zentrierte Abschnitt „Über uns“ bildet einen separaten Informationsknoten, bevor das Layout wieder in geteilte Kompositionen übergeht. Eine kombiniert ein Foto vom Arbeitsplatz mit der Botschaft „Das Richtige tun, zur richtigen Zeit“, eine andere platziert Kommunikationsinhalte neben einem Foto eines professionellen Meetings. Diese abwechselnden Blöcke trennen zusammengehörige Ideen, ohne sie in einem einzigen, durchgehenden Textbereich zu vereinen.
Die Präsentation der sechs Leistungen ist strukturell wichtig, obwohl fünf Leistungsbezeichnungen bestätigt sind: Branding, Entwicklung, Webdesign, Social Media und E-Commerce. Sie bildet eine wiederkehrende Gruppe unter der Überschrift „Unsere Leistungen“ und wird später von einem Werbeblock mit Text und Buttons sowie einer Galerie mit vier Bildern gefolgt. Die Galerie „Business und Marketing“ bildet einen optisch klar abgegrenzten Abschlussbereich vor der breiten Fußzeile. Diese Hierarchie ermöglicht es, die HTML5-Seite in verschiedene Ebenen zu untersuchen: Einleitung, Mehrwertinhalte, Unternehmensinformationen, Dienstleistungen, Werbung, Galerie und Fußzeile. Das Ebenen-Panel von Nicepage (/doc/167468/layers) unterstützt Nutzer bei der Untersuchung der Element- und Containerstruktur. Die größte Stärke der Vorlage liegt jedoch in der klaren Segmentierung der Seitenstruktur.
Wenn Sie HTML5 Template Builder verwenden, können Sie Farben, Schriftarten, Kopf- und Fußzeilen, Layout, Spalten und andere Designelemente sowie Inhalte und Bilder anpassen.
Passen Sie diese vorgefertigte HTML5-Vorlage im Nicepage-Editor visuell an und behalten Sie dabei die Übersichtlichkeit der Seitenstruktur bei. Nutzen Sie das Ebenen-Panel, um die Hierarchie von Kopfzeile, Blöcken, Containern, Elementen und Fußzeile anzuzeigen, zwischen verschiedenen Seitenbereichen zu navigieren und Elemente im Layout schnell auszuwählen.
Das Ebenen-Panel bietet außerdem praktische Steuerelemente für die Arbeit mit komplexeren Seiten. Blöcke, Container und Elemente können zur besseren Identifizierung umbenannt, während der Bearbeitung vorübergehend ausgeblendet oder gesperrt werden, um versehentliche Änderungen zu verhindern. Die Gliederung zeigt auch die interne Struktur von Elementen wie Menüs und Kontaktformularen an.
Blöcke unterteilen die Seite in Hauptinhaltsabschnitte, während Container und Elemente den Inhalt innerhalb dieser Abschnitte organisieren. Durch die sichtbare Hierarchie wird das Verständnis der Zusammenhänge zwischen den einzelnen Seitenteilen erleichtert, insbesondere bei Layouts mit vielen verschachtelten Elementen.
Sie können das Ebenen-Bedienfeld verwenden, um durch diese Struktur zu navigieren, anstatt alles direkt auf der Arbeitsfläche auszuwählen. Dadurch lassen sich komplexe Layouts als übersichtliche Seitenhierarchie leichter überprüfen und verwalten.
Nach der visuellen Anpassung der Seite kann der resultierende HTML-Code überprüft und bei Bedarf angepasst werden. Benötigt ein Projekt zusätzliches Markup oder Funktionen, die über die Standardseitenelemente hinausgehen, verwenden Sie das HTML-Element, um gezielten benutzerdefinierten HTML-Code hinzuzufügen.
Dieser Workflow kombiniert visuelle Bearbeitung mit einer übersichtlichen Darstellung der Seitenhierarchie. Dadurch eignet sich die Vorlage sowohl als fertiges Design als auch als HTML5-Projekt, dessen Struktur überprüft, verwaltet, angepasst und erweitert werden kann.