Upfront Teil 2: Strukturierung Deiner Webseite mit Bereichen

Wenn es um das Layout einer Website mit UpFront geht, bilden „Regionen“ die Bausteine, mit denen Du alles Mögliche gestalten kannst – von Headern in Vollbild- oder voller Breite bis hin zu abgegrenzten Bereichen, Seitenleisten und Fußzeilen. Regionen dienen als Hintergrund, auf dem alle weiteren Elemente – wie Bilder, Texte, Videos und Slider – aufgebaut werden können. In diesem Beitrag erfährst Du, wie man Regionen löscht und einfügt, welche Arten von Regionen zur Verfügung stehen und wie globale Header und Footer funktionieren. Dies ist der zweite Teil unserer Serie zur Einführung in die Arbeit mit UpFront. Wir nehmen uns ein bestehendes UpFront-Theme vor – in diesem Fall „Spirit“ – und wandeln es in eine völlig neue Webseite um, inklusive eigenem Branding, Bildern, individuellen Schriftarten und responsivem Layout. [video width="736" height="158" mp4="http://psource.eimen.net/wp-content/uploads/sites/10/2026/08/edit-regions_converted.mp4" loop="true" autoplay="true" preload="auto"][/video] &nbsp; <strong>Im Verlauf dieser Serie zeigen wir Dir anhand zahlreicher Beispiele, wie Du Upfront nutzt:</strong> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-part-1-die-basics-themefarben-und-schriftarten/">Teil 1: Die Grundlagen, Themenfarben und Typografie</a> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-2-strukturierung-deiner-webseite-mit-bereichen/">Teil 2: Strukturieren Deiner Webseite mit Regionen</a> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-3-layout-deiner-webseite-mit-elementen/">Teil 3: Gestalte Deine Webseite mit Elementen</a> <a href="https://psource.eimen.net/wiki/upfront-teil-4-elemente-mit-individuellem-code-anpassen/">Teil 4: Elemente und benutzerdefinierten Code optimieren</a> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-5-plugins-hinzufuegen-und-powerform-formulare-stylen/">Teil 5: Plugins hinzufügen und Powerform-Formulare gestalten</a> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-6-erstellung-von-responsiven-webseiten/">Teil 6: Responsive Webseiten erstellen</a> <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-7-arbeiten-mit-seiten-und-beitraegen/">Teil 7: Arbeiten mit Seiten und Beiträgen</a> Wir nehmen das „Spirit“-Theme, überarbeiten dessen Bereiche, Inhalte, Typografie und sonstige Elemente grundlegend und wandeln es in ein Produkt-Theme um – komplett mit eigenem Branding, Farben, Schriftarten, Schaltflächen, Bildern, Kontaktformular und weiteren Elementen. Im letzten Beitrag dieser Reihe haben wir die Farben und die Typografie des Themes aktualisiert sowie benutzerdefinierte Schriftarten hinzugefügt. Hier ist ein Überblick über den bisherigen Fortschritt: <img class="alignnone size-full wp-image-554" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/regions-progress-1.jpg" alt="" width="1364" height="600"> Links sehen Sie unseren aktuellen Stand, rechts das Ziel, auf das wir hinarbeiten. <h3>Bereiche löschen</h3> Beginnen wir wieder damit, Elemente zu entfernen. Das „Spirit“-Theme bietet eine Startseite mit einem ansprechenden, langen Design, das aus 14 Bereichen besteht – darunter der Header, Abschnitte für verschiedene Dienstleistungen, ein Newsletter-Anmeldeformular und der Footer. Für das Design meiner neuen Website benötige ich auf der Startseite nur vier Bereiche: ein Header-Bild, einen Abschnitt zur Vorstellung der App, die ich bewerben möchte, ein Video in voller Breite sowie den Footer. Wir müssen also einige Bereiche löschen. Wenn Du durch das „Spirit“-Theme scrollst, erscheint in der oberen rechten Ecke jedes Bereichs ein kleines Stift-Symbol. Klicke auf dieses Symbol, um verschiedene Optionen anzuzeigen: - Oben links werden die Abmessungen des Bereichs angezeigt. - Oben rechts befinden sich ein rotes „x“-Symbol (zum Löschen des Bereichs) und darunter ein grünes Zahnrad-Symbol (für die Bereichseinstellungen). - Zudem gibt es gelbe „+“-Symbole oben, links, rechts und unten am Seitenabschnitt (zum Einfügen eines neuen Bereichs). - Schließlich erscheint die grüne Option „Bearbeitung des Hintergrunds abschließen“ (zum Speichern der Änderungen am Bereich). <img class="alignnone size-full wp-image-561" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/spirit-header-small-1.png" alt="" width="735" height="274"> Wir möchten 10 Bereiche löschen. Den Header und die Navigationsbereiche behalten wir bei; wir beginnen also mit dem darauf folgenden Bereich, dem „Über uns“-Abschnitt. Klicke auf das Stift-Symbol und anschließend auf das rote „x“-Symbol. Du wirst gefragt, ob Du diesen Abschnitt wirklich löschen möchtest. Klicke auf „OK“. Wir behalten auch den Bereich direkt nach der Navigation bei, löschen jedoch alle anderen Bereiche mit Ausnahme des Footers. Denke daran: Wenn Du einen Bereich (Region) löschst, werden auch alle darin enthaltenen Inhalte gelöscht. Gehe also nicht leichtfertig damit um! <h3>Bereiche einfügen</h3> Das Erstellen eines neuen Bereichs ist ganz einfach. Klicke dazu auf das Stift-Symbol eines vorhandenen Bereichs und anschließend auf eines der gelben „+“-Symbole oben oder unten auf der Seite. Dadurch wird ein neuer Bereich oberhalb oder unterhalb des aktuell geöffneten Bereichs eingefügt. Der Fokus verschiebt sich auf den neuen Bereich; über das grüne Zahnrad-Symbol kannst Du dessen Erscheinungsbild anpassen. Es stehen verschiedene Arten von Bereichen zur Verfügung, mit denen Du Deine Webseite gestalten kannst. Gehen wir sie der Reihe nach durch. <img class="alignnone size-full wp-image-519" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/fullscreen-settings-1.png" alt="" width="510" height="400"> - Einstellungen für Vollbild-Bereiche <h3>Vollbild</h3> Die Option „Vollbild“ steht nur für Header-Bereiche zur Verfügung. Wie der Name schon sagt, füllt dieser Bereich den gesamten Browserbildschirm von oben nach unten und von links nach rechts aus. Dies ist eine hervorragende Option, wenn Du ein großes Header-Bild (Hero-Image) verwendest oder eine Landingpage erstellen möchtest, die das gesamte Browserfenster ausfüllt, ohne dass gescrollt werden muss. Dieser Bereichstyp bietet zwei weitere Optionen: <h3>Navigationsbereich hinzufügen</h3> Hierbei handelt es sich im Grunde um einen Unterbereich, der die Anzeige einer Navigation innerhalb des Header-Bereichs ermöglicht. Der Vorteil: Besucher sehen Deine Navigation direkt beim Aufrufen der Webseite im sichtbaren Bereich („Above the Fold“) des Browserfensters. Standardmäßig wird keine Navigation angezeigt; alternativ kannst Du diese oben oder unten im Bereich platzieren. <h3>Elementverhalten</h3> Für Deinen Vollbild-Header kannst Du zwischen den Einstellungen „Position beibehalten“ (Keep Position) und „Verhältnis beibehalten“ (Keep Ratio) wählen. „Position beibehalten“ bedeutet, dass Logos, Texte, Bilder, Schaltflächen usw. an ihrer Stelle bleiben, wenn der Nutzer die Größe des Browserfensters ändert. „Verhältnis beibehalten“ bedeutet, dass diese Elemente ihre Position automatisch anpassen, wenn die Größe des Browserfensters geändert wird. Befindet sich D Logo beispielsweise genau in der Mitte des Bereichs, passt es seine vertikale Position an, sobald das Browserfenster vergrößert oder verkleinert wird. Genau aus diesem Grund ist diese Option sehr praktisch! <img class="alignnone size-full wp-image-485" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/100-wide-1.png" alt="" width="510" height="308"> - Einstellungen für 100 % breite Bereiche <h3>100 % Breite</h3> Bereiche werden über die volle Breite von links nach rechts angezeigt, jedoch nicht über die gesamte Höhe von oben nach unten. Verwende diese Art von Bereich, wenn Dein Header nicht das gesamte Browserfenster ausfüllt, aber dennoch über die volle Breite angezeigt werden soll. Auf die Optionen zur Festlegung der vertikalen Höhe von Bereichen gehen wir weiter unten ein. <img class="alignnone size-full wp-image-583" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/contained1-1.png" alt="" width="510" height="425"> - Einstellungen für begrenzte Bereiche <h3>Begrenzt (Contained)</h3> Mit der Option „Begrenzt“ (Contained) kannst Du Deine Webseite im Letterbox-Format darstellen. Du kannst die Breite des Containers steuern, indem Du zu den Theme-Einstellungen gehst und auf „Globalen Hintergrund bearbeiten“ (Edit Global Background) klickst. Zudem kannst Du den Typ des globalen Hintergrunds ändern – etwa auf eine einfarbige Fläche, ein Bild oder sogar ein Video, das auf der gesamten Webseite angezeigt wird. <h3>Hintergrundtypen</h3> Du musst Dich nicht mit langweiligen Hintergrundfarben zufriedengeben. UpFront bietet Dir folgende Möglichkeiten: <strong>Einfarbiger Hintergrund</strong> – Natürlich kannst Du Farben verwenden, wenn Du möchtest – aber sie müssen nicht langweilig sein! Gib Deinen eigenen Hex-Code ein oder nutze die Farbauswahl. <strong>Bild</strong> – Wenn Du ein Bild hochlädst, kannst Du dessen Positionierung festlegen (volle Breite, gekachelt/Muster oder fixiert). Bei der Option „fixiert“ lässt sich sogar die genaue X- und Y-Position des Bildes bestimmen. Das ist Präzision pur! <strong>Video</strong> – Füge ein Video als Hintergrund hinzu. <strong>Bild-Slider</strong> – Füge ganz einfach einen Slider mit beliebig vielen Bildern hinzu. <strong>Karte</strong> – Diese Option nutzt Google Maps. Du musst lediglich eine Adresse eingeben, den Zoomfaktor und den Kartenstil (Straßenkarte, Satellit, Hybrid oder Gelände) wählen sowie festlegen, welche Bedienelemente angezeigt werden sollen (Verschieben, Kartentyp, Maßstab, Street View, Übersichtskarte). Nachdem wir nun wissen, wie man das Header-Bild aktualisiert, wollen wir das direkt einmal tun: [video width="736" height="328" mp4="http://psource.eimen.net/wp-content/uploads/sites/10/2026/08/regions.mp4" loop="true" autoplay="true"][/video] Bereiche Wir fügen außerdem ein Video als Hintergrund für einen Bereich hinzu. Lade Videos von bekannten Plattformen wie YouTube, Vimeo oder Wistia hoch. Zudem stehen Optionen zur Skalierung und zum Zuschnitt des Videos zur Verfügung, ebenso wie Einstellungen zur Stummschaltung beim Abspielen und zur automatischen Wiedergabe beim Laden der Seite. <img class="alignnone size-full wp-image-575" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/upfront-video-1.jpg" alt="" width="735" height="550"> Video-Bereich <h3>Weitere Bereichseinstellungen</h3> Nachdem wir die wichtigsten Punkte behandelt haben, werfen wir einen Blick auf weitere Optionen für Bereiche, die Dir die Arbeit erleichtern. <img class="alignnone size-full wp-image-555" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/resize-1.png" alt="" width="510" height="250"> Bereiche mit automatischer Größenanpassung <h3>Automatische Größenanpassung</h3> Für Bereiche mit „100 % Breite“ (100% Wide) und „Begrenzte Breite“ (Contained) steht eine Option zur automatischen Größenanpassung zur Verfügung. Am besten lässt sich die Funktionsweise anhand eines Beispiels erklären: Angenommen, ich habe einen Bereich mit einer Höhe von 400 px erstellt. Wäre die automatische Größenanpassung deaktiviert, würde UpFront die Größe des Bereichs nicht automatisch anpassen, wenn ich mehr Elemente untereinander anordnen wollte, als in die ursprüngliche Höhe passen. Wäre die automatische Größenanpassung hingegen aktiviert und ich würde Elemente stapeln oder ein Element einfügen, das höher ist als der Bereich selbst, würde sich der Bereich automatisch auf die erforderliche Höhe anpassen. <img class="alignnone size-full wp-image-542" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/name-region-1.png" alt="" width="510" height="250"> Bereiche zur besseren Übersicht benennen <h3>Bereiche benennen</h3> Der Einfachheit halber können Sie Ihre Bereiche in den Einstellungen benennen! Erwähnenswert ist auch, dass bei der Benennung eines Bereichs dieser Name als ID übernommen wird – praktisch, wenn man mit individuellem CSS arbeiten möchte. Darauf gehen wir in einem späteren Beitrag noch genauer ein. <img class="alignnone size-full wp-image-564" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/sticky.png" alt="" width="510" height="250"> Fixierte Bereiche (Sticky Regions) hinzufügen, z. B. für die Navigation <h3>Fixierte Bereiche</h3> Man kann Bereiche „fixieren“ (sticky machen); das ist besonders hilfreich, wenn man eine Navigation einfügen möchte, die auf der Seite stets sichtbar bleibt. Bitte beachten: Es kann immer nur ein Bereich gleichzeitig fixiert sein. <img class="alignnone size-full wp-image-559" src="https://psource.eimen.net/wp-content/uploads/sites/10/2026/08/sidebar-1.png" alt="" width="510" height="250"> Seitenleisten (Sidebars) an beliebiger Stelle hinzufügen <h3>Seitenleisten</h3> Genau wie beim Hinzufügen eines neuen Bereichs klickt man auf die gelben „+“-Symbole links oder rechts, um Seitenleisten zu erstellen. In den Einstellungen lässt sich dann der Hintergrundtyp festlegen – zur Auswahl stehen Vollbreite, Kachel-/Musteroptik sowie Bilder mit fester Positionierung. <h3>Globale Bereiche</h3> Globale Bereiche sind eine praktische Möglichkeit, denselben Header oder Footer (oder beides) auf der gesamten Webseite anzuzeigen, ohne Inhalte duplizieren zu müssen. UpFront erkennt automatisch die oberen und unteren Bereiche der Website als Header und Footer. Öffnet man die Einstellungen für diese Bereiche, erscheint daher die Option „Diesen Bereich als globalen Footer verwenden“. <h2>Zusammenfassung</h2> Fassen wir noch einmal zusammen, was wir bei der Erstellung unserer neuen Webseite bisher erreicht haben: Wir haben einige Bereiche gelöscht, um das Layout der Website anzupassen. Wir haben den Header-Bereich aktualisiert, um ein eigenes Bild anzuzeigen. Wir haben ein Video in voller Breite eingefügt. Im nächsten Beitrag dieser Reihe arbeiten wir weiter an unserer neuen Website und konzentrieren uns dabei auf die Gestaltung mit Elementen wie Bildern, Texten und Buttons. Lies den nächsten Beitrag in dieser Reihe: <a href="https://psource.eimen.net/wiki/upfront-dokumentation/upfront-teil-3-layout-deiner-webseite-mit-elementen/">Teil 3: Gestalte Deine Webseite mit Elementen</a>