Seite 1 von 1
Text im Slider unter das Bild setzen?
Verfasst: Do 18. Jun 2026, 14:49
von inno
Hallo Tommy,
ist es möglich den Text im Slider (
https://gk2tsgshzc.mobirisesite.com/), also Headline und Text unter das Bild zu setzen. Ich verwende das Theme Mobirise 5.
Außerdem sollte der Text in der Mobilversion auch erscheinen - das macht er leider auch nicht!
Das wäre toll, wenn du mir hier helfen könntest.
Viele Grüße, inno
Re: Text im Slider unter das Bild setzen?
Verfasst: Do 18. Jun 2026, 17:42
von Tommy Herrmann
Moin,
leider habe ich heute keine Zeit mehr.
Das geht so ja nicht. Unter dem Block ist ja nichts mehr, der besteht nur genau aus dem Inhalt mit den Bildern.
Man könnte es mit CSS nach unten schieben, dann schiebt man die Schift aber ganz aus dem Slider raus und diese ist nicht mehr sichtbar.
Am Handy kannst Du die Beschriftung sichtbar machen, indem Du diese class="d-md-block" änderst und ganz unten an den CSS Editor schreibst:
Ich kann die weitere Fragen erst morgen beantworten.
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 10:29
von inno
Hallo Tommy, kann man die Schrift / Text nicht unter das Bild setzen. Sie soll ja im Block erhalten bleiben.
Grüße inno
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 10:37
von Volker
ich nix Tommy
Code: Alles auswählen
<section data-bs-version="5.1" class="slider2" group="Sliders & Galleries">
<mbr-parameters>
<input type="id" name="sliderId">
<header>Size</header>
<input type="checkbox" name="fullWidth" title="Full Width" checked>
<input type="range" inline title="Height" name="carouselHeight" min="4" max="12" step="1" value="8">
<input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
<input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
<input type="range" name="textWidth" title="Width" min="4" max="12" step="1" value="10" condition="!fullWidth">
<header>Carousel</header>
<input type="checkbox" title="Fade Effect" name="fade">
<input type="checkbox" title="Autoplay" name="autoplay">
<input type="range" title="Interval" name="interval" min="3" max="10" value="5" step="1" condition="autoplay">
<header>Background</header>
<input type="color" title="Color" name="bgColor" value="#ffffff" selected>
</mbr-parameters>
<div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
<div class="row justify-content-center">
<div class="col-12 col-md-{{textWidth}}" mbr-class="{'col-lg-12':fullWidth}">
<div id="{{sliderId}}" class="carousel slide" mbr-class="{'carousel-fade': fade}" data-bs-ride="{{autoplay ? 'carousel' : false}}" data-bs-interval="{{interval*1000}}">
<div class="carousel-inner">
<div class="carousel-item slider-image item active" data-title="Titel 1" data-text="Text für Slide 1">
<img class="d-block w-100" src="../_images/background3.jpg" alt="Slide 1">
</div>
<div class="carousel-item slider-image item" data-title="Titel 2" data-text="Text für Slide 2">
<img class="d-block w-100" src="../_images/background5.jpg" alt="Slide 2">
</div>
<div class="carousel-item slider-image item" data-title="Titel 3" data-text="Text für Slide 3">
<img class="d-block w-100" src="../_images/background8.jpg" alt="Slide 3">
</div>
</div>
<a class="carousel-control carousel-control-prev" href="#{{sliderId}}" role="button" data-bs-slide="prev">
<span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
</a>
<a class="carousel-control carousel-control-next" href="#{{sliderId}}" role="button" data-bs-slide="next">
<span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
</a>
</div>
<div class="text-slider-content text-center mt-4">
<h5 id="dyn-title" class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 1</b></h5>
<p id="dyn-text" class="mbr-section-text mbr-fonts-style display-7">Text für Slide 1</p>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var slider = document.querySelector('#{{sliderId}}');
var titleEl = document.getElementById('dyn-title');
var textEl = document.getElementById('dyn-text');
slider.addEventListener('slid.bs.carousel', function (e) {
var activeItem = e.relatedTarget;
titleEl.innerHTML = '<b>' + activeItem.getAttribute('data-title') + '</b>';
textEl.innerText = activeItem.getAttribute('data-text');
});
});
</script>
</section>
css:
Code: Alles auswählen
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
@media (min-width: 992px) {
.carousel {
min-height: (@carouselHeight * 100px);
img {
max-height: (@carouselHeight * 100px);
object-fit: contain;
}
}
}
@media (max-width: 991px) and (min-width: 768px) {
.carousel {
min-height: (@carouselHeight * 65px);
img {
max-height: (@carouselHeight * 65px);
object-fit: contain;
}
}
}
@media (max-width: 767px) {
.carousel {
min-height: (@carouselHeight * 55px);
img {
max-height: (@carouselHeight * 55px);
object-fit: contain;
}
}
.carousel-control {
top: auto;
bottom: 1rem;
}
}
.carousel, .carousel-inner {
display: flex;
align-items: center;
}
.item-wrapper {
width: 100%;
}
.carousel-control {
top: 50%;
width: 60px;
height: 60px;
margin-top: -1.5rem;
font-size: 22px;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #fff;
border-radius: 50%;
transition: all 0.3s;
&.carousel-control-prev {
left: 0;
margin-left: 2.5rem;
}
&.carousel-control-next {
right: 0;
margin-right: 2.5rem;
}
}
.carousel-indicators {
position: absolute;
bottom: 0;
margin-bottom: 1.5rem !important;
li {
width: 15px;
height: 15px;
margin: 3px;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #fff;
border-radius: 50%;
opacity: 0.5;
&.active, &:hover {
opacity: 0.9;
}
}
@media (max-width: 768px) {
display: none !important;
}
}
H5 {
color: #e43f3f;
}
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 10:46
von Volker
Und hier die Version wo die Texte auch mit den Crad swechseln
Code: Alles auswählen
<section data-bs-version="5.1" class="slider2" group="Sliders & Galleries">
<mbr-parameters>
<input type="id" name="sliderId">
<header>Size</header>
<input type="checkbox" name="fullWidth" title="Full Width">
<input type="range" inline title="Height" name="carouselHeight" min="4" max="12" step="1" value="8">
<input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
<input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
<input type="range" name="textWidth" title="Width" min="4" max="12" step="1" value="10" condition="!fullWidth">
<header>Carousel</header>
<input type="checkbox" title="Fade Effect" name="fade" checked>
<input type="checkbox" title="Autoplay" name="autoplay">
<input type="range" title="Interval" name="interval" min="3" max="10" value="5" step="1" condition="autoplay">
<header>Background</header>
<input type="color" title="Color" name="bgColor" value="#ffffff" selected>
</mbr-parameters>
<div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
<div class="row justify-content-center">
<div class="col-12 col-md-{{textWidth}}" mbr-class="{'col-lg-12':fullWidth}">
<div id="{{sliderId}}" class="carousel slide" mbr-class="{'carousel-fade': fade}" data-bs-ride="{{autoplay ? 'carousel' : false}}" data-bs-interval="{{interval*1000}}">
<div class="carousel-inner">
<div class="carousel-item slider-image item active">
<img class="d-block w-100" src="../_images/background3.jpg" alt="Slide 1">
<div class="custom-caption">
<h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 1</b></h5>
<p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 1</p>
</div>
</div>
<div class="carousel-item slider-image item">
<img class="d-block w-100" src="../_images/background5.jpg" alt="Slide 2">
<div class="custom-caption">
<h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 2</b></h5>
<p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 2</p>
</div>
</div>
<div class="carousel-item slider-image item">
<img class="d-block w-100" src="../_images/background8.jpg" alt="Slide 3">
<div class="custom-caption">
<h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 3</b></h5>
<p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 3</p>
</div>
</div>
</div>
<a class="carousel-control carousel-control-prev" href="#{{sliderId}}" role="button" data-bs-slide="prev"><span class="mobi-mbri mobi-mbri-arrow-prev"></span></a>
<a class="carousel-control carousel-control-next" href="#{{sliderId}}" role="button" data-bs-slide="next"><span class="mobi-mbri mobi-mbri-arrow-next"></span></a>
</div>
</div>
</div>
</div>
</section>
css:
Code: Alles auswählen
.carousel-item {
display: flex !important;
flex-direction: column;
}
.custom-caption {
width: 100%;
text-align: center;
padding-top: 1.5rem;
padding-bottom: 1rem;
color: inherit;
}
.carousel-inner {
overflow: visible;
}
.carousel-control {
z-index: 10;
}
.slider2 {
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
}
zum Beispiel
Muss ja Tommy auch mal etwas entlasten, der Arme hat genug mit meinen Tests zu tun
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 11:34
von inno
Hi Volker!
Vielen Dank dir! Wo muss ich das genau einbauen? Grüße inno
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 11:37
von Volker
inno hat geschrieben: Fr 19. Jun 2026, 11:34
Hi Volker!
Vielen Dank dir! Wo muss ich das genau einbauen? Grüße inno
In Mobirise den oberen code in den linken HTML Teil den Code für >CSS eben rechts ins CSS Fenster.
Du kannst das in entweder in deinen jetzigen block rein kopieren oder du nimmst einen artikelblock und leerst den und stellst meinen Code da rein.
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 11:41
von Tommy Herrmann
Volker postet imm den gesamten HTML - und auch den gesamten CSS-Code.
Öffne also mit dem "Code Editor" diesen Block und löschen alles. Dann kopiere den HTML (ersten) Code links und den CSS (zweiten) Code in den rechten Bereich vom Code-Editor.
Test (vom zweiten Code mit wechselnden Titeln):
https://www.mobirise-tutorials.com/Vorl ... tml#Slider
Beispiel wird wieder gelöscht ...
P.S.::
Volkers Schluder-KI hat da allerdings einiges falsch gemacht. Man kann z.B. die Farbe vom Hintergrund nicht mehr einstellen und auch nicht die voille Breite. Das musss aber Volker richten
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 11:48
von Volker
Tommy Herrmann hat geschrieben: Fr 19. Jun 2026, 11:41
Volkers Schluder-KI hat da allerdings einiges falsch gemacht. Man kann z.B. die Farbe vom Hintergrund nicht mehr einstellen und auch nicht die voille Breite. Das musss aber Volker richten
Ha ha das war nicht Volker Schlampen Ki das Volker himself - deswgen die Fehler :-?
Fixe ich heute nach Feierabend
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 11:56
von Volker
Hier gefixt von der Schluder KI
Code: Alles auswählen
<section data-bs-version="5.1" class="slider2" group="Sliders & Galleries" mbr-style="{'background-color': bgColor}">
<mbr-parameters>
<input type="id" name="sliderId">
<header>Size</header>
<input type="checkbox" name="fullWidth" title="Full Width" checked>
<input type="range" inline title="Height" name="carouselHeight" min="4" max="12" step="1" value="8">
<input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
<input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
<input type="range" name="textWidth" title="Width" min="4" max="12" step="1" value="10" condition="!fullWidth">
<header>Carousel</header>
<input type="checkbox" title="Fade Effect" name="fade" checked>
<input type="checkbox" title="Autoplay" name="autoplay">
<input type="range" title="Interval" name="interval" min="3" max="10" value="5" step="1" condition="autoplay">
<header>Background</header>
<input type="color" title="Color" name="bgColor" value="#ffb18a">
</mbr-parameters>
<div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
<div class="row justify-content-center">
<div class="col-12 col-md-{{fullWidth ? '12' : textWidth}}">
<div id="{{sliderId}}" class="carousel slide" mbr-class="{'carousel-fade': fade}" data-bs-ride="{{autoplay ? 'carousel' : false}}" data-bs-interval="{{interval*1000}}">
<a class="carousel-control carousel-control-prev" href="#{{sliderId}}" role="button" data-bs-slide="prev">
<span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span>
</a>
<a class="carousel-control carousel-control-next" href="#{{sliderId}}" role="button" data-bs-slide="next">
<span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span>
</a>
<div class="carousel-inner">
<div class="carousel-item slider-image item active">
<img class="d-block w-100" src="../_images/background3.jpg" alt="Slide 1">
<div class="custom-caption">
<h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 1</b></h5>
<p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 1</p>
</div>
</div>
<div class="carousel-item slider-image item">
<img class="d-block w-100" src="../_images/background5.jpg" alt="Slide 2">
<div class="custom-caption">
<h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 2</b></h5>
<p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 2</p>
</div>
</div>
<div class="carousel-item slider-image item">
<img class="d-block w-100" src="../_images/background8.jpg" alt="Slide 3">
<div class="custom-caption">
<h5 class="mbr-section-subtitle mbr-fonts-style display-5"><b>Titel 3</b></h5>
<p class="mbr-section-text mbr-fonts-style display-7">Text für Slide 3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
css
Code: Alles auswählen
´.slider2 {
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
}
.carousel {
position: relative;
}
.carousel-item {
display: none !important;
flex-direction: column;
}
.carousel-item.active {
display: flex !important;
}
.carousel-fade .carousel-item {
opacity: 0;
transition-property: opacity;
display: block !important;
}
.carousel-fade .carousel-item.active {
opacity: 1;
display: flex !important;
}
.custom-caption {
width: 100%;
text-align: center;
padding-top: 1.5rem;
padding-bottom: 1rem;
color: inherit;
}
.carousel-inner {
overflow: visible;
}
.carousel-control {
position: absolute;
top: 40%;
z-index: 10;
width: 60px;
height: 60px;
background-color: rgba(0, 0, 0, 0.5);
border: 2px solid #fff;
border-radius: 50%;
display: flex !important;
align-items: center;
justify-content: center;
opacity: 0.8;
transition: all 0.3s;
cursor: pointer;
&.carousel-control-prev {
left: 2.5rem;
}
&.carousel-control-next {
right: 2.5rem;
}
&:hover {
opacity: 1;
background: #1b1b1b;
}
}
@media (max-width: 767px) {
.carousel-control {
width: 40px;
height: 40px;
&.carousel-control-prev {
left: 1rem;
}
&.carousel-control-next {
right: 1rem;
}
}
}
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 12:02
von Tommy Herrmann
nee - jetzt funktioniert der wählbare "Slider" nicht mehr - der "Fader" funktioniert schon.
https://www.mobirise-tutorials.com/Vorl ... tml#Slider
Beispiel wird wieder gelöscht ...
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 12:03
von Volker
Das zum Thema KI
Mach ich jetzt noch fertig warte...
CSS korrigiert - Fehler von KI ist oben im code korrigiert Tommy bitte neu testen
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 12:07
von Volker
mein letzer Code ist also jetzt 100% OK HAB NUR css GEÄNDERT
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 12:10
von Tommy Herrmann
Ja - ich glaube jetzt geht es
Re: Text im Slider unter das Bild setzen?
Verfasst: Fr 19. Jun 2026, 13:48
von inno
Hallo zusammen, vielen Dank schon mal für die Hilfe. Ich teste das am Wochenende. Viele Grüße