build your own website for free

Testen

Fake Seite zum Testen und Beenden

Test Skript Tabs

Klicke unten auf einen der beiden Links um den Anker mit dem
jeweils aktiven Tab und Button dazu zu öffnen.

Anker zum Block "Tabs und Media" Tab1

Anker zum Block "Tabs und Media" Tab2

Tiger

CSS Clip Path Beispiel
                     
Klicken Sie auf den Text, um ihn zu bearbeiten. Wählen
Sie den Text, um einen Link einzufügen. Klicken Sie auf den
blauen Zahnrad-Button in der rechten oberen Ecke,
um Buttons, Text, Titel zu verbergen/anzuzeigen und den
Hintergrund des Blocks zu ändern. Klicken Sie auf den roten "+" Button in der rechten unteren Ecke, um einen neuen Block hinzuzufügen. Benutzen Sie das Menu oben rechts, um neue Seiten zu erstellen und Themes hinzuzufügen.

Welcome to Form Builder


Height 25%
Height 50%
Height 75%
Height 100%

Bug on v4.10.1.

As soon as I add the second gallery below, the first gallery does show all pictures in the Lightbox-Slider in the wrong size.

Only clicked images will show in the correct size.

Bug fixed with v4.10.2 and theme updates

Preise rechtsbündig:

Siehe auch hier

<p>01. Insalata Mista -gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln<span style="float: right;"><b>7,50 €</b></span></p>

01. Insalata Mista -gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln7,50 €

02. Chicken Walnut Salat, verschiedene Blattsalate mit kalten Hähnchenbruststreifen, Walnüssen und Apfelspalten12,50 €

03. Ensalada de la Casa, riesige Tacoschale gefüllt mit Blattsalat, Mais, Tomaten, Gurken, Paprika, geriebenen Käse1,50 €

Tab 1


Darstellung mit dem Skript von Werner-Zenk.de


Seiten, die mit Mobirise gemacht werden, sind zu 100% mobilfreundlich und entsprechen den neusten Google Tests. Google selber sagt, dass sie die Webseiten mögen. (offiziell)!

Responsiv Kreativ

nach oben zur Tab-Auswahl


Das JavaScript gehört in die Seiteneinstellungen "Inside <head> code":


<script>
    function buttonAnklicken(btn, status) { 

      // Die Objekte (Texte) werden versteckt 
     document.getElementById("btn_1").style.display = "none"; 
     document.getElementById("btn_2").style.display = "none"; 

      // Das ausgewählte Objekt wird angezeigt 
     document.getElementById(btn).style.display = "block"; 

     // Von "button1" und "button2" wird die CSS-Klasse: "aktiv" entfernt 
     document.getElementById("button1").classList.remove("aktiv"); 
     document.getElementById("button2").classList.remove("aktiv"); 

     // Hier wird von der Variable: "btn" (btn_1, btn_2) die Zahl extrahiert 
     var zahl = btn.split("_"); 
      // button1" oder button2" wird jetzt die CSS-Klasse: "aktiv" hinzugefügt 
     document.getElementById("button" + zahl[1]).classList.add("aktiv"); 

     // Hier wird zum Block: "myBlock" gescrollt wenn status = true ist 
     if (status == true) { 
      document.getElementById("myBlock").scrollIntoView({behavior: "smooth", block: "start"}); 
     } 
    } 
</script> 


Unten die CSS zum Skript, die ich in den "Code Editor" in den Bereich "CSS Editor" des zur Anzeige verwendeten einfachen Text-Blocks kopiert habe.


a.button {
  font-family: Verdana, Arial, Sans-Serif; 
  color: #000; 
  text-decoration: None; 
  background: Lightgray; 
  border-radius: 100px !important; 
  padding: 1rem 3rem; 
  margin: 0.4rem .8rem;

.aktiv {
  background: royalblue !important; 
  color: #fff !important; 

div#myBlock {
  padding-top: 50px; 
  margin-bottom: 50px; 

.abstandtext {
  padding-top: 100px; 

@media (max-width: 768px) {
  .button { 
    float: left; 
  } 
}


Unten der komplette Container meiner Tab-Anzeige, den ich in einen einfachen Textblock anstelle des Beispiel-Textes kopiert habe:


<!-- Beginn Script-Einbau eigen -->

<div id="myBlock">
 
    <div id="btn_1"> 
     <h3 class="abstandtext">Tab 1<br>Darstellung mit dem Skript von Werner-Zenk.de</h3><br> 
     <span style="color: blue;">Seiten, die mit Mobirise gemacht werden ...</span> 
    </div> 

    <div id="btn_2" style="display:none"> 
     <h3 class="abstandtext">Tab 2<br>Darstellung mit dem Skript von Werner-Zenk.de</h3><br> 
     <span style="color: red;">Mobirise Themes basieren auf Bootstrap 3 ...</span> 
    </div> 

</div>                

<p> 
    <a href="javascript:buttonAnklicken('btn_1', false)" class="button aktiv" id="button1">Responsiv</a> 
    <a href="javascript:buttonAnklicken('btn_2', false)" class="button" id="button2">Kreativ</a> 
</p> 

<!-- Ende Script-Einbau eigen -->  

Tabs und Media

Original Block von Mobirise

Mobirise

Seiten, die mit Mobirise gemacht werden, sind zu 100% mobilfreundlich und entsprechen den neusten Google Tests. Google selber sagt, dass sie die Webseiten mögen. (offiziell)!

Mobirise Themes basieren auf Bootstrap 3 und Bootstap 4 - den leistungsfähigsten Frameworks. Selbst wenn Sie nicht coden können, können Sie dann zur Bootstrap Familie gehören.

Wählen Sie aus einer großen Auswahl der jüngsten voreingestellten Blocks - Full Screen Intro, Bootstrap Slider, Content Slider, responsive Bildergalerie mit der Lightbox, Parallax Scrolling, Video Hintergründe, mobiles Menü sowie noch viele weitere Dinge.

Seiten, die mit Mobirise gemacht werden, sind zu 100% mobilfreundlich und entsprechen den neusten Google Tests. Google selber sagt, dass sie die Webseiten mögen. (offiziell)!

Mobirise Themes basieren auf Bootstrap 3 und Bootstap 4 - den leistungsfähigsten Frameworks. Selbst wenn Sie nicht coden können, können Sie dann zur Bootstrap Familie gehören.

Wählen Sie aus einer großen Auswahl der jüngsten voreingestellten Blocks - Full Screen Intro, Bootstrap Slider, Content Slider, responsive Bildergalerie mit der Lightbox, Parallax Scrolling, Video Hintergründe, mobiles Menü sowie noch viele weitere Dinge.

Unten die originalen Buttons

Die Buttons unten haben die Bootstrap CSS-Klassen:

<a class="btn btn-primary" href="javascript: void();" >MEHR INFO</a>


Bei dem linken Button habe ich über die class="meinhover" die CSS für 'Hover' (Mausüber) geändert. Dabei muss die Eigenschaft "!important" (wichtig) hinzugefügt werden:

<a class="btn btn-primary meinhover" href="javascript: void();">MEHR INFO</a>

.meinhover.btn-primary:hover {
  color: red !important; 
  background-color: #fff !important; 
}

Mobirise

Bild ohne Editor

Dieses Bild ist das Original.

Das Bild ist 1014 x 562 Pixel bei einer
Dateigröße von 63,96 KB

Mobirise

Bild mit Editor

Dieses Bild ist im Editor nachbearbeitet auf ein 4:3 Format.

Das Bild ist 599 x 499 Pixel bei einer Dateigröße von 29,93 KB

Der Fehler, dass bearbeitete Bilder ein großes .png Format erhalten, wurde mit v4.10.5 behoben.

© Copyright Mobirise-Tutorials.com