Mobirise Block umgebaut - DEMO

[Volker]

Hier mal ein Video von mir zu dem Thema Mobirise Blöcke

Schaut es Euch an und bildet Eure eigene Meinung.



Den Block gibt es natürlich auch in der Galerie und zum Download

[Bushisan]

Hallo Volker,
na dann werde ich doch gleich mal meinen Senf dazugeben. Animationen sind nicht jedermanns Sache - aber sie ggf. Nutzen zu können steht ja gleich auf nem anderen Blatt. Deswegen gebe ich Dir recht - die Möglichkeiten verschiedene Animationen zur Verfügung zu haben ist schon echt ne klasse Sache für sich finde ich. Und ja - irgendwo gibt's das manchmal schon genau so - oder ähnlich - aber ehrlich, wenn ich irgendwo einen schönen Block finde will ich als Seitenbetreuer eines kleinen Vereins oder als Privatmensch der sein Hobby präsentieren will doch nicht das komplette Theme kaufen müssen - klar die wollen Geld verdienen - ist ja richtig so!
Ich finde es wirklich super welche Möglichkeiten Du den Leuten an die Hand gibst. Wie Du Ideen aufschnappst oder selbst entwickelst und das auch noch Umsetzt ist richtig gut! Von der erstklassigen Unterstützung die man hier von allen bekommt ganz zu schweigen

Ich wünsche Dir und allen hier im Forum noch nen schönen Tag !!!

[Tommy Herrmann]

Volker,

da muss ich mich allerdings wehren, weil Du mich schon wieder in Deinem Video ansprichst — etwas, das ich grundsätzlich nicht mag.

Wenn Du Kritik an dem hast, was ich sage, dann bitte direkt oder meinetwegen hier im Forum, aber nicht auf YouTube.

Deshalb muss ich das korrigieren, wenn Du in einem YouTube‑Video behauptest, Mobirise habe keine Tab‑Blöcke. Von Animationen hast Du dabei gar nichts gesagt.

Weiterhin habe ich doch geschrieben - wörtlich:

"Es ist doch aber auch vollkommen egal ob Mobirise das auch hat oder nicht. Das muss einen doch nicht davon abhalten einen weiteren Block in der Art zu entwickeln."

Ich habe wiederholt betont, dass ich die Arbeit an Deinen Blöcken sehr schätze und insbesondere die Initiative bewundere, die Du entwickelst. Deshalb teste ich viele Deiner Blöcke regelmäßig und behebe dabei ja auch zahlreiche Fehler.

Ich wollte nur anmerken, dass Mobirise Dutzende solcher Tab‑Blöcke anbietet; einige davon haben meiner Meinung nach ein hervorragendes Design und sind nicht nur technisch orientiert. Technik ist zwar wichtig, doch persönlich sind mir solche Animationen weniger bedeutsam - ich lege da eher großen Wert auf das Design, denn das macht am Ende die Website aus - nicht irgendwelche Animationen. Ganz im Gegensatz zu Deiner wiederholten Behauptung finde ich nicht, dass die Blöcke ohne Animationen langweilig wären; diese Einschätzung kann ich nicht nachvollziehen.

Meiner Ansicht nach beherrscht Mobirise das Design ausgesprochen gut, weshalb sie so erfolgreich sind. Leider begehen sie jetzt den Fehler, sich bei neuen Themes ständig selbst zu kopieren.

Bitte vergiss nicht, dass ein Unternehmen wie Mobirise selbstverständlich nicht alles, was technisch möglich ist, in einen einzigen Block packen würde – damit würde es seinem eigenen Geschäft schaden.

Du behauptest immer wieder gerne Dinge, die so nicht ganz zutreffen. Zum Beispiel gibt es einen Block (SharpM5), mit dem du das Bild ein- oder ausschalten kannst — obwohl du behauptest, er existiere nicht (und bestimmt noch jede Menge mehr solcher Blöcke) - siehe Screenshot unten. Ebenso gibt es zahlreiche Blockwerkzeuge, die weit mehr können als nur Farben ändern. In deinen Videos betonst du außerdem oft, wie du die Schriftgröße änderst; das kann ich nicht nachvollziehen — in Mobirise lässt sich die Schriftgröße überall ändern, wenn auch nicht unbedingt per Schieberegler, sondern über das extra dafür entwickelte Schrift-Werkzeug.

[Tommy Herrmann]

Moin Volker,

zum Themas "Animationen" möchte ich dich noch auf deinen neuen Block „VN Typed Hero“ aufmerksam machen. Ich habe ihn zufällig auf meinem Handy gesehen (eigentlich wegen des Tab-Blocks) und festgestellt, dass die Animation auf dem Handy nicht passt: Sie lässt die gesamte Seite wackeln und wirkt sehr unschön. Das ist eben auch immer so eine Sache mit Animationen - es ist in diesem Fall nicht möglich, andere Inhalte auf der Seite zu betrachten, ohne dass sich der Bildschirm hin und her bewegt:





Mobirise setzte dieselbe Animation bereits im Header des Themes „BusinessM4“ ein; dort ist sie jedoch besser umgesetzt, sodass sie auf Mobilgeräten korrekt funktioniert und nichts wackelt. Guckst Du:

https://www.mobirise-tutorials.com/BusinessM4/

Übrigens sehe ich gerade zufällig, dass ich in diesem uralten Mobirise‑4‑Theme (glaube aus dem Jahr 2018) bereits einen Tab‑Block (etwas tiefer auf der Seite) mit vertikalen Tabs eingebaut hatte, der ebenfalls einen Schalter zum Ein‑ und Ausblenden des Bildes besitzt.

https://www.mobirise-tutorials.com/BusinessM4/#tabs2-7

[Volker]

Moin Tommy,

ja da ist einfach die Schrift zu Groß gesetzt worden von mir
Habe ich angepasst und nun ruckelt nichts mehr.

Das es so einen Block gibt wusste ich. Hier ist eben eine andere Umsetzung mit anderen Effekten kombiniert.

https://www.niederastroth.de/vntabs/

[Tommy Herrmann]

Ja - jetzt ist es gut - vielleicht noch besser, wenn die animierte Schrift am Handy in einer neuen Zeile beginnt.

[Volker]

Zum Thema Animationen:
Ja ich weiß das ich da manchmal übertreibe
Aber man kann immer in jedem Block von mir die Animationen auch abstellen
Ich möchte halt immer so viel wie möglich ermöglichen und zeigen was gehen könnte.

Mir ist auch klar das Animationen oft gar nicht benötigt werden.

Ja es gibt Tabs die Bilder abschalten können, gibt sogar einen mit 8 Tabs usw. Hab ich mir alle angesehen.
Kann ja auch jeder einbauen, so wie er es braucht.

Mein Tab Block ist trotzdem komplett anders Funktionaler, mehr Styling Möglichkeiten, HTML wird wohl auch keiner brauchen .... Thema ist für mich jetzt eh durch, weil mir auch nichts mehr einfällt

Werde in Zukunft wieder verstärkt PHP Scripte schreiben und da weitere Entwicklungen machen, die in jede Webseite, egal ob WP, Mobirise oder sonst wo eingebunden werden können.

Ich habe jetzt zig Blöcke mit PHP Backend, Zig Blöcke für Mobirise (brauchbar oder nicht) entwickelt.

[Tommy Herrmann]

Es gibt übrigens einen Tab-Block im Thema "MedicalM4" mit 9 Tabs


Ich hätte da eine Idee.

Ein einfacher Textblock (wie der, den Du immer als Ausgang wählst) mit Listeneinträgen.


Überschrift
Zweitüberschrift
Text


Muss in der Breite einstellbar sein (wie Mobirise das macht)

Dann nur UL / LI Tags.

Also Listen mit einer sich erhöhenden Zahl oder einem runden Punkt davor (wählbar in den Blockwerkzeugen). Sagen wir mal von 1 - 10 Listeneinträge - am besten mit + Zeichen noch erweiterbar.

Mehr nicht - keine Animation keine Bilder - nichts. Die paar Blöcke, die Mobirise hat, sind nicht wirklich gut.

[Volker]

Gähn

noch vorm Frühstück

https://www.niederastroth.de/vntabs/

So ?

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content">
    <mbr-parameters>
        <header>Size</header>
        <input type="checkbox" title="Full Width" name="fullWidth">
        <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" title="Breite" name="textWidth" min="4" max="12" step="1" value="10">

        <header>Show/Hide</header>
        <input type="checkbox" title="Titel" name="showTitle" checked>
        <input type="checkbox" title="Zweitüberschrift" name="showSubtitle" checked>
        <input type="checkbox" title="Text" name="showText" checked>
        <input type="checkbox" title="Liste" name="showList" checked>

        <header>Listen-Stil</header>
        <select title="Aufzählung" name="listStyle">
            <option value="disc">● Punkte</option>
            <option value="decimal" selected>1. Nummeriert</option>
            <option value="none">— Keiner</option>
        </select>
        <input type="color" title="Listen-Farbe" name="listColor" value="#333333" selected>
        <input type="color" title="Marker-Farbe" name="markerColor" value="#1d9e75" selected>

        <header>Background</header>
        <input type="color" title="Hintergrund" name="bgColor" value="#ffffff">
    </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">
                    <b>Überschrift</b>
                </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">
                    Zweitüberschrift
                </h4>

                <p class="mbr-text mbr-fonts-style mb-4" mbr-if="showText" data-app-selector=".mbr-text" mbr-theme-style="display-7">
                    Hier steht dein Text. Klicke zum Bearbeiten.
                </p>

                <!-- Liste – mbr-article macht sie im Builder per + erweiterbar -->
                <ul class="mbr-list mbr-fonts-style" mbr-if="showList" mbr-theme-style="display-7" data-app-selector=".mbr-list" data-multiline mbr-article>
                    <li class="mbr-text item-wrap">Listeneintrag 1</li>
                    <li class="mbr-text item-wrap">Listeneintrag 2</li>
                    <li class="mbr-text item-wrap">Listeneintrag 3</li>
                </ul>

            </div>
        </div>
    </div>
</section>

css:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
.mbr-list {
  list-style: ~"@{listStyle}";
  padding-left: 1.5rem;
  color: @listColor;
  li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
    line-height: 1.7;
  }
  & when (@listStyle = 'disc') {
    li::marker {
      color: @markerColor;
    }
  }
  & when (@listStyle = 'decimal') {
    li::marker {
      color: @markerColor;
      font-weight: 700;
    }
  }
  & when (@listStyle = 'none') {
    padding-left: 0;
    li {
      padding-left: 0;
    }
    li::before {
      content: '—';
      color: @markerColor;
      margin-right: 0.5rem;
      font-weight: 700;
    }
  }
}

Schon in der VN Block Galerie zu finden

[Tommy Herrmann]

OK - ich lade mir das gleich mal runter.

Hier interessant für Dich zum guclen:

Ich habe das mal mit "Mobirise AI" getestet. Das ging zwar aber an den Blockwerkzeugen hat es gar nichts zum Einstellen gemacht.

Hier mein Prompt (geht auch auf Deutsch):

"Please create a list in this block with at least ten items. The bullet style should be selectable—either numbered or bullet symbols , with bullet as the default."

https://www.mobirise-tutorials.com/VN-B ... tml#Listen

[Volker]

He he

Mobrise AI VS Volker

Wer hat gewonnen ?

[Tommy Herrmann]

Großartig - ganz genau so

https://www.mobirise-tutorials.com/VN-B ... tml#Listen

Kannst Du das Ding nicht bitte auch zum direkten Reinziehen in die VN-Block-Galerie packen - das muss man doch nicht importieren.

[Volker]

Ist doch drin !
sagte ich doch

[Tommy Herrmann]

Ah - ach sorry - geht ja auch

… dann kann ich es ja dem Fragesteller im Hersteller-Forum posten

Das nenne ich innovativ

[Volker]

Ich poste da nix mehr

[Tommy Herrmann]

Der Fragesteller im anderen Forum will bei dem neuen "Textblock Listen" auch für den Text <p> und das UL Listen-Tag die Auswahl vom <h> Tag haben - geht das?

[Tommy Herrmann]

Habe es schon selbst umgebaut ...

[Volker]

Code: Alles auswählen

<section data-bs-version="5.1" class="content5 vn-text-list" group="Content" id="{{mbr-id}}">
    <mbr-parameters>
        <header>Size</header>
        <input type="checkbox" title="Full Width" name="fullWidth">
        <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" title="Breite" name="textWidth" min="4" max="12" step="1" value="10">

        <header>Show/Hide</header>
        <input type="checkbox" title="Überschrift" name="showTitle">
        <input type="checkbox" title="Zweitüberschrift" name="showSubtitle" checked>
        <input type="checkbox" title="Text" name="showText" checked>
        <input type="checkbox" title="Liste" name="showList" checked>

        <header>Überschrift</header>
       
        <input type="range" inline title="Abstand unten" name="titleMb" min="0" max="60" step="4" value="16">
        <input type="color" title="Farbe" name="titleColor" value="#000000" selected>
        <select title="Gewicht" name="titleWeight">
            <option value="400">Normal</option>
            <option value="600">Semi-Bold</option>
            <option value="700" selected>Bold</option>
            <option value="800">Extra-Bold</option>
        </select>

        <header>Zweitüberschrift</header>
       
        <input type="range" inline title="Abstand unten" name="subtitleMb" min="0" max="60" step="4" value="16">
        <input type="color" title="Farbe" name="subtitleColor" value="#333333" selected>
        <select title="Gewicht" name="subtitleWeight">
            <option value="400">Normal</option>
            <option value="600" selected>Semi-Bold</option>
            <option value="700">Bold</option>
        </select>

        <header>Fließtext</header>
 
        <input type="range" inline title="Zeilenhöhe" name="textLh" min="1" max="3" step="0.1" value="2.4">
        <input type="range" inline title="Abstand unten" name="textMb" min="0" max="60" step="4" value="20">
        <input type="color" title="Farbe" name="textColor" value="#444444" selected>

        <header>Liste</header>
        <select title="Aufzählung" name="listStyle">
            <option value="disc">● Punkte</option>
            <option value="decimal" selected>1. Nummeriert</option>
            <option value="none">— Strich</option>
        </select>
        <input type="range" inline title="Größe (px)" name="listSize" min="12" max="30" step="1" value="19">
        <input type="range" inline title="Abstand Eintr." name="listItemMb" min="0" max="30" step="2" value="8">
        <input type="color" title="Text-Farbe" name="listColor" value="#2299aa" selected>
        <input type="color" title="Marker-Farbe" name="markerColor" value="#1d9e75" selected>

        <header>Hintergrund</header>
        <input type="color" title="Farbe" name="bgColor" value="#e6c63b">
    </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">
                    <b>Überschrift</b>
                </h3>

                <h2 class="mbr-section-subtitle mbr-fonts-style mb-4" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-1">
                    Zweitüberschrift
                </h2>

                <p class="mbr-text mbr-fonts-style mb-4" mbr-if="showText" data-app-selector=".mbr-text" mbr-theme-style="display-2">
                    Hier steht dein Text. Klicke zum Bearbeiten.
                </p>

                <ul class="mbr-list mbr-fonts-style" mbr-if="showList" mbr-theme-style="display-7" data-app-selector=".mbr-list" data-multiline mbr-article>
                    <li class="mbr-text item-wrap">Listeneintrag 1</li>
                    <li class="mbr-text item-wrap">Listeneintrag 2</li>
                    <li class="mbr-text item-wrap">Listeneintrag 3</li>
                </ul>

            </div>
        </div>
    </div>
</section>

css:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
.mbr-section-title {
  font-weight: ~"@{titleWeight}" !important;
  color: @titleColor !important;
  margin-bottom: ~"@{titleMb}px" !important;
  line-height: 1.2;
}
.mbr-section-subtitle {
  font-weight: ~"@{subtitleWeight}" !important;
  color: @subtitleColor !important;
  margin-bottom: ~"@{subtitleMb}px" !important;
  line-height: 1.3;
}
.mbr-text {
  line-height: ~"@{textLh}" !important;
  color: @textColor !important;
  margin-bottom: ~"@{textMb}px" !important;
}
.mbr-list {
  list-style: ~"@{listStyle}";
  padding-left: 1.5rem;
  margin: 0;
  li {
    color: @listColor !important;
    margin-bottom: ~"@{listItemMb}px" !important;
    line-height: 1.6;
  }
  & when (@listStyle = 'disc') {
    li::marker {
      color: @markerColor;
      font-size: 1.1em;
    }
  }
  & when (@listStyle = 'decimal') {
    li::marker {
      color: @markerColor;
      font-weight: 700;
    }
  }
  & when (@listStyle = 'none') {
    padding-left: 0;
    li {
      padding-left: 1.2rem;
      position: relative;
    }
    li::before {
      content: '—';
      color: @markerColor;
      position: absolute;
      left: 0;
      font-weight: 700;
    }
  }
}

zu finden unter: Textblock List Variabel in der Galerie oder online

[Tommy Herrmann]

Danke - da ich das inzwischen selbst neu gebaut habe, habe ich das erst später angeguckt.

Was du da gemacht hast, entspricht aber auch nicht dem, was er möchte. Er möchte den Text und die Listeneinträge mit h‑Tags versehen können.

Das Besondere ist nun, dass man in den Blockwerkzeugen sowohl für den normalen Textbereich <p> als auch für den <li>‑Bereich <h>‑Tags auswählen kann. Die Textgröße stellt man wie gewohnt in den Textwerkzeugen ein.

https://www.mobirise-tutorials.com/VN-B ... tml#Listen

[Tommy Herrmann]

Den Block von Dir mit den einfachen Listeneinträgen habe ich übrigens auch vorgestellt, den find ich persönlich viel besser - aber der User wollte die unbedingt als Header-Tags haben - keine Ahnung wozu das gut sein könnte

https://www.mobirise-tutorials.com/VN-B ... isten.html

Leider lässt sich die Auswahl dieser Header-Tags für Text- oder Listeneinträge auch nicht in die Textwerkzeuge integrieren, wie es bei den Überschriften von Mobirise der Fall ist. Dafür müsste man eine eigene Mobirise-Erweiterung programmieren, die in den internen Texteditor eingreift und beim Umschalten das DOM-Element ersetzt. Das wäre dann kein reiner HTML-/CSS-Block mehr und könnte bei Mobirise-Updates leicht brechen.