Mobirise Galerie

Hier eine CSS Anpassung der Mobirise Lightbox Galerie und eines Sliders

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.

Mobirise

Graphic Design

Mobirise

Art Design

Mobirise

Graphic Design

Mobirise

Art Design

Mobirise

Art Design

Mobirise

Graphic Design

Mobirise

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>

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

Instagram Feed

maximal 12 der neuesten Fotos können angezeigt werden

siehe auch hier

SnapWidget

Alternatives Widget als Test. Für eine Gebühr von z.Zt. ca. EUR 6.00 kann auch auf Instagram verlinkt werden.



© Copyright Mobirise-Tutorials.com
Datenschutz und Impressum

Create your own web page with Mobirise