FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Dawn Theme - Änderung der Schriftgröße im Bild Banner

Gelöst

Dawn Theme - Änderung der Schriftgröße im Bild Banner

BensGinger
Tourist
8 1 0

Hallo,

ich will gern die Schriftgröße im Bildbanner des Dawn Themes ändern. Leider gibt es dort keinen Shopify Editor. Gibt es irgendeine Möglichkeit hier im Code etwas anzupassen?

 

Danke für eine Rückmeldung.

1 AKZEPTIERTE LÖSUNG
BensGinger
Tourist
8 1 0

Erfolg.

@Finer Danke für die ausführliche Beschreibung. Ich nehme es auf und versuche es umzusetzen. 🙂

Lösung in ursprünglichem Beitrag anzeigen

4 ANTWORTEN 4

Finer
Shopify Partner
2632 555 920

@BensGinger ja, das geht per CSS. Hast du Kenntnisse in diesem Bereich?

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
BensGinger
Tourist
8 1 0

@Finer Ein wenig habe ich Erfahrung bzw. mit einer kurzen Anleitung bekomme ich das sicherlich selber im Code eingebaut. Danke schon einmal für die Hilfe.

Finer
Shopify Partner
2632 555 920

@BensGinger dann musst du im Code-Editor in der base.css Datei die Werte für h0 & h1 anpassen. Allerdings kann sich das auch auf andere Elemente übertragen, wo die Schrift ebenfalls auf die Werte zugreifen. Da man bei Dawn im Bild-Banner zwischen zwei Größen wählen kann, musst du einer der beiden Größen anpassen.

 

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);<-- Mobile Ansicht
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);<-- Desktop Ansicht
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);<-- Mobile Ansicht
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);<-- Desktop Ansicht
  }
}

 

Wenn die Schrift kleiner werden soll, könntest du auch in der Section das Class-Attribut von .h1 auf .h2 oder .h3 wechseln. Wenn die Schrift größer werden soll, kannst du entweder eine neue Class mit der Wunschgröße definieren oder du verwendest das "style"-Attribut für den entsprechenden Container:

 

<h2 class="banner__heading h0" style="font-size:6em;">
    <span>Talk about your brand</span>
</h2>

 

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
BensGinger
Tourist
8 1 0

Erfolg.

@Finer Danke für die ausführliche Beschreibung. Ich nehme es auf und versuche es umzusetzen. 🙂