Seid’s
Kreativ
Kreativ
Anleitungen für WordPress und Divi
Wie schon angekündigt könnt ihr euch hier die Anleitungen für die Designbeispiele für eure Webseite als .pdf herunterladen.
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
Anleitungen
als .pdf
Benutzerdefiniertes Grid Layout
Die Anleitung für das benutzerdefinierte Grid Layout
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 (wie “Ablauf unserer Zusammenarbeit” auf meiner Seite)
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 zb. einer h2 einfügen. Der h2 eine CSS Klasse geben mit “text-container” oder folgenden html einfügen:
<h2 class=”text-container”>Awesome</h2>
Danach ein Textmodul 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
Der Code für den Schalter, um die Webseite dunkel zu machen.
Dazu nur den Code kopieren der zwischen zwei <script></script> Tags steht.
Alle Anleitungen aus unserem Webesign Kurs für euch hier zusammengestellt.
Alle Anleitungen aus unserem Webesign Kurs für euch hier zusammengestellt.
Alle Anleitungen aus unserem Webesign Kurs für euch hier zusammengestellt.
Alle Anleitungen aus unserem Webesign Kurs für euch hier zusammengestellt.
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
Webdesign
Isn’t it fantastic that you can change your mind and create all these happy things? The very fact that you’re aware of suffering is enough reason to be overjoyed that you’re alive and can experience it. Anyone can paint.
Animierte Section Dividers beim Scrollen
Die Anleitung für den animierten Section Divider beim Scrollen gibt es hier zum Download.
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.