FROM CACHE - de_header
Gelöst

Startseite Theme Dawn - Text in Blocksatz formatieren CSS & Co

hrrmllr
Besucher
3 0 0

Hallo zusammen,

 

ich verwsuche seit ein paar Tagen verzweifelt meine Startseite in Blocksatz zu formatieren.

Bin absoluter Anfänger also seht mir, falls ich was offensichtliches übersehen habe bitte nach. Habe hier im Forum schon gesucht und bin auf die Codes für den CSS Editor gestoßen, was leider nicht funktioniert.

Freue mich über jeden Tipp & Hilfe.

 

Gruß Max
Screenshot 2024-04-15 100545.png

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
17909 2840 4175

Erfolg.

Hey @hrrmllr 

 

Der CSS Editor übernimmt das Justify_Text CSS entweder auf Abschnittsebene oder auf gesamt Shop-Ebene wie folgt aus meinem Testshop abgebildet:

 

 

Dann kannst du den CSS-Code auch etwas anpassen um den Blocksatz global zu definieren:

 

body, p, li {
    text-align: justify;
    text-justify: inter-word;
}

 

Dieser Code wendet Blocksatz auf alle Textkörper (body), Absätze (p) und Listenelemente (li) an, was typische Elemente sind, die Text enthalten. Wenn du bestimmte Bereiche ausschließen oder nur spezifische Abschnitte in Blocksatz formatieren möchtest, musst du möglicherweise spezifischere CSS-Selektoren verwenden. Zum Beispiel:

 

.specific-class p {
    text-align: justify;
    text-justify: inter-word;
}

 

Ersetze .specific-class mit der tatsächlichen Klasse oder ID der Elemente, die du anpassen möchtest. Wenn du auf Probleme stößt oder unsicher bist, kann es hilfreich sein, einen Webentwickler zu konsultieren und um Hilfe zu bitten.

 

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

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5

Gabe
Shopify Staff
17909 2840 4175

Hey Max! @hrrmllr 

 

Nicht verzweifeln - das schaffen wir! Und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren.

 

Probier den CSS hier in deinem CSS Editor Kästchen auf Abschnittsebene und checke wie es auf Mobile auch aussieht:

 

.collection__description p {
    text-align: justify;
    text-justify: inter-word;
}

 

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

hrrmllr
Besucher
3 0 0

Vielen Dank für deine Hilfe @Gabe , hat super funktioniert!nochmal der Voschaulink,

kann man den Blocksatz auch für den gesamten Shop übernehmen?

Gabe
Shopify Staff
17909 2840 4175

Erfolg.

Hey @hrrmllr 

 

Der CSS Editor übernimmt das Justify_Text CSS entweder auf Abschnittsebene oder auf gesamt Shop-Ebene wie folgt aus meinem Testshop abgebildet:

 

 

Dann kannst du den CSS-Code auch etwas anpassen um den Blocksatz global zu definieren:

 

body, p, li {
    text-align: justify;
    text-justify: inter-word;
}

 

Dieser Code wendet Blocksatz auf alle Textkörper (body), Absätze (p) und Listenelemente (li) an, was typische Elemente sind, die Text enthalten. Wenn du bestimmte Bereiche ausschließen oder nur spezifische Abschnitte in Blocksatz formatieren möchtest, musst du möglicherweise spezifischere CSS-Selektoren verwenden. Zum Beispiel:

 

.specific-class p {
    text-align: justify;
    text-justify: inter-word;
}

 

Ersetze .specific-class mit der tatsächlichen Klasse oder ID der Elemente, die du anpassen möchtest. Wenn du auf Probleme stößt oder unsicher bist, kann es hilfreich sein, einen Webentwickler zu konsultieren und um Hilfe zu bitten.

 

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

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

hrrmllr
Besucher
3 0 0

Danke dir @Gabe das mit .specific-class hat sehr gut funktioniert. hier nochmal ein Vorschaulink.

Ich würde gerne auf der Startseite im Bildbanner den Text in eine Reihe (oder in zwei gleich breite) Formatieren und die Schriftgröße etwas größer machen. (Bild 2) im Bild 1 würde ich gerne die Distanz zwischen den beiden Schaltflächen erhöhen. Könntest du mir dabei noch weiterhelfen?


Richtext.pngStartpage.png

Gabe
Shopify Staff
17909 2840 4175

Hey @hrrmllr 

 

 

Um den Text im Banner auf zwei Zeilen zu verteilen, kannst du den Text innerhalb von <p>-Tags platzieren und mit CSS entsprechend anpassen. Grundsätzlich könntest du den Text so aufteilen:

 

 

<div class="banner__text rte caption-with-letter-spacing">
  <p>We have sorted our coffees according to their character</p>
  <p>and how they express themselves.</p>
</div>

 

 

Um die Schriftgröße zu vergrößern, kannst du CSS verwenden, um die Schriftgröße des <p>-Tags innerhalb des banner__text-Containers anzupassen. Hier ist ein Beispiel:

 

 

.banner__text p {
    font-size: 18px; /* oder eine andere Größe, die zu deinem Design passt */
}

 

 

Um den Abstand zwischen den Schaltflächen zu erhöhen, kannst du die CSS-Eigenschaft margin verwenden. Beispiel:

 

 

.rich-text__buttons a {
    margin-right: 20px; /* Erhöht den Abstand zwischen den Schaltflächen */
}

 

 

Hoffe das hilft dir weiter - bei weitere Fragen dazu kann ich gerne einen Programmierer empfehlen! 😉

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog