Mobirise Block Mission M5 modifizieren

[Harold]

Hallo,
ich bin neu in Forum und benötige Hilfe. Ich benötige für ein neues Projekt ein Features, als einen 3er Block. Ich habe einen Mobirise Block gefunden der sich eignen würde. Es ist „Mission M5 Block“.

Dieser müsste aber modifiziert werden. Möglichst so wie im Screenshot von meinem Kunden vorgegeben.

1. Die Blöcke sollten die Hintergrundfarbe weiß haben mit einem dünnen schwarzen Rahmen.
2. Wir bieten: Ausbildung + Praktikum farblich hinterlegt, die Checkboxen als Icon. Es muss möglich sein das ich die Icons je nach Angebot der Firma auswechseln kann.
3. Zwischen dem „Wir bieten“ und dem Button „Stellenanzeige muss ich den jeweiligen Ansprechpartner einfügen können.

Wenn mir jemand helfen kann bitte melden. Gerne werde ich auch die Arbeit entsprechend entlohnen.

[Tommy Herrmann]

Moin Harold,

und willkommen hier im Forum

Ich weiß jetzt nicht welcher Block das aus dem Thema "MissionM5" sein könnte. Kannst Du mal einen Screenshot aus der Block-Ansicht machen, sodass man sich diesen Block mal selbst ansehen kann.

Insgesamt musst Du aber darauf achten, dass Du Deinem Kunden Vorschläge machst und nicht umgekehrt. Du kannst ja nicht eine Software im Detail so umbauen, da ist doch viel zu aufwändig und wird viel zu teuer.

Was Du haben möchtest ist aber wahrscheinlich recht einfach über die CSS erreichbar - man muss aber, um helfen zu können, schon genau den Block vor sich haben.

[Volker]

Die Icons kannst Du einfach per Span einfügen. Einfach vor dem Text z.B. Anprechartner einfügen.

Code: Alles auswählen

<span mbr-icon class="mbr-iconfont fa-check-square-o fa" mbr-if="showIcon"></span>

Das ganze könnte dann mit dem von Dir genannten Block so aussehen.

Den Rahmen um die Kacheln musst Du per CSS realisieren.
Dann einfach als Userblock abspeichern, dann kannst den immer wieder einbauen.

[Tommy Herrmann]

Ich fragte auch deswegen nach dem Block, den Du gewählt hast, da es ganz wichtig ist einen Block "Cards" zu wählen, bei dem die drei "Karten" immer die gleiche Höhe beibehalten (wenn diese nebeneinander stehen), egal wie viel Inhalt eingefügt wird. Ich habe in meinem Beispiel also nur die erste Karte angepasst, die anderen beiden sind wie im Original-Block.

... hier ein Vorschlag, der ganz einfach umsetzbar ist:

https://www.mobirise-tutorials.com/Test ... html#Cards

Dieses Beispiel verwendet einen Block aus dem Thema "CinemaM5" - man kann auch oben in der Blockansicht zum Beispiel nach "Cards" suchen.

Ich habe hier eigentlich lediglich diesen Rahmen um die Cards gesetzt und einen Abstand zu diesem von 5px:

Code: Alles auswählen

.card-wrapper {
  border: 1px solid #888888;
  padding: 5px;
  background-color: white;
}

Natürlich kann man die CSS der Cards an jeder Stelle beliebig anpassen. Man könnte auch ganz eigene Cards basteln, wenn man keinen Block von Mobirise findet.

Hier habe ich die Icons einfach über die Windows-Icons mit der Tastenkombination:

Windows + Punkt •

gesetzt.

Natürlich kannst Du diese aber auch als Icon im Icon-Editor von Mobirise wählen (Vorschlag vom Volker). Das macht man am besten an einem Mobirise-Button, bei dem auch immer ein Icon an den Button-Werkzeugen (kleine Sonne) gewählt werden kann. Dann kopiert man sich das <span> Tag </span> mit dem Icon-Namen über den "Code Editor", um es dann an der gewünschten Stelle im Text der Card wieder einzufügen.

Wenn Du das alles genauer erklärt bekommen möchtest, dann gib Bescheid und frage möglich detailliert.

So sieht der "Code Editor" mit der angepassten Card und der CSS aus (beides markiert):

Code: Alles auswählen

                <div class="card-wrapper">
                    
                    <div class="text-wrap">
                        <h3 class="mbr-card-title mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".mbr-card-title, .mbr-section-btn" mbr-if="showCardTitle">
                            
                            <b>Landkreis Nirgendwo</b><br><hr><b>Fliesenleger #1</b></h3>
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".mbr-text" mbr-if="showText">Kachelweg 10<br>12345 Mörtel<br>Tel.: 0123 456 78 90<br><a href="https://www.mobirise-tutorials.com/Formular/" class="text-primary" target="_blank">info@example.com</a><br><a href="https://www.mobirise-tutorials.com/" class="text-primary">www.example.com</a></p>
                        
                        <div style="background-color: #d6edf9; padding: 10px;">
                            <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".mbr-text" mbr-if="showText"><b>Wir bieten:</b><br><b>✔️Ausbildung<br>❌Praktikum</b>
                            </p>
                        </div>
                        
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".mbr-text" mbr-if="showText"><br><b>👤Ansprechpartner Frau Gehörlos</b><br></p>
                    </div>
                    <div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn d-flex justify-content-center" mbr-if="showButtons"><a class="btn btn-primary-outline" href="javascript: void();" data-app-placeholder="Type Text"><span class="fa fa-file-pdf-o mbr-iconfont mbr-iconfont-btn"></span>
                            Stellenanzeige PDF</a></div>
                </div>

[Harold]

Vielen Dank für eure schnelle Rückantwort. Ich schaue mir das an ... In der Anlage ein Screenshot von dem Block aus Mission M5 mit dem ich das getestet habe. Das war der einzigste der so ungefähr gepasst hat.

Der Kunde besteht nicht unbedingt auf seine Variante der Darstellung, meinte nur, wäre gut wenn man es so umsetzen könnte. ich bin nicht so fit mit CSS. Deshalb fragte ich auch ob mir jemand den Block komplett fertig machen könnte, so das ich diesen nur noch einfüge.

[Volker]

Tommy hat es Dir doch schon vorgekaut

Copy und paste bekommst auch ohne CSS Kenntnisse hin

Nimm den von Tommy empfohlenen Block und füge den entsprechenden Code in der CSS ein und im Block.
Dann hast es doch

[Tommy Herrmann]

Moin,

... den Quelltext aus meinem ersten Beispiel in den Card-Block vom Thema "MissionM5" zu kopieren geht nicht, denn der ist komplett anders aufgebaut.

Da müsstest Du den Block aus meinem ersten Beispiel vom Thema "CinemaM5" verwenden, was wahrscheinlich am besten wäre.

Meiner Ansicht nach ist dieser Block aus dem Thema "MissionM5", zu dem ich jetzt unten auch noch ein Beispiel erstellt habe, auch seitens Mobirise bereits fehlerhaft.

Er wird z.B. am Smartphone nicht zentriert. Dann hat die mittlere Karte eine andere (innere) Breite als die beiden anderen - alles sehr merkwürdig. Ich habe jetzt aber keine Lust nach diesen Mobirise-Bugs zu suchen. Das hat wahrscheinlich was mit der automatischen Breite des hier verwendeten "grid" zu tun.

Ich würde Dir zu meinem ersten Beispiel raten, das ist zentriert und vor allen Dingen sind die Cards nebeneinander immer gleich hoch, was beim Block vom Thema "MissionM5" auch nicht der Fall ist.


Hier das Ergebnis mit Deinem Block aus dem Thema "MissionM5":

https://www.mobirise-tutorials.com/Test ... ml#Block-2

Der Block besteht im Moment aus 3 Bereichen. Unten der Code von einem Bereich, den Du kopieren kannst und bei Dir eben jeden der 3 Bereiche mit diesem Code ersetzen:

Code: Alles auswählen

                <div class="content-container">
                    <div class="text-container">
                        <div class="text-wrapper">
                            <div class="header-wrap" mbr-if="showIcon || showLabel">
                                <div class="iconfont-wrapper" mbr-if="showIcon">
                                    <span mbr-icon class="mbr-iconfont mobi-mbri-target mobi-mbri" style="font-size: 36px; color: #FDFF54"></span>
                                </div>
                                <p class="label-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showLabel" data-app-selector=".label-text">
                                    <span>COMING SOON</span>
                                </p>
                            </div>
                            <h2 class="mbr-section-title mbr-fonts-style" data-app-selector=".mbr-section-title" mbr-theme-style="display-4" mbr-if="showTitle"><b>Landkreis Nirgendwo</b><br><br><b>Fliesenleger</b></h2>
                            <p class="mbr-text mbr-fonts-style " mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text">Kachelweg 10<br>12345 Mörtel<br>Tel.: 0123 456 78 90<br><a href="https://www.mobirise-tutorials.com/Formular/" class="text-primary" target="_blank">info@example.com</a><br><a href="https://www.mobirise-tutorials.com/" class="text-primary" target="_blank">www.example.com</a></p><br>
                                
                                <div style="background-color: #d6edf9; padding: 10px; width: 100%;">
                                    <p class="mbr-text mbr-fonts-style " mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text"><b>Wir bieten</b>:<br>✔️&nbsp; Ausbildung<br>❌&nbsp; Praktikum<br>
                                    </p>
                                </div>
                            
                            <p class="mbr-text mbr-fonts-style " mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text"><br><br>👤&nbsp; Ansprechpartner Frau Gehörlos<br><br></p>
                            <div class="btn-container">
                                <div mbr-buttons mbr-theme-style="display-7" class="mbr-section-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove"><a class="btn btn-black-outline" href="https://mobiri.se" data-app-placeholder="Type Text"><span class="fa fa-file-pdf-o mbr-iconfont mbr-iconfont-btn"></span>
                                        <div class="btn-overlay"></div>
                                        
                                        <div class="btn-transform">
                                            <div class="btn-transform-1">Stellenanzeige PDF</div>
                                        </div>
                                    </a></div>
                            </div>
                        </div>
                    </div>
                </div>

Auch die CSS-Class ist hier eine ganz andere. Suche die class="text-wrapper" und ändere diese wie folgt ab:

Code: Alles auswählen

.text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border: 2px solid #888888;
  padding: 20px;
}

Ich wüsste jetzt übrigens nicht wie man Blöcke in Mobirise exportiert und anderen zur Verfügung stellt. Das könnte ich gerade nur mit einem ganzen Projekt tun, das Du dann bei Dir wieder importieren kannst.

Ich bin aber auch der Meinung, dass diese einfachen Änderungen schon zu den Grundkenntnissen gehören und wenn Du diese noch nicht beherrscht, kannst Du keine Webseiten für andere erstellen.

Dann muss Du Dich damit dringend beschäftigen.

Gerade Kenntnisse von CSS sind ganz wichtig und bei Mobirise sind auch zusätzliche Kenntnisse der bereits vorgefertigten CSS-Klassen vom Framework Bootstrap ganz wichtig zu kennen.

[Harold]

Danke Tommy, ja die Grundkenntnisse von CSS sind schon da. Ich habe deinen Block getestet, es funktioniert. Ich will das mal weiter testen ..