Elemente übereinander legen

[janineiten]

Hallo zusammen
Ich habe eine Kundin, die eine Website möchte, wo Elemente übereinander liegen. Ich komme da mit dem Contao Themes etwas an meine Grenzen und wäre sehr froh um einen Ratschlag, mit welchen Custum Elementen man das am besten machen könnte. Anbei ein paar Bilder.
Hat jemand eine Idee?
LG Janine

[tschero]

Moin,

es kommt etwas darauf an, wie genau der Kunde deine Vorlagen umgesetzt haben möchte.
Du könntest ein Bild (*.png) mit Transparenz erstellen, welches alle gewünschten Bilder beinhaltet.
Dann einfach im Autogrid ein Bild und daneben Text anordnen.

Hier mal ein Online-Beispiel (direkt auf der Startseite):
https://www.man-ist-der-neu-mann.de/

Im Anhang mal ein Backend-Beispiel.


Grüße

[Tom]

Hi!

Ein recht aufwändiges Layout, das nicht auf einem Raster basiert :-)

Eine mögliche Lösung dafür könnte die Verwendung von AutoGrid-Spalten sein, die durch CSS translate() verschoben werden.
Ich hab mal ein Bsp. gemacht. Schau dir mal die Screenshots an.

Man kann dafür das Feld "Eigene Styling-Definitionen" auf einer Grid-Spalte nutzen: transform: translate(100px, 100px);
Alternativ mit einer CSS-Klasse arbeiten. Für die mobile Version vielleicht sogar komfortabler.

Ggf. muss bei der Grid-Spalte der z-index erhöht werden. Dazu einfach die CSS-Klasse z_index10 auf der Grid-Spalte hinterlegen.

Bei dem Screenshot Nr. 2 von dir würde ich die 3 Bilder in eine Bilddatei packen. Ansonsten mit position: absolute arbeiten.

Ich hoffe das hilft weiter.
Schöne Grüße
Tom

[janineiten]

Vielen Dank euch, das sind super Ideen Die PNG Fotos finde ich noch leicht suboptimal, da sie nicht responsive sind und der Kunde die Fotos nicht einzeln auswechseln kann. Mit dem Grid sehe ich aber Chancen. Ich frage mich, wie andere CMS mit solchen Anforderungen umgehen, ich habe das Gefühl, die Kunden wünschen sich solche Layouts immer mehr. Lg und Danke nochmals.

[Tom]

Für die Bildelemente kann auch noch das Inhaltselement Bild [Erweitert] verwendet werden.
Das hat noch Settings für eine "Absolute" Positionierung.

[janineiten]

Hoi Tom, das ist unglaublich toll, ich bin mega happy Danke!

[Tom]

Hoi Tom, das ist unglaublich toll, ich bin mega happy Danke!

Freu mich zu hören. Wir planen, in Zukunft einen komfortableren Weg für solche Layouts bereitzustellen.