{"id":6654,"date":"2026-05-08T14:36:14","date_gmt":"2026-05-08T13:36:14","guid":{"rendered":"https:\/\/support.sparkles.io\/kennisbank\/navigation\/"},"modified":"2026-05-18T10:29:28","modified_gmt":"2026-05-18T09:29:28","slug":"navigation","status":"publish","type":"ht_kb","link":"https:\/\/support.sparkles.io\/de\/kennisbank\/navigation\/","title":{"rendered":"Navigation"},"content":{"rendered":"\n<p>Je gr\u00f6\u00dfer deine Website wird, desto schwieriger ist es f\u00fcr den Kunden, alles zu finden. Eine gute Navigation durch die Seite ist ein Schl\u00fcsselfaktor f\u00fcr den Erfolg! <\/p>\n\n<p>Die Navigation auf deiner Seite besteht aus verschiedenen Elementen:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Men\u00fcs:<\/strong> Alle Men\u00fcs findest du im <strong>CMS &gt; Layout<\/strong>\n<ul class=\"wp-block-list\">\n<li>Das Sidebar-Men\u00fc (linkes Widget, linkes Men\u00fc): links auf deiner Website<\/li>\n\n\n\n<li>Das Header-Men\u00fc (Header-Widget): der Balken oben auf deiner Website mit verschiedenen Rubriken<\/li>\n\n\n\n<li>Das mobile Hamburger-Men\u00fc (Mobilmen\u00fc): die drei Striche auf dem Handy. Die meisten deiner Besucher sind mobil unterwegs. Deine Navigation auf dem Handy ist daher am allerwichtigsten.  <\/li>\n\n\n\n<li>Die Footer: unten auf deiner Website<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Andere Navigation:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Die Suchleiste<\/li>\n\n\n\n<li>Die Filter auf der Seite<\/li>\n\n\n\n<li>Bl\u00f6cke und Buttons, die du selbst erstellst und platzierst und auf verschiedene Seiten verlinken l\u00e4sst<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"sidebar-menu\">1. Sidebar-Men\u00fc<\/h2>\n\n<p>Im Shop befindet sich auf der linken Seite ein Navigationsmen\u00fc, das Sidebar-Men\u00fc (auch bekannt als linkes Widget, linkes Men\u00fc und Sidewidget). Du kannst dies selbst mithilfe von \u201eWidgets\u201c einrichten, weshalb ein Sidebar-Men\u00fc auch als \u201eWidget-Gruppe\u201c bezeichnet wird. Du kannst auf verschiedenen Seiten unterschiedliche Sidebar-Men\u00fcs platzieren.   <a href=\"#video-block\">Zur Video-Erkl\u00e4rung.<\/a><\/p>\n\n<p>\u00dcber das <strong>CMS &gt; Layout &gt; Widgets<\/strong> kannst du hier selbst loslegen.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" fetchpriority=\"high\" decoding=\"async\" width=\"728\" height=\"774\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget.webp\"  alt=\"linkerwidget Navigation\"  class=\"wp-image-6316\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget.webp 728w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget-282x300.webp 282w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget-47x50.webp 47w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><figcaption class=\"wp-element-caption\">Made for Moments: Beispiel Sidebar-Men\u00fc<\/figcaption><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"standaard-widget\">1.1 Standard-Widget-Gruppe<\/h3>\n\n<p>Hierunter siehst du die Widget-Gruppen \u201eproducten-menu\u201c, \u201einfo-menu\u201c und \u201egeboortekaarten\u201c. \u201eInfo-menu\u201c wird gr\u00fcn angezeigt, was bedeutet, dass dies das Standard-Sidebar-Men\u00fc ist. Alle Seiten, die du erstellst, erhalten automatisch diese Widget-Gruppe als Sidebar-Men\u00fc, es sei denn, du \u00e4nderst dies auf der Seite. Du kannst ein anderes Standardmen\u00fc w\u00e4hlen, indem du auf das Sternchen deines gew\u00fcnschten Men\u00fcs klickst. Du siehst dann, dass dieses gr\u00fcn wird.    <\/p>\n\n<figure class=\"wp-block-image size-large\"><img  title=\"\" decoding=\"async\" width=\"1024\" height=\"241\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget-cms-1024x241.webp\"  alt=\"linkerwidget-cms-1024x241 Navigation\"  class=\"wp-image-6317\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget-cms-1024x241.webp 1024w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget-cms-300x71.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget-cms-768x180.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget-cms-50x12.webp 50w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget-cms-1536x361.webp 1536w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/linkerwidget-cms.webp 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Standard-Widget-Gruppe<\/figcaption><\/figure>\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3\"><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\">Alle Seiten, auf denen du das Sidebar-Men\u00fc auf Standard eingestellt hast, \u00e4ndern nun ihr Sidebar-Men\u00fc.<\/p><\/div><\/div><\/div>\n\n<h3 class=\"wp-block-heading\" id=\"widget-maken\">1.2 Linkes Men\u00fc\/Widget-Gruppe erstellen<\/h3>\n\n<p>Um eine Widget-Gruppe zu erstellen, gibst du den Namen ein (kleingeschrieben und zusammengeschrieben) und w\u00e4hlst den Typ aus. W\u00e4hle f\u00fcr den Moment \u201eSidebar group\u201c. Auf <a href=\"#headermenu-instellen\">Navigation group<\/a> kommen wir sp\u00e4ter zur\u00fcck.  <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" decoding=\"async\" width=\"789\" height=\"290\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/sidebar-widgetmenu-1.webp\"  alt=\"sidebar-widgetmenu-1 Navigation\"  class=\"wp-image-6322\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/sidebar-widgetmenu-1.webp 789w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/sidebar-widgetmenu-1-300x110.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/sidebar-widgetmenu-1-768x282.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/sidebar-widgetmenu-1-50x18.webp 50w\" sizes=\"(max-width: 789px) 100vw, 789px\" \/><figcaption class=\"wp-element-caption\">Sidebar-Men\u00fc im CMS hinzuf\u00fcgen<\/figcaption><\/figure>\n\n<p>Nachdem du auf \u201eSpeichern\u201c geklickt hast, erscheint deine Widget-Gruppe in der \u00dcbersicht. Durch Klicken auf das Stiftsymbol kannst du die Widget-Gruppe weiter ausf\u00fcllen. <\/p>\n\n<p>Die Widget-Gruppe kann aus einem Men\u00fc-Widget, Filter-Widget oder einem HTML-Widget bestehen. Durch Klicken auf das Pluszeichen f\u00fcgst du diese hinzu. Du kannst ihre Reihenfolge \u00e4ndern, indem du sie weiter nach oben oder unten ziehst.  <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"285\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/soortwidgets-1.webp\"  alt=\"soortwidgets-1 Navigation\"  class=\"wp-image-6323\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/soortwidgets-1.webp 812w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/soortwidgets-1-300x105.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/soortwidgets-1-768x270.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/soortwidgets-1-50x18.webp 50w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><figcaption class=\"wp-element-caption\">Verf\u00fcgbare Widgets<\/figcaption><\/figure>\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>HTML\/Text-Widget<\/strong><\/td><td>Ist oft nicht notwendig. Dies ist der Teil in der Widget-Gruppe, den du ganz nach deinen W\u00fcnschen selbst gestalten kannst. Denke zum Beispiel an einen Banner mit einem Rabattcode. Du ben\u00f6tigst HTML-Kenntnisse, um dies aufzubauen.   <\/td><\/tr><tr><td><strong>Filter-Widget<\/strong><\/td><td>Dieser Teil sorgt daf\u00fcr, dass Filter auf der Seite angezeigt werden k\u00f6nnen. Welche Filter das sind, stellst du auf der entsprechenden Seite ein. Abh\u00e4ngig von deinen Einstellungen werden die Filter im linken Men\u00fc oder \u00fcber deinen Karten angezeigt.  <\/td><\/tr><tr><td><strong>Men\u00fc-Widget<\/strong><\/td><td>Dies ist das wichtigste Widget. Dies ist der Teil, in dem die Links zu anderen Seiten stehen. Hier kannst du Men\u00fcpunkte einf\u00fcgen.  <\/td><\/tr><\/tbody><\/table><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"menu-widget-invullen\">1.3 Men\u00fc-Widget ausf\u00fcllen<\/h3>\n\n<p>Das Bef\u00fcllen des Men\u00fc-Widgets ist ganz einfach. In der Abbildung findest du noch einige zus\u00e4tzliche Erkl\u00e4rungen. Das Men\u00fc-Widget besteht aus:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Einer Kategorie<\/li>\n\n\n\n<li>Men\u00fcpunkten<\/li>\n\n\n\n<li>Unterpunkten<\/li>\n<\/ul>\n\n<p>Durch Klicken auf das Quadrat kannst du die verschiedenen Elemente verschieben oder unter ein anderes platzieren.<\/p>\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2\"><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\">Jeder Men\u00fcpunkt muss eine Seiten-URL erhalten. Wenn du das nicht tust, kann der Kunde zwar klicken, aber es passiert nichts. <\/p><\/div><\/div><\/div>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"685\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widgetgroep-voorbeeld-1.webp\"  alt=\"widgetgroep-voorbeeld-1 Navigation\"  class=\"wp-image-6324\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widgetgroep-voorbeeld-1.webp 644w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widgetgroep-voorbeeld-1-282x300.webp 282w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widgetgroep-voorbeeld-1-47x50.webp 47w\" sizes=\"(max-width: 644px) 100vw, 644px\" \/><figcaption class=\"wp-element-caption\">Widget-Gruppe ausf\u00fcllen<\/figcaption><\/figure>\n\n<p>Bevor du das Men\u00fc-Widget speicherst, findest du ein paar Optionen, die du ankreuzen kannst:<\/p>\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Align menu right<\/strong><\/td><td>Falls du das Men\u00fc rechtsb\u00fcndig ausgerichtet haben m\u00f6chtest.<\/td><\/tr><tr><td><strong>Dropdown menu full width<\/strong><\/td><td>Musst du nicht verwenden.<\/td><\/tr><tr><td><strong>Men\u00fc ist einklappbar<\/strong><\/td><td>Der Kunde kann auf deiner Seite das Men\u00fc durch Anklicken einklappen.<\/td><\/tr><tr><td><strong>Men\u00fc ist eingeklappt<\/strong><\/td><td>Das Men\u00fc ist standardm\u00e4\u00dfig eingeklappt. Der Kunde kann darauf klicken, um es auszuklappen. <\/td><\/tr><\/tbody><\/table><\/figure>\n\n<p>Du kannst mehrere Men\u00fc-Widgets untereinander platzieren. Zum Beispiel eines f\u00fcr deine Ank\u00fcndigungsprodukte und eines f\u00fcr die meistbesuchten Seiten. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"widget-koppelen-pagina\">1.4 Sidebar-Men\u00fc mit Seite verkn\u00fcpfen<\/h3>\n\n<p>Um eine spezifische Widget-Gruppe als Sidebar-Men\u00fc auf einer bestimmten Seite anzuzeigen, musst du die Widget-Gruppe mit der Seite verkn\u00fcpfen. Dies tust du im Block \u201eSeiteneinstellungen\u201c beim Erstellen oder Bearbeiten der Seite (CMS &gt; Content &gt; Seiten): <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"1611\" height=\"631\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widget-koppelen-1.webp\"  alt=\"widget-koppelen-1 Navigation\"  class=\"wp-image-6325\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widget-koppelen-1.webp 1611w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widget-koppelen-1-300x118.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widget-koppelen-1-1024x401.webp 1024w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widget-koppelen-1-768x301.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widget-koppelen-1-50x20.webp 50w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/widget-koppelen-1-1536x602.webp 1536w\" sizes=\"(max-width: 1611px) 100vw, 1611px\" \/><figcaption class=\"wp-element-caption\">Widget mit Seite verkn\u00fcpfen<\/figcaption><\/figure>\n\n<p>Anschlie\u00dfend wird das Sidebar-Men\u00fc auf deiner Seite wie in der Abbildung dargestellt:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><span style=\"color:#1EFF37\">Gr\u00fcn<\/span>: Men\u00fc-Widget 1<\/li>\n\n\n\n<li><span style=\"color:#1E37FF\">Blau<\/span>: Men\u00fc-Widget 2<\/li>\n\n\n\n<li><span style=\"color:#EC53FF\">Rosa<\/span>: HTML-Widget<\/li>\n<\/ul>\n\n<p>Abh\u00e4ngig davon, wie deine Seite die Filter anzeigt, werden diese dem Sidebar-Men\u00fc hinzugef\u00fcgt oder oben \u00fcber deinen Karten platziert.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"260\" height=\"577\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-widget-pagina.webp\"  alt=\"voorbeeld-widget-pagina Navigation\"  class=\"wp-image-6326\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-widget-pagina.webp 260w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-widget-pagina-135x300.webp 135w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-widget-pagina-23x50.webp 23w\" sizes=\"(max-width: 260px) 100vw, 260px\" \/><figcaption class=\"wp-element-caption\">Beispiel eines Sidebar-Men\u00fcs<\/figcaption><\/figure>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\" id=\"header-menu\">2. Header-Men\u00fc<\/h2>\n\n<p>Seit 2021 erstellen wir das Header-Men\u00fc ebenfalls aus den Widgets, genau wie das Sidebar-Men\u00fc. Normalerweise hat Sparkles das Header-Men\u00fc bereits f\u00fcr dich erstellt, du musst es nur noch selbst anpassen. Aber der Vollst\u00e4ndigkeit halber erkl\u00e4ren wir auch, wie man ein Header-Men\u00fc erstellt.   <a href=\"#video-block\">Zur Video-Erkl\u00e4rung.<\/a><\/p>\n\n<h3 class=\"wp-block-heading\" id=\"headermenu-widget-toevoegen\">2.1 Widget-Gruppe hinzuf\u00fcgen<\/h3>\n\n<p>Beim Erstellen des Header-Men\u00fcs w\u00e4hlst du <strong>\u201enavigation group\u201c<\/strong> anstelle von \u201esidebar group\u201c:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"527\" height=\"284\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/nieuwe-widgetgroep1.webp\"  alt=\"nieuwe-widgetgroep1 Navigation\"  class=\"wp-image-6327\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/nieuwe-widgetgroep1.webp 527w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/nieuwe-widgetgroep1-300x162.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/nieuwe-widgetgroep1-50x27.webp 50w\" sizes=\"(max-width: 527px) 100vw, 527px\" \/><figcaption class=\"wp-element-caption\">Header-Men\u00fc im CMS hinzuf\u00fcgen<\/figcaption><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"headermenu-widget-invullen\">2.2 Widget-Gruppe ausf\u00fcllen<\/h3>\n\n<p>Die Funktionalit\u00e4t der Widgets ist dieselbe wie beim Sidebar-Men\u00fc. Nur verwendest du eigentlich nie das HTML-Widget und nie das Filter-Widget. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"headermenu-instellen\">2.3 Widget-Gruppe als Header einstellen<\/h3>\n\n<p>Nun, da du eine Navigation-Widget-Gruppe erstellt hast, kannst du diese \u00fcber <strong>CMS &gt; Layout &gt; Header<\/strong> als Header einstellen. Du hakst \u201eWidget Navigation-bar tonen\u201c an. <\/p>\n\n<p>Anschlie\u00dfend siehst du die verschiedenen Stellen auf deiner Seite, an denen du ein Widget-Men\u00fc anzeigen kannst. Platziere das richtige Widget an der richtigen Stelle. Hier kannst du auch ankreuzen, ob du ein Suchfeld haben m\u00f6chtest. Dieses erscheint standardm\u00e4\u00dfig in der Navigationsleiste.   <\/p>\n\n<p>Das Header-Men\u00fc besteht aus verschiedenen Teilen:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Widget f\u00fcr Notifikationsleiste Desktop\/Mobil:<\/strong> bedeutet ganz oben, wie eine Nachrichtenleiste<\/li>\n\n\n\n<li><strong>Widget f\u00fcr Topbar Desktop\/Mobil:<\/strong> bedeutet der mittlere Balken (unter dem obersten Balken)<\/li>\n\n\n\n<li><strong>Widget f\u00fcr Navigationsleiste Desktop\/Mobil:<\/strong> bedeutet der unterste Balken (unter dem mittleren Balken)<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-large\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"386\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/header-instellen-1024x386.webp\"  alt=\"header-instellen-1024x386 Navigation\"  class=\"wp-image-6328\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/header-instellen-1024x386.webp 1024w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/header-instellen-300x113.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/header-instellen-768x289.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/header-instellen-50x19.webp 50w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/header-instellen.webp 1184w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Widget als Header-Men\u00fc einstellen<\/figcaption><\/figure>\n\n<p>Auf der Desktop-Seite sieht das dann wie folgt aus:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"217\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-headermenu.webp\"  alt=\"voorbeeld-headermenu Navigation\"  class=\"wp-image-6329\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-headermenu.webp 884w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-headermenu-300x74.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-headermenu-768x189.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-headermenu-50x12.webp 50w\" sizes=\"(max-width: 884px) 100vw, 884px\" \/><figcaption class=\"wp-element-caption\">Pretty Orange: Beispiel Header-Men\u00fc<\/figcaption><\/figure>\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a\"><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\">Auf dem Handy nutzen Seiten oft 2 der 3 Header-Men\u00fc-Widgets.<\/p><\/div><\/div><\/div>\n\n<p>Die Pl\u00e4tze f\u00fcr die Icons f\u00fcr <strong>\u201eInfo\u201c<\/strong>, <strong>\u201eKonto\u201c<\/strong>, <strong>\u201eWarenkorb\u201c<\/strong> und <strong>\u201eSuche\u201c<\/strong> sind nicht selbst anpassbar, sondern fest vorgegeben. Das Dropdown-Men\u00fc unter <strong>\u201eInfo\u201c<\/strong> kannst du jedoch \u00fcber die Widgets anpassen. Mache Dropdowns aus Gr\u00fcnden der Benutzerfreundlichkeit nicht l\u00e4nger als 10 Punkte.  <\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\" id=\"mobielehamburgemenu\">3. Mobiles Hamburger-Men\u00fc<\/h2>\n\n<p>Das mobile Hamburger-Men\u00fc ist eigentlich dasselbe wie ein Header-Men\u00fc. Du erstellst dies \u00fcber die Widgets und stellst unter <strong>CMS &gt; Layout &gt; Header<\/strong> ein, wo du das Hamburger-Men\u00fc platzieren m\u00f6chtest. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"342\" height=\"499\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/hamburgermenu.webp\"  alt=\"hamburgermenu Navigation\"  class=\"wp-image-6330\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/hamburgermenu.webp 342w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/hamburgermenu-206x300.webp 206w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/hamburgermenu-34x50.webp 34w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><figcaption class=\"wp-element-caption\">Beispiel mobiles Hamburger-Men\u00fc<\/figcaption><\/figure>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\" id=\"footer-menu\">4. Footer<\/h2>\n\n<p>Der Footer ist der unterste Teil deiner Seite, der auf jeder Seite gleich ist. Die Links im Footer funktionieren auf die gleiche Weise wie im Header. Normalerweise hast du hier bereits selbst angegeben, was du darin haben m\u00f6chtest, und Sparkles hat dies bereits f\u00fcr dich erstellt. Um den Footer anzupassen, gehst du zu <strong>CMS &gt; Layout &gt; Footer<\/strong>.   <\/p>\n\n<figure class=\"wp-block-image size-large\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"301\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-footer-1024x301.webp\"  alt=\"voorbeeld-footer-1024x301 Navigation\"  class=\"wp-image-6331\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-footer-1024x301.webp 1024w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-footer-300x88.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-footer-768x226.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-footer-50x15.webp 50w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-footer.webp 1410w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Beispiel Footer-Navigation<\/figcaption><\/figure>\n\n<p>So erscheint es auf der Seite:<\/p>\n\n<figure class=\"wp-block-image size-large\"><img  title=\"\" decoding=\"async\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/Scherm&#xAD;afbeelding-2026-05-08-om-10.31.34-1024x502.png\"  alt=\"Scherm&#xAD;afbeelding-2026-05-08-om-10.31.34-1024x502 Navigation\"  class=\"wp-image-6332\"\/><figcaption class=\"wp-element-caption\">Footer auf Madeformoments<\/figcaption><\/figure>\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571\"><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\">Erstelle immer zuerst eine Kopie des HTML-Codes des Footers, bevor du den Footer bearbeitest. Dies tust du, indem du auf \u201eSource\u201c klickst, alles ausw\u00e4hlst, kopierst und dann irgendwo speicherst. So kannst du den Code jederzeit wiederherstellen, wenn etwas schiefgeht.  <\/p><\/div><\/div><\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\" id=\"zoekbalk\">5. Die Suchleiste (Suchbegriffe)<\/h2>\n\n<p>Kunden k\u00f6nnen \u00fcber die Suchleiste nach Karten oder Seiten suchen. Es ist daf\u00fcr n\u00fctzlich, Suchbegriffe mit bestimmten Seiten zu verkn\u00fcpfen. So kannst du \u201eGeburtskarten\u201c mit deiner Seite f\u00fcr Geburtskarten verkn\u00fcpfen oder \u201eElefant\u201c mit der Seite f\u00fcr Elefanten-Karten.  <\/p>\n\n<p>Du kannst die Suchbegriffe \u00fcber <strong>CMS &gt; Content &gt; Search terms<\/strong> einstellen. Gib ein Wort ein, nach dem Kunden suchen, und gib die Seite, den Link oder die URL (Website) an, auf die verwiesen werden soll. <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Link interne Seite: Gib die URL ab dem ersten Schr\u00e4gstrich ein.<\/li>\n\n\n\n<li>Link externe Seite (zum Beispiel zu PostNL): Gib die gesamte URL ein.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"758\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/zoekwoorden.webp\"  alt=\"zoekwoorden Navigation\"  class=\"wp-image-6333\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/zoekwoorden.webp 868w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/zoekwoorden-300x262.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/zoekwoorden-768x671.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/zoekwoorden-50x44.webp 50w\" sizes=\"(max-width: 868px) 100vw, 868px\" \/><figcaption class=\"wp-element-caption\">Beispiel Suchbegriffe im CMS hinzuf\u00fcgen<\/figcaption><\/figure>\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718\"><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\">Tipps<\/h3><p class=\"advgb-infobox-text\">Denke auch an Varianten des Suchbegriffs oder h\u00e4ufig vorkommende Tippfehler. Teste au\u00dferdem immer in der Suchleiste, ob die Suchbegriffe, mit denen du einen Link verkn\u00fcpft hast, auch wirklich funktionieren. <\/p><\/div><\/div><\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\" id=\"filters\">6. Filter<\/h2>\n\n<p>Filter auf Seiten kannst du in den Einstellungen deiner Seite festlegen. Setze die Tags, die du als Filter verwenden m\u00f6chtest, auf \u201eMen\u00fc\u201c.  <a href=\"\/cms-kaarten-op-je-site-zetten#filters-instellen-op-pagina\">Zur Filter-Erkl\u00e4rung.<\/a><\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\" id=\"blokken-en-buttons\">7. Bl\u00f6cke und Buttons<\/h2>\n\n<p>Du hast mit Sparkles besprochen, wie deine Seite aussehen soll. Dazu geh\u00f6ren auch Bl\u00f6cke und Buttons, zum Beispiel auf der Startseite. Normalerweise wird dies vollst\u00e4ndig an dich geliefert und du musst hier aktuell nichts tun.  <\/p>\n\n<h3 class=\"wp-block-heading\">7.1 Styleguide<\/h3>\n\n<p>Wenn deine Seite w\u00e4chst, kann es sein, dass du auch auf anderen Seiten Bl\u00f6cke oder Buttons hinzuf\u00fcgen m\u00f6chtest, und wenn du eine Weile dabei bist, m\u00f6chtest du vielleicht Texte oder Bilder von Bl\u00f6cken und Buttons \u00e4ndern. Daher erstellt Sparkles f\u00fcr dich einen Styleguide. Diesen findest du unter \/styleguide.  <\/p>\n\n<p>Im Styleguide findest du alles, was mit dem Styling deiner Seite zu tun hat. Dies kannst du nutzen, um deine Seiten aufzubauen. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"962\" height=\"585\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-styleguide.webp\"  alt=\"voorbeeld-styleguide Navigation\"  class=\"wp-image-6334\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-styleguide.webp 962w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-styleguide-300x182.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-styleguide-768x467.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/voorbeeld-styleguide-50x30.webp 50w\" sizes=\"(max-width: 962px) 100vw, 962px\" \/><figcaption class=\"wp-element-caption\">Pretty Orange: Beispiel Styleguide<\/figcaption><\/figure>\n\n<h3 class=\"wp-block-heading\">7.2 HTML-Bl\u00f6cke und Buttons<\/h3>\n\n<p>Im Styleguide findest du auch den Code, den du f\u00fcr Bl\u00f6cke und Buttons ben\u00f6tigst. Du siehst jeweils ein Beispiel und darunter steht der dazugeh\u00f6rige HTML-Code. Diesen kannst du kopieren, auf deiner Seite einf\u00fcgen und dort anpassen.  <\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"262\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/buttons.webp\"  alt=\"buttons Navigation\"  class=\"wp-image-6335\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/buttons.webp 924w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/buttons-300x85.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/buttons-768x218.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/buttons-50x14.webp 50w\" sizes=\"(max-width: 924px) 100vw, 924px\" \/><figcaption class=\"wp-element-caption\">Pretty Orange Styleguide: Buttons<\/figcaption><\/figure>\n\n<figure class=\"wp-block-image size-large\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"379\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/blokken-1024x379.webp\"  alt=\"blokken-1024x379 Navigation\"  class=\"wp-image-6336\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/blokken-1024x379.webp 1024w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/blokken-300x111.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/blokken-768x284.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/blokken-50x19.webp 50w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/blokken.webp 1393w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Pretty Orange Styleguide: Bl\u00f6cke<\/figcaption><\/figure>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\" id=\"promoblok\">8. Promoblock in mobilem Widget hinzuf\u00fcgen<\/h2>\n\n<p>Du kannst das mobile Men\u00fc nutzen, um zum Beispiel neue Geburtskollektionen ins Rampenlicht zu r\u00fccken, Ank\u00fcndigungsprodukte hervorzuheben oder platziere zum Beispiel einen Promoblock, um direkt zu zeigen, wo Kunden ihre Umschl\u00e4ge bestellen k\u00f6nnen.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"316\" height=\"107\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/Voorbeeld_promoblok.webp\"  alt=\"Voorbeeld_promoblok Navigation\"  class=\"wp-image-6337\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/Voorbeeld_promoblok.webp 316w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/Voorbeeld_promoblok-300x102.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/Voorbeeld_promoblok-50x17.webp 50w\" sizes=\"(max-width: 316px) 100vw, 316px\" \/><\/figure>\n\n<ul class=\"wp-block-list\">\n<li>Schau nach, welches Navigations-Widget auf dem Handy verwendet wird.<\/li>\n\n\n\n<li>Aktiviere beim Men\u00fc-Widget die Option \u201eMobile menu with featured images\u201c und speichere.<\/li>\n\n\n\n<li>Erstelle einen neuen Men\u00fcpunkt oder passe einen bestehenden Punkt an. Gib den Link zum Bild wie folgt ein: \/media\/xxxx.png und gib bei der Seiten-URL den Link ein, auf den der Block verweisen soll. <\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><img  title=\"\" loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"305\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/Promoblok.webp\"  alt=\"Promoblok Navigation\"  class=\"wp-image-6338\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/Promoblok.webp 960w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/Promoblok-300x95.webp 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/Promoblok-768x244.webp 768w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/Promoblok-50x16.webp 50w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure>\n\n<div class=\"wp-block-advgb-infobox advgb-infobox-wrapper has-text-align-left advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279\"><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 einen Promoblock hinzuf\u00fcgst, w\u00e4hle ein anderes Navigations-Widget f\u00fcr mobil als f\u00fcr Desktop.<\/p><\/div><\/div><\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">Auch interessant<\/h2>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><a href=\"\/cms-statistieken\">Marketing<\/a><\/h4>\n\n\n\n<p>Alles \u00fcber Verkaufszahlen, Kategorien und SEO. Deinen Shop zu verstehen bedeutet, deinen Shop wachsen zu lassen. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/support.sparkles.io\/de\/kennisbank\/seo-tipps-tricks\/\" data-type=\"ht_kb\" data-id=\"2369\">Erste Schritte mit SEO<\/a><\/h4>\n\n\n\n<p>Alles Schritt f\u00fcr Schritt erkl\u00e4rt, um deinen Shop f\u00fcr die Google-Suchergebnisse bereit zu machen.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-765c4724 wp-block-buttons-is-layout-flex\"><\/div>\n\n<p><\/p>\n<style class=\"advgb-styles-renderer\">#advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3, .advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3 {background-color: #fff4fa;padding: 20px 20px 20px 20px;border: 1px solid #bf1774;border-radius: 8px;}#advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3 .advgb-infobox-icon-container, .advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3 .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3 .advgb-infobox-icon-container i, .advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3 .advgb-infobox-icon-container i {color: #bf1774;font-size: 31px;display: block;}#advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-4c94a323-b486-4e52-8a20-6d650468a7d3 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}#advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2, .advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2 {background-color: #fff4fa;padding: 20px 20px 20px 20px;border: 1px solid #bf1774;border-radius: 8px;}#advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2 .advgb-infobox-icon-container, .advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2 .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2 .advgb-infobox-icon-container i, .advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2 .advgb-infobox-icon-container i {color: #bf1774;font-size: 31px;display: block;}#advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-15f1f3f9-a51a-405e-870a-207104c6e5d2 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}#advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a, .advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a {background-color: #fff4fa;padding: 20px 20px 20px 20px;border: 1px solid #bf1774;border-radius: 8px;}#advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a .advgb-infobox-icon-container, .advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a .advgb-infobox-icon-container i, .advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a .advgb-infobox-icon-container i {color: #bf1774;font-size: 31px;display: block;}#advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-1c50f302-9e78-4fd9-8219-be5e4d78296a .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}#advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571, .advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571 {background-color: #fff4fa;padding: 20px 20px 20px 20px;border: 1px solid #bf1774;border-radius: 8px;}#advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571 .advgb-infobox-icon-container, .advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571 .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571 .advgb-infobox-icon-container i, .advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571 .advgb-infobox-icon-container i {color: #bf1774;font-size: 31px;display: block;}#advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-aab698a9-3e33-40ac-bb82-27eae63fb571 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}#advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718, .advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718 {background-color: #f7fae9;padding: 20px 20px 20px 20px;border: 1px solid #cfdd6b;border-radius: 8px;}#advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718 .advgb-infobox-icon-container, .advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718 .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718 .advgb-infobox-icon-container i, .advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718 .advgb-infobox-icon-container i {color: #1d474d;font-size: 31px;display: block;}#advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-e8385a0b-c1ae-4c18-b931-ffaabb054718 .advgb-infobox-textcontent .advgb-infobox-text {color: #333;padding: 0;margin: 0;white-space: pre-wrap;}#advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279, .advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279 {background-color: #fff4fa;padding: 20px 20px 20px 20px;border: 1px solid #bf1774;border-radius: 8px;}#advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279 .advgb-infobox-icon-container, .advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279 .advgb-infobox-icon-container {background-color: #f5f5f5;padding: 0;margin: 0;border: 0px solid #e8e8e8 ;border-radius: 0px;}#advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279 .advgb-infobox-icon-container i, .advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279 .advgb-infobox-icon-container i {color: #bf1774;font-size: 31px;display: block;}#advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279 .advgb-infobox-textcontent .advgb-infobox-title, .advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279 .advgb-infobox-textcontent .advgb-infobox-title {color: #333;padding: 0;margin: 5px 0 10px 0;white-space: pre-wrap;}#advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279 .advgb-infobox-textcontent .advgb-infobox-text, .advgb-infobox-08d7f02c-6f58-482c-97dd-24c680bce279 .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\">Je gr\u00f6\u00dfer deine Website wird, desto schwieriger ist es f\u00fcr den Kunden, alles zu finden. Eine gute Navigation durch die Seite ist ein Schl\u00fcsselfaktor f\u00fcr den Erfolg! Die Navigation auf deiner Seite besteht aus verschiedenen Elementen: 1. Sidebar-Men\u00fc Im Shop befindet sich auf der linken Seite ein Navigationsmen\u00fc, das Sidebar-Men\u00fc (auch bekannt als linkes Widget, [&hellip;]<\/p>\n","protected":false},"author":8,"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":[429],"ht-kb-tag":[713,712],"class_list":["post-6654","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-cms","ht_kb_tag-beziehungen","ht_kb_tag-produktbeziehungen"],"featured_img":false,"coauthors":[],"author_meta":{"author_link":"https:\/\/support.sparkles.io\/de\/author\/andresparkles-io\/","display_name":"Andr\u00e9"},"relative_dates":{"created":"Ver\u00f6ffentlicht 2\u00a0Woche vor","modified":"Aktualisiert 19\u00a0Stunden vor"},"absolute_dates":{"created":"Ver\u00f6ffentlicht am 08\/05\/2026","modified":"Aktualisiert am 18\/05\/2026"},"absolute_dates_time":{"created":"Ver\u00f6ffentlicht am 08\/05\/2026 14:36","modified":"Aktualisiert am 18\/05\/2026 10:29"},"featured_img_caption":"","tax_additional":{"ht_kb_category":{"linked":["<a href=\"https:\/\/support.sparkles.io\/artikel-categorieen\/cms\/\" class=\"advgb-post-tax-term\">CMS<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">CMS<\/span>"],"slug":"ht_kb_category","name":"Article Categories"},"ht_kb_tag":{"linked":["<a href=\"https:\/\/support.sparkles.io\/de\/artikel-tags\/beziehungen\/\" class=\"advgb-post-tax-term\">Beziehungen<\/a>","<a href=\"https:\/\/support.sparkles.io\/de\/artikel-tags\/produktbeziehungen\/\" class=\"advgb-post-tax-term\">Produktbeziehungen<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Beziehungen<\/span>","<span class=\"advgb-post-tax-term\">Produktbeziehungen<\/span>"],"slug":"ht_kb_tag","name":"Article Tags"}},"series_order":"","_links":{"self":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/6654","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/comments?post=6654"}],"version-history":[{"count":1,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/6654\/revisions"}],"predecessor-version":[{"id":6660,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/6654\/revisions\/6660"}],"wp:attachment":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/media?parent=6654"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb-category?post=6654"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=6654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}