Testseite

Seite zum Testen

Fixierter Hintergrund

'Parallax' muss an den Einstellungen ausgestellt sein

background-attachment: fixed;

Erstellen Sie Ihre eigene Website mit ein paar Klicks. Das Mobirise Programm kann Ihnen helfen, die Zeit für die Entwicklung Ihrer Website zu sparen, indem es einen flexiblen Website-Editor mit einem drag-and-drop Interface zur Verfügung stellt. Mobirise Website-Baukasten lässt Sie responsive und Mobile-freundliche Websites mit ein paar Klicks erstellen. Spatz auf Ast Mobirise ist eins der einfachsten Tools für die Website-Entwicklung, die es heute gibt . Es ermöglicht Ihnen auch so viele Websites zu erstellen, wie Sie möchten und das im Angesicht der Tatsache, dass es eine Desktop-App ist.

Klicke auf das Bild vom Spatzen.

Bild mit Grauskala:
filter: grayscale(1);
wird bei Mausüber (hover) farbig mit CSS:
filter: grayscale(0);
Hier wurde eine Image-Lightbox eingebaut, die zusätzlich auch die Bilder der Mobirise-Galerie unten anzeigen kann.


Die beiden Bilder unten bleiben in jeder Displaygröße nebeneinander stehen.

FliegeLibelle

img {
  width: 50%; 
  padding: 5px; 
  filter: grayscale(1); 
  -webkit-filter: grayscale(1); 
}


Das rechte der beiden Bilder unten wechselt nach 10 Sekunden alle 5 Sekunden.

FliegeBildwechsel


<img id="thisImg" alt="Bild" src="http://www.mobirise-tutorials.com/images/Libelle.jpg"/>

<!-- Skript wechselnde Bilder alle 5 Sekunden -->
<script>

    $(function(){ 

        //Meine URLs zu den Bildern 
        var dataArray=new Array(); 
        dataArray[0]="http://www.mobirise-tutorials.com/images/Libelle.jpg"; 
        dataArray[1]="http://www.mobirise-tutorials.com/images/Kiefer.jpg"; 
        dataArray[2]="http://www.mobirise-tutorials.com/images/Luchs.jpg"; 
        dataArray[3]="http://www.mobirise-tutorials.com/images/Spatz.jpg"; 
         
        //Starte mit id=0 nach 5 Sekunden 
        var thisId=0; 
         
        window.setInterval(function(){ 
            $('#thisImg').attr('src',dataArray[thisId]); 
            thisId++; //Daten-Array-ID erhöhen 
            if (thisId==4) thisId=0; //Starte von vorne 
        },5000);
     
    });

</script>

Skript für eine CSS animierte Slideshow von mediaevent.de. Klickt auf das graue Bild und es wird eine Lightbox geöffnet. Klickt dann rechts auf die Lightbox-Bilder und es werden noch 4 versteckte Bilder erscheinen. Für weitere Anleitungen meiner Tests guckt bitte auch auf meiner Tutorial-Seite.

Fliege
verstecktes Bild verstecktes Bild verstecktes Bild verstecktes Bild

Timeline

Mit Steuerrad

1. Januar 2018

Multi-Homepages

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit. Am Schlachtensee in Berlin
Modal Iframe

2. Februar 2019

Responsives Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.

3. März 2020

Smart Watch

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. Proin vel lectus auctor, porttitor ligula vitae, convallis leo. In eget massa elit.

Steuerrad in Timeline auf 25 x 25px Größe am Server und CSS-Änderung:

.iconBackground {
  position: absolute; 
  left: 50%; 
  width: 25px; 
  height: 25px; 
  line-height: 30px; 
  text-align: center; 
  border-radius: 50%; 
  font-size: 30px; 
  display: inline-block; 
  background-color: transparent; 
  top: 30px; 
  margin-left: -12px; 
  background-image: url("http://www.mobirise-tutorials.com/Testseiten/Software-Ende/meinsteuerradklein.png"); 
  background-position: center center; 
}


FAQ-Akkordeon

Mobirise ist ein Offline Website Baukasten Programm für Windows oder Mac, mit der man ganz einfach kleine bis mittlere Webseiten, Landingpages, online Bewerbungen, Portfolios und Werbeseiten für Apps, Events, Dienste oder Produkte erstellen kann.

Website Baukasten eignet sich ausgezeichnet für alle nicht technisch begabten, die sich nicht in die Webentwicklung einarbeiten wollen oder können oder aber auch für Designer, die visuell, ohne Code verändern zu müssen, arbeiten wollen. Es eignet sich aber auch für alle professionellen Coder, die schnell Prototypen oder kleine Projekte basteln wollen.

Die Hauptunterschiede zu herkömmlichen Tools:
* Minimalistisch, extrem einfach zu gebrauchendes Interface
* Mobile-freundlichkeit mit neuester Webseitentechnik und Webframes "out of the box"
* Kostenlos für kommerziellen und nicht kommerziellen Gebrauch

Akkordeon mit Preisen im Header, die rechtsbündig sind:

<img src="http://www.mobirise-tutorials.com/Testseiten/Software-Ende/meinsteuerradklein.png" alt="Bild"> Was? <span class="float-right">0,00 EUR</span>

FAQ-Akkordeon

Mobirise ist ein Offline Website Baukasten Programm für Windows oder Mac, mit der man ganz einfach kleine bis mittlere Webseiten, Landingpages, online Bewerbungen, Portfolios und Werbeseiten für Apps, Events, Dienste oder Produkte erstellen kann.

Website Baukasten eignet sich ausgezeichnet für alle nicht technisch begabten, die sich nicht in die Webentwicklung einarbeiten wollen oder können oder aber auch für Designer, die visuell, ohne Code verändern zu müssen, arbeiten wollen. Es eignet sich aber auch für alle professionellen Coder, die schnell Prototypen oder kleine Projekte basteln wollen.

Die Hauptunterschiede zu herkömmlichen Tools:
* Minimalistisch, extrem einfach zu gebrauchendes Interface
* Mobile-freundlichkeit mit neuester Webseitentechnik und Webframes "out of the box"
* Kostenlos für kommerziellen und nicht kommerziellen Gebrauch

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nulla ut magna vehicula libero luctus in ipsum consequat faucibus. Ut porta nulla ac dapibus convallis. Curabitur sit amet massa quam. In ut ex auctor, porta neque quis, sagittis purus. Nunc auctor gravida magna, sed efficitur tortor tristique quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nulla ut magna vehicula libero luctus in ipsum consequat faucibus. Ut porta nulla ac dapibus convallis. Curabitur sit amet massa quam. In ut ex auctor, porta neque quis, sagittis purus. Nunc auctor gravida magna, sed efficitur tortor tristique quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nulla ut magna vehicula libero luctus in ipsum consequat faucibus. Ut porta nulla ac dapibus convallis. Curabitur sit amet massa quam. In ut ex auctor, porta neque quis, sagittis purus. Nunc auctor gravida magna, sed efficitur tortor tristique quis.

Tabelle

Klicken Sie auf den blauen Zahnrad-Button in der rechten oberen Ecke, um die Suchbox und Angaben zu verbergen/anzuzeigen, den Hintergrund der Tabelle und andere Parameter zu ändern. Klicken Sie auf den Tabellenkopf im Browser, um die Werte zu sortieren. Benutzen Sie die Suchbox, um die Angaben zu filtern.

Hier habe ich die Spalte "NAME" mit einer Style-Angabe auf 100px Breite beschränkt:
style="width: 100px;"

NAME ALTERFOTODatum
Eleonore Braun17 Eleonore 2016-10-17
Claudia Schneider26 Claudia 2013-04-12
Markus Schulz31 Markus 2016-05-22
Lisa Roller70kein Bild2016-05-15
Es werden Einträge angezeigt (Von insgesamt Einträge gefiltert)

Fortschrittszyklen

Klicke auf die Fortschrittsanzeige - diese ist verlinkt

Test

Den Link am Fortschrittsanzeige habe ich so eingefügt:


<div class="wrap">
    <a href="#top"> 
        <div class="pie_progress progress1" role="progressbar" data-goal="{{progress1}}"> 
            <p class="pie_progress__number mbr-fonts-style" mbr-theme-style="display-5"></p> 
        </div> 
    </a> 
</div> 

Social Feed

Test mit Twitter und YouTube Kanal

© Copyright Mobirise-Tutorials.com