Case Templates, Website
Case Basic Templates
[edit]
Für einfache INT und FLM/ANM Cases wurden zwei Basic Templates im Backend unter dem Punkt Portfolio angelegt. Um einen neuen Case anzulegen muss das jeweilige Template dupliziert werden (Mouseover -> duplicate this).
Case Template Selected Work
[edit]Sollen ausgewählte Cases zu einer kuratierten Landingpage zusammengeführt werden passiert dies mit einer Page. Um eine neue Page anzulegen muss das Template dupliziert werden (Mouseover -> duplicate this). Pages können mit einem Passwort versehen werden.
Featured Image/Video
[edit]
Für jeden Case muss eine Featured Image und ein Featured Video hinterlegt werden, welches als Thumbnail auf den Übersichtsseiten angezeigt wird. Um beim Mouseover einen nahtlosen Übergang vom Image zum Video zu erzeugen, muss das Still dem ersten Frame des Videos entsprechen. Folgende Voraussetzungen müssen erfüllt werden:
Image
[edit]1000x700 Pixel, JPG
Video
[edit]500x350 Pixel, MP4 und WebM und OGV (alle 3 Formate werden benötigt)
Maximal 12 Sekunden und 1MB pro Video
Encoder Presets und Codes zum Download hier.
Case Template Modules
[edit]
Für die Gestaltung der Website Cases gibt es eine Vielzahl an vordefinierten PSL Modulen die frei und nach ästhetischem Empfinden kombiniert werden können. Durch Klick in den Page Builder Header öffnet sich die Library; durch Klick auf das »+« lassen sich die einzelnen Module zum Case hinzufügen.
Die Farbgebung kann dabei, passend zum Thema, angepasst werden, sollte aber den gewünscht hochwertigen Gesamteindruck unterstützen.
Unabhängig von Full HD/4K Formaten können Visuals in jeder beliebigen Größe hochgeladen werden. Bei zweispaltigen Aufbauten ist es wichtig das nebeneinanderstehende Visuals die gleiche Größe haben.
Alle Visuals lassen sich auch durch Videos (Page Builder Component: Parasol Island JW Video Player) oder Slideshows (Page Builder Component: Image Gallery) tauschen.
Image / full width
[edit]Error creating thumbnail: File missing
Image / in grid
[edit]Error creating thumbnail: File missing
Text / HL / big section
[edit]Error creating thumbnail: File missing
Text + Image / in grid on full with color
[edit]Error creating thumbnail: File missing
Text / HL + Copy / in grid
[edit]Error creating thumbnail: File missing
Text / HL + Copy / in grid on color
[edit]Error creating thumbnail: File missing
Image + Text / in grid with color
[edit]Error creating thumbnail: File missing
Text + Image / 50/50 in grid
[edit]Error creating thumbnail: File missing
Image + Text / 50/50 in grid
[edit]Error creating thumbnail: File missing
Images 4 / full width on color
[edit]Error creating thumbnail: File missing
Image + Text 2 / 50/50 on color
[edit]Error creating thumbnail: File missing
Text 4 / 25/25/25/25 on color
[edit]Error creating thumbnail: File missing
Text / huge statement with highlights in grid
[edit]Error creating thumbnail: File missing
Specials
[edit]Shadows
[edit]
Auf Wunsch können unter Bildern dynamische Schatten via CSS erzeugt werden. Dazu sind folgende 4 Schritte notwendig:
1) Klick in den Page Builder Header auf das CSS Zahnrad
2) Hinzufügen der CSS Attribute:
.img_shadow{
position: relative;
-webkit-box-shadow: -30px 30px 80px 0px rgba(0,0,0,0.2);
-moz-box-shadow: -30px 30px 80px 0px rgba(0,0,0,0.2);
box-shadow: -30px 30px 80px 0px rgba(0,0,0,0.2);
}
3) Öffnen der Bild-Settings
4) Hinzufügen der CSS-Klasse zu den Bildern die einen Schatten haben sollen
img_shadow