Case Templates, Website: Difference between revisions
Jörn Beyer (talk | contribs) No edit summary Tag: visualeditor-switched |
Jörn Beyer (talk | contribs) No edit summary |
||
| (20 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
__FORCETOC__ | __FORCETOC__ | ||
== Case | == Case Basic Templates == | ||
[[File:PSL Case Templates.png|thumb]] | [[File:PSL Case Templates.png|thumb]] | ||
Für einfache INT und FLM/ANM Cases wurden zwei Basic Templates im Backend unter dem Punkt [https://parasol-island.com/wp-admin/edit.php?s=PSL+%E2%80%93%C2%A0Case&post_status=all&post_type=portfolio-item&action=-1&m=0&seo_filter&readability_filter&paged=1&action2=-1 Portfolio] angelegt. Um einen neuen Case anzulegen muss das jeweilige Template dupliziert werden (Mouseover -> duplicate this). | |||
== Case Template Selected Work == | == Case Template Selected Work == | ||
Sollen ausgewählte Cases zu einer kuratierten Landingpage zusammengeführt werden passiert dies mit einer [https://parasol-island.com/wp-admin/post.php?post=31604&action=edit&classic-editor Page]. Um eine neue Page anzulegen muss das Template dupliziert werden (Mouseover -> duplicate this). Pages können mit einem Passwort versehen werden. | |||
Sollen ausgewählte Cases zu einer kuratierten Landingpage zusammengeführt werden passiert dies mit einer [https:// | |||
== Featured Image/Video== | == Featured Image/Video == | ||
[[File:Featured-Image-and-Video.png|thumb]] | [[File:Featured-Image-and-Video.png|thumb]] | ||
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: | 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: | ||
| Line 23: | Line 22: | ||
== Case Template Modules == | == Case Template Modules == | ||
Die | [[File:PSL Case Template Modules.jpg|thumb]] | ||
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.<br><br> | |||
Die Farbgebung kann dabei, passend zum Thema, angepasst werden, sollte aber den gewünscht hochwertigen Gesamteindruck unterstützen.<br><br> | |||
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. <br><br> | |||
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 ==== | |||
[[File:PSL_Website_Templates_01_Image - full width.jpg|frameless]] | |||
==== Image / in grid ==== | |||
[[File:PSL_Website_Templates_03_Image - in grid.jpg|frameless]] | |||
==== Text / HL / big section ==== | |||
[[File:PSL_Website_Templates_02_Text - HL - big section.jpg|frameless]] | |||
==== Text + Image / in grid on full with color ==== | |||
[[File:PSL_Website_Templates_04_Text + Image - in grid on full with color.jpg|frameless]] | |||
==== Text / HL + Copy / in grid ==== | |||
[[File:PSL_Website_Templates_05_Text - HL + Copy - in grid.jpg|frameless]] | |||
==== Text / HL + Copy / in grid on color ==== | |||
[[File:PSL_Website_Templates_06_Text - HL + Copy - in grid on color.jpg|frameless]] | |||
==== Image + Text / in grid with color ==== | |||
[[File:PSL_Website_Templates_07_Image + Text - in grid with color.jpg|frameless]] | |||
==== Text + Image / 50/50 in grid ==== | |||
[[File:PSL_Website_Templates_08_Text + Image - 50-50 in grid.jpg|frameless]] | |||
==== Image + Text / 50/50 in grid ==== | |||
[[File:PSL_Website_Templates_09_Image + Text - 50-50 in grid.jpg|frameless]] | |||
==== Images 4 / full width on color ==== | |||
[[File:PSL_Website_Templates_10_Images 4 - full width on color.jpg|frameless]] | |||
==== Image + Text 2 / 50/50 on color ==== | |||
[[File:PSL_Website_Templates_11_Image + Text 2 - 50-50 on color.jpg|frameless]] | |||
==== Text 4 / 25/25/25/25 on color ==== | |||
[[File:PSL_Website_Templates_12_Text 4 - 25-25-25-25 on color.jpg|frameless]] | |||
==== Text / huge statement with highlights in grid ==== | |||
[[File:PSL_Website_Templates_13_Text - huge statement with highlights in grid.jpg|frameless]] | |||
== Specials == | |||
==== Shadows ==== | |||
[[File:PSL-Case-Template-Shadow.jpg|thumb]] | |||
Auf Wunsch können unter Bildern dynamische Schatten via CSS erzeugt werden. Dazu sind folgende 4 Schritte notwendig: | |||
<br> | |||
1) Klick in den Page Builder Header auf das CSS Zahnrad | |||
<br> | |||
2) Hinzufügen der CSS Attribute: | |||
<br> | |||
<code> | |||
.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); | |||
} | |||
</code> | |||
<br> | |||
3) Öffnen der Bild-Settings | |||
<br> | |||
4) Hinzufügen der CSS-Klasse zu den Bildern die einen Schatten haben sollen | |||
<br> | |||
<code> | |||
img_shadow | |||
</code> | |||
Latest revision as of 14:26, 25 April 2019
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