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

Universal Parallax bg1
content = Content-Container für html-Code und/oder Jimdo-Content

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


darüberliegendes Spaltenelement create_parallaxContent

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

Universal Parallax bg2
html-Code myContainer = Platzhalter für Jimdo-Content
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


darüberliegendes Spaltenelement create_parallaxContent

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

image 1
image 4
image 2
image 5
image 3
image 6

format upper element hoverscale-img + create_captionContainer

Content für Image 1

Content für Image 4

Content für Image 2


Convert upper element: Content-Container

Content für Image 5

Content für Image 3

Content für Image 6


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

Universal Parallax bg4 mit verstecktem Content (visibility:hidden)

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

Universal Parallax bg5 (ohne html, nur Jimdo-Content)

Content für Parallax-bg5

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.


darüberliegendes Spaltenelement create_parallaxContent

Bitte dieses Widget nicht löschen! (universalParallax init)

Inhalte von Powr.io werden aufgrund deiner aktuellen Cookie-Einstellungen nicht angezeigt. Klicke auf die Cookie-Richtlinie (Funktionell und Marketing), um den Cookie-Richtlinien von Powr.io zuzustimmen und den Inhalt anzusehen. Mehr dazu erfährst du in der Powr.io-Datenschutzerklärung.
Inhalte von Powr.io werden aufgrund deiner aktuellen Cookie-Einstellungen nicht angezeigt. Klicke auf die Cookie-Richtlinie (Funktionell und Marketing), um den Cookie-Richtlinien von Powr.io zuzustimmen und den Inhalt anzusehen. Mehr dazu erfährst du in der Powr.io-Datenschutzerklärung.
Inhalte von Powr.io werden aufgrund deiner aktuellen Cookie-Einstellungen nicht angezeigt. Klicke auf die Cookie-Richtlinie (Funktionell und Marketing), um den Cookie-Richtlinien von Powr.io zuzustimmen und den Inhalt anzusehen. Mehr dazu erfährst du in der Powr.io-Datenschutzerklärung.

♥ Dir gefällt TimetoRide? ♥




Transparenz & Ehrlichkeit sind uns wichtig:

*Mit einem Stern gekennzeichnete Links sind externe Affiliate-Links. Durch die Nutzung dieser Links unterstützt du unseren Blog.

**Mit zwei Sternen kennzeichnen wir Kooperationspartner oder zur Verfügung gestelltes Equipment (Werbung wegen bezahlter oder unbezahlter Produktpartnerschaften).


load social-media

Scrollbutton-Widget

#start