Anleitungen für WordPress und Divi
Seit 2021 unterrichte ich bei der Mediendesignausbildung Wien das Fach Webdesign. Es macht mir sehr viel Spaß mein Wissen weiterzugeben. Weiters ist es eine willkommene Abwechslung zum Büroalltag.
Auf dieser Seite finden sich Links, CSS und Javascript Code sowie Anleitungen, welche wir im Kurs durchmachen. Diese werden laufend erweitert und können auch von Nicht-Kursteilnehmer*innen benutzt werden.
Viel Spaß beim Ausprobieren und Nachmachen.
Linkliste
und CSS Snippets
Drop Shadow (Filter CSS)
Scrollleiste der Divi-Website anpassen
Sektion in einer Lightbox öffnen mit einem Button
Die Reihenfolge der Spalten in einer Reihe beeinflussen.
CSS Gradient Animator
Learn Code by Playing
Farbwechsler bunt für Hintergründe. Darauf achten, dass das Element selbst keine Hintergrundfarbe eingestellt hat.
Elemente pulsieren lassen
Sichtbarer Fokus für Tastaturnavigation (Farbe kann im CSS Code angepasst werden)
JavaScript Snippets
Button mit Sound abspielen
Einzelner Button mit Sound – dem Button, der die Audio Datei abspielen soll die CSS ID delayedButton geben
Anleitungen
als .pdf
Header Menü mit halbtransparentem Hintergrund
Die Anleitung für das Menü mit halbtransparentem Hintergrund und Blur Effekt
Meine Galerie
Cursor mit Invert Effekt
Custom Cursor mit Blend Mode Difference.
Code damit Mauszeiger auf allen Seiten den Invert Effekt ermöglicht.
White
black
Benutzerdefiniertes Grid Layout
Die Anleitung für das benutzerdefinierte Grid Layout
Slide in Menü von der Seite mit Hamburger Icon
Die Anleitung, wie man ein Slide-in Menü erstellt. Der Code, den man dazu braucht, ist gleich darunter.
Animiertes Hamburger Menü
Die Anleitung, wie man ein mobiles Menü für alle Geräte erstellt. Mit einem Klick auf das Hamburger Menü Icon vergrößert sich das Menü über den ganzen Bildschirm.
Austauschbarer Header on Scroll
Eine Anleitung mit der man 2 unterschiedliche Menüzeilen erstellt und diese sich dann beim Scrollen austauschen.
Eine Sektion mit einem Button in einer Lightbox öffnen
Man befüllt eine Sektion mit Inhalten (darf nicht mehr als Bildschirmhöhe sein) und öffnet diese mit einem Klick auf einen Button.
Timeline mit Scroll Effekt
Die Anleitung als .pdf gibt es hier für dieTimeline, mit dem Punkt, der auf der Linie nach unten fährt beim Scrollen.
Fullwidth Header mit 2 Buttons und Bild
Hier findet ihr die Anleitung für den Fullwidth Header mit 2 Buttons und Bild.
Galerie mit Hover Effekt von Titel und Caption
Mit einem Klick auf den Link gibt es die PDF Anleitung für die Galerie sowie eins weiter unten den CSS Code Snippet.
Datenschutzvorlage
Animierte Shapes (Dreieck und Kleeblatt)
Die Anleitung, wie ihr animierte Shapes mit Divi erstellen könnt.
Text bzw Buchstaben stapeln und animieren
Die Anleitung, bei der der erste Buchstabe des Wortes mit Scroll Effekten heraus poppt.
Awesome Text mit CSS und JavaScript
Zuerst ein Textmodul mit folgendem html einfügen.
<div class=”text-container”> Awesome</div>
Danach ein Code Modul darunter geben und den Code hinzufügen, der zum Download bereitsteht.
Zeilen stapelbar machen beim Scrollen
Das Beispiel, in dem wir Zeilen stapelbar machen (sticky) beim Scrollen.
Sticky Header beim Scrollen (und automatisch unter der ersten Sektion)
Unser Beispiel, in dem wir einen Header erstellen, den dann mit einem Java Script automatisch unter die ersten Sektion geben (wenn gewünscht) und dann sticky machen.
Dazu nur den Code kopieren der zwischen zwei <script></script> Tags steht.
Dark Mode Schalter
Die Anleitung für den Schalter, um die Webseite dunkel zu machen.
Dazu nur den Code kopieren der zwischen zwei <script></script> Tags stehen muss.
Anleitungen Anleitungen Anleitungen Anleitungen Anleitungen Anleitungen
Von links nach rechts oder in die andere Richtung animierter Text beim Scrollen (mit Text-Stroke Effekt)
Hier findet ihr die Anleitung, wie ich den animierten Stroke Text/Outline Text erstellt habe, den ich auch auf meiner Homepage benutze.
D
O
_
I
t
D
Animiertes-5-teiliges Hintergrundbild mit Scroll Effekten
Image by Freepik
Design
Inhalte eurer Wahl auf dieser Seite platzieren
Hier könnt ihr die Inhalte eurer Wahl platzieren.
Ein Textmodul.
Ein Icon.
Was immer ihr wollt.
Image by Freepik
Text Clipping Mask mit Hintergrund Animation
Link Underline Animation Wellen – Link Strich wird zur Welle
Über folgenden Link kommt ihr zur Codepen Seite, von der ihr euch den html Befehl sowie den CSS Code holen könnt, um euren Linkstrich als Welle zu animieren.
Den html Code (in dem Fall von egTwo) in ein Text-Modul einfügen (nicht unter “Visual” sondern unter “Text” im Content Tab). Darunter dann ein Code-Modul, in dem ihr zwischen zwei <style> </style> Tags den CSS von egTwo einfügt.