WebMasterService N3rds@Work

5. UpFront Regionen und Hintergründe

Wikis > UpFront Wiki > 5. UpFront Regionen und Hintergründe

In UpFront bieten Regionen eine Möglichkeit, Deine Webseiten in logische Abschnitte zu strukturieren. Du kannst diesen Abschnitten dann Elemente hinzufügen, um das Design und Layout Deiner Seite zu verfeinern. Regionen sind einfach einzurichten, zu konfigurieren oder sogar zu entfernen.

5.1 Bearbeiten, Hinzufügen und Löschen von Regionen

Wenn Du mit der Maus über eine Region fährst, wirst Du feststellen, dass in der oberen rechten Ecke eine kleine Steuerung im Eselsohr angezeigt wird. Durch Klicken auf dieses Steuerelement wird der Regionsbearbeitungsmodus für diese Region aufgerufen.

Upfront region

Wenn Du Dich im Regionsbearbeitungsmodus befindest, wird die Seitenleiste ausgeblendet und alle anderen Regionen werden dunkel überlagert. Die Elemente der aktiven Region werden ausgeblendet und eine Reihe von Steuerelementen darüber angezeigt.

Schaue die Grafik unten an, um zu sehen, was jedes Steuerelement tun kann.

Upfront region controls

Wie Du sehen kannst, kannst Du beiden Seiten einer Region eine Seitenleiste hinzufügen oder eine neue Region über oder unter der aktuell ausgewählten Region einfügen. Die Schaltflächen Einstellungen und Entfernen verhalten sich genauso wie für Elemente. Um den Regionsmodus zu verlassen, klicke unten in den Regionen auf die grüne Schaltfläche Region bearbeiten.

Die linke und rechte Seitenleiste sind die untergeordneten Regionen der aktuell ausgewählten Region, während die Regionen oben und unten separate Regionen und Geschwister der ausgewählten Region sind.

5.2 Regionstypen

Es gibt drei Regionstypen, und der Hauptunterschied zwischen den einzelnen Typen besteht darin, wie sie sich auf die Breite Deines Browsers beziehen.

Vollbild

Wie Du vielleicht vermutet hast, wird ein Vollbildbereich immer sein Bestes tun, um seine Breite und Höhe an Dein Browserfenster anzupassen. Dies ist eine großartige Option, wenn Du einen großen Heldenbereich im Vollbildmodus haben möchtest oder wenn Du dort einen Video- oder Bildschieberegler verwenden möchtest.

Im Gegensatz zu anderen Regionstypen bieten Vollbildregionen zwei zusätzliche Optionsgruppen: Elementverhalten und Unterregionen hinzufügen.

Das Verhalten von Elementen bietet zwei Optionen: Position beibehalten und Verhältnis beibehalten. Ersteres behält die Position des Elements bei, unabhängig von der Bildschirmgröße, während letzteres die Elemente für kleinere Bildschirme neu positioniert (solange Platz vorhanden ist). Wenn beispielsweise Position beibehalten ausgewählt ist, bleibt ein Bild, das genau in der Mitte der Region positioniert ist, nur in der Mitte, sofern die Seite auf demselben Bildschirm angezeigt wird, auf dem sie erstellt wurde. Die Option Verhältnis beibehalten wird jedoch ihr Bestes tun, um dies sicherzustellen Das Element befindet sich unabhängig von der Bildschirmgröße in der Mitte.

Mit der Option Unterregionen hinzufügen können Benutzer der Vollbildregion obere und untere Unterregionen hinzufügen. Da Unterregionen mit der Hauptregion skaliert werden, kann dies beispielsweise für Navigation und Branding hilfreich sein.

100% Breite

100% breite Bereiche erstrecken sich immer bis zur Breite des Browsers. Die Höhe der Region bleibt jedoch konstant.

Container

Im Gegensatz zu den beiden vorherigen Typen behalten die Container Bereiche unabhängig von der Breite des Browsers jederzeit ihre Breite und Höhe bei. Verkürzte Regionen sind äußerst nützlich und werden wahrscheinlich häufiger verwendet als die anderen Regionen. Die Breite der enthaltenen Regionen wird durch die globalen Hintergrundeinstellungen bestimmt (siehe Abschnitt Globale Themeneinstellungen) und ist für alle enthaltenen Regionen gleich. In einem Szenario, in dem die Bildschirmbreite 1200 Pixel beträgt, die Breite des enthaltenen Bereichs jedoch 1000 Pixel beträgt, wird sie zentriert und der globale Hintergrund wird an den Seiten der Bereiche angezeigt. Unten siehst Du das Diagramm, in dem die einzelnen Regionstypen erläutert werden.

Upfront region_types

Wie Du siehst, nimmt der Vollbildbereich immer das gesamte Fenster ein, 100% breite Bereiche nehmen die Breite des Fensters ein und die Größe der enthaltenen Bereiche ändert sich überhaupt nicht.

5.3 Region Hintergründe

Für normale Layouts stehen fünf verschiedene Hintergrundtypen zur Auswahl:

  • Einfarbig
  • Bild
  • Video
  • Bildslider
  • Karte

Einfarbige Hintergründe sind genau das, was Du erwarten würdest. Wähle eine Farbe und es wird die Region füllen.

Kartenhintergründe entsprechen im Wesentlichen dem Kartenelement, werden jedoch nur auf Regionen angewendet. Viele moderne Webseiten haben große Google Maps-Bereiche. In UpFront kann dies mithilfe eines Kartenbereichshintergrunds erreicht werden.

Bildregionen

Es gibt vier verschiedene Bildbereiche:

  1. Gesamtbreite
  2. Gekachelt / Muster
  3. Fixierte Position
  4. Parallax

Wie Du Dir vorstellen kannts, nimmt ein Bildtyp mit voller Breite jedes hochgeladene Bild auf und füllt den gesamten Regionsbereich aus.

Kachel- / Musterbildtypen kacheln jedes Bild, das Du kacheln möchtest. Wir können www.subtlepatterns.com als großartige Quelle für Muster empfehlen, und alle stehen unter der Creative Commons-Lizenz.

Parallaxenbildtypen füllen den Bereich auf ähnliche Weise wie Bildtypen mit voller Breite und fügen dem Bereich zusätzlich einen subtilen Parallaxeeffekt hinzu, den Sie sehen kannst, wenn Du auf der Seite nach oben und unten scrollst.

Mit Bildtypen mit fester Position kannst Du ein Bild hochladen und an einer beliebigen Stelle in Bezug auf die Region positionieren. Dies ist besonders nützlich, wenn Du ein Bild an einer bestimmten Stelle positionieren möchtest, das kleiner als der Bereich ist. Im Bild unten befindet sich beispielsweise ein Bild einer gedrehten Ecke oben rechts in der Region.

Upfront fixed position region

Im obigen Bild haben wir auch ein Bild mit Transparenz hinzugefügt und es in der oberen linken Ecke der Region positioniert, wodurch eine Illusion einer „gedrehten Ecke“ entsteht.

Video Region

Mit Videoregionen kannst Du die Wiedergabe von Videoinhalten als Hintergrund für jede Region festlegen. Derzeit können Videos von YouTube, Vimeo und Wistia hinzugefügt werden. Für die Videowiedergabe stehen eine Reihe von Optionen zur Verfügung, darunter die Stummschaltung von Ton und die Wiedergabe von Videos beim Laden von Seiten sowie drei Zuschneide- und Skalierungsmethoden.

  1. Skalieren & Zuschneiden – Verkleinert und beschneidet das Video, um das bestmögliche Szenario zu erstellen
  2. Kein Einbetten von Zuschnitten – Das Einbetten des Videodienstes nimmt die gesamte Region ein, das Video wird jedoch nicht zugeschnitten, sondern zentriert.
  3. Kein Zuschneiden + Hintergrundfarbe – Das Video wird an die Region angepasst, aber nicht ausgefüllt. Du kannst die Hintergrundfarbe auswählen, um die verbleibenden Bereiche zu füllen.
Slider Region

Mit Slidern kannst Du Schiebekarusselle in voller Breite für Deine Webseite erstellen. Schieberegler können sich nach einer Zeitüberschreitung oder bei manueller Navigation durch Besucher automatisch drehen. Du kannst zwischen fünf verschiedenen Übergängen wählen und festlegen, ob die Schieberegler jederzeit oder nur beim Hover sichtbar sind.

5.4 Benutzerdefiniertes Regions-CSS

Ähnlich wie bei Elementen in UpFront kann der Stil einer Region mit CSS vollständig angepasst werden. Wenn Du beispielsweise einen Bildschieberegler mit einem Textelement und etwas hellem Text hast, sind einige Teile des Textes möglicherweise schwer zu lesen, wenn verschiedene Folien gedreht werden (z. B. weißer Text über einem hellen Bild). Mit etwas CSS kannst Du dem Schieberegler einen subtilen dunklen Farbverlauf hinzufügen, um den Text lesbar zu machen.

Hier ist ein Beispiel, wie dies funktionieren würde:

.upfront-default-slider-wrap:before {
content:”;
position:absolute;
top:0;
background:linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25));
width:100%;
height:100%;
z-index:2;
}

Upfront region-css-gradient

Wenn wir im obigen Bild einen subtilen CSS-Verlauf (das Bild rechts) anwenden, ist der Text sofort leichter zu lesen. Dies ist nur ein einfaches Beispiel dafür, wie Du die UpFront-Funktionen mit benutzerdefiniertem CSS verbessern kannst.

Wiki-Kategorie: Stichworte: