Product Page - Online Shop Erstellen Teil 5

[@michaelkneidinger9530]

Danke für diese tollen Anleitungsvideos!!! Ich habe das Thema, das meine Titel nicht so schön gleichmäßig aus zwei Wörtern bestehen und ich würde gerne den Preis immer auch der gleichen Höhe haben, bzw unten bündig. Besteht eine Möglichkeit den Titel in ein Art "fixen Rahmen" zu passen, damit der Preis und der Warenkorb darunter nicht einmal weiter oben oder weiter unten sind?

[@stefanwirth]

Vielen Dank für deinen Kommentar! :) Ich gehe davon aus, dass sich deine Frage auf die Archiv-/Shop-Seite bezieht und nicht auf die Single Product Page - das Video hier, wo du deinen Kommentar geschrieben hast. Wenn dem so ist, dann habe ich 3 verschiedene Lösungsvorschläge: 1. Quickfix für nur eine Zeile beim Produkttitel - würde ich bevorzugen: Klick auf unser verwendetes Products Grid im Produkte Archiv und dann bei Inhalt -> Products Grid: Enable Line Wrap Ja Length -1 Dann hast du zwar nicht den ganzen Titel doch in Kombination mit "Stil -> Title -> Typografie -> Größe der Überschrift verkleinern auf z.B. 18 px" und ggf. Einkürzung der Titel auf das Wesentliche ohne Füllwörter sollte das Wichtigste in der Übersicht (!) aller Produkte ersichtlich sein. Man ist dann auch ein bisschen dazu gezwungen, direkt zu Beginn den Kern zu treffen, was gut sein kann :) 2. Andernfalls, für eine Lösung wie von dir gewünscht: Da würde ich nicht mehr mit dem Standard Preset von einem Loop Grid arbeiten. Bedeutet: im Elementor Theme Builder neues Loop Grid Item für ein Produkt erstellen. In den Container also Bild (Produktbild dann einstellen bei Bild -> Bild auswählen), Produktname, Produktpreis und in den Warenkorb reinziehen. Beim Warenkorb bei Bedarf Menge einfach "verstecken". Und nun zur Lösung machen wir das Folgende: neuen Container vorerst unter den Titel ziehen und danach in diesen neuen Container den Produktnamen ziehen. Klick auf Container: Außenabstand und Innenabstand auf 0 setzen. Dann beim Container, wo der Produkttitel drin ist, die Min Höhe so einstellen, dass dein längster Titel reinpasst. Siehst du später in der finalen Ansicht, wenn du passend zum Loop Grid Item einen Loop Grid mit deinen Anzahlen an Spalten für Desktop, Tablet und Mobile erstellst. 3. Custom CSS - funktioniert bei mit wunderbar mit nachfolgenden Spalten-Anzahlen in unserem Katzenbaumshop: Desktop 3, Tablet 3 und Mobile 1. Klick beim Products Grid (wie im Tutorial erklärt mit den Presets für die Product Templates) auf Erweitert, Eigene CSS, nachfolgendes einfügen und fertig 😊: /* Container für Produktliste */ .jet-woo-products { display: flex; flex-wrap: wrap; } /* Produktelemente */ .jet-woo-products .jet-woo-product { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; flex: 1 1 33.333%; /* Drei Spalten auf Desktop und Tablet */ box-sizing: border-box; } /* Einheitliche Höhe für die Produkttitel */ .jet-woo-product-title { flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; height: 60px; /* Feste Höhe für Titel, passe nach Bedarf an */ margin-bottom: 10px; /* Abstand zum nächsten Element */ } /* Einheitlicher Abstand zwischen Titel und Preis */ .jet-woo-product-price { text-align: center; margin-bottom: 10px; /* Abstand nach unten */ } /* Einheitlicher Abstand zwischen Preis und Warenkorb-Button */ .jet-woo-product-buttons { display: flex; justify-content: center; margin-top: auto; margin-bottom: 10px; /* Einheitlicher Abstand nach unten */ } /* Anpassungen für mobile Geräte */ @media (max-width: 767px) { .jet-woo-products .jet-woo-product { flex: 1 1 50%; /* Zwei Spalten auf Mobilgeräten */ } }