Author Topic: Bootstrap blöcke machen  (Read 1873 times)

fischstäbchenbrenner

  • Guest
Bootstrap blöcke machen
« on: April 18, 2015, 05:55:55 PM »
Gemeint sind so typische Blöcke (3 oder 4 nebeneinander) wie hier:
http://abusinesstheme.com/demo/palas/

Mit dem normalen Wysiwyg editor tut man sich schwer. Aber mit dem Members Modul ist das recht einfach:

Eine kurze Erklärung, wie das geht:

Zuerst brauche ich den SOLL-Quelltext, wie er meist mit LoremIpsum in den Bootstrap Templates ist:

Code: [Select]
<section class="section mt40">
<div class="container">
<div class="row col-p30">
<div class="col-sm-4 xs-box2">
<div class="box-services-c">
<i class="icon_mobile fa fa-style4"></i>
<h3 class="title-small br-bottom-center">Responsive Design</h3>
<p class="mb0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
</div>
</div>
<div class="col-sm-4 xs-box2">
<div class="box-services-c">
<i class="icon_gift_alt fa fa-style4"></i>
<h3 class="title-small br-bottom-center">Premium plugins</h3>
<p class="mb0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
</div>
</div>
<div class="col-sm-4">
<div class="box-services-c">
<i class="icon_star_alt fa fa-style4"></i>
<h3 class="title-small br-bottom-center">Free updates</h3>
<p class="mb0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
</div>
</div>
</div>
</div>
</section>

OK, was auch immer das ist, ich zerlege es einfach mal:
Header:
Code: [Select]
<section class="section mt40">
<div class="container">
<div class="row col-p30">

Loop:
Code: [Select]
<div class="col-sm-4 xs-box2">
<div class="box-services-c">
<i class="icon_mobile fa fa-style4"></i>
<h3 class="title-small br-bottom-center">Responsive Design</h3>
<p class="mb0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.</p>
</div>
</div>


Footer:
Code: [Select]
</div>
</div>
</section>

Header und Footer kann ich in Members (Settings) genauso angeben, da muss nichts editierbar sein.
Schaun wir uns den Loop an, da brauche ich Platzhalter:
Code: [Select]
<div class="col-sm-4 xs-box2">
<div class="box-services-c">
<i class="[SHORT1] fa fa-style4"></i>
<h3 class="title-small br-bottom-center">[NAME]</h3>
<p class="mb0">[LONG1]</p>
</div>
</div>

Long 1 stelle ich auf "Text", irgendwelche Formate sind ohnehin nicht erwünscht. Wenn ich WYSIWYG nehme, muss ich das <p class="mb0"> entfernen, sonst habe ich verschachtelte p.


Hier zu sehen: http://WebsiteBaker.at/wb/bootstrap-demo.html
Klar, nichts besonderes. Die Icon -Fonts sind zb nicht einfach so bei Bootstrap, die müsste ich extra installieren.

Analog dazu kann ich den Slider mit Members machen, irgendwelche Gimmicks usw, das Schema ist immer das gleiche: Den Beispiel-Code trennen in Header, Loop, Footer.
In den Members settings angeben, ein paar Members (Items) anlegen, fertig.



« Last Edit: April 18, 2015, 06:01:24 PM by fischstäbchenbrenner »

fischstäbchenbrenner

  • Guest
Re: Bootstrap blöcke machen
« Reply #1 on: April 18, 2015, 06:32:59 PM »
Um das nochmal klar zu sagen:
Mit dieser Methode oben kann ich JEDES Bootstrap-Template (woher auch immer) ohne großen AUfwand für WB bearbeitbar machen.

Die Schritte:
Im  HTML-Template die Pfade herrichten, das übliche <?php echo TEMPLATE_DIR; ?>

Für das Menü gibt es schon etliche Vorlagen; Showmenu ist ja recht flexibel.

Den Bereich, den ich editierbar haben will, durch <?php page_content(1); ?> ersetzen.
Das übliche Gewurle im Header und Footer nach Bedarf.
info.php usw.

Ich muss mich eben entscheiden: Mache ich alles mit dem Members Modul? Ich kann ja auch Droplets verwenden.
Oder mache ich mehrere Blöcke? Geht auch.


Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: Bootstrap blöcke machen
« Reply #2 on: April 18, 2015, 06:41:18 PM »
Für sowas ist Members natürlich die erste Wahl (oder ein ähnliches Modul).

Ich nehme meistens Members dafür (in einer leicht abgeänderten Version, die mit Twig arbeitet).

Ich denke Members ist eines der "supersten" Module, die Du hevorgebracht hast.

Gruß,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

fischstäbchenbrenner

  • Guest
Re: Bootstrap blöcke machen
« Reply #3 on: April 19, 2015, 12:49:54 PM »
Erwähnen möchte ich noch:

In vielen Templates gibt es einen Block 3, der genau für solche Sachen gedacht ist.
zb in  http://WebsiteBaker.at/wb-templates/template-bs_naturak.html

Einen Abschnitt mit Members im Block3 anlegen und schon kann man mit Bootstrap loslegen.

Zu Members:
Der Name ist ein bissel unglücklich. Ich bastle seit ewig schon am Nachfolger "Itemz", mit Bild- und File-Upload und ein paar Feldern mehr. Aber von selbst wirds nicht...

 

postern-length