Seite 1 von 1
Mobirise Image Block mod
Verfasst: Fr 17. Apr 2026, 09:44
von Bushisan
Hallo zusammen,
habe einen Mobirise-Block dahingehend verändert, dass man jetzt den Titel, den Text und den Button über die komplette Breite des Blockes mit Hilfe von Schiebreglern horizontal verschieben kann (auch über das Bild). Die Größe der Texte ist ebenfalls über Schieberegler einstellbar. Nichts besonderes - ich finde es halt mega einfach und bequem diese Sachen tun zu können ohne in der CSS rumschrauben zu müssen.
https://www.shotokan-karate-dojo-neukir ... mod.mbrext
Euch allen einen schönen Tag
Re: Mobirise Image Block mod
Verfasst: Fr 17. Apr 2026, 11:03
von Volker
Moin Hubi,
da ist aber noch ein kleiner Fehler drin
Ich kann nämlich kein Bild auswählen
Da solltest du zur Sicherheit im Zahnrad einen Bildimport einbauen.
<img class="main-image" src="file:///assets/images/image1.jpg" alt="Mobirise" title>
musste ich einbauen um ein Bild mit der Auswahl hinzufügen zu können:
Ist genau das selbe Problem was Struggle mit meiner horizontalen Galerie hat
Re: Mobirise Image Block mod
Verfasst: Fr 17. Apr 2026, 11:40
von Bushisan
Hallo Volker,
danke -ich hab den Block importiert. Wenn ich auf das Bild klicke dann öffnet sich der Dialog ein Bild zu laden!
Re: Mobirise Image Block mod
Verfasst: Fr 17. Apr 2026, 12:05
von Bushisan
Sodala,
hab das mit dem Dateiimport eingebaut - gefällt mir natürlich auch viel besser. Danke für den Tipp!
https://www.shotokan-karate-dojo-neukir ... od2.mbrext
Grüße
Re: Mobirise Image Block mod
Verfasst: Fr 17. Apr 2026, 12:26
von Volker
Warum nicht gleich so ?
Merken für die Zukunft !
PS: Hintergrund Farbe wäre noch toll gewesen
Und Button Style ala Mobirise wäre auch besser
Hat also noch Potential nach oben
HTML:
Code: Alles auswählen
<section data-bs-version="5.1" class="header11" group="Headers">
<mbr-parameters>
<input type="image" name="BildLaden" value="assets/images/mbr-1920x1440.jpg">
<input type="range" inline name="Bildgroesse" min="4" max="8" value="4">
<input type="checkbox" name="SeiteWechseln" checked>
<input type="color" name="HintergrundFarbe" value="#e6c63b">
<input type="range" inline name="TitelHorizontal" min="0" max="100" value="34">
<input type="range" inline name="TextHorizontal" min="0" max="100" value="39">
<input type="range" inline name="ButtonHorizontal" min="0" max="100" value="72">
<input type="range" inline name="SchriftgroesseTitel" min="1" max="12" value="6">
<input type="range" inline name="SchriftgroesseText" min="1" max="6" value="2">
<header>Spacing</header>
<input type="range" inline name="PaddingOben" min="0" max="10" step="0.5" value="5.5">
<input type="range" inline name="PaddingUnten" min="0" max="10" step="0.5" value="3.5">
</mbr-parameters>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-{{Bildgroesse}} image-col">
<img class="main-image" src="{{BildLaden}}" alt="Mobirise">
</div>
<div class="col-12 col-md text-col">
<div class="text-wrapper">
<h1 class="mbr-section-title mbr-fonts-style" mbr-theme-style="display-1">
Make Fun Creating
</h1>
<p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7">
Make awesome landing pages without coding!
</p>
<div class="mbr-section-btn" mbr-buttons mbr-theme-style="display-4">
<a class="btn btn-info" href="https://mobiri.se">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
Code: Alles auswählen
padding-top: (@PaddingOben * 1rem);
padding-bottom: (@PaddingUnten * 1rem);
background-color: @HintergrundFarbe;
& when (@SeiteWechseln) {
.row {
flex-direction: row-reverse;
}
}
.image-col {
overflow: hidden;
}
.main-image {
width: 100%;
height: auto;
display: block;
}
.text-col {
position: relative;
display: flex;
align-items: center;
}
.text-wrapper {
position: relative;
width: 100%;
}
.mbr-section-title {
position: relative;
left: ~"@{TitelHorizontal}%";
transform: translateX(-50%);
font-size: ~"@{SchriftgroesseTitel}rem";
}
.mbr-text {
position: relative;
left: ~"@{TextHorizontal}%";
transform: translateX(-50%);
font-size: ~"@{SchriftgroesseText}rem";
}
.mbr-section-btn {
position: relative;
left: ~"@{ButtonHorizontal}%";
transform: translateX(-50%);
display: flex;
width: fit-content;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
@media (max-width: 991px) {
.mbr-section-title, .mbr-text, .mbr-section-btn {
left: 50% !important;
transform: translateX(-50%) !important;
text-align: center;
margin-bottom: 1rem;
width: auto;
justify-content: center;
}
.image-col {
margin-bottom: 2rem;
}
}
H1 {
color: #22a5e5;
}
Den Schalter um den Button auszublenden hab ich jetzt nicht eingebaut - Du sollst ja auch was davon haben und lernen
Re: Mobirise Image Block mod
Verfasst: Fr 17. Apr 2026, 13:22
von Bushisan
So, Hintergrundfarbe, alles ein- und ausblendbar. Der Button ist noch der alte - lass ich jetzt aber mal so
Danke Volker - fange ja erst an - bin aber wirklich dankbar für jeden Tipp und für jede konstruktive Kritik!
https://www.shotokan-karate-dojo-neukir ... od3.mbrext
Und Tschüss
Re: Mobirise Image Block mod
Verfasst: Fr 17. Apr 2026, 15:18
von Volker
Ich weiß das die KI immer Button einbaut die nicht Mobirise like sind mit den entsprechenden Mobirise Tags.
<div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn mt-3" mbr-if="showButtons"><a class="btn btn-secondary" href="
https://mobiri.se" data-app-placeholder="Type Text">Create Website</a></div>
Aber sollte man doch in jeden Coustom Block auch so einbauen, weil sonst meckern die Leute
Du hast einfach am Button sonst keinen Picker zum Modifizieren und musst alles im HTML Code machen
Re: Mobirise Image Block mod
Verfasst: Fr 17. Apr 2026, 15:26
von Bushisan
Hallihallo,
konnte nicht widerstehen, hab noch einen möglichen Hintergrundbild eingebaut. Aber jetzt lass ich's für heute gut sein - versprochen !!
https://www.shotokan-karate-dojo-neukir ... od4.mbrext
mit etwas mehr Routine werden es vermutlich auch weniger Anläufe bis was brauchbares bei mir rauskommt.
Euch allen einen guten Start ins WE!!