Mobirise Galerie

Hier eine CSS Anpassung der Mobirise Lightbox Galerie und eines Sliders

Versteckter Block  

Der Inhalt von diesem Block wird ab einer Scroll-Position von 400px eingeblendet.
Beim Hochscrollen wird er ab der gleichen Position wieder ausgeblendet.
Der Block wird, außer am Smartphone, oben fixiert.

Mobirise Galerie

Hier habe ich im "Code Editor" im Bereich "CSS Editor" CSS-Änderungen vorgenommen,
wie runde Ecken oben, andere Caption-Farbe und Schrift zentriert, zusätzliche Border.

Sämtliche Anpassungen wurden hier im Bereich "CSS Editor" des Galerie-Blocks vorgenommen.
Siehe meine CSS Änderungen unten.

CSS Anpassungen der Galerie oben


In diese beiden Klassen für den Container habe ich runde Ecken oben und wegen dieser auch den Hintergrund schwarz gemacht eingetragen:

.mbr-gallery-item > div::before { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background: @overlayColor; 
  opacity: 0; 
  border-top-left-radius: 25px; 
  border-top-right-radius: 25px; 
  -webkit-transition: 0.2s opacity ease-in-out; 
  transition: 0.2s opacity ease-in-out; 
  & when (@gradOverlay) { 
    background: linear-gradient(to left, @overlayColor, @overlayColor2) !important; 
  } 

.mbr-gallery-item > div {
  background: #000; 
}

.mbr-gallery-item > div:hover {
   background-color: #000;
   .mbr-gallery-title::before { 
    background: transparent !important; 
  } 
  &:before { 
    opacity: @overlayOpacity !important; 
    border-top-left-radius: 25px; 
    border-top-right-radius: 25px; 
  } 
}


In dieser Klasse die Caption-Titel in gelb und zentriert geändert:

.mbr-gallery-title {
  color: yellow; 
  text-align: center;
}


... und zusätzlich den Selektor "img" (Bild) mit diesen Anweisungen versehen, also auch runde Ecken oben und eine Border hinzugefügt:

img { 
  border-top-left-radius: 25px; 
  border-top-right-radius: 25px; 
  border: 2px solid #fff; 
}


... weiterhin habe ich zusätzlich die Klasse für das Icon der Lupe in die Farbe Gelb geändert und hinzugefügt:

.icon-focus {
  color: yellow; 
}


Die Farbe der Overlays kann man direkt am Zahnrad in den Blockeinstellungen wählen.

Mobirise Slider

Hier habe ich im "Code Editor" im Bereich "CSS Editor" CSS-Änderungen vorgenommen.
Die Höhe der Bilder am mobilen Gerät auf "cover" (bedeckt) umgestellt,
da diese mit v5.x von Mobirise in der Höhe verzerrt dargestellt wurden.

Weiterhin habe ich den Pfeilen der class="carousel-control" andere Farben, Größen und Positionen gegeben
und auch die Icons mit anderen Symbolen aus der riesen Sammlung der Mobirise-Icons ersetzt.

Sämtliche Anpassungen wurden hier im Bereich "CSS Editor" des Slider-Blocks vorgenommen.
Siehe meine CSS Änderungen unten.

Änderungen an der CSS vom Slider oben

Hier habe ich den CSS-Klassen vom Slider-Container und vom Bild noch die Eigenschaft "cover" (bedeckt) gegeben:

.container img {
  width: 100%; 
  object-fit: cover; 
}

... und Positionen der Pfeile zur Navigation sowie deren Größe und Farbe verändert:

  .carousel-control {
    top: 50%; 
    width: 40px; 
    height: 40px; 
    margin-top: 9.0rem; 
    background-color: rgba(0, 0, 0, 0.5); 
    border: 2px solid red; 
    color: yellow; 
    border-radius: 50%; 
    transition: all .3s; 
    z-index: 11; 
    &.carousel-control-prev { 
      left: 0; 
      margin-left: 0.5rem; 
    } 
    &.carousel-control-next { 
      right: 0; 
      margin-right: 0.5rem; 
    } 
    .mbr-iconfont { 
      font-size: 1.0rem; 
    }

... und die Icons in diese gedrehten Pfeile geändert:

.mbri-left:before {
    content: "\e995"; 

.mbri-right:before {
    content: "\e994"; 


Ich suche mir solche Icons gerne, indem ich z.B. einem Button temporär ein solches Icon am Werkzeuge-Symbol der Sonne ("Insert Icon") gebe. Dort kann ich dann alle Symbole am Icon-Editor von Mobirise betrachten, wie z.B.    mit der Bezeichnung "mbri-undo".

Die Bezeichnungen dazu findet Ihr dann in den entsprechenden CSS Dateien.

Beispiel


Slider


aus dem Thema Modern M4 hier als "User Block" eingefügt.

Hier werden die Bilder am mobilen Gerät einzeln und proportional verkleinert dargestellt.

Man kann die gleichzeitig sichtbaren Bilder zwischen 1 und 6 Bildern wählen, hier drei Bilder. Diese Option könnte man aber auch händisch auf beliebig viele Bilder erhöhen.

Galerie mit Lightbox

Diese Galerie kann in Kategorien sortiert werden. Die Beschriftung wird in den Zahnrad-Werkzeugen dieser Galerie vorgenommen und jedem Foto zugeordnet.

Nachteil ist, dass alle Fotos zunächst die gleiche Größe haben sollten wie in meiner Galerie oben, was hier nicht der Fall ist.

Entfernen von einem DIV Container 

Natürlich kann man mit dem "Code Editor" jede nur denkbare Änderung vornehmen, wie man an den beiden Blöcken unten erkennen kann. Hier habe ich lediglich einen DIV Container vom letzten Bild händisch entfernt und so bleiben anstatt 4 Bildern eben nur 3 Bilder stehen.

Ich habe dieses entfernte DIV im Screenshot unten markiert.

Graphic Design

Art Design

Graphic Design

Art Design

Art Design

Graphic Design

Art Design

Code

Eigenes Video

HTML5 Tag anstelle vom Iframe im Video-Block eingetragen
und das  <div mbr-video=""> entfernt

<div class="video-block" mbr-style="{'width':videoSize+'%'}">

        <video id="Unterwasser" width="100%" controls="controls" loop="loop">

            <source src="https://www.mobirise-tutorials.com/BusinessM4/Videos/tauchen.mp4" type="video/mp4">

            Dieses HTML5 Video wird von Deinem Browser nicht unterstützt.

        </video>

</div>

Foto Galerie

Beispiel einer Fotogalerie aus dem Thema "MarketM4".
Diese Galerie funktioniert mit der neuen Mobirise v5.4.1 im Standard-Thema "Mobirise5" bisher nicht.

Vertical tabs with images

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem laudantium in adipisci ipsa optio quas id excepturi non, eos cupiditate, necessitatibus sapiente illo error. Vero adipisci quidem aut itaque labore.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem laudantium in adipisci ipsa optio quas id excepturi non, eos cupiditate, necessitatibus sapiente illo error. Vero adipisci quidem aut itaque labore.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem laudantium in adipisci ipsa optio quas id excepturi non, eos cupiditate, necessitatibus sapiente illo error. Vero adipisci quidem aut itaque labore.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem laudantium in adipisci ipsa optio quas id excepturi non, eos cupiditate, necessitatibus sapiente illo error. Vero adipisci quidem aut itaque labore.

Instagram

Embedded Code aus Instagram eingetragen

Sieh dir diesen Beitrag auf Instagram an

Heute im Garten, Oleander

Ein Beitrag geteilt von Thomas Frei-Herrmann (@thomasfreiherrmann) am

SnapWidget

Alternatives Widget für die Mobirise Erweiterung. Für eine Gebühr von z.Zt. ca. EUR 6.00 kann auch auf Instagram verlinkt werden.

Bitte guckt auch hier.



© Copyright Mobirise-Tutorials.com
Datenschutz und Impressum