im Dawn Theme Slidershow Titel, zeilenumbruch.

[Saadettin42]

Hallo, wir wollen demnächst mit unseren Shop online gehen. Jetzt haben wir folgendes Problem: 

wir haben auf der Startseite einen Slider. Auf den Bildern können wir einen Titel eintragen der angezeigt wird. Nur möchten wir das nach einem Punkt ein Zeilenumbruch gemacht wird. Ich habe schon versucht mit <br> einen Umbruch zu machen, doch es hat nicht geklappt. Im Internet hab ich auch nach Lösungen gesucht, ich komme nicht mehr weiter. 

Anbei ein Screenshot. Zeilenumbruch nach Taste the World.

[Gabe]

Hey @Saadettin42 

Exciting times bzgl. eurem baldigen Go-Live und erstmals ein herzliches Willkommen auf der Plattform! Jetzt geht's los... 😉

Und danke für die Fragen aber bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Ich sehe aber ihr verkauft Gewürze und solche Produkte. Das Ziel wäre hier, dass der Besucher beim Betreten eurer Landingpage eure Gewürze fast so richtig riechen kann. Habt ihr das erzielt? Das ist wichtig um das Shop mehr Engaging zu machen.

Bzgl. eurem Slider und den Zeilenumbruch, ich nehme mal an ihr arbeitet mit dem Dawn Theme, ist das richtig? Wenn ja, ich habe das jetzt in meinem Dawn Theme Hero Banner getestet, wie ich da einen Zeilenumbruch gezielt einbauen kann über unseren CSS Editor (mehr dazu in unserer Anleitung hier).

FAZIT: so einfach wird das nicht gehen, wie du unten lesen kannst und wenn du es selber auf deiner Homepage 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!

Hier nochmal dein Bild:

Erster Schritt: das im Dawn Theme selber testen. Ggf. geht es einfacher mit den Einstellungen die man im Theme Editor hat wie beispielweise die Groesse des Titels ändern:

Zweiter Schritt: das CSS in der Dev Console analysieren:

Um den Zeilenumbruch im Satz „Taste the World. Mit den Spices von Nural“ direkt nach dem Punkt und vor dem Wort „Mit“ hinzuzufügen, kannst du das oben-abgebildete HTML-Element wie folgt ändern:

<h2 class="banner__heading inline-richtext h0">
 Taste the World.<br> Mit den Spices von Nural
</h2>

Das scheint aber nicht zu klappen da es von anderen Elementen überschrieben wird die im HTML einen höheren Ranking haben.

Um den Zeilenumbruch mit CSS zu erzielen, müssen wir eine kreative Lösung anwenden, da CSS standardmäßig keinen direkten Weg bietet, einen Zeilenumbruch mitten in einem Text zu erzwingen, ohne den HTML-Code zu ändern. Eine Möglichkeit ist, Pseudo-Elemente zu verwenden, um den Text in zwei Teile zu teilen und dann mithilfe von CSS einen Zeilenumbruch zu erzeugen.

Hier ist ein Beispiel, wie du es tun könntest:

1. Zuerst müssen wir den Text in zwei Teile teilen und den ersten Teil als ein Attribut zum HTML-Element hinzufügen.
2. Dann verwenden wir CSS, um den Teil vor dem Zeilenumbruch und den Teil nach dem Zeilenumbruch unterschiedlich zu behandeln.

Hier ist der aktualisierte HTML-Code:

<h2 class="banner__heading inline-richtext h0" data-first-part="Taste the World.">
 Mit den Spices von Nural
</h2>

Und der CSS-Code dazu:

.banner__heading::before {
 content: attr(data-first-part);
 display: block; /* Erzwingt den Zeilenumbruch nach dem Pseudo-Element */
}

.banner__heading {
 display: block;
}

Dieser CSS-Code fügt den Inhalt des data-first-part-Attributs vor dem eigentlichen Inhalt des <h2>-Elements ein und stellt ihn dar. Durch display: block; im Pseudo-Element ::before wird sichergestellt, dass der Rest des Inhalts in einer neuen Zeile beginnt.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Saadettin42]

Vielen Dank für die Mühe. ich weiß nicht wo ich was hinzufügen soll. Könnten Sie mir da auch behilflich sein 
www.nural-foods.de. 

[Gabe]

Hey @Saadettin42 

Danke für die URL und das Passwort habe jetzt wieder entfernt falls du sie hier nicht haben möchtest. 

Ich hoffe du kannst verstehen dass ich nicht die Erlaubnis habe in deinem Theme Code und Backend reinzusteigen, da ich nur hier der Community Moderator bin. Siehe meinen Video dazu hier.

Du müsstest das mit einem unserer Experten machen, die das für dich machen können indem du denen einen Gast Zugang erstellst. 

Stelle deine Frage auf Englisch in unserem Design Forum hier und in unserer deutschen privaten FB Gruppe hier. Da werden sich Experten bei dir melden.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉