Wie Layout am besten umsetzten

[neelix]

Hallo zusammen,

ich habe jetzt schon ein paar kleinere (simple) Seiten mit Contao gemacht. Jetzt aber steht etwas komplexeres (mehrere Layouts, Import von externen Datenquellen) an. Und jetzt frage ich mich, ob ich hier klassisch mit 2 Spalten und dem Layout Builder arbeiten soll, oder ob ich ein Grid nehmen soll/ muss?
Mit Grids habe ich mich bisher noch nicht befasst.

Anforderung ist, dass die Seite auch auf mobilen Geräten vernünftig dargestellt wird, es muss kein eigenes mobiles Layout sein, kann aber.

Die beiden gelben Boxen rechts werden auf allen Seiten bleiben. Die Seite soll möglichst bildschirmfüllend dargestellt werden, wahrscheinlich ca. 1200px. Bei Bildschirmen mit Full HD Auflösung sieht 960px doch etwas verloren aus. (und es gibt ja auch schon 4k)

Und wenn dann noch jemand einen Tipp hätte welche Erweiterung so einen Slider wie diesen auf http://erzbistum-koeln.de/ generieren kann, wäre das super.

Danke & Gruß

Neelix

[Samuell]

Hi,
Bereiche, die auf mehreren Seiten gleich sind finde ich am Einfachsten mit einem mehrspaltigen Layout und würde daher zu diesem Lösungsweg greifen.
Theoretisch könntest Du es natürlich auch über referenzierte Inhalte lösen, wenn Du wolltest.
Beides geht also.

Bei dem Slider würde ich mir mal Rocksolid anschauen.
Falls der nicht hinreichend funktioniert würd ich nochmal bei "Premium Contao Themes" schauen.
Die haben, glaube ich, auch einen Slider mit dem das gehen sollte.

[Andreas]

Für die Umsetzung wie in deiner Grafik, kannst du ein Layout mit Kopf, Fuß, Haupt und Rechts benutzen. Innerhalb der Hauptspalte kannst du dein Gridsystem benutzen.

Für die Unterstützung bei den Gridcontainern kann ich dir dma_simple_grid empfehlen. Damit kannst du dein Grid-Framework in den Einstellungen auswählen und dann benutzen. Ich finde hier das Gridsystem "unsemantic" sehr einfach zu handhaben. Du hast damit auch die Möglichkeit auf verschiedene Viewportbreiten zu reagieren.

Die Breite einer Website solltest du nicht danach bemessen, ob sie verloren aussieht oder nicht, sondern daran wie angenehm die Inhalte zu entnehmen sind. Textzeilen mit 100 Wörtern pro Zeile wären z.B. nur unter Stress zu lesen, genauso wie Zeilen mit einer Länge von 2 Wörtern.

[neelix]

Ich denke, ich werde erstmal bei dem klassischen Aufbau bleiben, mit Prozentwerten passt das noch ganz gut.

Die Breite einer Website solltest du nicht danach bemessen, ob sie verloren aussieht oder nicht, sondern daran wie angenehm die Inhalte zu entnehmen sind. Textzeilen mit 100 Wörtern pro Zeile wären z.B. nur unter Stress zu lesen, genauso wie Zeilen mit einer Länge von 2 Wörtern.

Naja, auf einem üblichen 22" oder 24" Monitor mit FullHD oder 4K Auflösung sind 960px nix. Da ist mehr Rand als Seite auf dem Bildschirm. Also steht die Breite jetzt auf 90% und max. 1104 Pixel. Die längeren Zeilen muss ich dann halt mit größerer Schrift ausgleichen.

[tab]

Entweder so oder eben dann den Text mehrspaltig ausgeben. Leider unterstützen noch nicht viele Browser die CSS3 Spalten vollständig. Aber man kann das auch auf andere Weise umsetzen.

[soweit_ok]

Der Revolution Slider wäre gut geeignet.

[neelix]

Hm, der kostet aber.

Ich habe vergessen zu sagen: Es geht um eine Schulhomepage.

Es müsste auch auch machbar sein, das Template des internen Sliders anzupassen, oder? Es geht eigentlich nur darum, dass im Hintergrund ein Bild gezeigt wird, und darüber die passende Schlagzeile.

Ist dann nur die Frage, was passiert, wenn es zu der News kein Bild gibt und wie komme ich an das Bild ran.

[Andreas]

Es müsste auch auch machbar sein, das Template des internen Sliders anzupassen, oder? Es geht eigentlich nur darum, dass im Hintergrund ein Bild gezeigt wird, und darüber die passende Schlagzeile.

Ja, den Core-Slider kann man auf viele Arten anpassen, hier habe ich z.B. mal die Navi-Punkte so aussehen lassen, wie bei ner Tab-Navi http://www.richter-akustik-design.de...en-planer.html

Das Bild holst du einfach aus dem CE oder der News. Falls es welche ohne Bild gibt, musst du ein Default-IMG vorbereiten. Text seht du mit CSS über das Bild.