• Gelöst saintotrott

    (@saintotrott)


    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

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo @saintotrott
    ich bin mir eigentlich nicht sicher, was du genau meinst.
    Den Parallax-Effekt kann man beispielsweise bei dem Cover Block beim Block Editor über die Eigenschaft rechts „Hintergrund fixiert“ einstellen. Das Hintergrundbild bleibt in dem Fall „stehen“, während sich der Content beim Scrollen im Vordergrund schneller bewegt.

    Den Cover Block kannst du wie beschrieben in dem Fall z. B. auch auf einer Website mit Twenty Twenty-Five einsetzen.

    Die Effekte, die ich auf der genannten Website sehe, würde ich dementsprechend nicht als Parallax-Effekt bezeichnen – es sei denn, ich habe etwas falsch verstanden. Auf der Website sind Videos eingebunden, die den Effekt verursachen (siehe Developer Console – Aufruf mit F12)

    Aber: Egal ob Parallax-Effekt oder die Effekte auf der genannten Website: Beide Effekte sind nicht barrierefrei. Das solltest du dabei auch berücksichtigen.

    Sorry, wenn ich da etwas falsch verstanden haben sollte. Sonst erläutere das doch bitte noch mal, was du genau erreichen willst.

    Viele Grüße
    Hans-Gerd

    Thread-Starter saintotrott

    (@saintotrott)

    hallo und guten Abend @hage – vielen Dank für deine schnelle Rückmeldung – und für die so wichtigen und guten und überzeugenden Tipps. Ich seh ein, dass das o.g. Theme das die Seite unternehmerTUM.de einsetzt – dass die im Grunde gar nix mit Parallax zu tun hat.

    Die von dir erwähnten Charakteristika der – „fehlendeen“ Barrierefreiheit – a bei Parallax-Effekt bzw. auch bei der og. gelinkten Seite – das leuchtet ein.

    Ich denke dass ich mich mal mit den Patterns und den Möglichkeiten von TT4 und TT5 näher auseinandersetzen. Melde mich in den nächsten Tagen hier nochmals –
    Ist jetzt etwas spät – viele Grüße SaintOtrott…

    Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo,

    Melde mich in den nächsten Tagen hier nochmals

    gerne – wir freuen uns über eine Rückmeldung. Aber kein Stress. 😊
    Viele Grüße
    Hans-Gerd

    Thread-Starter saintotrott

    (@saintotrott)

    Hallo und guten Tag
    Hallo @hage

    vielen Dank für deine Rückmeldung und deine wertvollen Tipps, Ideen und Anregungen zum Theme – und dem Ausbau. BTW; bin fast schon regelmäßiger Leser auf deiner (Aachener) Seite 😉

    Deine Tipps haben mich überzeugt Moment mal von Parallax abzusehen.

    Die Frage – die ich im Moment hab ist die nach den richtigen und angemessenen Bildergrößen.

    Habe in der Vergangenenheit des Öfteren mal erlebt dass Bilder dann irgendwie nicht richtig (an)gepasst waren u. dass hier dann das Ergebnis nicht schön ausgesehen hat. Muss man denn sich am besten an Richtwerten orientieren wenn es, sagen wir mal beim Einstieg in einer Seitenaufbau
    lediglich darum geht beim TT4 die Bilder mal auszuwechseln:

    also: – wenn wir z.B. beim Twenty-Twenty-Four Theme

    a. https://wordpress.org/themes/twentytwentyfour/
    b. https://wordpress.org/themes/twentytwentyfour/preview/

    die Bilder nur durch andre ersetzen

    Bild 1 /

    Bild 1

    Oder Bild 2

    Bild 2


    wenn wir das machen wollen – wie muss man dann vorgehen dass das Bild einigermaßen passend aussieht und nicht unangepasst – z,B. zu klein ist!?

    Hatte , wie oben schon angedeutet mal eine Seite gestaltet bei der ich eine dotted -Map einbauen wollte also ein Bild von entweder Europa oder meinetwegen auch der Welt – bei dir die Karte durch Dots grundlegend gestaltet ist. (vgl. zum Ganzen auch hier: https://www.gimp-forum.net/Thread-currently-planning-to-create-a-dotted-map-of-the-world-any-ideas-here?pid=43242#pid43242

    Die Problematik war, dass mir die DArstellung dieser Map irgendwie dergestalt aus dem Ruder gelaufen ist, dass das Bild dann am Ende sehr “ verwaschen “ und irgendwie unbrauchbar ausgehen hat.

    /

    Bild 3

    Bild 3

    Also – ich denke dass ich hier mit einer passenden & brauchbaren Größenordnung arbeiten muss -so dass das dann richtig dargestellt wird. Die IDEE, ein Bild am Ende noch durch „Vergrößerung“ anzupassen die scheitert – da das dann sehr schnell – komplett unscharf werden kann.

    Frage: wir würdet ihr denn ansetzen wenn z.B. eine Dottet Map in das Theme Twenty Twenty Four einbauen wollt..

    vgl. zum Beispiel diesen Roh-Entwurf..?

    Welche Größe würdet ihr ansetzen – wie vorgehen, wenn z.b. die Map – dann eines der Bilder in dem TT4 Theme schlicht ersetzen soll. !?

    Vgl. zum Ganzen auch diesen Thread..
    https://www.gimp-forum.net/Thread-currently-planning-to-create-a-dotted-map-of-the-world-any-ideas-here?page=2

    Freue mich von Euch wieder zu hoeren.

    viele Grüße
    SaintOtrott 😉

    und ein ganz großes Sorry für diese „Anfängerfrage“ ….

    Hallo @saintotrott

    und ein ganz großes Sorry für diese „Anfängerfrage“ ….

    Kein Problem – jede(r) hat mal angefangen. 😉

    Allerdings ist das eine Frage, die ich hier im Rahmen des Forums nicht ausführlich beantworten kann. Ggfs. solltest du dazu noch mal die Google-Suche in Anspruch nehmen (z. B. Youtube Videos zu dem Thema) oder („oldschool“) Bücher lesen (da gibt es einige gute Bücher zu WordPress, in denen das ausführlicher erklärt wird).

    Wenn du Bilder für deine WordPress-Seite verwendest, solltest du zwei wichtige Aspekte beachten: die Bildgröße und die Dateigröße.

    Die Bildgröße wird in Pixeln gemessen und bestimmt, wie groß dein Bild auf dem Bildschirm erscheint. Wenn du ein Bild von deinem Smartphone hochlädst, macht WordPress es zwar automatisch kleiner, aber das ist nicht immer die beste Lösung. Es ist besser, wenn du die Bildgröße selbst anpasst, bevor du es hochlädst. An sich reicht eine maximale Größe von 1920px.

    Die Dateigröße wird in Kilobyte gemessen und beeinflusst, wie schnell dein Bild lädt. Nachdem du die Bildgröße und den Bildausschnitt optimiert hast, solltest du auch die Dateigröße verkleinern.

    Es gibt einige Online-Dienste, die du vor dem Hochladen der Bilder für die Komprimierung verwenden kannst, z. B.: tinyjpg.com, tiny-img.com, shrinkme.app, squoosh.app, kraken.io, compress-or-die.com.

    Du kannst deine Bilder auch (zusätzlich) direkt mittels Plugins in WordPress optimieren, z. B.:

    • EWWW Image Optimizer
    • Smush Image Optimization
    • WP Optimize
    • Imagify

    Hier schon mal ein paar weitere Videos (teilweise englischsprachig, aber gut zu verstehen):

    Viele Grüße
    Hans-Gerd

    • Diese Antwort wurde geändert vor 2 Wochen, 2 Tage von Hans-Gerd Gerhards. Grund: Ergänzung
    Thread-Starter saintotrott

    (@saintotrott)

    Hallo @hage vielen Dank für die Antwort – die wertvollen Erläuterungen u. Tipps.
    Eure Seite – euer Support ist echt eine tolle Ressource.

    Viele Grüße Saint Otrott;)
    Btw: ich markiere den Thread als gelöst.

    super – freut uns. Danke für die Rückmeldung und “Gelöst”-Markieren. 👍

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)