nachfolgendes Element: animated fadeInDown slow go
Animationen
animation-Container
nachfolgendes Element: animated wrapper1
nachfolgendes Element: animated fadeInLeft slow go
nachfolgendes Element: animated wrapper1
animated fadeInLeft slow go delay-750 left_50
animated fadeInRight slow go delay-1000 right_50
nachfolgendes Element: animated wrapper1
animated fadeInLeft slow go rotateIn left_50
animated fadeInRight slow go delay-2000 right_50 wrapper1
nachfolgendes Element: fullwidth bg-grey
HowToDo
nachfolgendes Element: fullwidth bg-grey
nachfolgendes Element: fullwidth bg-grey
In Animations
fadeIn
growIn
fadeInLeft
fadeInRight
fadeInUp
fadeInDown
rotateInUpLeft
rotateInUpRight
rotateInDownLeft
rotateDownUpRight
flipInX
flipInY
rollIn
bounceIn
bounceInRight
bounceInLeft
bounceInUp
bounceInDown
lightSpeedInRight
lightSpeedInLeft
Out Animations
fadeOutUp
fadeOutDown
fadeOutLeft
fadeOutRight
bounceOutUp
bounceOutDown
bounceOutLeft
bounceOutRight
flipOutX
flipOutY
rollOut
lightSpeedOutRight
lightSpeedOutLeft
rotateOutUpLeft
rotateOutDownLeft
rotateOutUpRight
more Animations
shake
shakeUp
rotate360
wiggle
swing
tada
wobble
pulse
Short Animations
fadeInUpShort
fadeInDownShort
fadeInLeftShort
fadeInRightShort
Speed / Delay
slow
slower
slowest
delay-250
delay-500
delay-750
delay-1000
delay-1250
delay-1500
delay-1750
delay-2000
delay-2500
delay-2000
delay-2500
delay-3000
delay-3500
Extensions
go (in-Animations)
goAway (out-Animations)
nachfolgendes Element: fullwidth bg-grey
Beispiele (html)
nachfolgendes Element: fullwidth bg-grey
<div class="animated fadeInRight slow go"> </div>
nachfolgendes Element: animated fadeInRight slow go
<div class="animated lightSpeedOutRight slowest goAway"> </div>
nachfolgendes Element: animated lightSpeedOutRight slowest goAway
nachfolgendes Element: fullwidth bg-grey
<div class="animated lightSpeedInRight slow go"> </div>
nachfolgendes Element: animated lightSpeedInRight slow go
<div class="animated lightSpeedOutLeft slowest goAway"> </div>
nachfolgendes Element: animated lightSpeedOutLeft slow goAway
nachfolgendes Element: fullwidth bg-grey
<div class="animated rotateIn slow go"> </div>
nachfolgendes Element: animated rotateIn slow go
<div class="animated flipOutY delay-500 slow goAway"> </div>
nachfolgendes Element: animated flipOutY delay-500 slow goAway
nachfolgendes Element: fullwidth bg-grey
<div class="animated rotateIn slow go"> </div>
nachfolgendes Element: animated growIn slow go
<div class="animated flipOutX delay-500 slow goAway"> </div>
nachfolgendes Element: animated flipOutX delay-500 slow goAway
nachfolgendes Element: fullwidth bg-grey
nachfolgendes Element: fullwidth bg-white
nachfolgendes Element: animated fadeInLeft delay500 slow go
MyCaption-Widget
Fullwidth-Widget (fullwidth)
nachfolgendes Element: animated fadeInRight delay500 slow go
...mit Animationen
Darf ich mich vorstellen? Ich bin’s, der erste Textblock deiner Webseite. Ich möchte gerne von deinen eigenen Worten ersetzt werden. Zum Beispiel mit ein paar Worten über dich.
Denk dabei an die Suchbegriffe für Google und binde hin und wieder einen davon in deinen Text ein. Damit dein Text trotzdem noch wie ein echter Text und nicht wie eine Aufzählung von Suchmaschinen-Begriffen.
nachfolgendes Element: animated fadeInRight slow go
Fullwidth-Image Widget (fw-image)
<p class="hide"> nachfolgendes Element: fw-image </p>
<div class="fw-image"></div>
nachfolgendes Element: fw-image
Fullwidth-Slider Widget (fw-slider)
<p class="hide"> nachfolgendes Element: fw-slider</p>
<div class="fw-slider"></div>
nachfolgendes Element: fw-slider bg-white
Spaltenelement mit fullsize Hintergrundbild, fixiert
<p class="hide"> nachfolgendes Element: fullwidth bg-img2 </p>
<div class="fullwidth bg-img2 parallax-bg"></div>
nachfolgendes Element: fullwidth bg-img2 parallax-bg
nachfolgendes Element: animated fadeInLeft slow go
Spaltenelement mit fixiertem
fullsize Hintergrundbild
Hallo, ich bin ein Textblock! Ich bin hier, um dir ein wenig Inspiration für deine eigenen Texte auf deiner neuen Webseite zu liefern. Gut? Super, los geht’s: Kennst du die KISS-Regel? Heißt: Keep it short and simple, also halte es kurz und einfach. Leser lieben nämlich knackige Texte. Versuch also, alles so gut wie möglich auf den Punkt zu bringen. Texte, die Google & Co. lieben: Verwende Suchbegriffe, mit denen du selbst nach dir googeln würdest. Gerne am besten in der Überschrift, das kommt bei Suchmaschinen besonders gut an.
Spaltenelement mit
50% Hintergrundbild
Achtung! Funktioniert noch nicht wirklich gut in der mobilen Darstellung
...erstes Spaltenelement:
<p class="hide"> nachfolgendes Element: fullwidth col_50first bg-img2 </p>
<div class="fullwidth col_50first bg-img2"></div>
...zweites Spaltenelement:
<p class="hide"> nachfolgendes Element: fullwidth col_50last bg-img2 </p>
<div class="fullwidth col_50last bg-img2"></div>
nachfolgendes Element: fullwidth col_50first bg-img2
2 Spalten, Hintergrundbild links (first)
Hallo, ich bin ein Textblock! Ich bin hier, um dir ein wenig Inspiration für deine eigenen Texte auf deiner neuen Webseite zu liefern. Gut? Super, los geht’s: Kennst du die KISS-Regel? Heißt: Keep it short and simple, also halte es kurz und einfach. Leser lieben nämlich knackige Texte. Versuch also, alles so gut wie möglich auf den Punkt zu bringen. Texte, die Google & Co. lieben: Verwende Suchbegriffe, mit denen du selbst nach dir googeln würdest. Gerne am besten in der Überschrift, das kommt bei Suchmaschinen besonders gut an.
2 Spalten, Hintergrundbild links (first)
Hallo, ich bin ein Textblock! Ich bin hier, um dir ein wenig Inspiration für deine eigenen Texte auf deiner neuen Webseite zu liefern. Gut? Super, los geht’s: Kennst du die KISS-Regel? Heißt: Keep it short and simple, also halte es kurz und einfach. Leser lieben nämlich knackige Texte. Versuch also, alles so gut wie möglich auf den Punkt zu bringen. Texte, die Google & Co. lieben: Verwende Suchbegriffe, mit denen du selbst nach dir googeln würdest. Gerne am besten in der Überschrift, das kommt bei Suchmaschinen besonders gut an.
nachfolgendes Element: fullwidth col_50last bg-img2
2 Spalten, Hintergrundbild rechts (last)
Hallo, ich bin ein Textblock! Ich bin hier, um dir ein wenig Inspiration für deine eigenen Texte auf deiner neuen Webseite zu liefern. Gut? Super, los geht’s: Kennst du die KISS-Regel? Heißt: Keep it short and simple, also halte es kurz und einfach. Leser lieben nämlich knackige Texte. Versuch also, alles so gut wie möglich auf den Punkt zu bringen. Texte, die Google & Co. lieben: Verwende Suchbegriffe, mit denen du selbst nach dir googeln würdest. Gerne am besten in der Überschrift, das kommt bei Suchmaschinen besonders gut an.
2 Spalten, Hintergrundbild rechts (last)
Hallo, ich bin ein Textblock! Ich bin hier, um dir ein wenig Inspiration für deine eigenen Texte auf deiner neuen Webseite zu liefern. Gut? Super, los geht’s: Kennst du die KISS-Regel? Heißt: Keep it short and simple, also halte es kurz und einfach. Leser lieben nämlich knackige Texte. Versuch also, alles so gut wie möglich auf den Punkt zu bringen. Texte, die Google & Co. lieben: Verwende Suchbegriffe, mit denen du selbst nach dir googeln würdest. Gerne am besten in der Überschrift, das kommt bei Suchmaschinen besonders gut an.
html-Akkordeon (dd-Akkordeon)
dd-Akkordeon
-
Absatz 1
...mehr Infos - Hier kommt der Text rein, der ausklappen soll.
-
Absatz 2
...mehr Infos - Hier kommt der Text rein, der ausklappen soll.
-
Absatz 3
...mehr Infos - Hier kommt der Text rein, der ausklappen soll.
Test: Linearly Scale font-size with CSS
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#for-those-who-dont-mind-that-edge-case
https://www.w3schools.com/howto/howto_css_responsive_text.asp
Business
Coaching
Dieses Textfeld soll nicht umbrechen, wenn der Viewport verändert wird.
Viewport Width: 1682px
Führungskräfte Coaching
...damit die Höhe des Textblocks immer gleich bleibt.
Font Size (px): 12px
Skripte