{"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-05-26T07:56:04","modified_gmt":"2026-05-26T06:56:04","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<p class=\"wp-block-paragraph\"><strong>Responsive Layout<\/strong><\/p>\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. 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 Spalten-Komponente 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<p class=\"wp-block-paragraph\"><strong>Spalten-Komponente<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du die Spalten-Komponente hinzuf\u00fcgst, kannst du in den Einstellungen der Spalten-Komponente w\u00e4hlen, wie viele Spalten du m\u00f6chtest und wie diese verteilt sind. Standardm\u00e4\u00dfig haben Spalten ein 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 wiederum eine 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<p class=\"wp-block-paragraph\"><strong>Container-Komponente<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du in der Spalten-Komponente auf die Pfeil-nach-oben-Schaltfl\u00e4che klickst, wird die Container-Komponente ausgew\u00e4hlt. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mit der Option Bildschirmbreite stellst du ein, wie viel Platz der Container im Browser einnimmt. Bei voller Breite &#8230;  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em><strong>Behebe dies!<\/strong><\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n<p class=\"wp-block-paragraph\"><strong>Element-in-Element<\/strong><\/p>\n\n<p class=\"wp-block-paragraph\">Wie dir in den HTML &amp; CSS Basics vielleicht schon aufgefallen ist, kannst du manche HTML-Elemente in ein anderes HTML-Element platzieren.<\/p>\n\n<p class=\"wp-block-paragraph\">Im PageBuilder funktioniert das genauso. Du kannst aus dem linken Men\u00fc Elemente auf die Seite ziehen und anschlie\u00dfend in dieses Element ein anderes Element ziehen oder \u00fcber einen der Links im linken Men\u00fc hinzuf\u00fcgen.  <\/p>\n\n<p class=\"wp-block-paragraph\">Eine Box-Komponente (div) ist eine Komponente, in der andere Komponenten platziert werden k\u00f6nnen. Auf diese Weise werden Komponenten gruppiert.  <\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\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":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"ht-kb-category":[483,720],"ht-kb-tag":[],"class_list":["post-5163","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-verwalten","ht_kb_category-webshop"],"featured_img":false,"coauthors":[],"author_meta":{"author_link":"https:\/\/support.sparkles.io\/de\/author\/carina\/","display_name":"Carina Booij"},"relative_dates":{"created":"Ver\u00f6ffentlicht 4\u00a0Woche vor","modified":"Aktualisiert 4\u00a0Woche vor"},"absolute_dates":{"created":"Ver\u00f6ffentlicht am 26\/05\/2026","modified":"Aktualisiert am 26\/05\/2026"},"absolute_dates_time":{"created":"Ver\u00f6ffentlicht am 26\/05\/2026 07:56","modified":"Aktualisiert am 26\/05\/2026 07:56"},"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":[],"unlinked":[],"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":2,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5163\/revisions"}],"predecessor-version":[{"id":6650,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5163\/revisions\/6650"}],"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}]}}