Timeline

Timeline von Mobirise erweitern

Timeline

Hier habe ich die maximale Mobirise-Einstellung von 12 Elementen
um 4 Ereignisse auf 16 Elemente erweitert
deren Überschriften ich rot markiert habe

1 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.

2 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 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.

4 Out-of-the-Box 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.

5 Positives Feedback

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.

6 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.

7 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.

8 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.

9 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.

10 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.

11 Out-of-the-Box 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.

12 Positives Feedback

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.

13 Out-of-the-Box Design

Klicke an diesem Icon (Pfeil), um wieder nach oben zu gelangen.

Nam erat libero, bibendum in libero tempor, luctus volutpat ligula. Integer fringilla porttitor pretium. Nam erat felis, iaculis id justo ut, ullamcorper feugiat elit. 

14 Positives Feedback

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.

15 Out-of-the-Box 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.

16 Positives Feedback

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.

Bearbeitung der Eingabefelder

Im "Code Editor" habe ich links im Bereich "HTML Editor" die Optionen von 12 auf 16 Elemente (um 4 Ereignisse) erhöht.

Diese sind dann dadurch auch entsprechend an den Block-Einstellungen (Zahnrad) der Timeline wählbar und auch weiterhin am Schalter "Reverse Timeline" von unten nach oben umkehrbar (letztes Ereignis nach oben stellen).

Optionen
Werkzeuge

Timline-Elemente

Im Screenshot unten könnt Ihr die letzten beiden Elemente (15 und 16) der Timeline erkennen. Ihr müsst also entsprechend der Einstellungen bei den Optionen, hier 4 zusätzliche, diese Elemente auch kopieren und bei diesen dann die korrekte Zahl zur Variable timelinesAmount an 3 Stellen äquivalent erhöhen. Es gibt etliche verschiedene Timeline-Blöcke von Mobirise und diese Einstellungen können daher abweichen.

Da hier diese Elemente wechselseitig mal links und rechts stehen, müsst Ihr auf die richtige Anwendung der class="reverse" achten, die Ihr im Screenshot gleich am obersten <div> erkennen könnt. Die class="reverse" steht also immer nur an jedem zweiten Element, sodass dieser Wechsel von links und rechts erzielt wird.

Timeline

Bootstrap Fader

Unten ein selbst erstellter Fader mit Bootstrap 4 Klassen.
Bildwechsel hier nach 8 Sekunden. Mausüber stoppt den Fader.
Hier noch ein Beispiel in Verbindung mit einem Textblock.

https://getbootstrap.com/docs/4.1/components/carousel/

Ich habe diesen Code in einen einfachen Textblock der Kategorie "Article" eingefügt

Hier habe ich mit diesen Bootstrap-Klassen:

<div class="carousel-caption d-none d-md-block">

den Text am Handy ausgeblendet.


Weiterhin habe ich zusätzlich die kleinen Balken zur Anzeige des Indikators am Smartphone bis 768px Displaybreite entfernt, indem ich noch die class="carousel-indicators" ausgeblendet habe. Diese Media-Anweisung habe ich in den Bereich "CSS Editor" von meinem Fader-Block kopiert.

@media (max-width: 768px) {
    .carousel-indicators { 
        display: none; 
    } 
}


Alleine die Bootstrap class="carousel-fade" macht hier aus einem Slider einen Fader. Entfernt diese Class, um einen Slider darzustellen. Die class="carousel-fade" könnte man bei jedem Mobirise-Slider, der nicht als Plugin eingefügt wurde, auch im "Code Editor" hinzufügen, um diesen zu einem Fader zu machen. Hier ein Beispiel mit diesem Umbau eines Slider-Blocks zu einem Fader aus dem Thema "ModernM4".

Wer keinen Text auf den Bildern anzeigen möchte, der kann diesen Bereich - unten im Code fett markiert - an jedem Bild auch entfernen.

Das Intervall des automatischen Bildwechsels steht per Bootsrap-Default auf 5 Sekunden. Hier habe ich dieses Intervall über das Bootstrap-Attribut data-interval="8000" somit auf 8 Sekunden geändert.

<!-- Beginn eigener Bootstrap Fader -->
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-interval="8000" data-ride="carousel"> 
  <ol class="carousel-indicators"> 
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
    <li data-target="#carouselExampleIndicators" data-slide-to="1" class></li> 
    <li data-target="#carouselExampleIndicators" data-slide-to="2" class></li> 
  </ol> 
  <div class="carousel-inner"> 
    <div class="carousel-item active"> 
      <img class="d-block w-100" src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild1.jpg" alt="Bilder"> 
         <div class="carousel-caption d-none d-md-block"> 
            <h5>Schmetterlinge</h5> 
            <p>Das ist ein händisch eingefügter Text</p> 
         </div> 
    </div> 
    <div class="carousel-item"> 
      <img class="d-block w-100" src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild2.jpg"> 
         <div class="carousel-caption d-none d-md-block"> 
            <h5>Mohn</h5> 
            <p>Das ist ein händisch eingefügter Text</p> 
         </div>                       
    </div> 
    <div class="carousel-item"> 
      <img class="d-block w-100" src="http://www.mobirise-tutorials.com/Testseiten/Testseite3/assets/images/Bild3.jpg"> 
         <div class="carousel-caption d-none d-md-block"> 
            <h5>Trollblume</h5> 
            <p>Das ist ein händisch eingefügter Text</p> 
         </div> 
    </div> 
  </div> 
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
    <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
  </a> 
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
  </a> 
</div> 
<!-- Ende eigener Bootstrap Fader -->


Für die Dauer des Fade-Effekts habe ich hier noch folgende zusätzliche CSS in den Bereich "CSS Editor" des Blocks eingetragen, die diese Dauer von 0.6 auf 3 Sekunden erhöht:

.carousel-fade .carousel-item {
  transition-duration: 3.0s;
}


Bemerkung:

Das Intervall des automatischen Bildwechsels habe ich oben bereits  mit dem Bootstrap-Attribut data-interval="8000" auf 8 Sekunden geändert. Alternativ könntet Ihr dieses JavaSkript auch in den Seiteneinstellungen in den Bereich "End of <body> code" verwenden:

<!-- Intervall vom Slider / Fader - hier 8 Sekunden -->
<script> 
    $('.carousel').carousel({ 
      interval: 8000 
    }) 
</script> 


Bootstrap Grid System

Hier habe ich beispielhaft das Grid-System, das immer auf 12 Spalten aufbaut, auf 7 Spalten geändert.

Bootstrap Grid-System

Grid System 12 Spalten

Sp. 1
Sp. 2
Sp. 3
Sp. 4
Sp. 5
Sp. 6
Sp. 7
Sp. 8
Sp. 9
Sp. 10
Sp. 11
Sp. 12


Grid System 7 Spalten

Sp. 1
Sp. 2
Sp. 3
Sp. 4
Sp. 5
Sp. 6
Sp. 7

Hier habe ich dem Grid 7 Spalten gegeben und diesen Spalten meine class="meineBreite". Somit habe ich die 100% Breite, die sonst für 12 Spalten verwendet wird, durch 7 geteilt. 100 / 7 = 14.2857. Am Smartphone (767px Displaybreite) habe ich dann wieder über eine Media-Abfrage auf 100% gestellt, damit die Spalten untereinander ausgerichtet werden, da diese sonst zu dicht aneinander stehen würden.

.meineBreite {
  padding-left: 15px;
  width: 14.2857%;
}
@media (max-width: 767px) {
  .meineBreite {
    width: 100%;
  }
}

Ich habe also dann die Bootstrap class="col-md-1" für 1 Spalte durch meine class="meineBreite" ersetzt:

<div>
  <div class="meineBreite">Sp. 1</div>
  <div class="meineBreite">Sp. 2</div>
  <div class="meineBreite">Sp. 3</div>
  <div class="meineBreite">Sp. 4</div>
  <div class="meineBreite">Sp. 5</div>
  <div class="meineBreite">Sp. 6</div>
  <div class="meineBreite">Sp. 7</div>
</div>

Dieser Block besteht hier aus 2 Spalten. Diese Spalten stehen bis zu einer Display-Größe >=768 px nebeneinander und werden an einem kleinen Display untereinander platziert sein.

Das entspricht der Bootstrap class="col-md-6", die dementsprechend jeweils 6 der 12 Spalten verwendet.

Lorem ipsum dolor sit amet Massa sed hac pede consectetuer wisi et semper ante vel vitae ante ligula hendrerit tortor tempus libero dolor Vivamus risus et accumsan In Aenean metus.

Vestibulum et volutpat Aliquam pulvinar ac mauris nibh sapien auctor turpis iaculis habitant consectetuer nunc et at mi tincidunt tellus Phasellus wisi quis Nulla laoreet.

CSS Column Count


Unten noch ein Beispiel mit der CSS Eigenschaft "Column Count", der ich hier 3 Spalten gegeben habe. Diese Spalten werden fortlaufend beschrieben, sodass sich der Text über alle Spalten verteilt.

Damit das am kleinen Display vom Smartphone keine drei Mini-Spalten ergibt, habe ich noch eine Media-Anweisung gesetzt:

.newspaper { 
  column-count: 3;
  column-gap: 2em;

@media (max-width: 768px) { 
  .newspaper { 
    column-count: 1; 
  } 
}

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloss eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie her käme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder missbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen sie es immer noch.

Horizontale Fortschrittsbalken mit Text-Block

Hier händisch auf 2 Dezimalstellen geändert

Fortschrittsbalken

Hier habe ich den Wert händisch im "Code Editor" auf zwei Dezimalstellen geändert.

Hier also step von 1 auf .01 und den Wert (value) direkt eingetragen.

<input type="range" inline title="Fortschritt 1" name="progress1" min="0" max="100" step=".01" value="36.56">

Bequemlichkeit

%

Öffentlicher Verkehr

%

Nachtleben

%

Erstellen Sie Ihre eigene Website mit ein paar Klicks.

Hier wurden 3 <div> verschachtelt mit jeweils einer Border und einem höheren z-index.

Klicke auf das Bild für vergrößerte Ansicht

CSS:

.border1 {
border: 3px solid red;
padding: 1.0rem;
z-index: 100;
}
.border2 {
border: 2px solid blue;
padding: 1.0rem;
z-index: 101;
}
.border3 {
border: 2px solid black;
padding: 1.0rem;
z-index: 102;
}

Responsive

Mobile-freundlich


© Copyright Mobirise-Tutorials.com
Datenschutz und Impressum