Aufteilung der Inhalte innerhalb der Seite

Eine Internet-Seite setzte sich früher meistens aus Spalten zusammen, beispielsweise aus links einer Spalte mit dem Menü (Navigation), in der Mitte der breiten Hauptspalte und rechts einer Spalte mit Zusatzinformationen. Links und rechts dieses Inhaltsbereiches gab es dann noch einen mehr oder minder breiten Hintergrundbereich.

Bei modernen Website ist heute ein anderer Ansatz sehr beliebt. Man denkt nicht in Spalten, sondern in Zeilen. Um das für diese Modell-Layouts in TYPO3 flexibel zu ermöglichen, haben wir die Optionen für die Inhaltsgestaltung stark erweitert. Sie finden einen zusätzlichen Reiter [Darstellung]. Die Wirkung der darauf befindlichen neuen Felder zeigen wir hier und unter Inhaltsformate anhand von Beispielen.

Positionierung der Inhaltselemente

Alle Inhaltselemente - und nur um diese geht es hier - können entweder in 'Normal' oder 'Rand (Zum Einfügen)' angelegt werden. Im Frontend angezeigt wird nur, was in 'Normal' liegt. Dabei bildet jedes Inhaltselement eine Zeile. Die Inhalte in 'Rand' dagegen sind je eine Zelle, also ein Teilbereich einer Zeile. Um sie zu einer Zeile zusammenzufassen, also zu gruppieren, legt man pro Zeile ein Element vom [Typ] 'Datensatz einfügen' an und wählt darin die gewünschten Elemente aus 'Rand'.

Wenn man den [Typ] 'Text mit Bild' nutzt, kann man in einem Inhaltselement eines oder mehrere Bilder neben dem Text platzieren. Auch ist es möglich, im Feld [Text] einzustellen, dass der Text zwei- oder dreispaltig erscheinen soll. Man kann in diesen Fällen also auch direkt mit einem Element in 'Normal' arbeiten. Entsprechend können die Felder im Bereich [Optionen der Zeile] genutzt werden. Diese erläutern wir bei Inhaltsformate.

Nur wenn Sie zwei oder mehrere Inhaltselemente oder verschiedene Typen von Inhaltselementen in einer Zeile brauchen, legen Sie diese in 'Rand' an und gruppieren sie in 'Normal' in einer Zeile.

Die Modell-Layous bieten vielfältige Aufteilungsmöglichkeiten der Inhalte

Optionen bei Darstellung

Für die Wirkung der Einstellungen bei [Optionen der Zelle] sehen Sie nachfolgend Beispiele.

  • [Anteil an Zeile]: gibt an, welchen Anteil am Inhaltsbereich einer Zeile dieses Element einnimmt
  • [Position in Zeile]: gibt an, ob dieses Element links, mittig oder rechts in seiner Zeile erscheint

Das abgebildete Element stellt den ganzen Inhalt der Zeile dar, benötigt also keine Einstellungen für eine Zelle, was ja ein Teilbereich wäre.

Aufteilung 50% + 50%

Text, 50% Breite, links

Selbstverständlich muss die Summe der Prozentanteile 100 ergeben, wobei '66' als 66,666... und '33' als 33,333... zu verstehen sind.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

Aufteilung 100% und 50% + 50%

Text und Video mit gemeinsamer, zentrierter Überschrift

Wenn ein Element in einer solchen Kombination die volle Breite einnehmen soll, darf [Position in Zeile] 'nicht gesetzt' werden. Das trifft hier auf die Überschrift zu, die ja über beide Elemente reichen soll und daher bei [Anteil an Zeile] '100%' erhält.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

Aufteilung 25% + 50% + 25%

25% links

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

3 x Text mit Bild; hier 50% mittig

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

25% rechts

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 

a7digital GmbH

Ostpreußenring 76
23569 Lübeck

Telefon: +49 451 48 97 83 38

Hotline: +49 177 835 77 77

a7.layouts steht für moderne, technisch hochwertige Gestaltung von Websites mit dem CMS TYPO3.

Sie finden auf diesen Seiten unter anderem Beispiele von Internet-Seiten, die auf einem unserer Modell-Layouts aufbauen, Schulungs-Videos, die Ihnen den Einstieg in die Bearbeitung Ihrer neuen Website erleichtern, und eine schriftliche Anleitung mit vielfältigen Beispielen.