Mobirise Toolbox ändern

[Bushisan]

warum auch immer - ich schaffe es nicht die Blockeinstellungen per Zahnrad hinzubekommen. Ich bekomme jede Menge Schieber etc. aber kein Zahnrad

Einen Block in dem ich eine Biddatei auswählen kann hab ich hinbekommen - aber mehr nicht

[Tommy Herrmann]

Moin Hubi,

das kommt natürlich auf jeden Einzelfall an, eben was Du über die Blockwerkzeuge ändern möchtest.

Man sollte sich auch zuvor überlegen, ob man für die gewünschte Änderung überhaupt ein Werkzeug in dieser Toolbox benötigt und ob man bereits genug Kenntnisse von HTML und CSS erworben hat.

Ich hatte deswegen mal diese Beispielseite mit Video erstellt, nicht um das selbst zu bauen, sondern um überhaupt zu verstehen, wie Mobirise solche Werkzeuge erzeugt und einsetzt:

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

Fast immer muss auch im Bereich "CSS Editor" mit Variablen gearbeitet werden, damit man diese variablen Namen dann eben über die Parameter im Bereich "HTML Editor", also oft auch Formularfelder, ansprechen und dynamisch ändern kann.

Mein Beispiel solltest Du dann mal genau nachbauen, damit Du ein besseres Verständnis dafür bekommst und auch die Parameter mit ihren CSS-Variablen Anhand von fertigen Mobirise Blöcken ansehen um das abzugucken und zu lernen.

Insgesamt sollte man so etwas eher nur machen, wenn man sich mit HTML und CSS schon ziemlich gut auskennt, also z.B. in der Lage ist, eine einfache Webseite händisch zu erstellen. Ansonsten ist man wahrscheinlich gar nicht in der Lage die Zusammenhänge zwischen HTML und CSS zu erkennen.

Deswegen ist es im Prinzip auch immer besser sich so etwas selbst zu erarbeiten als das z.B. einer KI zu überlassen. Sonst hat man am Ende im besten Fall eine funktionierende Anwendung, versteht aber nicht warum. Alles was man lernen will, muss man daher auch durch und durch verstehen.

[Bushisan]

Guten Morgen Tommy, danke, das war fürs Verständnis sehr sehr hilfreich !!! Ich bleib dran

[Bushisan]

Es geht aufwärts hab's heute geschafft in einen Artikelblock einen Schieberegler für die Textgröße einzubauen Und ich denke das macht ja auch durchaus Sinn

Schönen Tach noch!

[Tommy Herrmann]

Prima

[Bushisan]

das ist ja sooo Geil - jetzt hab ich in den Wunschblock von Volker noch einen Schieberegler für die Imagegröße und einen Colorpicker für den Bildbereich eingebaut (einbauen lassen). Das ist z.B. sehr hilfreich wenn man Bilder mit transparentem Hintergrund einbauen. Wie z.B. hier.


https://www.shotokan-karate-dojo-neukir ... n/Box.html

Kann gar nicht aufhören

Aber ich poste diesbezüglich erstmal nichts mehr - will Euch ja auch nicht langweilen

[Volker]

Tja Hubi,

wenn man es einmal raus hat macht es ja auch Spaß

Ich baue ja auch täglich mal was neues - mal gut, mal für die Tonne oder auch was kein Mensch braucht, aber egal

Hier mein neuster Textblock :

HTML:

Code: Alles auswählen

<section class="peppy-section">
    <mbr-parameters>
        <header>Abstände</header>
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="7">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
        
        <header>Farben</header>
        <input type="color" title="Hintergrund" name="bgColor" value="#ffffff">
        <input type="color" title="Karten Farbe" name="cardBgColor" value="#ffffff">
        <input type="color" title="Akzent" name="accentColor" value="#e43f3f">
        
        <header>Buttons  Features</header>
        <input type="checkbox" title="Info" name="showBadge" checked>
        <input type="checkbox" title="Button Karte 1" name="showBtn1" checked>
        <input type="checkbox" title="Button Karte 2" name="showBtn2" checked>
    </mbr-parameters>

    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <span class="peppy-badge" mbr-if="showBadge" mbr-text>niederastroth.de</span>
                <h2 class="mbr-section-title mbr-fonts-style" mbr-theme-style="display-2">
                    Individuelle <br><span class="accent-text">Lösungen.</span>
                </h2>
                <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7">
                    Volle Kontrolle über Icons, Texte und Buttons direkt im Editor.
                </p>
            </div>

            <div class="col-md-6">
                <div class="peppy-card">
                    <div class="card-icon-wrapper">
                        <span mbr-icon class="mbr-iconfont mbri-mobirise" style="font-size: 64px;"></span>
                    </div>
                    <h4 class="mbr-card-title mbr-fonts-style" mbr-theme-style="display-5">Service A</h4>
                    <p class="mbr-card-text mbr-fonts-style" mbr-theme-style="display-7">
                        Beschreibung für Ihren ersten Service-Bereich.
                    </p>
                    <div class="mbr-section-btn" mbr-if="showBtn1" mbr-buttons><a href="https://niederastroth.de" class="btn display-4 btn-black" data-app-placeholder="Type Text">Details</a></div>
                </div>

                <div class="peppy-card mt-4">
                    <div class="card-icon-wrapper">
                        <span mbr-icon class="mbr-iconfont mbri-responsive" style="font-size: 64px;"></span>
                    </div>
                    <h4 class="mbr-card-title mbr-fonts-style" mbr-theme-style="display-5">Service B</h4>
                    <p class="mbr-card-text mbr-fonts-style" mbr-theme-style="display-7">
                        Beschreibung für Ihren zweiten Service-Bereich.
                    </p>
                    <div class="mbr-section-btn" mbr-if="showBtn2" mbr-buttons><a href="https://niederastroth.de" class="btn display-4 btn-warning" data-app-placeholder="Type Text">Details</a></div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS:

Code: Alles auswählen

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
background-color: @bgColor;
.peppy-section {
  overflow: hidden;
}
.accent-text {
  color: @accentColor;
}
.peppy-badge {
  background-color: @accentColor;
  color: #fff;
  padding: 4px 12px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}
.peppy-card {
  background-color: @cardBgColor;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-left: 6px solid @accentColor;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.02);
  border-right: 1px solid rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}
.peppy-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.card-icon-wrapper .mbr-iconfont {
  color: @accentColor !important;
  margin-bottom: 1rem;
  display: block;
}
.mbr-section-btn {
  margin-top: 1.5rem;
}
@media (max-width: 767px) {
  .peppy-card {
    padding: 1.5rem;
    margin-top: 2rem;
  }
}
P {
  color: #000000;
}

https://www.niederastroth.de/text2cardshtml.html