Hey Anja! @Anja73
Ich sehe was du meinst - du möchtest den Zeilenumbruch im Überschriften-Kästchen deines Newsletter Form Abschnitts vermeiden und auf einer 2. Zeile der Newsletter Überschrift weiteren Text hinzufügen ohne so viele ------------BINDESTRICHE------------ verwenden zu müssen. Du verwendest ja auch schon den Popup Newsletter Modal, ist das richtig? Wie viele Newsletter Modale hast du derzeit gleichzeitig aktiv im Shop?
Ein kleiner Kommentar dazu Anja und das Folgende meine ich mit der besten Absicht
!Ich sehe du arbeitest schon sehr lange an diesem Newsletter Abschnitt da wir das schon mehrmals hier in der Community besprechen. Darf ich dazu fragen, ob vielleicht eine andere Newsletter Lösung nicht für dich besser wäre denn du hast schon viel Zeit und Energie mit dieser Form sowie die in der Fußzeile verbracht die du vielleicht effizienter verwenden könntest, wie z. B. für das Marketing deines Shops oder den Design einer tollen Customer Experience in deinem Shop? Bzgl. Zeilenumbrüche in Überschriften Kästchen, diese Kästchen sind leider nicht HTML-fähig und somit wird es nicht so einfach sein zu lösen. Wir besprechen das Thema Zeilenumbrüche auch schon sehr oft hier in der Community, wie du hier lesen kannst. Siehe einen wo unsere zwei Experten sogar eine _Lösung anbieten hier_.
Eine weitere Lösung wird hier angeboten wo man das Type
des Überschriften-Kästchen von 'inline_richtext'
zu 'textarea'
ändert und dann wird es HTML-Fähig und man kann im Liquid <br>
Tags anwenden.
Es im Code DIY lösen
Um manuelle Zeilenumbrüche im Überschriften-Kästchen deines Newsletter Form Abschnitts besser steuern zu können, so dass lange Überschriften nicht automatisch umbrechen, müsstest du <br>
-Tags verwenden, um einen Zeilenumbruch an einer bestimmten Stelle zu erzwingen. Zusätzlich müsstest du CSS anwenden, um die Formatierung zu verbessern. Hier ein Beispiel dass du im Liquid dieses Sections einbauen müsstest und wie du siehst ist es nicht ganz wenig:
##
TASCHENSTERN-NEWSLETTER
Spare 10% auf deine nächste Bestellung
######
Durch diese Anmeldung erklärst du dich mit der Datenschutzerklärung einverstanden und das wir dich regelmäßig mit sternigen Neuigkeiten auf dem Laufenden halten dürfen.
Der notwendige CSS Code um es in einer bestimmten Weise zu gestalten wie z. B. die Überschriften zu zentrieren:
.newsletter__wrapper h2.h4 {
white-space: pre-line;
text-align: center; /* Optional: Um den Text zu zentrieren */
}
Mit white-space: pre-line;
wird der Text so behandelt, dass Leerzeichen und Zeilenumbrüche respektiert werden. Dies kann hilfreich sein, wenn man mehrere Zeilenumbrüche im Text hat und diese im HTML-Code nicht explizit durch <br>
-Tags steuern möchten.
Falls du es vermeiden möchtest, <br>
-Tags direkt im HTML zu verwenden, dann kannst du auch CSS Pseudo-Elemente wie folgt nutzen:
.newsletter__wrapper h2.h4:after {
content: "Spare 10% auf deine nächste Bestellung";
display: block;
}
In diesem Fall bleibt der HTML-Code unverändert und der zusätzliche Text wird durch CSS hinzugefügt:
## TASCHENSTERN-NEWSLETTER
Diese Methoden ermöglichen es, die Zeilenumbrüche und das Layout der Überschriften genauer zu steuern, verlangen jedoch eine erhebliche DIY Programmierung im Theme Code.
Wenn du es selber DIY programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!