das 2017er Theme: Paralax-Effekte für WordPress-Themes: welche Bildergröße setzt ihr denn ein!?

hallo community,

das 2017er Theme: Paralax-Effekte für WordPress-Themes: welche Bildergröße setzt ihr denn ein!?

Das Twentyseventeen kann mit den interessanten Features - insbesondere mit den Pralax-Effekten als eine sehr interessante Alternative zu den vielen anderen Themes gelten: Wie man die Homepage in Sektionen einteilt ist bei dem Twenty Seventeen besonders wichtig. Mich persönlich hat der Parallax-Scrolling-Effekt sehr geeindruckt und aus diesem Grund habe ich diesen für das sehr modern anmutende aber im Grunde auch recht einfach gehaltene Twenty Seventeen Theme mal näher betrachtet und schritt für Schritt nachvollzogen:

Das Twenty Seventeen Theme, hat eine relativ begrenzte Breite für den Inhalt der Startseite und der Beitragsseiten. Die Seitenbreite u. das Look and feel kann allerdings leicht geändert werden.

Auf großen Bildschirmen - z.B. solchem it 16:9 Verhältnis führt dies allerdings im Fullscreen-Modus des Browsers zu leer laufenden Randbereichen, welche mich persönlich etwas stören. Sie sind - m.E. jedenfalls dem klaren Ausdruck und der sehr einschlägigen Designsprache des Twenty-seventeen-Themes ein wenig abträglich.

Mich würde interessieren, welche Bildergröße ihr denn für das das 2017er Theme einsetzt?
Welche Größe für die Bilder verwendet ihr um dann auch den Paralax-Effekte beim Scrollen des WordPress-Themes noch maximal zu sichern

Welche Bildergröße setzt ihr denn ein!? Ich habe bisher mit Werten einiges ausprobiert:
- ca. 2000 pixels (Breite)
- ca. 1200 pixels (Höhe).

Hiermit habe ich ganz gute Ergebnisse erreicht; Grundsätzlich kann man hier auch eingreifen: Hier ist oft ein Eingriff gefragt, die(se) Werte korrigieren und an die eingenen Bedürfnisse anpassen zu können. Ein paar Links zu interessanten Seite, auf der diesbezüglich Hilfe angeboten werden:

https://www.designbombs.com/master-twenty-seventeen-wordpress-theme/
https://mountaininternet.com/twenty-seventeen-theme-adjust-content-area-width-with-css/
https://stackoverflow.com/questions/47423788/how-to-make-twenty-seventeen-pages-content-full-width

Die Abschnittsbilder der Startseite, welche den Parallax Scrolling Effekt möglich machen sind hierzu sehr wichtig. Eine Seite die auf den Parallax Scrolling Effekt eingeht - diesen aber über einen Plugin loest: https://www.wpexplorer.com/parallax-effect-wordpress/ :: Add Parallax Sliders with the Slider Revolution WordPress Plugin

Im folgenden wird gezeigt wie man die Abschnittbilder anlegt: Das sogenannte Abschnittsbild - es wird im Customizer definiert; Die im Customizer definierten Abschnittsbilder des Twenty Seventeen Themes laufen den Panels im Grunde auch voraus. Dies führt dazu dass es nun zu Lücken kommt. Also müssen wir das Abschnittsbild der Webseite mit den Panels so verschränken, dass der Transparenzeffekt noch erhalten bliebt.

der Parallax Scrolling Effekt und wie man ihn erreicht:

Schritt 1: Bau einer eigenen Page für jede einzelne HomepageSktion erstellen

Am Anfang müssen wir ein paar Pages bauen - ein Versuch das in ein Bild zu bringen;

Code:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

- eine page, die als unsere Static-Homepage dient;
- eine page, die als Blog oder Post-Page dient;

Darüber hinaus müssen wir noch zusätzlich vier Pages erstellen für die Inhalte die in den jeweiligen Homepage-Sektionen zu finden sein sollen; Drei zuätzliche Pages wenn man vorhat, die die Blog- oder Postpage als eine der Homepage-Sektionen zu verwenden;

Ein Beispiel könnte sein:

- eine home-page,
- eine blog-page,
- eine about-page,
- eine services-page, und
- eine contact-page.

Schritt 2: ein besonderes Bild zu jeder dieser Pages hinzufügen:
Wenn man den Parallx-Effekt des Twenty-Seventeen-Themes haben möchte, dann sollte man ein großes Bild jeder (soeben erstellten) Page hinzufügen - jedem einzelnen Bereich (also jeder einzelnen Page) die Teil der Frontpage-Sektion ist. Die Twenty Seventeen demo verwendet ein Bild mit ca. 2000 pixels (Breite) respektive 1200 pixels (Höhe). Bilder, die ähnlich groß sind sind sehr geeignet - abei anderen Bildern ist der Effekt sehr schnell eingeschränkt und es sieht dann nicht mehr so gut aus.


Schritt 3: Eine statische Front-Page und eine Posts-Page
Jetzt kann es an das Abstimmen gehen. jetzt ist es Zeit den Customizer im WP-Admin-Menü aufzurufen, indem man folgenden Weg geht;
- Appearance > Customize in der admin-area oder auf "Customize" in dem Admin-Bereich während man auf die Frontseite schaut.
- Auswahl der statischen "Front-Page menu-items" und dann dort die folgenden Einstellungen vorzunehmen:

unter Front-page-Anzeige wählt man die Antzeige "static page".
unter dem Front-page-dropdown-menu, wählt man "your site home page".
von dem Posts-page-dropdown-menu wählt man "your posts or blog page".
Dann - am Ende des ganzen Vorgangs ist es wichtig, dass man das alles speichert und veröffentlicht mit Save & Publish, ehe man zum nächsten Schritt kommt.

Schritt 4: Zuweisen von Pages den jeweligen Bereichen der Frontpage-Sektionen Die Zuweisung der einzelnen pages, die wir soeben erstellt haben ist sehr wichtig. Für die jeweiligen front-page-sektionen wählt man nun die Theme-Optinoen im Customizer. In den drop-down menüs wird jede Seite eine entsprechenden Front-page-Sektion zugewiesen. In einem letzen Schritt wird ein Primary Navigation Menu erzeugt - entweder über...:
- die Menü option im Customizer menu oder etwa
- Appearance > Menus in dem Adminbereich

Jedenfalls muss man noch sicherstellen dass diese dann im Menü entsprechen zugewiesen wird.
Nochmals zur Frage der Größe der Bilder: Welche Bildergröße setzt ihr denn ein!? Ich habe bisher mit Werten einiges ausprobiert:
- ca. 2000 pixels (Breite)
- ca. 1200 pixels (Höhe).

Hiermit habe ich ganz gute Ergebnisse erreicht;


Freue mich von Euch zu hören.

vg lin