Ich gehe davon aus, dass ihr bereits eine funktionstüchtige Seite mit TemplaVoilá zum laufen gebracht habt. Auf Wunsch kann ich dazu natürlich auch nochmal ein kleines Tutorial schreiben.

FCE-Template erstellen

Was wir als erstes brauchen, ist eine HTML-Datei, die als FCE dient. Dazu erstellen wir jetzt einfach eine HTML-Datei und nennen sie “2-Spalten.html“.

Hier der Inhalt:

<div class="col_wrap">
  <div class="col1"></div>
  <div class="col2"></div>
  <br style="clear:both;" />
</div>

Diese Datei speichern wir und schieben sie dann in den Ordner “fileadmin” -> “templates“.

Dies war schon im groben der erste Teil. Nun müssen wir das FCE in TYPO3 einrichten.

FCE in TYPO3 einrichten

Liste-Ansicht des Template-Ordner

In TYPO3 wechseln wir zunächst in die “Liste“-Ansicht und klicken dann den Sysfolder an, in welchen unser TemplaVoilá-Template installiert ist.

Dort fügen wir dann unter “TemplaVoilá-Datenstruktur” ein neuen Datensatz hinzu, indem wir auf das Icon mit dem Plus klicken.

In dem nun erscheinenden Formular geben wir als Titel “2-Spalter” ein, unter Kategorie wählen wir “Flexibles Inhaltselement” aus und lassen den Rest leer. Wir speichern nun das Formular ab und kehren zur Listen-Ansicht zurück.

Nun fügen wir noch ein “TemplaVoilá-Datenobjekt” hinzu. Dazu geben wir als Titel wieder “2-Spalter” ein, unter Dateireferenz klicken wir auf die Weltkugel, wählen dann im PopUp den Reiter “Datei” aus und Browsen uns durch die Ordner “fileadmin” -> “templates“. Dort wählen wir dann die Datei “2-Spalter.html” aus. Der Pfad sollte dann übernommen werden und im Formular stehen. Als nächstes wählen wir bei Datenstruktur die eben angelegte aus. Der Name müsste “2-Spalter” sein. Den Rest können wir leer lassen und unser Formular abspeichern.

So sollte das Formular dann in etwa bei euch ausschauen

Als nächstes gehen wir auf das Modul “TemplaVoilá” und wählen danach unser Template aus. Danch sollten wir oben den Reiter “Flexible CE” auswählen und ein Eintrag mit namen “2-Spalter” vorfinden. Dort klicken wir auf “remap” und dann auf “Modify DS / TO“.

Dieser Teil sollte einen eigentlich bekannt sein, ich reiße ihn trotzdem nochmal kurz an.

Template Mappen

Zunächst müssen wir den “Root“-Punkt mappen. Dazu klicken wir in dem “Root“-Objekt ganz rechts auf “Map” und wählen dann das erste DIV aus unserem Template aus. Als Mode setzen wir es als “INNER” und klicken dann auf “Set“.

Mapping der ersten Spalte

Nun fehlen noch 2 Elemente. Für jede Spalte ein Element. Deshalb legen wir nun erstmal 2-Elemente an. Das erste Element nennen wir “field_col1” und das zweite Element einfach “field_col2“. Als Titel jeweils “Spalte 1″ und “Spalte 2″. Unter Editing Type wählen wir “Content Elements” aus.

Natürlich müssen wir die 2 Felder dann auch Mappen. Dazu klicken wir jeweils nachdem wir eines angelegt haben auf “Map” und dort wählen wir dann das jeweilige DIV aus. Für Spalte 1 das DIV mit der Class “col1” und für die zweite Spalte das DIV mit der Class “col2“. Den Mode dabei wieder auf “INNER“.

So sollte dann die Übersicht ausschauen

Sollte alles passen, klicken wir nun auf “Save as“, wählen danach unter “Update existing Data Structure / Template Object” das Element “Template/2-Spalter” aus und klicken auf “Update TO (and DS)“.

2-Spalter als Inhalt einfügen

Wir gehen nun normal auf unser “Web“-Modul und wählen eine Seite aus, in welcher wir unseren 2-Spalter platzieren möchten. Wir legen nun ein neues Element an und wählen in der Liste unter “Flexibler Inhalt” unseren “2-Spalter” aus.

Eine Überschrift können wir, müssen wir aber nicht vergeben. Einfach das Element speichern und zurück in die Übersicht des “Web“-Moduls gehen.

So sollte es dann in etwa ausschauen

Ihr solltet nun ein 2-Spalter in eurer Übersicht sehen (siehe Screenshot).

Ihr könnt nun dort gewohnt beliebig Inhalte hinzufügen und verwalten. Egal ob es Extensions sind oder normale Texte.

Das einzige was jetzt noch fehlt ist, dass ihr in eurer CSS-Datei die Klassen “col_wrap“, “col1” und “col2” definieren müsst.

In dieser fügen wir einfach folgendes hinzu:

.col_wrap {
  border:1px solid #ddd;
  padding:5px;
}

.col1 { float:left; width:48%; padding:5px; }
.col2 { float:left; width:48%; padding:5px; }

Nun sollten unsere Spalten nebeneinander sein. Das ganze könnt ihr natürlich noch weiter verschönern oder es so lassen

Viel Spaß damit!