Hallo zusammen, ich arbeite mit dem Design Malibu und möchte gerne eine Leiste erzeugen wo ich meine Top Marken abbilde jeweils mit einem Link wo dann auf die entsprechenden Seiten verwiesen werden. Jedoch möchte ich es nicht so grpß darstellen wie Produktseiten. Das heißt es sollte eine schmale Leiste werden ungefähr so in der Art: Wie lässt sich sowas abbilden? Es wäre sehr nett wenn ihr mich dabei unterstützen könntet. Vielen herzlichen Dank für Eure Hilfe! Grüße Steffen Schaumberger www.shop.sts-runningconcept.de
... vielen herzlichen Dank für die Rückmeldung. Jedoch wie kann ich dies auf der Startseite an einer gewissen Stelle einfügen? Grüße Steffen
erstelle im Style Edit eine neue Spalte. Dieser Spalte gibst du die Klasse "linkliste". (in der grauen linken Spalte, ganz unten) ohne " " Füge ein Bild-Widget in diese Spalte ein. Füge hier ein gewünschtes Bild ein. In der linken grauen Spalte kannst du den Link einfügen. Klicke unter dem Bild auf das + Füge hier wieder ein Bild-Widget ein. Füge auch hier den Link ein. Füge mit dem + darunter das nächste Bild mit Link ein. usw. Bis alle untereinander stehen. Dann gibst du ins eigene CSS diesen Code ein: Code: .linkliste { display: flex; flex-wrap: wrap; } Im Style Edit siehst du die Änderung leider nicht. Aber wenn du es speicherst und du deinen Shop im Browser öffnest, sollten alle Bilder horizontal angeordnet sein.
moin, @Michaela Klaiber leide sind die Bilder nicht horizontal nebeneinander und wie bekomme ich im Hintergrund den Schatten hin? VG, Tamay
im StyleEdit werden sie nicht horizontal dargestellt, aber im Frontend schon. Schreib am besten Schritt für Schritt was du gemacht hast. Dann finde ich es besser, warum es bei dir nicht klappt.
ich habe mal 2 bilder eingefügt. genau wie du es beschrieben hast. (Link nur für registrierte Nutzer sichtbar.) danke fürs nachschauen
den Abstand der Bilder machst du mit dieser Zeile: margin-right: 20px und den Schatten hiermit: box-shadow: 0 0 15px rgba(0, 0, 0, 0.35) Der Abstand innerhalb hiermit: padding: 10px Gib jedem Bild die Klasse imglinkliste (wenn in dem Feld Klasse schon etwas steht, lösche es NICHT, sondern setze ein Leerzeichen dahinter und schreibe dann imglinkliste und dies ist der CSS Code dafür: Code: .imglinkliste { margin-right: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.35); padding: 10px; }
Moin Dankeschön. Hat soweit schon mal geklappt. Nur in der Mobilen Ansicht gehen die Bilder 2 Reihig nach unten. Kann man dies in 3 Reihig ändern?
Das richtet sich nach der Bildschirmbreite. bei 381px breite sind es 2 Bilder, bei 384 px 3 Bilder und ab 492px 4 Bilder .....
das passiert, weil deine Bilder mit der aktuellen Einstellung zu breit sind für 3 nebeneinader. Aber hiermit sind 3 Bilder nebeneinander mit deiner Bildgröße: Ersetze die 2 Codes von oben durch diese: Code: .imglinkliste { margin-right: 4px; margin-left: 4px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.35); padding: 10px; } Code: .linkliste { display: flex; flex-wrap: wrap; padding-right: 0px; padding-left: 0px; justify-content: center; }
du kannst bei .linkliste noch diese Zeile hinzufügen, dann ist es immer zentriert: Code: justify-content: center;