Hallo,
bei den “Bild mit Text” Elementen ist immer nur der Button verlinkbar.
Im Sinne einer besseren Usability würde ich gerne das ganze DIV verlinken. Gibt es eine Möglichkeit das für unterschiedliche Elemente mit unterschiedlichen Links zu lösen?
Hey @mjmu
Meinst du das ganze Bild als klickbaren Link zu haben? Die Texte sind ja auch verlinkbar im “Bild mit Text” Section also ist es nicht ganz klar was du erreichen möchtest aus deiner Beschreibung.
Dann kannst du gerne andere Blöcke verwenden um das ganze DIV zu verlinken, wie z. B. das benutzerdefinierte Liquid:
Aber ob das ganze DIV als klickbar zu machen eine verbessert UX darstellt ist bestritten denn auf Mobile z. B. kann man dann sehr leicht aus Versehen oder ungewollt drauf mit dem Finger tappen was auch nicht gut für die Barrierefreiheiten ist.
Code Lösungen
Es gibt auch weitere Möglichkeiten, wie man ein gesamtes DIV-Element in Shopify klickbar machen kann.
Gehe in die spezifischen Liquid-Datei, die den Code für den “Bild mit Text”-Abschnitt enthält. Dies könnte in einer Datei wie sections/image-with-text.liquid sein. Suche den Code für das DIV-Element, das du verlinken möchtest. Es könnte so aussehen wie <div class="image-with-text">...</div>. Füge einen Link (<a>) Tag um das gesamte DIV wie folgt:
...
In diesem Code ersetzt {{ section.settings.link }} den Link, den du für das jeweilige Bild festlegst. Stelle sicher, dass du die richtigen CSS-Stile anwendest, um sicherzustellen, dass der Link das gesamte DIV-Element abdeckt. Dies könnte wie folgt aussehen:
.image-with-text a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
Hoffe das hilft dich in die richtige Richtung zu weisen! 
Hallo, danke für die Antwort.
Ja, alles verlinken ist wahrscheinlich eh keine wirklich gute Idee.
Gibt es eine Möglichkeit, einfach nur das Bild zu verlinken?
Danke dir!
Hey @mjmu
Wenn du nur das Bild verlinken möchtest, kannst du das folgendermaßen tun. Wenn du es selber 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 negative 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!
Wenn du nur das Bild verlinken möchtest, ggf. mit einem Code wie das folgende:
Text hier
Bei weiteren Fragen kann ich gerne eine Experten empfehlen!
Hi,
danke aber das ist ja nur normales HTML.
Ich wollte es eigentlich so machen, dass ich direkt im Theme eine option habe, einen Link einzufügen.
Danke dir!
1 Like
Ja der “Bild mit Text” Abschnitt ist diesbzgl. etwas limitiert.
Hast du auch die andere Abschnitts-typen ausprobiert wie den benutzerdefinierten Liquid Abschnitt?
Hi, sorry, das ist bei uns grade ein bisschen untergegangen.
Ich würde aus Usabillitygrünmden doch nur das Bild verlinken.
Geht das auch mit Liquid? Es müssten halt unterschiedliche Links für unterschiedliche Bilder angelegt werden.
Etwas complicated leider da diese Sections ziemlich ge-hardcoded sind und sie zu ändern würde viel Code verlangen, da ein einfacher CSS hier nicht ausreicht. Das Einzige was ich empfehlen kann sind folgende Punkte:
- Probiere versch. Sections aus die es vielleicht besser machen können.
- Probiere das benutzerdefinierte Liquid Section und programmiere es mit deinem eigenen HTML und Liquid Variablen.
- Füge weitere Test-Themes zum Shop vom Theme Store hinzu, die mehr tolle Sections anbieten, wie das Impact Theme, Frame, Impulse, und/oder Prestige Theme.
- Schau dir ein paar weitere Leitfäden zum Thema an hier denn da werden Lösungen angeboten.
Hoffe das hilft dir weiter!