Mobile Ansicht

[Laura12_20]

Hallo,

wir haben auf unserem Shop eine Diashow mit Slideshow, die wunderbar funktioniert. Weiter unten habe ich erneut eine Dia als Form verwendet (nur ein Slide) und einen Text mit Button darauf platziert. In der Desktopansicht wird es richtig dargestellt, in der mobilen Ansicht wird der Text unter die Dia gesetzt und ist separat. Kann mir jemand sagen, ob es möglich ist, den Text auf die Grafik zu legen? Bei unserer anderen Dia mit mehreren Slides ist es kein Problem. LG

[Gabe · Accepted solution]

Hey @Laura12_20 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren. Welches Theme das ist wäre auch wichtig zu wissen denn verschiedenen Themes gestalten die Slideshow ja unterschiedlich mit unterschiedlichen Elementen und Features.

Und du möchtest auf Mobile dass der Text auch als Overlay Text über dem Bild angezeigt wird. Aufgrund des schmalen Bildschirms auf Mobile ist das DOM (document object model) ganz anders auf Mobile strukturiert als auf Desktop und daher wird es nicht ganz einfach sein, das zu erreichen. Ein Workaround wäre eine Bild nur auf Mobile als "Adaptive Content on Responsive UI" anzuzeigen wo du ein Bild mit dem Text im Bild nur auf Mobile zeigst mit dem Bild als clickable. Das kann man mit CSS und Media Queries erreichen aber hierfür empfehle ich einen Frontend Programmierer dafür in Auftrag zu stellen.

Hier ein Beispiel: Um Text über ein Bild in der mobilen Ansicht zu legen, kannst du CSS verwenden, um den Text als absolutes Element innerhalb eines relativen Containers zu positionieren. Hier ist ein einfaches Beispiel, wie du dies umsetzen kannst:

HTML:

<div class="image-text-container">
  <img src="DEIN-BILD-URL" alt="Bildbeschreibung">
  <div class="overlay-text">Dein Text hier</div>
</div>

Etwas CSS-Styling:

.image-text-container {
  position: relative;
  text-align: center;
}

.overlay-text {
  position: absolute;
  top: 50%; /* Zentriert den Text vertikal */
  left: 50%; /* Zentriert den Text horizontal */
  transform: translate(-50%, -50%); /* Korrigiert die Positionierung */
  color: white; /* Textfarbe */
  /* Weitere Stilisierung nach Bedarf */
}

Responsive UI Anpassung: Um sicherzustellen, dass diese Anpassung nur in der mobilen Ansicht angewendet wird, kannst du, wie oben erwähnt, Media Queries verwenden. Beispiel:

@media (max-width: 768px) {
  .image-text-container {
    /* Stilisierung für mobile Geräte */
  }

  .overlay-text {
    /* Stilisierung für Text in mobiler Ansicht */
  }
}

Diese Methode ermöglicht es dir, Text über Bilder in einer responsiven Weise zu positionieren, wobei der Text in der Desktopansicht anders gestaltet oder positioniert werden kann als in der mobilen Ansicht.

Beachte, dass die genaue Implementierung von den spezifischen Details deines Shopify-Themes abhängen kann. Für eine präzise Anpassung an dein Theme und die Umsetzung fortgeschrittener Funktionen (wie z.B. ein "Mehr anzeigen"-Button) könnte es notwendig sein, spezifische Theme-Dateien zu bearbeiten oder zusätzliches JavaScript hinzuzufügen.

Wenn du dir bei der Umsetzung unsicher bist, empfehle ich, einen Webentwickler zu konsultieren oder spezifische Ressourcen und Foren wie das Shopify Community Forum für detailliertere Anleitungen und Unterstützung zu nutzen.

Hoffe das hilft dir weiter! 😉

---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!

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.