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.
Im Verlauf dieser Serie zeigen wir Dir anhand zahlreicher Beispiele, wie Du Upfront nutzt:
Teil 1: Die Grundlagen, Themenfarben und Typografie
Teil 2: Strukturieren Deiner Webseite mit Regionen
Teil 3: Gestalte Deine Webseite mit Elementen
Teil 4: Elemente und benutzerdefinierten Code optimieren
Teil 5: Plugins hinzufügen und Powerform-Formulare gestalten
Teil 6: Responsive Webseiten erstellen
Teil 7: Arbeiten mit Seiten und Beiträgen
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:
Links sehen Sie unseren aktuellen Stand, rechts das Ziel, auf das wir hinarbeiten.
Bereiche löschen
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).
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!
Bereiche einfügen
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.
– Einstellungen für Vollbild-Bereiche
Vollbild
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:
Navigationsbereich hinzufügen
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.
Elementverhalten
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!
– Einstellungen für 100 % breite Bereiche
100 % Breite
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.
– Einstellungen für begrenzte Bereiche
Begrenzt (Contained)
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.
Hintergrundtypen
Du musst Dich nicht mit langweiligen Hintergrundfarben zufriedengeben. UpFront bietet Dir folgende Möglichkeiten:
Einfarbiger Hintergrund – 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.
Bild – 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!
Video – Füge ein Video als Hintergrund hinzu.
Bild-Slider – Füge ganz einfach einen Slider mit beliebig vielen Bildern hinzu.
Karte – 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:
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.
Video-Bereich
Weitere Bereichseinstellungen
Nachdem wir die wichtigsten Punkte behandelt haben, werfen wir einen Blick auf weitere Optionen für Bereiche, die Dir die Arbeit erleichtern.
Bereiche mit automatischer Größenanpassung
Automatische Größenanpassung
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.
Bereiche zur besseren Übersicht benennen
Bereiche benennen
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.
Fixierte Bereiche (Sticky Regions) hinzufügen, z. B. für die Navigation
Fixierte Bereiche
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.
Seitenleisten (Sidebars) an beliebiger Stelle hinzufügen
Seitenleisten
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.
Globale Bereiche
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“.
Zusammenfassung
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: Teil 3: Gestalte Deine Webseite mit Elementen