Neu Text, Button mittig auf Bild platzieren

CGellert

Gut bekanntes Mitglied
9. Mai 2022
116
17
Kirchlengern
Firma
CG Mediengestaltung
Hallo zusammen,

ich verzweifle gerade am Design meiner Startseite. JTL Shop 5 - Nova Template.

Ich möchte gerne auf einem Bild einen Text oder eine Schaltfläche (egal was) mittig platzieren. Zentrieren klappt ja noch, aber wie kann ich das ganze auch in der Vertikalen mittig platzieren?
Ich habe es bisher mit dem Portlet "Container" versucht. Also ein statisches Hintergrundbild eingefügt und dann ein Portlet "Text" oder "Schaltfläche" eingefügt. Leider "kleben" beide immer am oberen Container-Rand. Dann habe ich es mit verschiedenen Innen- und Außenabständen unter "Layout" versucht, aber das sieht ja nur für eine Ansicht gut aus, z.B. Desktop. Bei mobiler Ansicht ist es dann ziemlich verrutscht...

Genauso hätte ich gerne ein Grid mit 2 Spalten. Linke Spalte Bild, rechts Spalte Text - auch vertikal mittig zum Bild.

Mir geht's also immer um das vertikale Positionieren. Geht das überhaupt? Oder übersehe ich etwas?

Ich meine, sowas ist doch heutzutage Standard bei allen Baukastensystemen, jedes andere Website System kann sogar eine freie Positionierung von Elementen (Elementor, Wix, etc...).
Ich finde, man ist mit diesen starr festgelegten Portlet Positionen ziemlich unflexibel. Man kann doch nicht für alles ein teures Template kaufen. Ich arbeite gerne so weit wie es geht mit vorhandenen Bordmitteln.

Wie macht ihr das?
Freue mich auf Anregungen, vielen Dank.

Grüße,
Christoph
 
  • Gefällt mir
Reaktionen: Freshsweets

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
7.233
1.965
Berlin
Ich finde, man ist mit diesen starr festgelegten Portlet Positionen ziemlich unflexibel. Man kann doch nicht für alles ein teures Template kaufen. Ich arbeite gerne so weit wie es geht mit vorhandenen Bordmitteln.
der OPC ist keine eierlegende Wollmilchsau :) Er dient in erster Linie dazu schnell und performant Inhalte mit rudimentären mitteln zu erstellen. Der OPC steckt noch in den Kinderschuhen, bis der mit anderen Baukastensystemen vergleichbar sein wird bin ich bestimmt schon in Rente.

Wenn da besondere Sachen passieren sollen ist es immer erforderlich sich ein Portlet schreiben zu lassen, eines der externen Portlets die existieren zu nehmen oder sich das css entsprechend anpassen zu lassen.

In deinem Fall wird man vermutlich das css entsprechend anpassen müssen damit das geht
 
  • Gefällt mir
Reaktionen: Groundhog

tjalandi

Neues Mitglied
25. August 2023
2
0
Hallo zusammen,

ich verzweifle gerade am Design meiner Startseite. JTL Shop 5 - Nova Template.

Ich möchte gerne auf einem Bild einen Text oder eine Schaltfläche (egal was) mittig platzieren. Zentrieren klappt ja noch, aber wie kann ich das ganze auch in der Vertikalen mittig platzieren?
Ich habe es bisher mit dem Portlet "Container" versucht. Also ein statisches Hintergrundbild eingefügt und dann ein Portlet "Text" oder "Schaltfläche" eingefügt. Leider "kleben" beide immer am oberen Container-Rand. Dann habe ich es mit verschiedenen Innen- und Außenabständen unter "Layout" versucht, aber das sieht ja nur für eine Ansicht gut aus, z.B. Desktop. Bei mobiler Ansicht ist es dann ziemlich verrutscht...

Genauso hätte ich gerne ein Grid mit 2 Spalten. Linke Spalte Bild, rechts Spalte Text - auch vertikal mittig zum Bild.

Mir geht's also immer um das vertikale Positionieren. Geht das überhaupt? Oder übersehe ich etwas?

Ich meine, sowas ist doch heutzutage Standard bei allen Baukastensystemen, jedes andere Website System kann sogar eine freie Positionierung von Elementen (Elementor, Wix, etc...).
Ich finde, man ist mit diesen starr festgelegten Portlet Positionen ziemlich unflexibel. Man kann doch nicht für alles ein teures Template kaufen. Ich arbeite gerne so weit wie es geht mit vorhandenen Bordmitteln.

Wie macht ihr das?
Freue mich auf Anregungen, vielen Dank.

Grüße,
Christoph
Hallo, ich habe bei das bei meinem Bannerbild so gelöst, das ich in den Button in das Portllet (12) unter dem banner eingefügt habe. Dann habe ich beim Layout vom Button: Layout -> Außenabstand -100 ausgewählt. Der Button mit link sitzt nun auf dem Bild. Das musst du dann leider für Jeder Version von mobil bis Desktop einzeln einrichten.

Liebe Grüße