Schrift im Abschnitt "Bild-Banner" ändern

[fusedrummer]

Hallo!

Ich möchte den Titel im Abschnitt "Bild-Banner" des Themes "Crave" ändern, und zwar folgendes:

1. den Titel horizontal verschieben (weiter nach unten auf dem Bild).

2. die Spaltenbreite des Titels ändern (aktuell wird der Titel in 2 Zeilen angezeigt, obwohl rechts und links genug Platz ist).

3. die Schriftgröße in der mobilen Ansicht anpassen (aktuelle ist die Schriftgröße in der Mobilen Ansicht so riesig, dass vom Banner-Bild fast nichts mehr zu sehen ist)

Danke!

[Gabe]

Hey @fusedrummer 

Danke für die Fragen und schauen wir was alles möglich ist um das zu erreichen was du haben möchtest. Wenn das nicht in den Theme Einstellungen geht was du erreichen möchtest, wird es eine Code Anpassungen verlangen. Nur dass du einverstanden bist - eine Code Anpassung verlangt das Ändern deines Theme Code was 1) die Ladezeiten verlangsamen kann, und 2) dein Crave Theme aus den Theme Updates ausschließen kann.

Hast du auch von deinen 60-Min Design Time Gebrauch gemacht? Jedes Shopify Theme bekommt einen 60-Min Guthaben wo unsere Entwickler kleine Jobs im Theme ausführen können, je nach Machbarkeit und unserer Design Richtlinie.

DIY - das folgende immer zuerst in einer Theme Kopie/Testumgebung testen!

Das Folgende ist auch ohne Gewähr und ggf. muss man den Code tweaken, aber bitte nur mit einem Experten/Programmierer:

Um den Titel im Bild-Banner des Shopify Themes anzupassen, muss man Änderungen im Theme-Code vornehmen. Hier sind die Schritte:

1. Gehe zu Theme -> Aktionen -> Duplizieren -> Code bearbeiten

2. Navigiere zur Datei -> base.css und füge den folgenden Code ganz unten dazu:

.section--image-banner .image-banner__title-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 70%;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}

Was genau macht dieser Code?
Die CSS-Eigenschaft display: flex; wird hier verwendet, um ein flexibles Layout zu erstellen. flex-direction: column; stellt sicher, dass der Titel in einer Spalte angezeigt wird. justify-content: flex-end; verschiebt den Titel nach unten. align-items: center; zentriert den Titel horizontal. height: 70%; legt die Höhe des Titels auf 70% des Bildes fest. max-width: 50%; beschränkt die Breite des Titels auf maximal 50% des Bildes. margin-left: auto; margin-right: auto; zentriert den Titel horizontal.

Um die Schriftgröße in der mobilen Ansicht anzupassen, den folgenden CSS-Code im base.css ganz unten verwenden:

@media only screen and (max-width: 749px) {
  .section--image-banner .image-banner__title h1 {
    font-size: 30px;
  }
}

Was passiert hier?

Das CSS-Attribut @media wird verwendet, um die Schriftgröße nur in der mobilen Ansicht zu ändern. only screen and (max-width: 749px) legt fest, dass der Code nur auf Geräten mit einer maximalen Bildschirmbreite von 749px ausgeführt wird. .section--image-banner .image-banner__title h1 zielt auf den Titel im Bild-Banner ab. font-size: 30px; ändert die Schriftgröße auf 30px.

Das ganze empfehle ich aber nur mit einem Programmierer zu testen und gerne kann ich welche empfehlen! 

----
Lass wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

[fusedrummer]

Hey @Gabe,

vielen Dank für die sehr ausführliche und für mich als Laien nachvollziehbare und verständliche Antwort.

Ich werde die Vorschläge demnächst einmal ausprobieren und mich dann noch einmal melden.

Von der 60-Min Design Time hatte ich noch nicht gehört, vielen Dank für den Tipp!