UpFront 2: Strukturieren Deiner Webseite mit Regionen

Wenn es darum geht, eine Webseite mit UpFront zu gestalten, bieten Regionen die Bausteine, die Du benötigst, um alles zu erstellen, von Kopfzeilen mit Vollbild- und voller Breite bis hin zu enthaltenen Abschnitten, Seitenleisten und Fußzeilen.

Regionen bilden den Hintergrund, auf dem alles andere – Bilder und Text, Video und Schieberegler – aufgebaut werden kann.

Im heutigen Beitrag werden wir uns ansehen, wie Du Regionen löschst und einfügst, die verschiedenen verfügbaren Arten von Regionen sowie globale Kopf- und Fußzeilen.

Dies ist der zweite Beitrag in unserer Serie, in dem wir die Verwendung von UpFront vorstellen. Wir passen ein bestehendes UpFront-Theme – in diesem Fall Spirit – an und verwandeln es in eine völlig andere Webseite, komplett mit eigenem Branding, Bildern, benutzerdefinierten Schriftarten und responsivem Layout.

Im Laufe dieser Serie werden wir Dir anhand vieler Beispiele zeigen, wie Du UpFront verwenden kannst:

Wir nehmen das Spirit-Thema und überarbeiten seine Regionen, Inhalte, Typografie und andere Elemente komplett und verwandeln es in ein Produktthema, komplett mit eigenem Branding, Farben, Typografie, Buttons, Bildern, Kontaktformular und anderen Elementen.

Im letzten Beitrag dieser Serie haben wir Themenfarben und Typografie aktualisiert und benutzerdefinierte Schriftarten hinzugefügt. Hier ist ein Blick auf unsere bisherigen Fortschritte:

Links unser Fortschritt. Auf der rechten Seite, worauf wir hinarbeiten.

Löschen von Regionen

Beginnen wir wieder mit dem Löschen von Sachen.

Spirit verfügt über eine Homepage mit einem schönen, langen Design mit 14 Regionen, einschließlich der Kopfzeile, Abschnitte für verschiedene Dienste, ein Newsletter-Anmeldeformular und eine Fußzeile.

Die Startseite meines neuen Webseite-Designs benötigt nur vier Regionen: Ein Kopfzeilenbild, einen Abschnitt, in dem die App erläutert wird, für die ich werben möchte, ein Video in voller Breite und eine Fußzeile.

Wir müssen also einige Regionen löschen.

Während Du durch Spirit scrollst, erscheint ein kleines Stiftsymbol in der oberen rechten Ecke jeder Region.

Wenn Du auf das Symbol klickst, wird die Seite transformiert, um Dir einige verschiedene Optionen anzuzeigen.

In der oberen linken Ecke werden die Abmessungen der Region angezeigt
In der oberen rechten Ecke befindet sich ein rotes „x“-Symbol (zum Löschen einer Region) und darunter ein grünes Zahnradsymbol (Regionseinstellungen).
Es gibt auch gelbe „+“ -Symbole oben, links, rechts und unten auf der Seite (zum Einfügen eines neuen Bereichs)
Schließlich wird eine grüne Option „Hintergrundbearbeitung beenden“ angezeigt (zum Speichern von Änderungen an der Region)

Wir möchten 10 Regionen löschen. Wir behalten den Header und die Navigationsbereiche bei, also beginnen wir mit der Region danach, der „About“ -Region. Klicke auf das Stiftsymbol und dann auf das rote „x“-Symbol. Du wirst gefragt, ob Du diesen Abschnitt wirklich löschen möchtest. Klicke auf „OK“. Wir behalten die Region auch nach der Navigation bei, löschen jedoch alle anderen Regionen außer der Fußzeile.

Es ist wichtig zu bedenken, dass, wenn Du eine Region löschst, auch DER gesamte Inhalt gelöscht wird, also ist es nichts, was Du willst!

Einfügen von Bereichen

Das Erstellen einer neuen Region ist einfach. Alles, was Du tun musst, ist, auf das Stiftsymbol in einem vorhandenen Bereich zu klicken und dann auf eines der gelben „+“ -Symbole oben oder unten auf der Seite zu klicken. Dadurch wird ein neuer Bereich oberhalb oder unterhalb der geöffneten Region eingefügt.

Der Fokus wechselt zur neuen Region und wenn Du auf das grüne Zahnradsymbol klickst, kannst Du das Aussehen anpassen.

Es gibt eine Reihe verschiedener Arten von Regionen, die Du zum Erstellen Deiner Webseite verwenden kannst. Lasse uns sie alle durchgehen.

Vollbild-Regionseinstellungen

Vollbild

Nur Kopfzeilenbereiche erlauben eine Vollbildoption. Wie der Name schon sagt, füllt diese Region den gesamten Browserbildschirm von oben nach unten und von links nach rechts aus.

Dies ist eine großartige Option, wenn Du ein Heldenbild als Kopfzeile verwenden oder sogar eine Zielseite erstellen möchtest, die das gesamte Browserfenster ausfüllt und nicht scrollt.

Dieser Regionstyp bietet zwei weitere Optionen:

Navigationsbereich hinzufügen

Dies ist im Wesentlichen ein Unterbereich, mit dem Du die Navigation innerhalb des Kopfzeilenbereichs anzeigen kannst. Das Tolle an dieser Option ist, dass Benutzer, die auf Deine Webseite zugreifen, Deine Navigation in ihrem Browserfenster „above the fold“ sehen können.

Die Standardeinstellung ist keine Navigation oder wird oben oder unten in der Region angezeigt.

Verhalten von Elementen

Du kannst Deine Vollbild-Kopfzeile auf „Position beibehalten“ oder „Verhältnis beibehalten“ auswählen.

Position beibehalten bedeutet, dass Logos, Texte, Bilder, Schaltflächen usw. dort bleiben, wo sie sind, wenn ein Benutzer die Größe seines Browserfensters ändert.

Keep Ratio bedeutet, dass dieselben Elemente ihre Position automatisch anpassen, wenn ein Benutzer die Größe seines Browserfensters ändert. Wenn sich Dein Logo beispielsweise mitten in der Region befindet, passt es seine Position vertikal an, wenn die Größe des Browserfensters geändert wird. Dies ist eine praktische Option aus genau diesem Grund!

100 % breite Regionseinstellungen

100% Breite

Zeige Bereiche in voller Breite von links nach rechts an, aber nicht von oben nach unten.

Verwende diesen Regionstyp, wenn die Kopfzeile das Browserfenster nicht ausfüllen soll, sondern in voller Breite angezeigt werden soll. Wir werden uns die Optionen zum Festlegen der vertikalen Höhe von Regionen unten ansehen.

Einstellungen für geschlossene Bereiche

Enthalten

Mit der Option Contained kannst Du den Inhalt Deiner Webseite prominent ins Bild setzen.

Du kannst die Containerbreite steuern, indem Du zu Theme-Einstellungen gehst und auf Globalen Hintergrund bearbeiten klickst.

Du kannst auch den globalen Hintergrundtyp in eine Volltonfarbe, ein Bild oder sogar ein Video ändern, das auf der gesamten Webseite angezeigt wird.

Hintergrundtypen

Du musst Dich nicht mit langweiligen Farben für Deine Hintergründe zufrieden geben. In UpFront kannst Du:

Volltonfarbe – OK, Du kannst Farben haben, wenn Du möchtest, aber sie müssen nicht langweilig sein! Füge Deinen eigenen Hexadezimalcode hinzu oder verwende die Farbauswahl.
Bild – Wenn Du ein Bild hochlädst, kannst Du seine Positionierung angeben (volle Breite, gekachelt / Muster oder fest). Wenn Du die feste Option wählst, kannst Du sogar die genaue X- und Y-Positionierung des Bildes angeben.
Video – Füge ein Video als Hintergrund hinzu
Bildslider – Füge einfach einen Slider hinzu, um eine beliebige Anzahl von Bildern, spezifizieren.
Karte – Diese Option verwendet Google Maps, so dass Du nur eine Adresse eingeben, Deinen Zoom auswählen, einen möglichen Stil (Karte, Satellit, Hybrid oder Gelände) auswählen und überprüfen musst, welche Steuerelemente Du auch anzeigen möchtest (Schwenken, Kartentyp, Maßstab, Straßenansicht, Übersichtskarte).

Nun, da wir wissen, wie man das Headerbild aktualisiert, machen wir weiter:

Wir werden auch ein Video als Regionshintergrund hinzufügen.

Lade ein Video von beliebten Diensten wie YouTube, Vimeo und Wistia hoch. Es gibt auch Optionen für die Skalierung und Zuschneidung von Videos, die Stummschaltung bei der Wiedergabe und die Möglichkeit, Videos beim Laden der Seite wiederzugeben.

Andere Regionseinstellungen

Nun, da wir die wichtigsten Dinge behandelt haben, schauen wir uns andere regionale Optionen an, die das Leben einfacher machen.

Automatische Größenanpassung von Bereichen

Automatische Größenanpassung

Die Bereiche 100 % Breite und Enthalten bieten eine Option zur automatischen Größenänderung. Der beste Weg, um zu erklären, wie es funktioniert, ist mit einem Szenario: Nehmen wir an, ich habe eine Region erstellt, die 400px hoch war. Wenn ich die automatische Größenänderung deaktiviert habe, würde UpFront nicht zulassen, dass sich die Größe dieses Bereichs automatisch ändert, wenn ich versuche, mehr Elemente als die Höhe des Bereichs zu stapeln. Wenn ich jedoch die automatische Größenanpassung aktiviert und dann versuche, Elemente zu stapeln oder ein Element einzufügen, das höher als der Bereich ist, wird der Bereich automatisch auf die erforderliche Höhe aktualisiert.

Benennen von Regionen aus Gründen der Konsistenz

Benennen von Regionen

Du kannst Regionen in den Einstellungen für die reine Bequemlichkeit benennen! Ich sollte auch hinzufügen, dass, wenn Du eine Region benennst, dieser Name als ID übergeben wird, was praktisch ist, wenn Du mit benutzerdefiniertem CSS spielen möchtest. Wir werden uns das in einem kommenden Beitrag ansehen.

Hinzufügen von fehlerhaften Bereichen, z. B. Navigation

Klebrige Regionen

Du kannst Regionen „kleben“ lassen, was besonders hilfreich ist, wenn Du eine Navigation hinzufügen möchtest, die auf einer Seite immer sichtbar ist. Beachte, dass es nur möglich ist, jeweils eine Region klebrig zu machen.

Füge Deiner Webseite Seitenleisten hinzu, wo Du sie haben möchtest

Seitenleisten

Klicke wie beim Hinzufügen eines neuen Bereichs auf die linken und rechten gelben „+“-Symbole, um Seitenleisten zu erstellen. In den Einstellungen kannst Du dann einen Hintergrundtyp auswählen, zusammen mit den Bildvariationen voller Breite, Kacheln / Muster und fester Position.

Globale Regionen

Die Verwendung globaler Regionen ist eine gute Möglichkeit, dieselbe Kopf- oder Fußzeile oder sogar beides auf Deiner Webseite anzuzeigen, sodass Du Deine Inhalte nicht duplizieren musst.

UpFront erkennt automatisch die oberen und unteren Bereiche auf Deiner Webseite als Kopf- und Fußzeile, sodass beim Öffnen der Einstellungen für diese Regionen die Option „Diesen Bereich als globale Fußzeile verwenden“ angezeigt wird.

Zusammenfassung

Lasse uns also noch einmal zusammenfassen, was wir bisher bei der Zusammenstellung unserer neuen Webseite erreicht haben:

Wir haben eine Reihe von Regionen gelöscht, um das Layout unserer Webseite neu zu gestalten
Wir haben den Header-Bereich aktualisiert, um unser eigenes Bild anzuzeigen
Wir haben ein Video in voller Breite hinzugefügt

Im nächsten Beitrag dieser Serie werden wir weiter an unserer neuen Webseite arbeiten und uns diesmal darauf konzentrieren, wie die Webseite mit Elementen wie Bildern, Text und Schaltflächen gestaltet werden kann.

Lese den nächsten Beitrag in dieser Serie: Teil 3: Gestalten der Webseite mit Elementen

Wenn Du Fragen zu dem hast, was wir in diesem Beitrag behandelt haben, kannst Du gerne im Forum unten nachfragen.

Keine Themen zum Anzeigen...