Mobirise Image Block mod

[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

[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

[Bushisan]

Hallo Volker,
danke -ich hab den Block importiert. Wenn ich auf das Bild klicke dann öffnet sich der Dialog ein Bild zu laden!

[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

[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

[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

[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

[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!!