Mobirise Tutorials

Cards and more

Anwendungen Translate

Test Blöcke

  1. Twitter Icon
    Das neue Icon in SVG
  2. Cards
    Cards mit immer der gleichen Höhe
  3. Tabs
    horizontale Tabs
  4. Tabelle 1
    Tabelle über Buttons sortieren
  5. Tabelle 2
    Tabelle über Tabellen-Kopf sortieren
  6. Lottie Files
    Animationen mir dem Grafikformat "Lottie"
  7. Video im Popup
    Video startet im Popup automatisch mit separatem Klick Sound
  8. Google Maps
    Klicke auf den Link um Google Maps im Popup zu öffnen

Social Media Icons

Neues  Twitter Icon

nach oben 

Mobirise hat das neue Icon mit einem Update auf v5.9.18 vom 19.04.2024 hinzugefügt.

Bei fontawesome.com könnt ihr nach Icons suchen. Hier habe ich den dort angegebenen SVG (Scalable Vector Graphics) Code verwendet und anstelle des alten Twitter Symbols  eingefügt:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg>


Ihr ersetzt / entfernt damit also das <span> Tag unten mit dem alten Icon-Namen:

<span mbr-icon class="socicon-twitter socicon"></span>


Hier noch meine CSS, die ihr nach euren Bedürfnissen anpassen müsst:

svg {
  width: auto;
  height: 32px;
  margin-bottom: 10px;
  fill: white;
}
svg:hover {
  fill: white;
}

Cards

nach oben 

Diese Cards wurden mit etwas CSS bearbeitet

Unten Block aus dem Thema "CinemaM5"

Landkreis Nirgendwo
Fliesenleger

Kachelweg 10
12345 Mörtel
Tel.: 0123 456 78 90
info@example.com
www.example.com

Wir bieten:
✔️ Ausbildung
❌ Praktikum


👤 Ansprechpartner Frau Gehörlos

Stellenanzeige PDF

Team

Diese Karte wurde nicht bearbeitet. Nur ein anderer Button der am Smartphone zentriert ist.

Die Höhe dieser Karten ist aber immer gleich, die Karten von diesem Block passen sich der höchsten Karte mit dem meisten Inhalt an.

Read more

Company

Consequatur dignissimos dolor doloremque earum esse eum excepturi fuga id modi nam nisi perspiciatis quasi qui similique suscipit.

Read more

Unten Block aus dem Thema "MissionM5"

Landkreis Nirgendwo

Fliesenleger

Kachelweg 10
12345 Mörtel
Tel.: 0123 456 78 90
info@example.com
www.example.com


Wir bieten:
✔️  Ausbildung
❌  Praktikum



👤  Ansprechpartner Frau Gehörlos

Stellenanzeige PDF

Landkreis Unterfelden

Maurer

Kachelweg 10
12345 Mörtel
Tel.: 0123 456 78 91
info@example.com
www.example.com


Wir bieten:
❌  Ausbildung
✔️  Praktikum



👤  Ansprechpartner Herr Gehörlos

Stellenanzeige PDF

Default

Diese Karte wurde nicht bearbeitet. Die Höhe dieser Karten ist aber unterschiedlich, abhängig vom Inhalt.

Read more

EstateM5 Block

nach oben 

Temporärer Test der horizontalen Tabs im Standard Thema Mobirise5. Funktioniert in allen M5 Themen.
Bugs: in last Tab 2024 CSS is missing

Beim Einfügen von einem zusätzliche Tab #6 (2024) fehlt die CSS, sodass das Bild über dem Text steht. 

Man kann das selbst ändern, indem man z.B. den Code vom Tab zuvor kopiert und dort einfügt. Hier habe ich es als Demo so gelassen.

Incididunt occaecat enim non exercitation aliqua cupidatat esse ad. Tempor magna ut Lorem voluptate cupidatat tempor Lorem. Officia aute velit enim duis pariatur aliqua Lorem proident. Sunt reprehenderit est laboris ut culpa ea minim elit nulla. Incididunt nisi voluptate enim exercitation voluptate incididunt est ad et in aliquip.

Aliquip ut amet adipisicing excepteur commodo officia mollit reprehenderit ex proident qui consequat amet sint. Quis amet officia consequat irure. Velit pariatur esse ad Lorem amet non reprehenderit commodo cupidatat ut duis. Sunt qui et qui ad id esse qui non deserunt anim dolor.

Consequat cillum laborum tempor minim culpa minim. Ipsum incididunt ex officia aute exercitation officia deserunt voluptate. Proident aliqua commodo qui nulla.

Aliquip ut tempor magna laboris commodo cillum. Veniam pariatur qui minim quis culpa magna id. Non veniam ut tempor eu commodo Lorem ex et tempor et aliquip.


When inserting an additional tab #6, the CSS for layout is missing, so the image is above the text.

Tabelle 1

nach oben 

zur Tabelle 2

Hier habe ich noch ein JavaScript von "W3Schools" zum Sortieren hinzugefügt.

# Vorname Name Alter Stadt Postleitzahl Strasse
1 Mark Williams 67 New York 10004 Broadway
2 Jacob Thornton 24 Boston 02108 Main Street
3 Ludwig Neumann 39 Berlin 12161 Rheinstrasse
4 Hubert Schulze 45 München 81671 Bad-Schachener-Strasse
5 Max Mustermann 39 Dresden 01067 Neumarkt
6 Michelle Peronet 18 Paris 75018 Rue Marcadet
Sortiere Name Unsortiert

Eigene Bootstrap5 Tabelle

Bemerkungen zum Beispiel dieser eigenen, ganz einfachen Bootstrap5 Tabelle oben.

Der Tabellen-Generator von Werner-Zenk.de kann dabei eine große Hilfe sein, auch wenn diesem noch die Bootstrap-Klassen fehlen.

Diese Tabelle trägt an einem äußeren <div> die Bootstrap class="table-responsive", damit die Tabelle auch am Smartphone horizontal scrollbar ist und nicht zu eng zusammengeschoben wird. Also vom Schema dann so:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>


Damit die Tabelle auf der Arbeitsseite editierbar ist, müssen die Tags <thead> und <tbody> noch das Attribut "mbr-text" erhalten, also dann so:

<thead mbr-text>


Damit die Worte nicht umbrechen habe ich noch diese CSS im "Code Editor" im Bereich "CSS Editor" hinzugefügt:

thead, tbody {
  white-space: nowrap;
}


Um die Tabelle mit dem JavaScript sortieren zu können, muss diese eine ID erhalten auf die im Script verwiesen wird:

<table id="myTable" class="table table-striped table-hover">


Hier das JavaScript, dass in den Seiteneinstellungen in den Bereich "Ende of <body> code" gehört. Die zu sortierende Spalte könnt ihr mit 0 (erste Spalte) oder 1 (zweite Spalte) usw. hier eintragen:

getElementsByTagName("TD")[1]


<!-- Script sort table -->
<script>
function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[1];
      y = rows[i + 1].getElementsByTagName("TD")[1];
      //check if the two rows should switch place:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}
</script>


Dem Button zum Sortieren habe ich mit "onclick" dann die Funktion sortTable() vom JavaScript oben zugewiesen:

<button onclick="sortTable()">Sort</button>

Tabelle 2

nach oben 

zur Tabelle 1

Hier habe ich ein JavaScript von "j-berkemeier.de" zum Sortieren aller Spalten hinzugefügt.

# Vorname Name Alter Stadt Postleitzahl Strasse
1 Mark Williams 67 New York 10004 Broadway
2 Jacob Thornton 24 Boston 02108 Main Street
3 Ludwig Neumann 39 Berlin 12161 Rheinstrasse
4 Hubert Schulze 45 München 81671 Bad-Schachener-Strasse
5 Max Mustermann 39 Dresden 01067 Neumarkt
6 Michelle Peronet 18 Paris 75018 Rue Marcadet

Tabelle alle Spalten sortieren

Hier geht es zu meinem endgültigen Tutorial zu diesem Tabellen-Beispiel.

Bemerkungen zum Beispiel dieser eigenen, ganz einfachen Bootstrap5 Tabelle oben.

Der Tabellen-Generator von Werner-Zenk.de kann dabei eine große Hilfe sein, auch wenn diesem die Bootstrap-Klassen fehlen.

Diese Tabelle trägt an einem äußeren <div> die Bootstrap class="table-responsive", damit die Tabelle auch am Smartphone horizontal scrollbar ist und nicht zu eng zusammengeschoben wird. Also vom Schema dann so:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>


Damit die Tabelle auf der Arbeitsseite editierbar ist, müssen die Tags <thead> und <tbody> noch das Attribut "mbr-text" erhalten, also dann so:

<thead mbr-text>


Damit die Worte nicht umbrechen habe ich noch diese CSS im "Code Editor" im Bereich "CSS Editor" hinzugefügt:

thead, tbody {
  white-space: nowrap;
}


Vielen Dank an dieser Stelle an Jürgen für dieses großartige Script. Das Script darf frei verwendet werden auch ohne eine Erwähnung, über einen Hinweis zu seiner Seite "j-berkemeier.de" wäre er aber natürlich immer dankbar.

Um die Tabelle wie oben sortieren zu können, könnt ihr die JavaScript Datei "TableSort.js"  (v10.11 vom 18.07.2023) hier mit der rechten Maustaste downloaden ("speichern unter") oder diese natürlich auch beim Author "j-berkemeier.de" herunterladen.

Ich habe diese Datei hier in ein Verzeichnis "tablesort" kopiert und das in meinem lokalen Projektverzeichnis und auf den Server kopiert. Schreibt den Verweis zu dieser JavaScript Datei dann in den Seiteneinstellungen in den Bereich "End of <body> code":

<script src="./tablesort/TableSort.js"></script>


Gebt nun der Tabelle noch zusätzlich die class="sortierbar", die im JavaScript gegründet wird. Gebt ebenso jeder sortierbaren Spalte im Table-Head diese class="sortierbar". Nun kann durch Klick auf jede Header-Überschrift die Spalte sortiert werden.

Der Spalte "Name" habe ich hier zusätzlich die class="sortiere" gegeben, so wird diese Spalte mit dem Aufruf der Seite bereits vorsortiert und dort auch der Pfeil aufsteigend △ bereits hervorgehoben angezeigt. Damit ist es zum Beispiel auch möglich, die neuesten Einträge in einer Tabelle immer ganz oben anzuzeigen.

<table id="myTable2" class="table table-striped table-hover sortierbar">
  <thead mbr-text>
    <tr>
      <th class="sortierbar" scope="col">#</th>
      <th class="sortierbar" scope="col">Vorname</th>
      <th class="sortierbar sortiere" scope="col">Name</th>
      <th class="sortierbar" scope="col">Alter</th>
      <th class="sortierbar" scope="col">Stadt</th>
      <th class="sortierbar" scope="col">Postleitzahl</th>
      <th class="sortierbar" scope="col">Strasse</th>
    </tr>
  </thead>
  ...


Wer will, kann dann auch noch den Sortierpfeilen eine andere Farbe geben und diese CSS in den "CSS Editor" des Blocks schreiben, hier z.B.:

.sortsymbol svg {
  color: #6ec7f2;
}

LottieFiles

nach oben 

Hier ein Test mit animierten "LottieFiles". Hier könnt ihr fertig erstellte Animationen direkt downloaden:

https://lottiefiles.com/

Weitere Infos über das vektorbasierte Grafikformat "Lottie" bei Wikipedia.



Hier ist mein Code als Beispiel. Diesen Code fügt ihr an der Stelle des Blocks ein, wo die Animation angezeigt werden soll:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://lottie.host/c73f50ae-9003-405b-b5ba-a713b02ce87e/JoUEvie9NA.json" background="##FFFFFF" speed="1" style="width: 300px; height: 300px" loop autoplay direction="1" mode="normal"></lottie-player>

Video Popup

nach oben 

The pop-up video only worked after I turned off “publish changes only”.

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren