Split Content ist im Trend!

Diesen Trend finden wir cool! Wir haben "Split Content"-Möglichkeiten an einige Stellen unseres TYPO3-Template eingebaut.

Zu Grunde liegt in diesem Beispiel ein einfaches "small-12 medium-auto"-Zweispalten-Grid. Wir benutzen dazu das Foundation XY-Grid. Das Bild in der ersten Spalte ist ein fluid-styled-content-Content-Element, das als Hintergrund eingesetzt wird. Weiter unten dazu mehr...

In der rechten (Content-)Spalte wird es etwas tricky, wenn der Inhalte die Hälfte des "Seiten-Wrappers" ausfüllen soll. Dazu setzen wir hier einen Zweispalter mit den CSS-Klassen "h100 align-stretch" und den Spaltenkonfigurationen  "small-12 medium-auto split-half" und "small-12 medium-auto" ein. Die Klassen sind entweder Foundation- oder Helper-Klassen.

Zweiter Split-Content-Bereich

...jetzt andersherum. BTW: damit der Zweispalter nicht so schmal daher kommt, bekommt der Bilderbereich die Klasse "hv50" - das ist eine Helper-Klasse.

Ich als Überschrift...

...bin flexibel sticky bis der Content rechts zu Ende ist. 

Laaaaaanger Inhalt neben fixiertem Bild und flex-sticky-Überschrift

Ich bin ein langer Text, damit man das Verhalten des Bildes und der Überschrift links sehen. Das gesamte Konstrukt orientiert sich an 100% Höhe des Viewports.

Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.

Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.

Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.

Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.

Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.

Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.

Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.

Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.

Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.

Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

Integer tincidunt. Donec vitae sapien ut libero venenatis faucibus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Phasellus consectetuer vestibulum elit. Donec mollis hendrerit risus.

Morbi mollis tellus ac sapien. Etiam imperdiet imperdiet orci. Praesent ut ligula non mi varius sagittis. Etiam imperdiet imperdiet orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.

 

min themes
TYPO3-Template

This template was made in nature with TYPO3 12.4.x LTS, Foundation 6.8.1 XY-Grid and a lot of coffee. 

min-themes.de ist Online-Demo & Showroom für TYPO3-Dienstleistungen von made in nature - Werbeagentur. Unser Team aus Webentwicklern, Grafikern und Textern entwickelt Online-/ Offline-Auftritte für Endkunden und Wiederverkäufer - benutzerfreundlich, modern und valide.

Wir machen das!
https://www.made-in-nature.de