{"id":5163,"date":"2026-05-26T07:56:03","date_gmt":"2026-05-26T06:56:03","guid":{"rendered":"https:\/\/support.sparkles.io\/?post_type=ht_kb&#038;p=5163"},"modified":"2026-06-26T12:57:12","modified_gmt":"2026-06-26T11:57:12","slug":"html-und-der-pagebuilder","status":"publish","type":"ht_kb","link":"https:\/\/support.sparkles.io\/de\/kennisbank\/html-und-der-pagebuilder\/","title":{"rendered":"HTML und der PageBuilder"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Responsive Layout<\/strong><\/h2>\n\n<p class=\"wp-block-paragraph\">Wenn du eine Seite aufbaust, beginnst du mit einem \u201eContainer\u201c. Ein Container bestimmt die Breite des Inhalts. Auf gro\u00dfen Bildschirmen gibt es links und rechts Leerraum, um zu verhindern, dass Textzeilen zu lang werden; auf kleinen (mobilen) Bildschirmen ist der Container so breit wie der Bildschirm.  <\/p>\n\n<p class=\"wp-block-paragraph\">In einem Container befindet sich eine Zeile (\u201eRow\u201c), die eine bis maximal 12 Spalten (\u201eCols\u201c) enthalten kann. Du kannst Spalten zusammenf\u00fcgen, um verschiedene Layouts zu erstellen. Dies kannst du f\u00fcr Smartphone, Tablet und Desktop separat einstellen.   <\/p>\n\n<p class=\"wp-block-paragraph\">Im folgenden Beispiel sind f\u00fcr Desktop die Spalten 1\u20134, 5\u20138 und 9\u201312 zusammengef\u00fcgt und f\u00fcr Mobilger\u00e4te alle 12 Spalten zusammengef\u00fcgt. Auf diese Weise kannst du das Layout pro Ger\u00e4t anpassen, w\u00e4hrend du dieselben Elemente verwendest. <\/p>\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img  title=\"\" fetchpriority=\"high\" decoding=\"async\" width=\"596\" height=\"373\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/pagina-opbouw-blokjes.png\"  alt=\"pagina-opbouw-blokjes HTML und der PageBuilder\"  class=\"wp-image-4832\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/pagina-opbouw-blokjes.png 596w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/pagina-opbouw-blokjes-300x188.png 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/pagina-opbouw-blokjes-50x31.png 50w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img  title=\"\" decoding=\"async\" width=\"596\" height=\"373\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/pagina-opbouw-blokjes-mobiel.png\"  alt=\"pagina-opbouw-blokjes-mobiel HTML und der PageBuilder\"  class=\"wp-image-4833\" srcset=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/pagina-opbouw-blokjes-mobiel.png 596w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/pagina-opbouw-blokjes-mobiel-300x188.png 300w, https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/pagina-opbouw-blokjes-mobiel-50x31.png 50w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Die <strong>Spalten-Komponente<\/strong> (columns) im PageBuilder enth\u00e4lt einen Container, eine Row (Columns) und Cols.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Spalten<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Container<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Die \u00e4u\u00dfere H\u00fclle des Spalten-Elements ist die Container-Komponente. Mit der Option Containerbreite stellst du ein, wie viel Platz der Container im Browser einnimmt: den kompletten Browser oder die Seitenbreite, wobei auf gro\u00dfen Bildschirmen links und rechts Platz entsteht. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du dich f\u00fcr den vollen Platz entscheidest, kannst du die Breite des Inhalts auch noch auf \u201eVollst\u00e4ndig\u201c und \u201eSeitenbreite\u201c einstellen. So kannst du dem Container beispielsweise eine Hintergrundfarbe geben, stellst aber sicher, dass der Text nicht \u00fcber die volle Browserbreite platziert wird. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Columns<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du das Spalten-Element hinzuf\u00fcgst, kannst du ein Spalten-Layout w\u00e4hlen, mit dem du einstellst, wie viele Spalten du m\u00f6chtest und wie diese verteilt sind.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Standardm\u00e4\u00dfig haben Spalten einen Innenabstand (Padding), was daf\u00fcr sorgt, dass visuell Platz zwischen den Spalten entsteht. Die Gr\u00f6\u00dfe dieses Zwischenraums kannst du anpassen. Im folgenden Beispiel siehst du 3 Spalten mit einer Box-Komponente darin und darin einer Text-Komponente. Die Spalten haben einen orangen Hintergrund und die Box-Komponenten einen gr\u00fcnen Hintergrund, um den Unterschied des Zwischenraums zu verdeutlichen.   <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1062\" style=\"aspect-ratio: 3440 \/ 1062;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/columns-gap.mov\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Col<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Columns-Komponente kann eine oder mehrere Col-Komponenten (Spalte) enthalten. Im Advanced-Tab kannst du die Breite einer Spalte mit einem Wert von 1 bis 12 einstellen. Der Wert 1 gibt der Spalte eine Breite von einem Zw\u00f6lftel der gesamten Spaltenbreite; bei Wert 3 wird die Spalte ein Viertel (drei Zw\u00f6lftel) breit und bei Wert 6 (sechs Zw\u00f6lftel) erh\u00e4lt die Spalte die halbe Breite. Wenn die Gesamtsumme der Spaltenbreiten gr\u00f6\u00dfer als 12 ist, wird die n\u00e4chste Spalte in die n\u00e4chste Zeile verschoben.   <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Breite kannst du pro Ger\u00e4t einstellen, um das Layout auf die Gr\u00f6\u00dfe des jeweiligen Ger\u00e4ts abzustimmen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Im folgenden Video siehst du, wie du Spaltenbreiten pro Ger\u00e4t anpassen kannst.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/edit-col-width.mov\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n<h2 class=\"wp-block-heading\">Elemente<\/h2>\n\n<p class=\"wp-block-paragraph\"><strong>Element-in-Element<\/strong><\/p>\n\n<p class=\"wp-block-paragraph\">HTML-Elemente k\u00f6nnen in ein anderes HTML-Element platziert werden. Innerhalb des PageBuilders kannst du in eine Col-Komponente ein Element aus dem linken Men\u00fc ziehen oder \u00fcber einen Link im Content-Tab in den Einstellungen. <\/p>\n\n<p class=\"wp-block-paragraph\">Nicht jedes Element kann innerhalb eines bestimmten Elements platziert werden. Eine Box-Komponente kannst du zum Beispiel in eine Col-Komponente ziehen, aber umgekehrt nicht. Wenn du das versuchst, erscheint im PageBuilder eine rote Linie und du kannst das Element nicht \u201eloslassen\u201c. Dasselbe gilt f\u00fcr das Kopieren. Nur wenn das zu kopierende Element innerhalb des Elements, in das du es einf\u00fcgen m\u00f6chtest, zul\u00e4ssig ist, ist die Einf\u00fcgen-Schaltfl\u00e4che verf\u00fcgbar.    <\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1750\" style=\"aspect-ratio: 3440 \/ 1750;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/copy-box-and-col.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<p class=\"wp-block-paragraph\">Wenn Elemente ineinander platziert sind, liegt das innerste Element sozusagen obenauf. Du kannst mit der Pfeil-Schaltfl\u00e4che \u00fcber dem Element tiefer in die Elementstruktur eintauchen. Dies funktioniert also von innen nach au\u00dfen. Von au\u00dfen nach innen ist nicht m\u00f6glich, da ein Element mehrere Elemente im Inneren haben kann.   <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Box<\/strong><\/h3>\n\n<p class=\"wp-block-paragraph\">Die Box-Komponente (div) ist eine Art leerer Kasten, in den du wiederum andere Komponenten platzieren kannst. Auf diese Weise werden Komponenten gruppiert. Du kannst einer Box aber auch Styling f\u00fcr die Platzierung der Komponenten innerhalb einer Box mitgeben. Siehe hierzu die Erl\u00e4uterung der Advanced-Optionen.   <\/p>\n\n<p class=\"wp-block-paragraph\">Die Box-Komponente erh\u00e4lt standardm\u00e4\u00dfig den HTML-Tag \u201ediv\u201c, aber du kannst dies f\u00fcr Styling oder SEO mit der Label-Option im Advanced-Tab anpassen. Die Option \u201eZwischenraum\u201c kann verwendet werden, um Platz zwischen Elementen innerhalb des Elements zu schaffen, wenn bei \u201eAnzeige\u201c die Option Grid oder Inline-Grid gew\u00e4hlt wurde. <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Text (Paragraph)<\/h3>\n\n<p class=\"wp-block-paragraph\">Die Text-Komponente (p) kann f\u00fcr \u00dcberschriften, Texte und Aufz\u00e4hlungen verwendet werden.<\/p>\n\n<p class=\"wp-block-paragraph\">Obwohl es visuell keinen Unterschied zwischen der Option \u201e\u00dcberschrift\u201c im Style-Tab und der Option \u201eKlasse f\u00fcr \u00dcberschrift\u201c im Advanced-Tab gibt, ist es im Rahmen von SEO wichtig, eine gute Abw\u00e4gung zwischen diesen beiden Optionen zu treffen. W\u00e4hlst du h1 bei der Option \u201e\u00dcberschrift\u201c im Style-Tab, erh\u00e4lt die \u00dcberschrift einen h1-Tag; w\u00e4hlst du bei der Option \u201eKlasse f\u00fcr \u00dcberschrift\u201c h1, wird dem HTML-Tag eine h1-Klasse hinzugef\u00fcgt. Mit einem h1-Tag gibst du f\u00fcr SEO an, dass dies die Haupt\u00fcberschrift der Seite ist. Mit einer h1-Klasse gibst du einem Text nur das Styling einer h1. Der Standard-Tag der Text-Komponente ist p (Paragraph).    <\/p>\n\n<p class=\"wp-block-paragraph\">Die Link-Option im Advanced-Tab ist dazu gedacht, einen Link in einen Text einzuf\u00fcgen. <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/link-in-paragraph.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<p class=\"wp-block-paragraph\">M\u00f6chtest du den gesamten Text als Link verwenden, solltest du besser die Link-Komponente verwenden und dort eine Text-Komponente platzieren.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/link-with-text.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Icon<\/h3>\n\n<p class=\"wp-block-paragraph\">M\u00f6chtest du ein anderes Icon verwenden, als in der Liste steht, w\u00e4hle \u201eIcon-Name\u201c unter \u201eIcon-Option ausw\u00e4hlen\u201c. Klicke anschlie\u00dfend auf den Link zur Font Awesome-Website und w\u00e4hle ein Icon aus. Klicke im Popup auf den Namen des Icons (der Name wird dann kopiert) und f\u00fcge diesen in das Eingabefeld im PageBuilder ein.  <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/icon.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Abbildung<\/h3>\n\n<p class=\"wp-block-paragraph\">Die Option \u201eBildbeschreibung\u201c f\u00fcgt dem Bild einen Alt-Text hinzu. Ein Alt-Text ist wichtig f\u00fcr SEO und Screenreader. <\/p>\n\n<p class=\"wp-block-paragraph\">Ein Bild wird standardm\u00e4\u00dfig \u00fcber die volle Breite des Elements platziert, in dem das Bild steht. Wenn du das nicht m\u00f6chtest, kannst du die Option \u201eSkalierbar\u201c im Advanced-Tab deaktivieren. Wenn du das tust, kannst du eine Breite und\/oder H\u00f6he w\u00e4hlen.  <\/p>\n\n<p class=\"wp-block-paragraph\">Bei der Breite und H\u00f6he hast du die Wahl zwischen Prozentsatz und Pixel. Wenn du Prozentsatz ausw\u00e4hlst, wird eine Klasse mit dem Prozentsatz hinzugef\u00fcgt. Dadurch kannst du pro Ger\u00e4t einen anderen Wert einstellen. Wenn du Pixel (px) w\u00e4hlst, wird der Wert als Inline-Style hinzugef\u00fcgt und gilt somit f\u00fcr alle Ger\u00e4te.   <\/p>\n\n<p class=\"wp-block-paragraph\">Wenn du eine H\u00f6he und Breite eingestellt hast, kannst du mit der Option \u201eBild anpassen\u201c angeben, wie das Bild innerhalb dieses Raums angezeigt wird. Mit \u201eFill\u201c wird das Bild mit der eingestellten Breite und H\u00f6he angezeigt. Das Bild kann hierdurch verzerrt werden. \u201eContain\u201c sorgt daf\u00fcr, dass das gesamte Bild angezeigt wird; es kann dann Leerraum entstehen. \u201eCover\u201c f\u00fcllt das Bild vollst\u00e4ndig \u00fcber den Raum aus, verzerrt das Bild aber nicht; es k\u00f6nnen jedoch Teile des Bildes abgeschnitten werden. Mit \u201eNone\u201c wird das Bild in seiner urspr\u00fcnglichen Gr\u00f6\u00dfe gezeigt; es kann sowohl Leerraum entstehen als auch Teile abgeschnitten werden. \u201eScale-down\u201c ist vergleichbar mit \u201eContain\u201c, aber der Unterschied ist, dass das Bild nicht \u201eaufgebl\u00e4ht\u201c wird, wenn die urspr\u00fcngliche Gr\u00f6\u00dfe des Bildes kleiner als der Raum ist. \u201eInherit\u201c bedeutet, dass der Wert des Elements, in dem das Bild steht, \u00fcbernommen wird.       <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Bildlink<\/strong> (Interaktives Bild)<\/h3>\n\n<p class=\"wp-block-paragraph\">Der Bildlink ist eine Link-Komponente mit einem darin enthaltenen Bild. Innerhalb dieser Kombination kannst du Styling daf\u00fcr w\u00e4hlen, wenn der Nutzer mit der Maus \u00fcber ein Bild f\u00e4hrt (Hover). <\/p>\n\n<p class=\"wp-block-paragraph\">Du kannst dem Bild auch ein Standard-Verh\u00e4ltnis (Ratio) mitgeben. Das ist praktisch, wenn du mehrere Bilder hast, die du alle genau gleich gro\u00df anzeigen m\u00f6chtest; du musst dann nicht alle Bilder in einem Bildbearbeitungsprogramm exakt gleich zuschneiden. <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/interactive-image.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Button<\/h3>\n\n<p class=\"wp-block-paragraph\">Wenn du einem Button einen Link hinzugef\u00fcgt hast und in der Vorschau auf den Button klickst, erscheint die URL in einem Tooltip. Das tats\u00e4chliche Navigieren zur URL ist im PageBuilder deaktiviert. <\/p>\n\n<p class=\"wp-block-paragraph\">Bei Ziel (Target) kannst du zwischen \u201eblank\u201c und \u201eself\u201c w\u00e4hlen. Bei \u201eblank\u201c wird ein neuer Browser-Tab ge\u00f6ffnet, bei \u201eself\u201c wird die Seite im selben Tab ge\u00f6ffnet. <\/p>\n\n<p class=\"wp-block-paragraph\">Es ist auch m\u00f6glich, ein Icon mit den Toggles im Content-Tab hinzuzuf\u00fcgen. Wenn du einen Toggle aktivierst, wird an der linken oder rechten Seite des Buttons eine Icon-Komponente hinzugef\u00fcgt. Das Icon kannst du anschlie\u00dfend wie unter der \u00dcberschrift \u201eIcon\u201c beschrieben anpassen.  <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Link<\/h3>\n\n<p class=\"wp-block-paragraph\">Eine Link-Komponente (a) hat viele der gleichen Optionen wie eine Box-Komponente. Der gro\u00dfe Unterschied zwischen einer a- und einer div-Komponente ist, dass du einem Link eine URL (href) hinzuf\u00fcgen kannst, um irgendwohin zu navigieren. Verwende einen Link nur, wenn das Ziel ist, den Nutzer weiterklicken zu lassen. Ein HTML-a-Tag ohne oder mit einer nicht funktionierenden URL ist schlecht f\u00fcr SEO.   <\/p>\n\n<p class=\"wp-block-paragraph\">Genau wie bei einem Button kannst du in der Vorschau die URL \u00fcber den Tooltip \u00fcberpr\u00fcfen, indem du auf das Element klickst.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Dropdown<\/h3>\n\n<p class=\"wp-block-paragraph\">Um das Men\u00fc des Dropdowns zu \u00f6ffnen, klicke auf den Punkt mit dem Zahnrad unten rechts. Du kannst dann mit dem Toggle in den Einstellungen das Dropdown-Men\u00fc \u00f6ffnen. <\/p>\n\n<p class=\"wp-block-paragraph\">Wenn du auf den Punkt mit dem Zahnrad beim Men\u00fc klickst, kannst du Items hinzuf\u00fcgen und das Men\u00fc stylen. Wenn du anschlie\u00dfend auf den dunklen Hintergrund klickst, wird wieder der Einstellungs-Tab des Dropdowns angezeigt und du kannst das Dropdown-Men\u00fc mit dem Toggle wieder schlie\u00dfen. <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/dropdown.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Slider<\/h3>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<p class=\"wp-block-paragraph\">In den Einstellungen der Slider-Komponente kannst du pro Ger\u00e4t w\u00e4hlen, wie viele Slides nebeneinander sichtbar sind und ob Platz zwischen den Slides angezeigt werden soll. Du kannst einstellen, ob links und rechts Pfeile oder unten Punkte zur Bedienung des Sliders angezeigt werden sollen. <\/p>\n\n<p class=\"wp-block-paragraph\">Du kannst den Slider auch wieder bei der ersten Slide beginnen lassen, wenn alle Slides gezeigt wurden, indem du die Option \u201eWiederholung\u201c nutzt. F\u00fcr die Option \u201eAutomatisches Abspielen\u201c kannst du mit \u201eVerz\u00f6gerung\u201c einstellen, wie schnell der Slider l\u00e4uft. <\/p>\n\n<p class=\"wp-block-paragraph\">Wenn du eine Slide anklickst, kannst du der Slide Inhalt hinzuf\u00fcgen, wie zum Beispiel ein Karten- oder Review-Element oder ein Bild, oder du kannst selbst ein Element mit einer Box- oder Link-Komponente bauen.<\/p>\n\n<p class=\"wp-block-paragraph\">Der Slider bewegt sich im Builder nicht, wohl aber in der Vorschau und nat\u00fcrlich auf der Website.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/swiper.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Men\u00fc (Liste)<\/h3>\n\n<p class=\"wp-block-paragraph\">Die Men\u00fc-Komponente erstellt eine Liste (ol) mit Aufz\u00e4hlungselementen (li).<\/p>\n\n<p class=\"wp-block-paragraph\">Du kannst ein fertiges Men\u00fc-Item hinzuf\u00fcgen; dies ist ein Aufz\u00e4hlungselement mit einer Link-Komponente und einer Text-Komponente. \u00dcber den Content-Tab kannst du auch ein leeres Aufz\u00e4hlungselement hinzuf\u00fcgen, um den Inhalt selbst zu bestimmen. <\/p>\n\n<p class=\"wp-block-paragraph\">Tipps &amp; Tricks: Indem du die Anzeige auf \u201eFlex\u201c umstellst, kannst du ein horizontales Men\u00fc erstellen.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Akkordeon<\/h3>\n\n<p class=\"wp-block-paragraph\">Klicke auf den Punkt mit dem Zahnrad unten rechts, um die Einstellungen zu \u00f6ffnen. Hier kannst du weitere Akkordeon-Items hinzuf\u00fcgen. <\/p>\n\n<p class=\"wp-block-paragraph\">Standardm\u00e4\u00dfig wird ein Akkordeon-Item geschlossen, wenn ein anderes Item ge\u00f6ffnet wird, aber dies kannst du unter dem Tab \u201eAdvanced\u201c deaktivieren.<\/p>\n\n<p class=\"wp-block-paragraph\">Du kannst ein Akkordeon-Item \u00f6ffnen, indem du auf den Punkt mit dem Zahnrad auf der rechten Seite klickst. Im Feld unter der Akkordeon-\u00dcberschrift kannst du dann Inhalt hinzuf\u00fcgen. <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Offcanvas<\/h3>\n\n<p class=\"wp-block-paragraph\">Ein Offcanvas ist ein verborgenes Seitenpanel, das eingeschoben wird. F\u00fcr das mobile Men\u00fc wird beispielsweise ein Offcanvas verwendet. <\/p>\n\n<p class=\"wp-block-paragraph\">Wenn du die Offcanvas-Komponente hinzuf\u00fcgst, siehst du zun\u00e4chst nur einen Button.<br\/><strong><em>Hinweis:<\/em><\/strong> <em>Du musst diesem Button keinen Link oder Ziel hinzuf\u00fcgen.<\/em><\/p>\n\n<p class=\"wp-block-paragraph\">Mit dem Punkt mit dem Zahnrad \u00f6ffnest du die Einstellungen des Offcanvas. Anschlie\u00dfend kannst du mit dem Toggle \u201eOffcanvas-Panel bearbeiten\u201c das Seitenpanel \u00f6ffnen. Wenn du mit der Einrichtung des Seitenpanels fertig bist, klicke auf den dunklen Hintergrund f\u00fcr die Einstellungen des Offcanvas, wo du das Seitenpanel wieder schlie\u00dfen kannst.  <\/p>\n\n<p class=\"wp-block-paragraph\">Unter dem Advanced-Tab kannst du einstellen, ob es m\u00f6glich ist, auf der darunter liegenden Seite zu scrollen, wenn das Seitenpanel offen ist; ob du einen dunklen Hintergrund zeigen m\u00f6chtest und auf welcher Seite des Browsers das Seitenpanel ge\u00f6ffnet werden soll.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h2 class=\"wp-block-heading\">Advanced-Optionen<\/h2>\n\n<h3 class=\"wp-block-heading\">Abstand<\/h3>\n\n<p class=\"wp-block-paragraph\">Du kannst einen Au\u00dfenabstand um ein Element (Margin) oder einen Innenabstand innerhalb eines Elements (Padding) hinzuf\u00fcgen. Du kannst pro Seite separat oder f\u00fcr alle Seiten gleichzeitig einen Abstand einstellen und falls gew\u00fcnscht f\u00fcr jedes Ger\u00e4t separat. <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<p class=\"wp-block-paragraph\">Padding einstellen:<\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/padding.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<p class=\"wp-block-paragraph\">Margin einstellen:<\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/margin.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<p class=\"wp-block-paragraph\">Worauf du beim Einstellen von Abst\u00e4nden achten musst:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Wenn ein Element eine Breite von 100 % hat, k\u00f6nnen horizontale Scrollbalken entstehen.<\/li>\n\n\n\n<li>Wenn ein Element einen Au\u00dfenabstand an der Unterseite hat (Margin-bottom) und das Element darunter einen Au\u00dfenabstand an der Oberseite hat (Margin-top), werden diese Abst\u00e4nde zusammengef\u00fcgt (Margin Collapsing); der gr\u00f6\u00dfte Abstand wird dann beibehalten.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">\u00dcberlauf<\/h3>\n\n<p class=\"wp-block-paragraph\">Mit \u00dcberlauf (Overflow) kannst du angeben, was passieren soll, wenn ein Element zu gro\u00df f\u00fcr das Element ist, in dem es platziert wurde. Die Optionen sind: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Hidden: Das Element wird abgeschnitten.<\/li>\n\n\n\n<li>Scroll: Es werden Scrollbalken angezeigt; auch wenn ein Element nicht zu gro\u00df ist.<\/li>\n\n\n\n<li>Auto: Es werden Scrollbalken angezeigt, wenn das Element zu gro\u00df ist.<\/li>\n\n\n\n<li>Visible: Das Element wird in seiner Gesamtheit gezeigt.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">F\u00fcr alle gilt, dass du die Option f\u00fcr horizontal (x), vertikal (y) sowie horizontal und vertikal zusammen einstellen kannst.  <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Anzeige<\/h3>\n\n<p class=\"wp-block-paragraph\">Mit Anzeige (Display) kannst du einstellen, wie sich ein Element auf einer Seite verh\u00e4lt. Die Optionen sind: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Block: Das Element f\u00fcllt die vollst\u00e4ndige Breite aus; das n\u00e4chste Element beginnt also automatisch darunter.<\/li>\n\n\n\n<li>Inline: Das Element verh\u00e4lt sich so, als st\u00fcnde es in einem Satz, und wird vor allem f\u00fcr Textelemente verwendet; es nimmt den Platz ein, den es ben\u00f6tigt, aber es kann keine Breite (Width) und H\u00f6he (Height) eingestellt werden.<\/li>\n\n\n\n<li>Inline-block: Das Element wird neben anderen Elementen platziert, wenn dort Platz ist; es kann eine Breite und H\u00f6he eingestellt werden.<\/li>\n\n\n\n<li>Flex: Bestimmt, wie die Elemente innerhalb des Elements in Bezug auf Richtung, Verteilung und Ausrichtung angezeigt werden. Siehe Flex-Optionen f\u00fcr die Funktionsweise. <\/li>\n\n\n\n<li>Grid: Erstellt eine Art Gitter mit Zeilen und Spalten.<\/li>\n\n\n\n<li>Inline-flex: Funktioniert wie Flex, aber das Element verh\u00e4lt sich wie ein Inline-Element.<\/li>\n\n\n\n<li>Inline-grid: Funktioniert wie Grid, aber das Element verh\u00e4lt sich wie ein Inline-Element.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Flex-Optionen<\/h3>\n\n<p class=\"wp-block-paragraph\">Die Optionen, die du f\u00fcr ein Element einstellst, bestimmen, wie die Elemente in diesem Element platziert werden. Angenommen, du hast eine Box-Komponente mit einigen Bildern darin. Dann beeinflussen die Flex-Optionen, die du f\u00fcr die Box-Komponente einstellst, wie die Bilder angezeigt werden.  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Direction: Bestimmt die Richtung, in der die Elemente darin platziert werden; horizontal (Row) oder vertikal (Column).<\/li>\n\n\n\n<li>Wrap: Wenn die Zeile oder Spalte voll ist, werden die Elemente darin in einer neuen Zeile oder Spalte angezeigt (Wrap) oder nicht (Nowrap).<\/li>\n\n\n\n<li>Justify content: Gibt an, wie die Elemente darin horizontal angezeigt werden. Mit \u201eStart\u201c werden sie links angezeigt, mit \u201eCenter\u201c in der Mitte und mit \u201eEnd\u201c rechts. Die Option \u201eBetween\u201c verteilt die Elemente darin gleichm\u00e4\u00dfig \u00fcber die Breite des Elements. Bei \u201eAround\u201c erhalten die Items links und rechts den gleichen Abstand; zwischen zwei Elementen ist also doppelt so viel Platz wie an den R\u00e4ndern. Bei \u201eEvenly\u201c ist zwischen dem Rand und den Elementen sowie zwischen den Elementen untereinander gleich viel Platz.    <\/li>\n\n\n\n<li>Align items: Macht etwa dasselbe wie Justify content, aber in vertikaler Richtung. Bei Align-items gibt es keine \u201eBetween\u201c-Option, daf\u00fcr aber eine Option \u201eStretch\u201c. Stretch (die Standardoption f\u00fcr Align-items) sorgt daf\u00fcr, dass die Elemente darin bis zum verf\u00fcgbaren Platz \u201egestreckt\u201c werden.  <\/li>\n\n\n\n<li>Align content: Funktioniert nur, wenn es mehrere Zeilen oder Spalten gibt und die Elemente in die n\u00e4chste Zeile oder Spalte umbrechen. Ansonsten funktioniert diese Option \u00e4hnlich wie Align-items. <\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">\u201eJustify content\u201c und \u201eAlign items\u201c werden oft verwendet, um ein Element zu zentrieren.<\/p>\n\n<p class=\"wp-block-paragraph\">Im folgenden Video siehst du, wie die verschiedenen Optionen verwendet werden k\u00f6nnen. Hierbei wurde eine Box-Komponente mit einer festen Breite und H\u00f6he in Pixeln verwendet. Auch die Bilder haben eine feste Breite und H\u00f6he in Pixeln.  <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/flex.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Verschieben<\/h3>\n\n<p class=\"wp-block-paragraph\">Du kannst ein Element im Verh\u00e4ltnis dazu verschieben (Translate), wie es nach dem \u00fcblichen Fluss platziert w\u00fcrde. Damit kannst du ein Element zum Beispiel ein St\u00fcck herausragen lassen. <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/translate.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Position<\/h3>\n\n<p class=\"wp-block-paragraph\">Mit der Option Position kannst du angeben, wo ein Element im Verh\u00e4ltnis zu einem anderen Element platziert wird. Hierbei ist es wichtig, dass die Option \u201eAbsolute\u201c nur auf ein Element angewendet wird, das in einem Element mit der Position \u201eRelative\u201c platziert ist; andernfalls wird es im Verh\u00e4ltnis zum Browserfenster positioniert. <\/p>\n\n<p class=\"wp-block-paragraph\">Pro Seite kannst du einen Wert w\u00e4hlen, um die Position zu definieren. Diese Werte k\u00f6nnen pro Ger\u00e4t eingestellt werden. <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/position.mov\"><\/video><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h3 class=\"wp-block-heading\">Verh\u00e4ltnis<\/h3>\n\n<p class=\"wp-block-paragraph\">Du kannst das Verh\u00e4ltnis zwischen Breite und H\u00f6he (Ratio) f\u00fcr ein Element einstellen. So kannst du quadratische und rechteckige Elemente erstellen. Der Inhalt des Elements wird automatisch mit \u201ePosition absolute\u201c positioniert. Dies sorgt daf\u00fcr, dass mehrere hinzugef\u00fcgte Komponenten \u00fcbereinander platziert werden. Dies kannst du verhindern, indem du zuerst eine Box- oder eine Link-Komponente hinzuf\u00fcgst und darin die Komponenten platzierst.    <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<figure class=\"wp-block-video\"><video height=\"1684\" style=\"aspect-ratio: 3440 \/ 1684;\" width=\"3440\" controls=\"\" src=\"https:\/\/support.sparkles.io\/wp-content\/uploads\/2026\/05\/ratio.mov\"><\/video><\/figure>\n","protected":false},"excerpt":{"rendered":"<p class=\"qua-blog-post-description\">Responsive Layout Wenn du eine Seite aufbaust, beginnst du mit einem \u201eContainer\u201c. Ein Container bestimmt die Breite des Inhalts. Auf gro\u00dfen Bildschirmen gibt es links und rechts Leerraum, um zu verhindern, dass Textzeilen zu lang werden; auf kleinen (mobilen) Bildschirmen ist der Container so breit wie der Bildschirm. In einem Container befindet sich eine Zeile [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"ht-kb-category":[483,720],"ht-kb-tag":[722],"class_list":["post-5163","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-verwalten","ht_kb_category-webshop","ht_kb_tag-pagebuilder"],"acf":[],"featured_img":false,"coauthors":[],"author_meta":{"author_link":"https:\/\/support.sparkles.io\/de\/author\/carina\/","display_name":"Carina Booij"},"relative_dates":{"created":"Ver\u00f6ffentlicht 3\u00a0Monaten vor","modified":"Aktualisiert 2\u00a0Monaten vor"},"absolute_dates":{"created":"Ver\u00f6ffentlicht am 26\/05\/2026","modified":"Aktualisiert am 26\/06\/2026"},"absolute_dates_time":{"created":"Ver\u00f6ffentlicht am 26\/05\/2026 07:56","modified":"Aktualisiert am 26\/06\/2026 12:57"},"featured_img_caption":"","tax_additional":{"ht_kb_category":{"linked":["<a href=\"https:\/\/support.sparkles.io\/de\/artikel-categorieen\/verwalten\/\" class=\"advgb-post-tax-term\">Verwalten<\/a>","<a href=\"https:\/\/support.sparkles.io\/artikel-categorieen\/webshop\/\" class=\"advgb-post-tax-term\">Webshop<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Verwalten<\/span>","<span class=\"advgb-post-tax-term\">Webshop<\/span>"],"slug":"ht_kb_category","name":"Article Categories"},"ht_kb_tag":{"linked":["<a href=\"https:\/\/support.sparkles.io\/artikel-tags\/pagebuilder\/\" class=\"advgb-post-tax-term\">Pagebuilder<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Pagebuilder<\/span>"],"slug":"ht_kb_tag","name":"Article Tags"}},"series_order":"","_links":{"self":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5163","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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/comments?post=5163"}],"version-history":[{"count":3,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5163\/revisions"}],"predecessor-version":[{"id":7808,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5163\/revisions\/7808"}],"wp:attachment":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/media?parent=5163"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb-category?post=5163"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=5163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}