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.
Anleitungen
als .pdf
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
Ein Textmodul.
Ein Icon.
Ein Video.
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.