Individuelles Layout, Trennung von Inhalt und Design - wie macht man es richtig?

Hallo zusammen,

ich habe mich in den letzten Tagen intensiv mit der Frage beschäftigt, wie ich ein CMS sinnvoll für meine Zwecke und mit meinen Fähigkeiten einsetzen kann. Zu einer Lösung bin ich nicht gekommen. Viel gegoogelt, viel gelesen, einige Videos geschaut, doch sollte die richtige Antwort dabei gewesen sein, habe ich sie übersehen oder nicht begriffen.

Damit Ihr verstehen könnt, was mich gerade beschäftigt, muss ich weiter ausholen. Hoffentlich hat jemand die Muße, das alles zu lesen …

Ich habe bereits etliche Websites für Freunde gebastelt. Die Betonung liegt auf „gebastelt“, denn es waren ausschließlich statische Seiten. Schlank, responsiv und suchmaschinenfreundlich, sauberes HTML und strukturiertes CSS – aber halt statisch, keine Trennung von Inhalt und Layout. Keine dieser Websites könnte von Freunden selbst gepflegt werden, da ihnen die Kenntnisse dazu fehlen.

Da wäre doch ein CMS das richtige, dachte ich mir und schaute mir WordPress, Joomla und Typo3 an. Für welches ich mich entschieden habe, ergibt sich aus diesem Beitrag. Das ist jetzt schon über ein Jahr her, entstanden ist bisher nichts, da ich mich selbst völlig verunsichert habe, wie ich vorgehen soll.

Nachdem Joomla installiert war, ging ich auf die Suche nach einem geeigneten Template und stieß bald auf das allseits gelobte Helix Ultimate. Die ersten Schritte waren einfach, Header und Footer waren fix eingerichtet, ebenso eine custom.css. Sollte eigentlich nur noch „das bisschen Inhalt“ folgen.

Also einen Beitrag erstellt und mir den TinyMCE-Editor angeschaut, Fragezeichen in den Augen. Wie sollte ich denn damit ein Layout mit verschiedenen Spalten erstellen? Bootstrap hat Helix Ultimate ja an Bord, aber wie kann ich die Elemente nutzen?

Also brauche ich wohl doch einen Page Builder, war meine nächste Annahme. Nach einer halben Stunde mit Helix Ultimate Quickstart und SP Page Builder lite wusste ich, dass ich das nicht haben will. Beiträge hier im Forum bestätigten mein schlechtes Gefühl, z. B. der Thread „Welchen Page Builder?“ mit der so einleuchtenden Aussage „Beim benutzen eines Page Builders verlierst du einen der m.M.n grössten Vorteile eines CMS Systems: Die Trennung von Inhalt und Design.“

Und jetzt folgte mein absoluter Schildbürgerstreich. Den als solchen zu erkennen, hat aber eine Weile gedauert. Ich habe als Editor CodeMirror ausgewählt und meinen HTML-Code samt Inhalt dort hineingeschrieben. Ein ganzseitiges Bild mit Überschrift darauf, einen Dreispalter, mehrere Zweispalter und einen Bild-Slider. Da ich Bootstrap gut kenne, war das ganz einfach und die Seite sah dank custom.css auch genauso aus, wie ich es mir vorgestellt hatte. Die nächste Seite sollte dann einen ganz anderen Aufbau haben, aber das wäre ja mit CodeMirror gar kein Problem.

Bevor ich damit anfangen konnte, wurde ich mir der eigenen Blödheit bewusst. Welchen Vorteil hatte ich denn gegenüber meinen statischen Seiten erreicht? Richtig, gar keinen.

Und jetzt weiß ich nicht mehr weiter und schreibe diesen elend langen Text. Wie macht man es denn nun richtig, wenn man mit Joomla individuelle Seiten erstellen möchte? Wohin schreibt man den Code für die vielen möglichen unterschiedlichen HTML-Elemente? Wie bringt man diese Elemente in beliebiger Reihenfolge auf einer einzelnen Seite zusammen, bevor man sie mit Inhalten füllt?

Kann mir bitte jemand helfen, den Knoten in meinem Kopf zu lösen? Vielen Dank!

Es grüßt

Felix

Indigo66 Vielen Dank! Ich hab' mich schon mal eingelesen, es wird spannend. Wenn dies der Weg ist, mein Ziel zu erreichen, dann kann ich mal wieder was lernen. Ob ich den Mix aus HTML- und PHP-Code verstehe, steht auf einem anderen Blatt.

Die Aussage über die Trennung von Inhalt und Design stammt aus einem Beitrag aus o. g. Thread. Mir leuchtet das ein. Ein Page Builder macht doch nichts anderes als ich mit meinem HTML-Code in CodeMirror, nur halt mit einer grafischen Oberfläche. Oder sehe ich das falsch?

firstlady Vielen Dank!

Zitat von firstlady

Du machst zwei Fehler, die alle machen wenn sie schon mal mit HTML selbst was gestaltet haben.

Ja, genau dieses Gefühl habe ich auch. Es ist unheimlich schwer, sich von diesen Gewohnheiten zu lösen.

Zitat

Schreibe deine Artikel als Texte ganz ohne html und vor allem ohne inline style.

Aber ich muss doch Überschriften, Absätze, Listen etc. mit entsprechenden Tags versehen, oder was meinst Du mit "ohne HTML"?

Zitat

Das Layout (Spalten) stellst du in Joomla mittels Parametern ein.

Davon habe ich noch nie etwas gehört oder gelesen. Wo stellt man diese Parameter ein?

Indigo66 Danke, wieder was gelernt. Ich habe keine Ahnung, was hinter den Kulissen eines CMS abläuft.

hechtnetz Danke auch an Dich! Ich schreibe niemals Inline-Styles, die Probleme damit sind mir bekannt. Aber das mit den Parametern verstehe ich nach wie vor nicht.

Ich habe ein jungfräuliches Cassiopeia vor mir. In den Template-Stilen kann ich Logo, Schriften, Farben und ein paar andere Dinge auswählen, aber keine Spalten. Was übersehe ich?

Wenn ich es als Bootstrap-Code schreiben würde:

  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h2>Überschrift</h2>
        <p>Text</p>
      </div>
      <div class="col-md-4">
        <h2>Überschrift</h2>
        <p>Text</p>
      </div>
      <div class="col-md-4">
        <h2>Überschrift</h2>
        <p>Text</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2>Überschrift</h2>
        <p>Text</p>
      </div>
      <div class="col-md-6">
        <img src="" alt="">
      </div>
    </div>
  </div>

Das meine ich. Mal brauche ich drei Spalten, mal zwei oder nur eine. Und das habe ich so in CodeMirror geschrieben. War das vielleicht doch nicht falsch?

Ich weiß nicht, wie ich's anders ausdrücken soll als: Ich blicke absolut nicht durch.

Also, mal so gefragt:

Ich möchte eine kleine Website erstellen, keinen Blog. Diese Website soll ein von mir ausgedachtes Layout bekommen (was aber auch irgendwie nur so aussehen wird wie tausend andere).

Startseite:

Oben der Header mit der Navigation, darunter ein Bild in voller Bildschirmhöhe und -breite, darauf eine Überschrift.

Darunter folgen ein Abschnitt mit drei Spalten (Icons und Text).

Darunter folgt ein Abschnitt mit zwei Spalten - links ein Bild, rechts ein Text.

Darunter ein Abschnitt mit ebenfalls zwei Spalten - jetzt links der Text, rechts das Bild.

Eine Unterseite:

Oben der Header mit der Navigation, darunter ein Bild in halber Bildschirmhöhe und voller Bildschirmbreite, darauf eine Überschrift.

Darunter folgt ein Abschnitt mit zwei Spalten - links ein Bild, rechts ein Text.

Darunter folgt ein Abschnitt mit vier Spalten (Icons und Text).

Darunter folgt ein Abschnitt mit einer Spalte.

Wie realisiere ich diese Seitenaufteilungen in Joomla, ohne meinen HTML-Code in die Beiträge zu schreiben?

Vermutlich ist es sehr schwierig für Menschen, die schon seit Ewigkeiten mit Joomla arbeiten, sich in meine Lage hineinzuversetzen. Ich beherrsche HTML und CSS sehr gut, aber ich habe nicht die geringste Ahnung, wie ich mein Vorhaben in einem CMS umsetzen soll. Ich kann nicht programmieren, kenne gerade mal so die Grundzüge von PHP.

Ich habe bereits so viele Joomla-Videos bei YouTube gesehen, aber keins hat mich weitergebracht. Entweder wird ein Page Builder verwendet oder man beschränkt sich auf ein ganz primitives Layout. Oder ich habe die richtigen Videos nicht gefunden.

Wenn ich wirklich eigene Templates erstellen muss, um meine Vorstellungen umzusetzen, dann bin ich derzeit nicht dazu in der Lage. Dann müsste ich erneut versuchen, mich in objektorientierte Programmierung mit PHP einzuarbeiten oder sie wenigstens in Ansätzen zu verstehen. Das würde vermutlich viel Zeit kosten, die ich aber investieren würde, wenn ich wüsste, dass es der einzig richtige Weg ist.

Mir geht's bei der ganzen Joomla-Sache nicht darum, eine Website online stellen zu wollen. Mir geht es darum, das Prinzip eines CMS verstehen zu können. Und ich stehe ganz am Anfang.

Ich danke Euch erneut fürs Lesen.

hechtnetz Ein fertiges Template würde ich nur verwenden, wenn ich dringend eine Website online stellen müsste und sonst nicht weiterkommen würde. Ist ja zum Glück nicht der Fall. Aber schick ist es, was Du da gekauft hast.

Auf die Seiten von Astrid bin ich zufällig heute Morgen bei meiner Recherche gestoßen und war sehr beeindruckt. Sie sind sehr gut geschrieben und hochinteressant, ich werde sie auf alle Fälle lesen. Danke!

Elwood Ich hatte diesen Tipp von Dir schon am Wochenende an anderer Stelle gelesen und nach weiteren Anleitungen gegoogelt. Leider beziehen sich die Videos, die ich dazu (zu einem Quickstart Package) gefunden habe, auf eine Version für Joomla 3.

Jetzt versuche ich mal mein Glück mit den von Dir verlinkten Dateien, mal sehen ... und danke!

Ok, dann schaue ich sie mir morgen an. Installiert habe ich das Framework schon, bin gespannt.

Ich habe mir Astroid heute Morgen angeschaut. Die Layout-Sektion ist vom Aufbau ähnlich wie die von Helix Ultimate, allerdings komfortabler. Aber was ich suchte, habe ich auch hier nicht gefunden, weil ich offensichtlich wieder einen völlig falschen Ansatz hatte (zwei oder mehrere Templates für das Layout verschiedener Seiten anlegen zu können).

Aber mir ist etwas eingefallen, dass ich mal in einem Video gesehen hatte: Die Inhalte nicht in Beiträge, sondern in eigene Module schreiben. Jede denkbare Modulposition wurde vorher in der Layout-Sektion festgelegt. In den Modulen wählt man dann die entsprechende Seite aus, auf der sie angezeigt werden sollen, außerdem die Überschriften-Semantik und CSS-Klassen. Inhalt und Layout werden dabei auf alle Fälle gut getrennt.

Das scheint zu funktionieren. Ob's der richtige Weg ist ... irgendwann werde ich es wissen.