Parallax-Effekt im Theme arrangieren – wie vorgehen !?
-
Hallo und guten Tag liebe Experten
Nun, ich bin ein großer Fan des neuen Themes – des TT5.
Frage: Wie kann man einen Parallax-Effekt im Theme arrangieren und erzielen?
Ich benutze den Twenty-Twenty-Four (TT4) seit mehr als einem Jahr. Und ich denke, dass wir das im TT4 ziemlich einfach machen können.
Aber wie erreicht man das in TT5?
Übrigens: hier ein Bspl. einer Page mit Parallax-basierten Stil läuft: https://www.unternehmertum.de/
Ich habe mich mal umgesehen – wie man das machen könnte und bin hier fündig geworden: bei WP-Beginner. https://www.wpbeginner.com/wp-themes/how-to-add-a-parallax-effect-to-any-wordpress-theme/
Weitere sehr sehr interessante Beispiele hab ich bei dir Hans Gerd – @hage – auf Haurand.com gesehen – Wollte mit euch diese Möglichkeiten besprechen u. erfahren ob das
a. die einzigen sind und darüber hinaus
b. die besten Methoden u. Verfahren sind die man hierzu einsetzen kann? Oder ob es ggf. auch noch
c. weitere u. einfachere Verfahren gibt – inbes. für die modernen Themen TT4 oder TT5?
Ich habe mich mal umgesehen – wie man das machen könnte und bin hier fündig geworden: bei WP-Beginner. https://www.wpbeginner.com/wp-themes/how-to-add-a-parallax-effect-to-any-wordpress-theme/
hier die beiden Verfahren – die Syed Balki auf seiner Seite bespricht:a. mit einem Plugin – dem „advanced-backgrounds“ vgl, https://de.wordpress.org/plugins/advanced-backgrounds/
eine weitere Methode – die Syed Balki beschreibt – die Method 2: Add Parallax Effect to WordPress Theme With CSS
also z.B. mit einem Bild als Parallaxenhintergrund – für die gesamte Website, da könnt man diese Methode ansetzen.
Am Anfang muss man das Bild, welches man verwenden möchte, in die WordPress-Medienbibliothek hochladen. Dann kopiert man die URL des Bildes, via Eingabeaufforderung „Anhangsdetails
Danach nimmt man die Designdateien und fügt sie den benutzerdefinierten CSS-Code hinzu.
bei der Eingabe des Codes muss man allerdings aufpassen, da Fehler hierbei dazu führen könnten, dass die Website beschädigt wird und nicht mehr darauf zugegriffen werden kann.
Manche empfehlen hier z.B. die Verwendung von WPCode: Es ist eines der sehr leistungsfähigen WordPress-Code-Snippets-Plugin auf dem Markt, das das Hinzufügen von benutzerdefiniertem Code, einschließlich CSS, supersicher und einfach macht. Am Anfang muss man halt WPCode-Plugin noch installieren und aktivieren.Nach der Aktivierung des WPCode kann man im Dashboard die Code-Snippets » + Snippet hinzufügen im WordPress-Dashboard und klickt auf die Schaltfläche „Snippet verwenden“ unter der Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“.
Ein Beispiel – das könnte dieser custom CSS code sein den man in die ‘Code Preview’ box von WPCode einfügt:
.parallax {
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
.parallax-content {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px;
}Es ist dabei wichtig dass die Beispiel-URL in der Zeile „Hintergrundbild: URL“ des Codes durch die URL des Bildes ersetzt wird.. Dieses Bild wird als Hintergrund für den Parallaxeneffekt auf der gesamten Website verwendet.
Wie gesagt, ich wollte mit euch diese Möglichkeiten besprechen u. erfahren ob das denn wirklich…a. die einzigen sind und darüber hinaus
b. die besten Methoden u. Verfahren sind die man hierzu einsetzen kann? Oder ob es ggf. auch noch
c. weitere u. einfachere Verfahren gibt – inbes. für die modernen Themen TT4 oder TT5?Freue mich von Euch zu hoeren
- Du musst angemeldet sein, um auf dieses Thema zu antworten.