Block Plugin

Post Reply
cracksilver
Jr. Bludit
Posts: 8
Joined: Wed Jan 08, 2020 1:56 pm

Guten Tag allerseits
Ich war vor 2 jahren schon mal mit bludit unterwegs. Nach erneuter FlatCMS Recherche bin ich wieder draufgestossen und bin eigenlich gleich wieder angetan von der Leichtigkeit dieses Systems.

Nun habe ich eine Frage. Giibt es irgendein Plugin welches mir erlaubt 2 Bilder mit Text drunter, so nebeneinander in eine Reihe zu setzen, dass das alles responsive ist und auf dem mobile alles zusammenpasst? Ich glaube das nennt sich multiple block content oder so.

Sowas brauche ich zwingend und es wäre toll wenn mir Jemand weiterhelfen könnte.

Grüsse Gregor
User avatar
Edi
Site Admin
Posts: 3168
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 66 times
Been thanked: 90 times
Contact:

Das kann mit etwas CSS (Flexboxen) einfach gemacht werden. ;)
cracksilver
Jr. Bludit
Posts: 8
Joined: Wed Jan 08, 2020 1:56 pm

hi

Und was ist "etwas CSS (Flexboxen)"?

Gruss gregor
User avatar
Edi
Site Admin
Posts: 3168
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 66 times
Been thanked: 90 times
Contact:

Was Flexboxen sind, wird beispielsweise hier erklärt:

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox

Oder hier:

https://kulturbanause.de/blog/einfuhrun ... l-von-css/

Das heisst, Du kannst beispielsweise folgenden Code für die zwei Bilder und Legenden verwenden:

Code: Select all

<div class="container">
   <div class="item">
      <img src=""><br>
      Legende zum ersten Bild.
   </div>
   <div class="item">
      <img src=""><br>
      Legende zum zweiten Bild.
   </div>
</div>
Als CSS kannst Du beispielsweise folgendes verwenden:

Code: Select all

.container {
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   margin: 30px 0;
}
   
.item {
   margin: 0 30px;
   text-align: center;
}
Das CSS kannst Du mit dem Plugin HTML-Code ergänzen.

Dort gibst Du im Feld "Head" folgendes ein:

Code: Select all

<style>
.container {
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   margin: 30px 0;
}
   
.item {
   margin: 0 30px;
   text-align: center;
}
</style>
cracksilver
Jr. Bludit
Posts: 8
Joined: Wed Jan 08, 2020 1:56 pm

ok danke. Das klingt für mich alles sehr kompliziert. Gibt es dazu keine Erweiterung mit welcher man dies ein bisschen komfortabler machen könnte?
cracksilver
Jr. Bludit
Posts: 8
Joined: Wed Jan 08, 2020 1:56 pm

Oder gibt es allenfalls Jemand der mir das an der richtigen Stelle umsetzen kann, damit ich nacher im Editor damit arbeiten kann?
Post Reply