{"id":5450,"date":"2026-03-12T15:32:37","date_gmt":"2026-03-12T14:32:37","guid":{"rendered":"https:\/\/support.sparkles.io\/kennisbank\/shop-design-fuer-zukuenftige-shopbetreiber\/"},"modified":"2026-05-05T09:50:31","modified_gmt":"2026-05-05T08:50:31","slug":"shop-design-fuer-zukuenftige-shopbetreiber","status":"publish","type":"ht_kb","link":"https:\/\/support.sparkles.io\/de\/kennisbank\/shop-design-fuer-zukuenftige-shopbetreiber\/","title":{"rendered":"Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber"},"content":{"rendered":"\n<p>Als Shopbetreiber bist du Inhaber deines eigenen Kartenladens. Der Webshop wird zum Schaufenster deines Ladens, daher ist es wichtig, ihn in deinem eigenen Stil zu gestalten. F\u00fcr das reibungslose Funktionieren deines Webshops ist es notwendig, dass du ein Design f\u00fcr Desktop und Mobilger\u00e4te einreichst.   <strong>Wenn du nur eine Desktop-Version einreichst, erstellen wir nach eigenem Ermessen eine mobile Version.<\/strong><\/p>\n\n<p>Die Mobil- und Tablet-Versionen sind Ableitungen der Desktop-Version. Hier verwendest du denselben Content. Du kannst dich jedoch daf\u00fcr entscheiden, spezifische Teile oder Elemente auf Mobilger\u00e4ten wegzulassen. Tu dies nur, wenn es der Benutzererfahrung zugutekommt.   <\/p>\n\n<p><strong>Starte in der Adobe Creative Suite:<\/strong> Erstelle das Design f\u00fcr deinen Shop in einem Programm der Adobe Creative Suite (Photoshop, Illustrator, InDesign), damit wir auch mit deinen Quelldateien arbeiten k\u00f6nnen.<\/p>\n\n<h2 class=\"wp-block-heading\">1. Das Design des Webshops<\/h2>\n\n<p>Ein gutes Design ist ansprechend, h\u00e4lt die Aufmerksamkeit fest und l\u00e4dt den Besucher dazu ein, aktiv zu werden. Manchmal liegt das in den kleinen Details, wie der Form eines Buttons oder der Schriftgr\u00f6\u00dfe eines Textes. Der Stil muss in jedem Fall zu dem passen, was du als Unternehmen ausstrahlen m\u00f6chtest. Schnickschnack ist l\u00e4ngst nicht immer f\u00fcr ein erfolgreiches Design n\u00f6tig.   <\/p>\n\n<p>Die Benutzererfahrung spielt sich eher im Hintergrund ab und dreht sich vor allem um Funktionalit\u00e4t und Struktur. Was m\u00f6chte der Besucher wissen oder was m\u00f6chte der Besucher tun? Es ist ratsam, der Art und Weise, wie du Informationen ordnest, Aufmerksamkeit zu schenken. Pr\u00e4sentiere die Informationen so weit wie m\u00f6glich in \u00fcbersichtlichen Abschnitten.   <\/p>\n\n<h3 class=\"wp-block-heading\">1.1. Beispiele zur Inspiration<\/h3>\n\n<p>Hier findest du einige Shop-Beispiele zur Inspiration. Schau dir diese Shops mal auf dem Desktop und mobil an. Mobil bietet ein anderes Erlebnis und eine andere Interaktion. Ber\u00fccksichtige das sp\u00e4ter auch bei deinem Entwurf.   <\/p>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.prettyorange.nl\/\">Prettyorange<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.blijkaartje.nl\/\">Blijkaartje<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.ontwerpvannien.nl\/\">Ontwerp van Nien<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/bladergoud.nl\/\">Bladergoud<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/studiopie.nl\/\">Studiopie<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.liefsvananet.nl\/\">LiefsvanAnet<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.buroleo.nl\/\">Buroleo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.zomooikaartjes.nl\/\">Zomooi<\/a><\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">2. Richtlinien f\u00fcr das Design<\/h2>\n\n<h3 class=\"wp-block-heading\">2.1. Ein eigener (Haus-)Stil<\/h3>\n\n<p>Beginne mit dem Design der Homepage f\u00fcr Desktop und Mobilger\u00e4te und arbeite dabei mit einem klaren Corporate Design. Der Stil wird durch Logo, Schriftarten, Farben, Bilder, Icons, Komposition usw. bestimmt. Innerhalb des Photoshop-Templates wird auch ein Stylesheet f\u00fcr das Corporate Design angeboten. Vervollst\u00e4ndige dieses Stylesheet mit einer Farbpalette, den Schriftarten und den Buttons, die du verwenden wirst. Dies bildet die Basis f\u00fcr deinen Webshop. Wende den Stil so konsequent wie m\u00f6glich auf den Seiten an, die du anschlie\u00dfend entwirfst. Das sorgt f\u00fcr Konsistenz und Wiedererkennbarkeit, was beides ein Gef\u00fchl von Vertrauen beim Kunden erzeugt.      <\/p>\n\n<p><strong>Tipps:<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Das Logo:<\/strong> Entwirf dein Logo (oder lass es entwerfen) und platziere es im Stylesheet. So kannst du die Farbpalette und die Schriftarten besser aufeinander abstimmen. <\/li>\n\n\n\n<li><strong>W\u00e4hle die Farbpalette:<\/strong> Begrenze die Anzahl der Farben deines Stils. Ber\u00fccksichtige dabei auch den Kontrast, wenn es um (hellen oder dunklen) Text auf einer Farbe geht. <\/li>\n\n\n\n<li><strong>W\u00e4hle die Schriftarten:<\/strong> Verwende maximal zwei (Google) Fonts.<\/li>\n\n\n\n<li><strong>Bestimme die \u00dcberschriften und den Flie\u00dftext:<\/strong> Vervollst\u00e4ndige die \u00dcbersicht der \u00dcberschriften und des Flie\u00dftextes. Bist du nicht mit der Funktionsweise von Headings und Bodytext vertraut? Kein Problem! Das wird <a href=\"#headings-bodytext\">hier<\/a> erkl\u00e4rt.   <\/li>\n\n\n\n<li><strong>Gestalte die Buttons:<\/strong> Durch die Verwendung von wiedererkennbaren Buttons wird sich der Besucher schnell zurechtfinden und verstehen, welche Aktionen auf der Seite am wichtigsten sind. Ein Button kann seinen eigenen Charakter erhalten, indem man mit der Abrundung der Ecken, der Farbe und der Typografie spielt. <\/li>\n\n\n\n<li>Triff klare Entscheidungen bei der Formgebung, wie etwa eckig oder rund. <a href=\"#buttons-style\">Hier<\/a> kannst du mehr \u00fcber das Styling von Buttons lesen.<\/li>\n\n\n\n<li>Sei konsistent, das sorgt f\u00fcr einen klaren Stil.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" fetchpriority=\"high\" decoding=\"async\" width=\"431\" height=\"516\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/ontwerp-shop1.webp\"  alt=\"ontwerp-shop1 Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2376\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/ontwerp-shop1.webp 431w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/ontwerp-shop1-251x300.webp 251w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/ontwerp-shop1-42x50.webp 42w\" sizes=\"(max-width: 431px) 100vw, 431px\" \/><\/figure>\n\n<p><em>Beispiel eines Styleguides mit Auswahl f\u00fcr Farben und Schriftarten.<\/em><\/p>\n\n<h3 class=\"wp-block-heading\">2.2. Schriftart w\u00e4hlen<\/h3>\n\n<p>Sei sparsam mit der Verwendung verschiedener Schriftarten. Oft reicht eine Schriftart f\u00fcr die \u00dcberschriften (Headings) und eine f\u00fcr die Texte (Abs\u00e4tze) aus. Nutze f\u00fcr die Schriftarten <a href=\"https:\/\/fonts.google.com\">Google Webfonts<\/a>. Diese Fonts k\u00f6nnen sowohl online als auch offline frei heruntergeladen und verwendet werden!   <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" decoding=\"async\" width=\"585\" height=\"452\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/lettertype-kiezen.webp\"  alt=\"lettertype-kiezen Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2377\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/lettertype-kiezen.webp 585w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/lettertype-kiezen-300x232.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/lettertype-kiezen-50x39.webp 50w\" sizes=\"(max-width: 585px) 100vw, 585px\" \/><\/figure>\n\n<p><em>Schriftart <i>in Google Fonts w\u00e4hlen<\/i><\/em><\/p>\n\n<h3 class=\"wp-block-heading\">2.3. Lesbarkeit<\/h3>\n\n<p>Verwende f\u00fcr den Bodytext (auch: Lesetext) eine Mindestschriftgr\u00f6\u00dfe von 14\u201316 px f\u00fcr eine gute Lesbarkeit. Die Titel und \u00dcberschriften d\u00fcrfen nat\u00fcrlich gr\u00f6\u00dfer sein. <\/p>\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb advgb-dyn-1c11950b\"><div class=\"advgb-infobox-wrap\"><div class=\"advgb-infobox-icon-container\"><div class=\"advgb-infobox-icon-inner-container\"><i class=\"material-icons-outlined\">lightbulb_outline<\/i><\/div><\/div><div class=\"advgb-infobox-textcontent\"><h3 class=\"advgb-infobox-title\">Tipp<\/h3><p class=\"advgb-infobox-text\">Spiele mit Schriftart, Textgr\u00f6\u00dfe und Zeichenabstand. Texte in Versalien (Gro\u00dfbuchstaben) wirken sch\u00f6n und schick, k\u00f6nnen aber auch schwerer lesbar sein. <\/p><\/div><\/div><\/div>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" decoding=\"async\" width=\"550\" height=\"423\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/leesbaarheid.webp\"  alt=\"leesbaarheid Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2378\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/leesbaarheid.webp 550w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/leesbaarheid-300x231.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/leesbaarheid-50x38.webp 50w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n<p>Beispiel einer \u00dcbersicht f\u00fcr die Schriftverwendung, bei der verschiedene Header\/Titel und die Nutzung auf Desktop und Mobilger\u00e4ten ber\u00fccksichtigt wurden.<\/p>\n\n<h2 class=\"wp-block-heading\">3. Desktop und Mobil<\/h2>\n\n<p>Starte in deinem Designprogramm mit einer <strong>Breite von 1200 px f\u00fcr Desktop und 414 px f\u00fcr Mobilger\u00e4te<\/strong>. Wie lang die Seite wird, h\u00e4ngt von der Menge an Content ab, den du dort platzierst. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"509\" height=\"556\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/desktop-mobiel-design.webp\"  alt=\"desktop-mobiel-design Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2379\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/desktop-mobiel-design.webp 509w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/desktop-mobiel-design-275x300.webp 275w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/desktop-mobiel-design-46x50.webp 46w\" sizes=\"(max-width: 509px) 100vw, 509px\" \/><\/figure>\n\n<p><em>Mobil- und Desktop-Design<\/em><\/p>\n\n<h3 class=\"wp-block-heading\">3.1 Photoshop-Template<\/h3>\n\n<h4 class=\"wp-block-heading\">Arbeiten mit dem Grid: Bootstrap<\/h4>\n\n<p>Im Photoshop-Template des Shops wird ein Grid-Layout verwendet (das weit verbreitete Bootstrap-Grid). Dieses Grid nutzt eine Einteilung in 12 Spalten. Das macht es einfacher, Abst\u00e4nde genau festzulegen und so die einzelnen Elemente auf der Website f\u00fcr Desktop, Mobiltelefone oder andere Bildschirme zu positionieren.<br\/>Den Link zu den PSD-Templates findest du <strong>unten auf der Seite<\/strong>:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Homepage<\/li>\n\n\n\n<li>Landingpage<\/li>\n\n\n\n<li>Styleguide<\/li>\n<\/ul>\n\n<p>Mehr \u00fcber Bootstrap wissen? <a href=\"https:\/\/getbootstrap.com\/docs\/4.4\/layout\/grid\/\">https:\/\/getbootstrap.com\/docs\/4.4\/layout\/grid\/<\/a><\/p>\n\n<h2 class=\"wp-block-heading\">Zeilen und Spalten<\/h2>\n\n<p>Beim Aufbau der Seite verwendest du (horizontale) Zeilen. Jede Zeile versiehst du mit einer Spaltenaufteilung. Zum Beispiel: 2 x 6 Spalten, 3 x 4 Spalten, 4 x 3 Spalten usw. So entstehen Zeilen mit Bl\u00f6cken, die du mit Text, Bild, Buttons usw. f\u00fcllen kannst. Je nachdem, was du zeigen m\u00f6chtest, nutzt du eine spezifische Aufteilung einer Zeile.    <\/p>\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2 advgb-dyn-bf7779d9\"><div class=\"advgb-infobox-wrap\"><div class=\"advgb-infobox-icon-container\"><div class=\"advgb-infobox-icon-inner-container\"><i class=\"material-icons-outlined\">warning<\/i><\/div><\/div><div class=\"advgb-infobox-textcontent\"><h3 class=\"advgb-infobox-title\">Anmerkung<\/h3><p class=\"advgb-infobox-text\">Das bereitgestellte PSD-Template zeigt, was du mit der Aufteilung machen <strong>kannst<\/strong>, nicht was du machen <strong>musst<\/strong>! Du musst also nicht alle Bl\u00f6cke im Template f\u00fcllen. Du nutzt die Aufteilungen, die f\u00fcr dich funktionieren.  <\/p><\/div><\/div><\/div>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"463\" height=\"584\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/psd-template.webp\"  alt=\"psd-template Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2381\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/psd-template.webp 463w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/psd-template-238x300.webp 238w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/psd-template-40x50.webp 40w\" sizes=\"(max-width: 463px) 100vw, 463px\" \/><\/figure>\n\n<p><em>PSD-Template<\/em><\/p>\n\n<h2 class=\"wp-block-heading\">Beispiele<\/h2>\n\n<p>Anzeige von Kategorien (Hippe-Geboortekaartjes) \u2013 4 x 3 Spalten:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"581\" height=\"191\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-grid.webp\"  alt=\"voorbeeld-grid Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2382\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-grid.webp 581w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-grid-300x99.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-grid-50x16.webp 50w\" sizes=\"(max-width: 581px) 100vw, 581px\" \/><\/figure>\n\n<p>Beispiel hippe-geboortekaartjes.nl<\/p>\n\n<p>Anzeige eines Swipers mit Kundenerfahrungen (MyCards) \u2013 12 Spalten breit:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"718\" height=\"156\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-swiper.webp\"  alt=\"voorbeeld-swiper Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2383\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-swiper.webp 718w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-swiper-300x65.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-swiper-50x11.webp 50w\" sizes=\"(max-width: 718px) 100vw, 718px\" \/><\/figure>\n\n<p>Beispiel mycards.nl<\/p>\n\n<p>Anzeige von zus\u00e4tzlichen Produkten und Dienstleistungen (Made For Moments) \u2013 3 x 4 Spalten:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"751\" height=\"340\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-grid-2.webp\"  alt=\"voorbeeld-grid-2 Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2384\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-grid-2.webp 751w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-grid-2-300x136.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeeld-grid-2-50x23.webp 50w\" sizes=\"(max-width: 751px) 100vw, 751px\" \/><\/figure>\n\n<p>Beispiel madeformoments.nl<\/p>\n\n<h2 class=\"wp-block-heading\">Die festen Elemente<\/h2>\n\n<p>Der Header enth\u00e4lt die folgenden Elemente:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Optionaler Platz f\u00fcr \u201eUnique Selling Points\u201c (USPs), wie eine Telefonnummer, Versprechen oder Sterne-Bewertung<\/li>\n\n\n\n<li>Info, Login und Warenkorb<\/li>\n\n\n\n<li>Logo des Webshops: Das Logo kann links oder zentriert stehen<\/li>\n\n\n\n<li>Hauptnavigation mit Men\u00fcpunkten<\/li>\n\n\n\n<li>Suchfunktion<\/li>\n<\/ul>\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c advgb-dyn-a5dc446b\"><div class=\"advgb-infobox-wrap\"><div class=\"advgb-infobox-icon-container\"><div class=\"advgb-infobox-icon-inner-container\"><i class=\"material-icons-outlined\">warning<\/i><\/div><\/div><div class=\"advgb-infobox-textcontent\"><h3 class=\"advgb-infobox-title\">Anmerkung<\/h3><p class=\"advgb-infobox-text\">Behalte im Header\/in der Navigation die Position von <strong>Login, Warenkorb und Suche<\/strong> bei.<\/p><\/div><\/div><\/div>\n\n<h2 class=\"wp-block-heading\">Header-Variationen<\/h2>\n\n<p>Im Template kannst du auf der Homepage aus 3 Variationen f\u00fcr den Header w\u00e4hlen.<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Header mit geschlossener Suchfunktion<\/li>\n\n\n\n<li>Header mit offener Suchfunktion<\/li>\n\n\n\n<li>Header mit Logo und Elementen zentriert<\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"540\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen.webp\"  alt=\"vaste-elementen Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2385\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen.webp 812w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-300x200.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-768x511.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-50x33.webp 50w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/figure>\n\n<p>Feste Elemente: verschiedene Layouts<\/p>\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201 advgb-dyn-d728d304\"><div class=\"advgb-infobox-wrap\"><div class=\"advgb-infobox-icon-container\"><div class=\"advgb-infobox-icon-inner-container\"><i class=\"material-icons-outlined\">warning<\/i><\/div><\/div><div class=\"advgb-infobox-textcontent\"><h3 class=\"advgb-infobox-title\">Anmerkung<\/h3><p class=\"advgb-infobox-text\">Wenn du dich f\u00fcr ein zentriertes Logo entscheidest, werden die Men\u00fcpunkte unter dem Logo platziert. Der Header ben\u00f6tigt dann mehr Platz in der H\u00f6he, wodurch die Seite weiter nach unten gedr\u00fcckt wird. <\/p><\/div><\/div><\/div>\n\n<figure class=\"wp-block-image size-large\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"593\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-1-1024x593.webp\"  alt=\"vaste-elementen-1-1024x593 Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2386\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-1-1024x593.webp 1024w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-1-300x174.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-1-768x445.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-1-50x29.webp 50w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-1.webp 1235w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p>Beispiel 1: blijkaartje.nl<\/p>\n\n<figure class=\"wp-block-image size-large\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"625\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-2-1024x625.webp\"  alt=\"vaste-elementen-2-1024x625 Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2387\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-2-1024x625.webp 1024w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-2-300x183.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-2-768x469.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-2-50x31.webp 50w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/vaste-elementen-2.webp 1168w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p>Beispiel 2: zomooikaartjes.nl<\/p>\n\n<h2 class=\"wp-block-heading\">Navigation<\/h2>\n\n<p>Die Homepage ist in vielen F\u00e4llen nicht der Startpunkt f\u00fcr den Besucher. Dieser gelangt oft \u00fcber eine Suchanfrage oder eine Anzeige (Google) auf eine Landingpage oder Produktdetailseite. Die Homepage ist jedoch ein guter Startpunkt f\u00fcr die Ausarbeitung des Corporate Designs. Aber versteife dich nicht zu sehr darauf.   <\/p>\n\n<p>Die <strong>Hauptnavigation<\/strong> einer Website muss es einem Erstbesucher erm\u00f6glichen, abzuleiten, was das Unternehmen tut, was es anbietet und welche Art von Inhalten verf\u00fcgbar ist. Dies ist der Ort, um Menschen (und Suchmaschinen) zu sagen, was du tust. Die Navigation enth\u00e4lt nat\u00fcrlich weitere Elemente. Weiche dabei nicht vom Standard und von dem ab, was Besucher gewohnt sind. Einen Warenkorb sucht man oben rechts in der Navigation. Es ist nicht logisch, diesen pl\u00f6tzlich oben links zu platzieren.     <\/p>\n\n<h2 class=\"wp-block-heading\">An die Arbeit<\/h2>\n\n<ul class=\"wp-block-list\">\n<li>Die Kategorien, die du festgelegt hast, platzierst du im Design (bestimme auch die Navigation des mobilen Men\u00fcs und gib diese an das Support-Team weiter).<\/li>\n\n\n\n<li>Begrenze die Anzahl der Men\u00fcpunkte in der Hauptnavigation auf etwa 7 Punkte (plus\/minus zwei).<\/li>\n\n\n\n<li>Stelle sicher, dass die Navigation nicht zu viel Bildschirmplatz in der H\u00f6he einnimmt.<\/li>\n\n\n\n<li>Verwende f\u00fcr die Men\u00fcpunkte W\u00f6rter und Begriffe, die der Besucher versteht.<\/li>\n\n\n\n<li>Verwende eine gut lesbare Schriftart.<\/li>\n\n\n\n<li>Die Hauptnavigation und der Footer werden im gesamten Shop gleich sein.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Footer<\/h2>\n\n<p>Ein weiterer wichtiger Ort auf der Website ist der Footer. Er befindet sich (genau wie die Hauptnavigation) auf jeder Seite des Webshops. Es ist vielleicht nicht der Ort mit dem beeindruckendsten Inhalt oder f\u00fcr das sch\u00f6nste Design, aber es ist ein Ort, an dem Nutzer oft nach Informationen suchen. Es ist also wichtig, dass dieser Bereich nicht vernachl\u00e4ssigt wird.   <\/p>\n\n<ol class=\"wp-block-list\">\n<li>Platz f\u00fcr USPs, Logos von Zahlungsmethoden oder Social-Media-Kan\u00e4le<\/li>\n\n\n\n<li>Die wichtigsten Seiten-Links, Kategorien, \u00d6ffnungszeiten des Kundenservice<\/li>\n\n\n\n<li>Eventuell Basisdaten des Webshops.<\/li>\n\n\n\n<li>Datenschutzerkl\u00e4rung<\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"829\" height=\"286\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/footer-elementen.webp\"  alt=\"footer-elementen Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2388\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/footer-elementen.webp 829w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/footer-elementen-300x103.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/footer-elementen-768x265.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/footer-elementen-50x17.webp 50w\" sizes=\"(max-width: 829px) 100vw, 829px\" \/><\/figure>\n\n<p>Footer-Elemente<\/p>\n\n<h2 class=\"wp-block-heading\">An die Arbeit<\/h2>\n\n<ul class=\"wp-block-list\">\n<li>Halte das Design einfach<\/li>\n\n\n\n<li>Gehe bewusst mit Kontrast und Lesbarkeit um<\/li>\n\n\n\n<li>W\u00e4hle die Schriftgr\u00f6\u00dfe nicht zu klein<\/li>\n\n\n\n<li>\u00dcberlade ihn nicht mit grafischen Elementen<\/li>\n\n\n\n<li>Optional: Zeige die akzeptierten Zahlungsmethoden an<\/li>\n\n\n\n<li>Optional: Zeige die relevanten Social-Media-Kan\u00e4le an<\/li>\n\n\n\n<li>Links zu den Unternehmensdaten (Kontakt, \u00dcber uns)<\/li>\n\n\n\n<li>Optional: Nimm die Basis-Kontaktinformationen auf<\/li>\n\n\n\n<li>Organisiere den Inhalt auf logische Weise<\/li>\n\n\n\n<li>Sorge f\u00fcr den Erhalt der Hierarchie<\/li>\n\n\n\n<li>Nimm den Copyright-Hinweis auf<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Homepage-Content<\/h2>\n\n<p>Du bist frei in der Wahl des Contents, den du auf der Homepage platzierst. Es ist jedoch ratsam, Klarheit dar\u00fcber zu schaffen, was man bei dir kaufen kann. Zum Beispiel mit Bl\u00f6cken, die die wichtigsten Kategorien zeigen. Vielleicht m\u00f6chtest du auch Kundenerfahrungen zeigen. Einige Webshops entscheiden sich f\u00fcr visuelle Wirkung mit einem Hero-Image.    <\/p>\n\n<h2 class=\"wp-block-heading\">7.1 Hero-Image<\/h2>\n\n<p>Ein Hero-Image ist das (gro\u00dfe) Er\u00f6ffnungsbild auf einer Homepage. Mit einem guten Hero-Image kannst du visuell und textlich Eindruck beim Besucher hinterlassen. Das ist sch\u00f6n, aber nicht immer funktional. Ein solch gro\u00dfes, \u00fcberw\u00e4ltigendes Bild kann n\u00e4mlich auch f\u00fcr Unklarheit beim Besucher sorgen. Was soll ich tun? Wo soll ich klicken?     <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"1006\" height=\"649\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeelden-hero-images.webp\"  alt=\"voorbeelden-hero-images Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2389\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeelden-hero-images.webp 1006w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeelden-hero-images-300x194.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeelden-hero-images-768x495.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/voorbeelden-hero-images-50x32.webp 50w\" sizes=\"(max-width: 1006px) 100vw, 1006px\" \/><\/figure>\n\n<p>Beispiele Hero-Image<\/p>\n\n<h2 class=\"wp-block-heading\">An die Arbeit<\/h2>\n\n<p>Wenn du dich f\u00fcr ein Hero-Image entscheidest, ber\u00fccksichtige die folgenden Punkte:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Verwende ein Bild mit \u201eWow-Effekt\u201c<\/li>\n\n\n\n<li>Mache das Bild funktional und zeige, was hier verkauft wird<\/li>\n\n\n\n<li>Mache im Text deutlich (und lesbar), was der Besucher im Shop bekommen kann<\/li>\n\n\n\n<li>Sorge f\u00fcr einen auff\u00e4lligen Aktionsbutton (Call-to-Action) mit einem klaren Text<\/li>\n\n\n\n<li>Text und Buttons, die \u00fcber dem Bild liegen, m\u00fcssen gut lesbar und sichtbar bleiben. Auch auf dem kleineren Bildschirm eines Tablets oder Smartphones! <\/li>\n\n\n\n<li>Sorge f\u00fcr ein Bild mit ausreichender Sch\u00e4rfe, aber einer geringen Dateigr\u00f6\u00dfe (ein \u201eschweres\u201c Bild beeinflusst die Ladezeit und somit das Ranking bei Google).<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Landingpage<\/h2>\n\n<p>Auf der Landingpage wird eine \u00dcbersicht von Karten\/Designs pr\u00e4sentiert. \u00dcber der \u00dcbersicht ist nach eigenem Ermessen Platz f\u00fcr eine \u00dcberschrift, Text oder Kategoriebl\u00f6cke. In der Breite hast du also noch 9 Spalten zur Verf\u00fcgung (z. B. 3 Bl\u00f6cke von jeweils 3 Spalten Breite).  <\/p>\n\n<h2 class=\"wp-block-heading\">8.1 Seitenmen\u00fc<\/h2>\n\n<p>Ganz links auf der Seite sind drei Spalten f\u00fcr das Seitenmen\u00fc und die Filter reserviert. Die Filter k\u00f6nnen auch \u00fcber der Karten\u00fcbersicht angezeigt werden (horizontale Filterung). Dies kannst du im CMS einstellen.  <\/p>\n\n<h2 class=\"wp-block-heading\">8.2 Karten\u00fcbersicht<\/h2>\n\n<p>Die Anzahl der Karten, die pro Zeile angezeigt werden, ist frei w\u00e4hlbar. Am gebr\u00e4uchlichsten sind vier Karten pro Zeile. Wenn du mehr Karten pro Zeile anzeigst, werden diese f\u00fcr den Besucher eigentlich zu klein, um sie gut beurteilen zu k\u00f6nnen.  <\/p>\n\n<h2 class=\"wp-block-heading\">8.3 Labels<\/h2>\n\n<p>Designs k\u00f6nnen mit Labels versehen werden. Denke hierbei an die Erw\u00e4hnung einer speziellen Veredelung wie \u201eGoldfolie\u201c oder \u201emit Holzherz\u201c. Das Design und die Position dieser Labels darfst du selbst bestimmen.  <\/p>\n\n<h2 class=\"wp-block-heading\">8.4 Filter<\/h2>\n\n<p>Die Filter sind in Schriftart, Gr\u00f6\u00dfe, Zeichen- und Zeilenabstand anpassbar. Weiterhin wird die Anzeige durch die Einstellungen in den Widgets (im CMS) bestimmt. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"636\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/plp-template.webp\"  alt=\"plp-template Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2390\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/plp-template.webp 680w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/plp-template-300x281.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/plp-template-50x47.webp 50w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n<p>Landingpage-Template<\/p>\n\n<h2 class=\"wp-block-heading\">Produktdetailseite<\/h2>\n\n<p>Auf der Produktdetailseite finden die Besucher detaillierte Informationen zur Karte. Die Vorschaubilder (Previews) des Designs werden automatisch vom System generiert. <\/p>\n\n<h2 class=\"wp-block-heading\">9.1 Thumbs<\/h2>\n\n<p>Die <strong>Thumbs<\/strong> sind die kleinen Ansichten unter der Vorschau der Karte. Diese sind anklickbar, sodass der Besucher mehrere Ansichten der Karte betrachten kann. Du kannst w\u00e4hlen, ob die <strong>Thumbs<\/strong> unter der Karte oder links von der Karte angezeigt werden.  <\/p>\n\n<h2 class=\"wp-block-heading\">9.2 Corporate Design<\/h2>\n\n<p>Stelle sicher, dass du auch auf dieser Seite dein Corporate Design beibeh\u00e4ltst. Versuche hier so wenig wie m\u00f6glich davon abzuweichen, um ein konsistentes Erlebnis zu bieten. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"659\" height=\"718\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/pdp-template.webp\"  alt=\"pdp-template Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2391\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/pdp-template.webp 659w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/pdp-template-275x300.webp 275w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/pdp-template-46x50.webp 46w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><\/figure>\n\n<p>Produktdetailseiten-Template<\/p>\n\n<h2 class=\"wp-block-heading\">Das Design ist fertig!<\/h2>\n\n<ol class=\"wp-block-list\">\n<li>Teile die Quelldatei mit deinem Sparkles-Ansprechpartner.<\/li>\n\n\n\n<li>Du erh\u00e4ltst Feedback und Beratung im Bereich Webdesign und Benutzerfreundlichkeit.<\/li>\n\n\n\n<li>Arbeite das Feedback und die Ratschl\u00e4ge in dein Design ein.<\/li>\n\n\n\n<li>Entwirf eine \u00dcbersichtsseite (<a href=\"https:\/\/madeformoments.nl\/geboortekaartjes\" target=\"_blank\">Beispiel<\/a>) und eine Produktdetailseite (<a href=\"https:\/\/madeformoments.nl\/geboorte-kaart\/kaart\/lief-geboortekaartje-meisje-eendje-bloemetjes\" target=\"_blank\">Beispiel<\/a>) in deinem (Haus-)Stil.<\/li>\n\n\n\n<li>Das Design ist fertig. Teile die (Quell-)Dateien mit deinem Ansprechpartner. <\/li>\n\n\n\n<li>Der Bau des Shops wird eingeplant.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\">Gut zu wissen!<\/h2>\n\n<div data-wp-context=\"{ &quot;autoclose&quot;: true, &quot;accordionItems&quot;: [] }\" data-wp-interactive=\"core\/accordion\" role=\"group\" class=\"wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow\">\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-1&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h4 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-1-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-1\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">\u00dcber \u00dcberschriften und Flie\u00dftext<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h4>\n\n\n\n<div inert aria-labelledby=\"accordion-item-1\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-1-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p>Im Web werden \u00dcberschriften verwendet. Diese \u00dcberschriften dienen einem Zweck. Sie sind dazu da, deinem Leser zu helfen zu verstehen, was er auf der Seite liest. Worum geht es auf dieser Seite? Was steht in dem Absatz? M\u00f6chte ich diesen Absatz lesen oder nicht? Headings sorgen f\u00fcr \u00dcbersicht und eine klare Struktur auf Webseiten. Dadurch k\u00f6nnen Besucher Seiten schnell scannen und es hilft Suchmaschinen, die Struktur und das Thema der Seite zu verstehen.       <\/p>\n\n\n\n<p>Beim Entwerfen der verschiedenen Seiten nutzt du also diese \u00dcberschriften (Headings). Vergleiche die erste \u00dcberschrift mit dem Titel eines Buches. Das ist die wichtigste \u00dcberschrift und somit auch die gr\u00f6\u00dfte: die H1. Die zweite \u00dcberschrift steht in der Hierarchie tiefer und ist logischerweise die H2. Vergleiche dies mit den Kapiteln deines Buches. Diese zweite \u00dcberschrift darfst du \u00f6fter verwenden. Schlie\u00dflich gibt es mehrere Kapitel in einem Buch. Die Unter\u00fcberschriften H3 bis H6 kannst du als Zwischen\u00fcberschriften \u00fcber Abs\u00e4tzen in einem Buch sehen. Du kannst problemlos ein paar H3s unter einer H2 haben. Und darunter eventuell sogar noch H4s. Ganz so, wie du es f\u00fcr passend h\u00e4ltst.          <\/p>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-2&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h4 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-2-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-2\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">Buttons<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h4>\n\n\n\n<div inert aria-labelledby=\"accordion-item-2\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-2-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li><strong>Bestimme den Stil der Buttons:<\/strong> Abgerundete Ecken machen einen Button freundlicher. Gerade Ecken wirken eher sachlich. W\u00e4hle einen Button-Stil, der zu deinem Shop passt.  <\/li>\n\n\n\n<li><strong>Verwende dieselbe auff\u00e4llige Farbe f\u00fcr die wichtigsten Buttons:<\/strong> Indem du auf der gesamten Website konsistent im Aussehen und in der Farbe der wichtigsten Buttons (Call-to-Action-Buttons) bleibst, wird die Konsistenz gest\u00e4rkt und Verwirrung beim Nutzer vermieden.<\/li>\n\n\n\n<li><strong>Verwende klare Texte im Button:<\/strong> Der Text in einem Button muss eindeutig sein und darf vor allem keine Verwirrung beim Besucher stiften.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div data-wp-class--is-open=\"state.isOpen\" data-wp-context=\"{ &quot;id&quot;: &quot;accordion-item-3&quot;, &quot;openByDefault&quot;: false }\" data-wp-init=\"callbacks.initAccordionItems\" data-wp-on-window--hashchange=\"callbacks.hashChange\" class=\"wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow\">\n<h4 class=\"wp-block-accordion-heading\"><button aria-expanded=\"false\" aria-controls=\"accordion-item-3-panel\" data-wp-bind--aria-expanded=\"state.isOpen\" data-wp-on--click=\"actions.toggle\" data-wp-on--keydown=\"actions.handleKeyDown\" id=\"accordion-item-3\" type=\"button\" class=\"wp-block-accordion-heading__toggle\"><span class=\"wp-block-accordion-heading__toggle-title\">Mache deine Bilder kleiner<\/span><span class=\"wp-block-accordion-heading__toggle-icon\" aria-hidden=\"true\">+<\/span><\/button><\/h4>\n\n\n\n<div inert aria-labelledby=\"accordion-item-3\" data-wp-bind--inert=\"!state.isOpen\" id=\"accordion-item-3-panel\" role=\"region\" class=\"wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow\">\n<p>Nutzer (und Google) lieben schnelle Websites. Eine hohe Website-Geschwindigkeit sorgt nicht nur f\u00fcr eine bessere Benutzererfahrung, sie hat auch noch einen positiven Einfluss auf deine Sichtbarkeit bei Google. <\/p>\n\n\n\n<p>Bei Sparkles wird t\u00e4glich daran gearbeitet, die Shops besser und schneller zu machen, aber du hast als Shopbetreiber auch selbst Einfluss auf die Ladezeit deiner Seiten. Die Bilder, die du in deinem Shop platzierst, k\u00f6nnen n\u00e4mlich einen gro\u00dfen Einfluss auf die Geschwindigkeit deiner Seiten haben. Das merkst du vielleicht nicht so deutlich mit einem schnellen Laptop und einer Glasfaserverbindung, aber auf einem Smartphone oder einem veralteten Laptop kann es durchaus sp\u00fcrbar werden. Sorge daher immer daf\u00fcr, dass du Bilder \u201ekomprimierst\u201c. Das ist eine Technik, mit der Bilder ohne merklichen Qualit\u00e4tsverlust kleiner gemacht werden. So wird deine Seite schneller, w\u00e4hrend das richtige Erscheinungsbild erhalten bleibt.     <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kompressions-Tool<\/h2>\n\n\n\n<p>Ein gutes (Online-)Kompressions-Tool ist <a href=\"https:\/\/tinyjpg.com\/\" target=\"_blank\">tinyjpg.com\/<\/a>. Platzierst du ein neues Bild? Dann jage es immer kurz durch dieses Tool!  <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"389\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/compressie-tool.webp\"  alt=\"compressie-tool Shop-Design \u2013 F\u00fcr (zuk\u00fcnftige) Shopbetreiber\"  class=\"wp-image-2392\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/compressie-tool.webp 792w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/compressie-tool-300x147.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/compressie-tool-768x377.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/03\/compressie-tool-50x25.webp 50w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<p>Beispiel f\u00fcr den Gewinn, den ein komprimiertes Bild bringen kann<\/p>\n<\/div>\n<\/div>\n<\/div>\n<style class=\"advgb-styles-renderer\">#advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb, .advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb {background-color: #f7fae9;padding: 20px 20px 20px 20px;border: 1px solid #cfdd6b;border-radius: 8px;}#advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb .advgb-infobox-icon-container, .advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb .advgb-infobox-icon-container i, .advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb .advgb-infobox-icon-container i {color: #1d474d;font-size: 31px;display: block;}#advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-06dca327-5e56-4d99-8846-d72a369340eb .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}#advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2, .advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2 {background-color: #fff4fa;padding: 20px 20px 20px 20px;border: 1px solid #bf1774;border-radius: 8px;}#advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2 .advgb-infobox-icon-container, .advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2 .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2 .advgb-infobox-icon-container i, .advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2 .advgb-infobox-icon-container i {color: #bf1774;font-size: 31px;display: block;}#advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-707e7a73-08c0-4e75-8634-c543c0a2a7f2 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}#advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c, .advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c {background-color: #fff4fa;padding: 20px 20px 20px 20px;border: 1px solid #bf1774;border-radius: 8px;}#advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c .advgb-infobox-icon-container, .advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c .advgb-infobox-icon-container i, .advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c .advgb-infobox-icon-container i {color: #bf1774;font-size: 31px;display: block;}#advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-0f2568b8-3560-4208-a248-040797bdf47c .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}#advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201, .advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201 {background-color: #fff4fa;padding: 20px 20px 20px 20px;border: 1px solid #bf1774;border-radius: 8px;}#advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201 .advgb-infobox-icon-container, .advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201 .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201 .advgb-infobox-icon-container i, .advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201 .advgb-infobox-icon-container i {color: #bf1774;font-size: 31px;display: block;}#advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-a6c638cd-6a8d-4e9c-989e-dd0b5ecbf201 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}<\/style>","protected":false},"excerpt":{"rendered":"<p class=\"qua-blog-post-description\">Als Shopbetreiber bist du Inhaber deines eigenen Kartenladens. Der Webshop wird zum Schaufenster deines Ladens, daher ist es wichtig, ihn in deinem eigenen Stil zu gestalten. F\u00fcr das reibungslose Funktionieren deines Webshops ist es notwendig, dass du ein Design f\u00fcr Desktop und Mobilger\u00e4te einreichst. Wenn du nur eine Desktop-Version einreichst, erstellen wir nach eigenem Ermessen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"ht-kb-category":[490],"ht-kb-tag":[583,584,585],"class_list":["post-5450","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-einrichten-starten","ht_kb_tag-shop-entwerfen","ht_kb_tag-shop-design","ht_kb_tag-shopdesign"],"featured_img":false,"coauthors":[],"author_meta":{"author_link":"https:\/\/support.sparkles.io\/de\/author\/admin\/","display_name":"Sparkles Support"},"relative_dates":{"created":"Ver\u00f6ffentlicht 2\u00a0Monaten vor","modified":"Aktualisiert 2\u00a0Tagen vor"},"absolute_dates":{"created":"Ver\u00f6ffentlicht am 12\/03\/2026","modified":"Aktualisiert am 05\/05\/2026"},"absolute_dates_time":{"created":"Ver\u00f6ffentlicht am 12\/03\/2026 15:32","modified":"Aktualisiert am 05\/05\/2026 09:50"},"featured_img_caption":"","tax_additional":{"ht_kb_category":{"linked":["<a href=\"https:\/\/support.sparkles.io\/de\/artikel-categorieen\/einrichten-starten\/\" class=\"advgb-post-tax-term\">Einrichten \/ Starten<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Einrichten \/ Starten<\/span>"],"slug":"ht_kb_category","name":"Article Categories"},"ht_kb_tag":{"linked":["<a href=\"https:\/\/support.sparkles.io\/de\/artikel-tags\/shop-entwerfen\/\" class=\"advgb-post-tax-term\">Shop entwerfen<\/a>","<a href=\"https:\/\/support.sparkles.io\/artikel-tags\/shop-design\/\" class=\"advgb-post-tax-term\">Shop-Design<\/a>","<a href=\"https:\/\/support.sparkles.io\/artikel-tags\/shopdesign\/\" class=\"advgb-post-tax-term\">Shopdesign<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Shop entwerfen<\/span>","<span class=\"advgb-post-tax-term\">Shop-Design<\/span>","<span class=\"advgb-post-tax-term\">Shopdesign<\/span>"],"slug":"ht_kb_tag","name":"Article Tags"}},"series_order":"","_links":{"self":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/comments?post=5450"}],"version-history":[{"count":2,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5450\/revisions"}],"predecessor-version":[{"id":5453,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5450\/revisions\/5453"}],"wp:attachment":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/media?parent=5450"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb-category?post=5450"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=5450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}