Zwischen dem Header-Image und dem ersten Parallax-Container sollte ein neutraler Bereich liegen.
Wichtig: die PlugIns haben eine relativ lange Ladezeit!
Testseite (Vorlage)
- Diese Testseite bitte als Vorlage behalten und Elemente nicht ändern oder verschieben.
- Zum Ausprobieren der Funktionen bitte erst duplizieren und umbenennen (z.B.: ../spielwiese)
load Powr-Tools plugIn (s. ../test/load)
powrtools_Allgemein1
html5 Video (Video1)
Auch als Content für parallax Backgrounds verwendbar (autoplay=true, Chrome=muted)
Normaler PageContent
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Sliderpro Slideshow
Sliderpro Slideshow
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Normaler PageContent
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Universal-Parallax Container1
myContainer = Platzhalter für Jimdo-Content
Wichtig: wenn vorhanden, unbedingt Content-Widget setzen!
mt250 mb250 = Abstände Content-Container oben und unten
Content für Parallax-Container1
format upper element hoverscale-img mit centerGallery
Normaler Content
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
HoverScale-Img Widget
Funktioniert mit allen Bildern, auch in Sammelelementen und Galerien.
Anwendung: Einfach Unter dem zu formatierenden Element ein html-Widget mit folgendem Code anlegen:
<div class="hoverscale">
<span class="hide"> format upper element hoverscale-img </span>
</div>
Fullwidth Backgound Section
formatiert das nachfolgende Element über die ganze Breite des Browserfensters (bg-img!)
formatiere nachfolgendes Element: fullwidth bg-img3
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. Stell dich deinen Lesern vor. Erzähl ihnen, was für Services und Produkte du bietest. Denk dabei an die Suchbegriffe für Google und binde hin und wieder einen davon in deinen Text ein (das mag Google nämlich so gerne, dass du dafür sogar nach einer Weile bessere Ergebnisse in Suchmaschinen bekommst).
Damit dein Text trotzdem noch wie ein echter Text und nicht wie eine Aufzählung von Suchmaschinen-Begriffen klingt: lass sie einmal von einem Freund oder Kollegen gegenlesen. Ein zweites Augenpaar ist immer gut und du bekommst ein erstes Feedback, ob der Text nach dir klingt, ob du vielleicht noch ein Detail vergessen hast oder ob sich irgendwo sogar ein Fehlerteufel eingeschlichen hat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
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. Stell dich deinen Lesern vor. Erzähl ihnen, was für Services und Produkte du bietest. Denk dabei an die Suchbegriffe für Google und binde hin und wieder einen davon in deinen Text ein (das mag Google nämlich so gerne, dass du dafür sogar nach einer Weile bessere Ergebnisse in Suchmaschinen bekommst).
Damit dein Text trotzdem noch wie ein echter Text und nicht wie eine Aufzählung von Suchmaschinen-Begriffen klingt: lass sie einmal von einem Freund oder Kollegen gegenlesen. Ein zweites Augenpaar ist immer gut und du bekommst ein erstes Feedback, ob der Text nach dir klingt, ob du vielleicht noch ein Detail vergessen hast oder ob sich irgendwo sogar ein Fehlerteufel eingeschlichen hat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Universal-Parallax Container2
Wichtig: wenn vorhanden, unbedingt Content-Widget setzen!
Anleitung für Universal-Parallax Widget
Inhalt Background-Widget:
<span class="hide">Universal Parallax bg1</span>
<section class="container container--min">
<div class="content myContainer mt250 mb250">
<span class="hide">hier html-Code einfügen</span>
<h2>
Universal Parallax bg1
</h2>
<span class="hide">myContainer = Platzhalter für Jimdo-Content</span>
</div>
<div class="parallax bg1">
</div>
</section>
Inhalt Content-Widget:
<div class="create_parallaxContent">
<span class="hide">create_parallaxContent</span>
</div>
CSS für Background-Widget:
<style type="text/css">
.bg1 {
background-image: url(https://www.timetoride.de/app/download/11873837898/image1.jpg?t=1589969546); /*URL download-image*/
}
</style>
html5-Video 2
Content für UniversalParallax-Container 2 (autoplay=false, muted=false)
insert_video_2
Normaler PageContent
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Zwischen Parallax-BG Elementen können beliebige Jimdo-Standardelemente eingesetzt werden.
...Do what you want to do
And go where you're going to
Think for yourself
'Cause I won't be there with you...
format upper element hoverscale-img
Bildergalerie in Spaltenelement
format upper element hoverscale-img + create_captionContainer
Convert upper element: Content-Container
Convert upper element: Content-Container
Normaler PageContent
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Universal-Parallax Container 3
Normaler PageContent
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Universal Parallax bg5 (ohne html, nur Jimdo-Content)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Bitte dieses Widget nicht löschen! (universalParallax init)