Kleines Video Tut wie man Blöcke ändern kann

[Volker]

Hallo zusammen,

ich hab es jetzt doch mal probiert

In diesem Video zeige ich Euch wie man einen Standard Block ändert um hier in diesem Fall den Titel 2 farbig zu bekommen mit Einstellung im Zahnrad:



Ich hoffe das hilft dem einen oder anderen weiter ...

[Tommy Herrmann]

... ergänzend mein Tutorial und Video dazu, das ich vor langer Zeit mal erstellt hatte:

https://www.mobirise-tutorials.com/Tuto ... odify.html

Das ist natürlich nicht ganz so einfach, wie es in den Videos rüber kommen mag, denn es müssen dazu oft Variablen erstellt werden und man muss sich sehr gut mit CSS und HTML Codes auskennen, wenn man das selbst macht und nicht von einer KI generieren lässt.

Im Grunde genommen braucht man das ja auch nur, wenn man sehr häufig den gleichen Block mit unterschiedlichen Einstellungen benötigt, die man dann über diese Toolbox ändern will.

Ansonsten macht es natürlich viel mehr Sinn die HTML direkt seinen Wünschen anzupassen als diese Toolbox zu ändern. Im Beispiel vom Volker würde man also ganz einfach ein <span> Tag </span> (Code-Befehl für einen Bereich) inklusive der Style-Anweisung(en) (CSS) in den HTML Bereich eintragen. Das mache ich fast bei jedem Block und würde deswegen niemals auf die Idee kommen die Toolbox zu ändern, nur um über diese Toolbox dann ein einziges Mal die Farbe zu wählen.

Beispiel für das Bereichs-Tag <span> mit Style-Anweisung style="color: blue;"

Code: Alles auswählen

<p>Meine Mutter hat <span style="color: blue;">blaue</span> Augen.</p>

https://www.w3schools.com/tags/tag_span.asp

Mobirise hat ja selbst solche Color-Picker an jedem Text, nur gelten diese dann immer für den gesamten Paragrafen - also immer das gesamte <p> Tag </p> oder beispielsweise auch das <h> Tag </h> (header). Deswegen macht der Einsatz eines <span> Tags für ausgewählte Bereiche Sinn.

[Volker]

Moin Tommy,

ja das war ein Beispiel
Klar kann man das einmalig auch in den Code schreiben.

Hier mal ein anders Beispiel - nicht als Video, sondern direkt als Code:

HTML:

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content">
    <mbr-parameters>
        <header>Layout  Abstände</header>
        <input type="checkbox" title="Volle Breite" name="fullWidth">
        <input type="range" inline title="Oben" name="paddingTop" min="0" max="10" step="1" value="6">
        <input type="range" inline title="Unten" name="paddingBottom" min="0" max="10" step="1" value="5">
        <input type="range" name="textWidth" title="Text-Breite" min="4" max="12" value="11" step="1">
        
        <header>Elemente Ein/Aus</header>
        <input type="checkbox" title="Titel anzeigen" name="showTitle" checked>
        <input type="checkbox" title="Untertitel anzeigen" name="showSubtitle" checked>
        
        <header>Farben  Design</header>
        <input type="color" title="Hintergrund" name="bgColor" value="#ffffff">
        
        <hr>
        <input type="color" title="Farbe für Fett (B)" name="boldColor" value="#e43fda">
        <input type="color" title="Farbe für Kursiv (I)" name="italicColor" value="#136ff7">
    </mbr-parameters>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center">
            <div class="col-md-12 col-lg-{{textWidth}}">
                
                <h3 class="mbr-section-title mbr-fonts-style mb-4" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-2">
                    Artikel Titel
                </h3>
                
                <h4 class="mbr-section-subtitle mbr-fonts-style mb-4" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-5"><b>
                    Ein</b> Untertitel <b>mit</b> System
                </h4>
                
                <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
                    In diesem Text kannst du Wörter <b>fett markieren</b> oder <i>kursiv</i> setzen. Durch das spezielle CSS ändern diese Wörter automatisch ihre Farbe basierend auf deinen Einstellungen im Zahnrad-Menü. Das ist perfekt für <b>Hervorhebungen</b> oder <i>Zitate</i>, ohne jedes Mal die Farbe manuell wählen zu müssen.
                </p>
                
            </div>
        </div>
    </div>
</section>

CSS:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
.mbr-section-subtitle {
  color: #000000;
}
.mbr-text {
  b, strong {
    color: @boldColor;
    font-weight: bold;
    display: inline;
  }
  i, em {
    color: @italicColor;
    font-style: italic;
    display: inline;
  }
  b i, i b, strong em, em strong {
    color: @boldColor;
    text-decoration: underline;
  }
}
.mbr-section-title b {
  color: @boldColor;
}
.mbr-section-title {
  color: #232323;
}

Das ist der Standard Article Block der jetzt bold oder Kursiv markierten Wörter eine Farbe verpasst, die man ebenfalls im Zahnrad einstellen kann. Also wie man sieht kann man auch sowas machen - auch nur ein Beispiel

Ich wurde ja schon mehrfach danach gefragt ob ich das nicht als Video Reihe machen könnte. Ne kann ich nicht, weil zu aufwendig. Aber im Video und hier im Code anhand einfacher Beispiele mal gezeigt

[Tommy Herrmann]

Moin,

ja - es müssen eben dazu auch die Variablen gegründet werden (die erwähnst Du im Video noch nicht einmal), wie z.B.:

@boldColor

… damit diese über das Werkzeug änderbar sind. Man muss sich also mit den CSS-Regeln sehr gut auskennen, um das selbst zu erstellen.

Was ich ausdrücken wollte ist, dass ich den Sinn für ein solchen Werkzeug meist nicht verstehe, solange man solche Einstellungen nur einmalig vornimmt.

Genau deswegen fehlen diese Werkzeuge auch in den Toolboxen von Mobirise, da Mobirise davon ausgeht, dass man so etwas direkt über die CSS - meist mit CSS-Klassen - ändert und es dann für den individuellen Block auch so bleibt. Bei einem anderen Block würde ja dieses spezielle Werkzeug dann wieder fehlen. Genau dafür gibt es globale CSS-Dateien und man kann eben einmal erstellte CSS-Klassen dann in jedem Block erneut verwenden ohne dessen Blockwerkzeuge wieder zu ändern.

[Volker]

Was ich ausdrücken wollte ist, dass ich den Sinn für ein solchen Werkzeug meist nicht verstehe, solange man solche Einstellungen nur einmalig vornimmt.

Naja dann zeige ich Dir jetzt den Sinn mal Tommy

Beispielhalft Deine Border die Du an einen Block gebaut hast. Das kann man dann halt mit einem eigenen Border Block lösen und hat den egal wo man will

Eben mal gebaut ohne KI

HTML:

Code: Alles auswählen

<section data-bs-version="5.1" class="border-divider" group="Separator">
    <mbr-parameters>
    <header>Border Einstellungen</header>
    <input type="checkbox" title="Volle Breite (Kante zu Kante)" name="fullWidth" checked>
    <input type="range" inline title="Dicke (px)" name="borderThickness" min="1" max="20" step="1" value="10">
    <input type="color" title="Linien-Farbe" name="borderColor" value="#136ff7">
    <select title="Linien-Stil" name="borderStyle">
        <option value="solid">Durchgehend (solid)</option>
        <option value="dashed">Gestrichelt (dashed)</option>
        <option value="dotted">Gepunktet (dotted)</option>
        <option value="double" selected>Doppelt (double)</option>
        <option value="groove">Graviert (groove)</option>
        <option value="ridge">Erhaben (ridge)</option>
    </select>

    <header>Abstände (Rahmen außen)</header>
    <input type="range" inline title="Oben" name="paddingTop" min="0" max="10" step="1" value="4">
    <input type="range" inline title="Unten" name="paddingBottom" min="0" max="10" step="1" value="5">

    <header>Linien-Länge</header>
    <input type="range" inline title="Breite (%)" name="lineWidth" min="5" max="100" step="5" value="100">
</mbr-parameters>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center">
            <div class="border-line" style="width: {{lineWidth}}%;"></div>
        </div>
    </div>
</section>

CSS:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background: transparent;
.container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.border-line {
  border-top: (@borderThickness * 1px) @borderStyle @borderColor;
  margin: 0 auto;
  min-height: 1px;
  border-top-width: (@borderThickness * 1px);
  border-top-style: ~"@{borderStyle}";
  border-top-color: @borderColor;
}
.is-builder .border-divider {
  min-height: 10px;
}

Das macht meiner Meinung nach Sinn, so hat man diesen Block immer in seiner Sammlung und kann den jederzeit nutzen. Aber wie gesagt ich wollte das ja auch nur mal Beispielhaft zeigen.

PS: Auch wenn ich mit KI arbeite habe ich doch auch einiges selber herausgefunden auch mit Hilfe der Docs von Mobirise: https://mobirise.com/docs/