Na ja - fast schon richtig
Moin,
also - da musste ich noch allerhand umbauen (bin inzwischen aus "Bootstrap4" etwas raus gekommen).
Hier habe ich das mal in eine meiner "Mobirise4" Testseiten eingebaut, um zu kontrollieren ob es auch funktioniert (ganz unten):
https://www.mobirise-tutorials.com/Test ... ontent1-8i
Mache mal jetzt Folgendes:
Ich habe also einen
einfachen Textblock aus dem Standard-Thema "Mobirise4" verwendet:
Zunächst habe ich diesen Textblock an den Block-Werkzeugen (Zahnrad) auf die
volle Breite für den Inhalt "Width Content" geschoben. Das reicht aber nicht, denn da bleibt noch ein mächtiger Rand links und rechts, was ich weiter unten erkläre.
Gucke bitte unten im Screenshot vom "Code Editor", was ich alles aus dem Block gelöscht habe. Es bleibt also nur nach den Mobirise-Parametern zwei <div> stehen, natürlich müssen die zwei dazugehörenden schließenden </div> und auch das schließende </section> Tag ganz unten auch stehen bleiben.
... wobei ich dem oberen <div> "container" den Zusatz "fluid" (volle Breite) gegeben habe, also so:
<div class="container-fluid">
Dann bleibt aber immer noch ein Default-Rand ("padding") von jeweils 16px links und rechts, den ich noch auf 0 setze. Das beschreibe ich weiter unten in der CSS.
Kopiere dann diesen
gesamten Code in den "Code Editor". Damit Du nichts falsch machen kannst, kopiere ich hier den gesamten Code des Blocks her - lösche also alles und ersetze alles mit diesem Code:
Code: Alles auswählen
<section class="mbr-section article content1">
<mbr-parameters>
<!-- Block parameters controls (Blue "Gear" panel) -->
<input type="range" inline title="Oben" name="paddingTop" min="0" max="8" step="1" value="0">
<input type="range" inline title="Unten" name="paddingBottom" min="0" max="8" step="1" value="0">
<input type="range" inline title="Width Content" name="widthContent" min="1" max="4" step="1" value="4">
<input type="color" title="Hintergrundfarbe" name="bgColor" value="#ffffff">
<!-- End block parameters -->
</mbr-parameters>
<div class="container-fluid">
<div class="media-container-row topphone">
<!-- Beginn eigener Slider Full Width mit Caption -->
<div id="carouselExampleIndicators" class="carousel slide" data-pause="false" 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" data-interval="5000">
<img class="d-block w-100" src="http://www.online2web.de/assets/images/01 handshake angepasst.png">
<div class="carousel-caption d-none d-md-block">
<h2>Willkommen</h2>
<h3>Lorem Ipsum</h3>
<br>
<p>Einfacher Text könnte hier stehen<br>und noch eine Zeile.</p>
</div>
</div>
<div class="carousel-item" data-interval="5000">
<img class="d-block w-100" src="http://www.online2web.de/assets/images/02 arbeit angepasst.png">
<div class="carousel-caption d-none d-md-block">
<h2>Arbeit</h2>
<h3>Lorem Ipsum</h3>
<br>
<p>Einfacher Text könnte hier stehen<br>und noch eine Zeile.</p>
</div>
</div>
<div class="carousel-item" data-interval="5000">
<img class="d-block w-100" src="http://www.online2web.de/assets/images/03 liege angepasst.png">
<div class="carousel-caption d-none d-md-block">
<h2>Liege</h2>
<h3>Lorem Ipsum</h3>
<br>
<p>Einfacher Text könnte hier stehen<br>und noch eine Zeile.</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 Slider Full Width mit Caption -->
</div>
</div>
</section>
Falls Du möchtest, dass der Slider bei Mausüber
anhält, musst Du dieses
Data-Attribut in der obersten Zeile von meinem Slider-Code wegglassen:
data-pause="false"
Ich habe dort jetzt ein
<h2> ein
<h3> und ein
<p> Tag beispielhaft für den Text eingetragen. Das kannst Du alles ändern oder auch farblich anpassen. Eventuell auch eine leicht transparente Fläche hinter die Schrift legen, wie in zwei (von vier) Bildern von
meinem Slider.
Wenn dazu Fragen sind, stelle diese. Ich will jetzt nicht mehr schreiben als Du vielleicht brauchst.
Hier noch meine
zusätzliche CSS für den Bereich "CSS Editor" (rechts).
Ich habe das jetzt mit Slash/Stern Zeichen
/* kommentiert */, das löscht Mobirise beim Speichern vom Block, Du kannst das also mit rein kopieren:
Code: Alles auswählen
/* hier wird durch das "padding" der Rand auf 0 gesetzt und ein eventueller Überlauf verhindert */
.container-fluid {
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
}
/* hier positioniere ich die Beschriftung vertikal mittig (anstatt unten) */
.carousel-caption {
top: 50%;
transform: translateY(-50%);
padding-top: 50px;
}
/* hier gebe ich dem h2 Tag etwas CSS, eine Größe von 3rem und fett */
h2 {
font-size: 3rem;
font-weight: bold;
}
/* Hier setze ich eine Media-Abfrage auf 767px Breite und gebe der "row" 80px Abstand nach oben, wenn der Block
als Header-Block ganz oben sitzt, damit das kleine Bild nicht zum Teil hinter der Navi verschwindet. Diese Höhe eventuell dann anpassen */
@media (max-width: 767px) {
.topphone {
padding-top: 80px;
}
/* Hier schalte ich die Beschriftung bis 767px Breite aus, da diese nicht auf das kleine Bild am Handy passen würde */
.carousel-indicators {
display: none;
}
}
Du könntest (und musst) eventuell noch die gewünschte Schrift in der CSS vom Slider-Block hinzufügen:
Hier noch eine Ansicht vom "Code Editor":