{"id":853,"date":"2023-01-13T10:19:38","date_gmt":"2023-01-13T09:19:38","guid":{"rendered":"https:\/\/hpdkb.ledl.net\/domaintechnik\/allgemein\/richtig-loslegen-mit-dem-baukasten\/"},"modified":"2025-11-17T09:29:33","modified_gmt":"2025-11-17T08:29:33","slug":"richtig-loslegen-mit-dem-baukasten","status":"publish","type":"post","link":"https:\/\/hpdkb.ledl.net\/domaintechnik\/erste-schritte\/richtig-loslegen-mit-dem-baukasten\/","title":{"rendered":"Richtig loslegen mit dem Baukasten"},"content":{"rendered":"\n

Mithilfe dieser Anleitung erfahren Sie, wie Sie mit dem Homepage-Baukasten eine Webseite aufbauen und wie Sie am besten mit der Erstellung Ihrer Webseite starten.<\/p>\n\n\n\n

1. SSL-Zertifikat<\/h2>\n\n\n\n

Bevor Sie mit dem Erstellen der Website beginnen, installieren<\/strong> Sie im Hosting-Control-Panel<\/strong> ein SSL-Zertifikat. Dies k\u00f6nnen Sie im Modul \u201eSSL-Sicherheit\u201c<\/em><\/strong> ganz einfach mit einem Klick erledigen. Das SSL-Zertifikat erm\u00f6glicht eine sicher verschl\u00fcsselte Kommunikation zwischen Website und Browser. Das ist wichtig, damit Ihre Website nicht als unsicher eingestuft wird und ist in den meisten F\u00e4llen aufgrund der DSGVO<\/strong> erforderlich.<\/p>\n\n\n\n

2. Vorlage w\u00e4hlen<\/h2>\n\n\n\n

Nun k\u00f6nnen Sie den Baukasten im Hosting-Control-Panel starten und eine der zahlreichen Vorlagen ausw\u00e4hlen<\/strong>, die Ihnen dort zur Verf\u00fcgung stehen. Wenn Sie sich sp\u00e4ter um entscheiden, k\u00f6nnen Sie jederzeit eine andere Vorlage w\u00e4hlen, allerdings werden in diesem Fall die Inhalte, die Sie bereits erstellt haben, zur\u00fcckgesetzt<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Wenn Sie sich f\u00fcr eine der Vorlagen entschieden haben, erstellt der Baukasten die Seitenstruktur und Sie k\u00f6nnen mit dem Bearbeiten loslegen.<\/p>\n\n\n\n

3. Seitenstruktur<\/h2>\n\n\n\n

Eine Seite besteht grunds\u00e4tzlich aus drei Abschnitten: dem Header<\/strong> (Kopfzeile), dem Body<\/strong> (Hauptbereich) und dem Footer<\/strong> (Fu\u00dfzeile).<\/p>\n\n\n\n

Im Header<\/strong> befinden sich \u00fcblicherweise Ihr Logo<\/strong> und ein Men\u00fc<\/strong> zur Seitennavigation<\/strong>. Er wird auf allen Seiten angezeigt. Daher sollten Sie dort keine Inhalte platzieren, die nur f\u00fcr eine bestimmte Seite gedacht sind.<\/p>\n\n\n\n

\"\"
Header (Kopfzeile)<\/figcaption><\/figure>\n\n\n\n

Die Inhalte der einzelnen Seiten<\/strong> befinden sich im Body<\/strong>. Jede Seite hat einen eigenen Body-Bereich, welcher nur auf der jeweiligen Seite angezeigt wird.<\/p>\n\n\n\n

\"\"
Body (Hauptteil)<\/figcaption><\/figure>\n\n\n\n

Ganz unten im Footer<\/strong> (Fu\u00dfzeile) sind \u00fcblicherweise das Impressum<\/strong> und die Kontaktdaten<\/strong> verlinkt. Der Footer ist \u2013 ebenso wie der Header \u2013 auf allen Seiten sichtbar<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

4. Layouts<\/h2>\n\n\n\n

Mit den Elementen, die Sie in der Werkzeugleiste<\/strong> sehen, k\u00f6nnen Sie den Body nun mit Inhalten bef\u00fcllen. Die wichtigsten Elemente sind die Layouts<\/strong>. Mit ihnen k\u00f6nnen Sie andere Elemente wie Textbl\u00f6cke oder Bilder horizontal und vertikal anordnen.<\/p>\n\n\n\n

\"\"
Werkzeugleiste<\/figcaption><\/figure>\n\n\n\n

F\u00fcgen Sie ein Layout-Element<\/strong> hinzu und legen Sie darin die Elemente ab, die Sie neben- oder untereinander anordnen m\u00f6chten.<\/p>\n\n\n\n

Es gibt drei verschiedene Layouts: vertikale, horizontale<\/strong> und schwimmende Layouts.<\/strong><\/p>\n\n\n\n

4.1 Vertikale Layouts<\/h3>\n\n\n\n

Da im Web alle Webseiten von oben nach unten gelesen werden<\/strong>, sind Header, Body und Footer vertikale Layouts<\/strong>. Alle Elemente in einem vertikalen Layout werden untereinander angezeigt.<\/p>\n\n\n

\n
\"\"
Beispiel: Vertikales Layout umschlie\u00dft eine \u00dcberschrift, einen Text und einen Button<\/figcaption><\/figure><\/div>\n\n\n

In diesem Beispiel werden die drei Elemente \u00dcberschrift, Text und Button von einem vertikalen<\/strong> Layout<\/strong> umschlossen, sodass sie untereinander angezeigt<\/strong> werden.<\/p>\n\n\n\n

Im rechten Seitenmen\u00fc<\/strong> des Baukastens, im Reiter \u201eSeitenstruktur\u201c<\/strong><\/em>, sehen Sie den Aufbau der Elemente<\/strong>. Die umschlossenen Elemente werden jeweils mit einem kleinen Einzug von links unter dem umschlie\u00dfenden Element dargestellt.<\/p>\n\n\n

\n
\"\"
Die Struktur des Beispiels, sichtbar im rechten Seitenmen\u00fc im Reiter „Seitenstruktur“.<\/figcaption><\/figure><\/div>\n\n\n

4.2 Horizontale Layouts<\/h3>\n\n\n\n

Mit den horizontalen<\/strong> Layouts<\/strong> k\u00f6nnen Sie Elemente nebeneinander anzeigen<\/strong> lassen. So k\u00f6nnen Sie zum Beispiel einen Text neben ein Bild setzen. Wenn ein Website-Besucher Ihre Webseite auf einem Smartphone<\/strong> aufruft, wird jedes horizontale Layout<\/strong> automatisch zu<\/strong> einem vertikalen Layout<\/strong>, <\/strong>um sich der geringen Bildschirmbreite anzupassen.<\/p>\n\n\n

\n
\"\"
Beispiel: Horizontales Layout umschlie\u00dft 3 Bilder<\/figcaption><\/figure><\/div>\n\n\n

In diesem Beispiel werden drei Bilder nebeneinander angezeigt. Die Bilder befinden sich in einem horizontalen Layout.<\/p>\n\n\n

\n
\"\"
Die Struktur des Beispiels, sichtbar im rechten Seitenmen\u00fc im Reiter „Seitenstruktur“.<\/figcaption><\/figure><\/div>\n\n\n

4.3 Schwimmende Layouts<\/h3>\n\n\n\n

Schwimmende Layouts sind f\u00fcr fortgeschrittene User<\/strong>. Sie sind nicht<\/strong> responsiv<\/strong> und k\u00f6nnen durch absolute Positionierung am Bildschirm fixiert<\/strong> werden.<\/p>\n\n\n\n

4.4 Layouts verschachteln<\/h3>\n\n\n\n

Durch die Kombination verschachtelter Layouts k\u00f6nnen Sie verschiedene Strukturen erstellen. Der Baukasten bietet einige Vorlagen, mit denen Sie ganz einfach Ihre gew\u00fcnschte Struktur umsetzen k\u00f6nnen.<\/p>\n\n\n

\n
\"\"
Layout Vorlagen<\/figcaption><\/figure><\/div>\n\n\n

Erstellen wir zum Beispiel diese Konstruktion:<\/p>\n\n\n

\n
\"\"
Verschachtelte Layouts<\/figcaption><\/figure><\/div>\n\n
\n
\"\"
Aufbau der Karte<\/figcaption><\/figure><\/div>\n\n\n

Es handelt sich um drei Karten, die jeweils ein Bild und zwei Text-Elemente darunter enthalten.<\/p>\n\n\n\n

Die Karte selbst ist ein vertikales Layout, wodurch alle Elemente untereinander angezeigt werden. Das erste Element in der Karte ist das Bild.<\/p>\n\n\n\n

Das vertikale Layout, in dem sich die Elemente befinden, verf\u00fcgt \u00fcber einen entsprechenden Innenabstand<\/strong>.<\/p>\n\n\n

\n
\"\"
Innenabstand visualisiert<\/figcaption><\/figure><\/div>\n\n\n

Den Abstand k\u00f6nnen Sie im rechten Seitenmen\u00fc<\/strong>, im Reiter \u201eAbstand\u201c<\/em><\/strong>, einstellen. Wenn Sie mehr \u00fcber Abst\u00e4nde erfahren m\u00f6chten, k\u00f6nnen Sie sich unseren Beitrag<\/strong> „Abst\u00e4nde<\/a>“ ansehen.<\/p>\n\n\n\n

Los geht’s<\/h2>\n\n\n\n

Jetzt verstehen Sie die Seitenstruktur<\/strong> und die Layout-Elemente<\/strong> des Baukastens und k\u00f6nnen mit dem Erstellen der Webseite beginnen. Weitere Erkl\u00e4rungen rund um den Baukasten finden Sie in unseren anderen Anleitungen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Mithilfe dieser Anleitung erfahren Sie, wie Sie mit dem Homepage-Baukasten eine Webseite aufbauen und wie Sie am besten mit der Erstellung Ihrer Webseite starten. 1. SSL-Zertifikat Bevor Sie mit dem Erstellen der Website beginnen, installieren Sie im Hosting-Control-Panel ein SSL-Zertifikat. Dies k\u00f6nnen Sie im Modul \u201eSSL-Sicherheit\u201c ganz einfach mit einem Klick erledigen. Das SSL-Zertifikat erm\u00f6glicht […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[97],"tags":[88,89,90,91,92,93,94,95,12,96],"class_list":["post-853","post","type-post","status-publish","format-standard","hentry","category-erste-schritte","tag-abstand","tag-aufbau","tag-body","tag-footer","tag-header","tag-layouts","tag-nicht-sicher","tag-seitenstruktur","tag-ssl","tag-verschluesselung"],"_links":{"self":[{"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/posts\/853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/comments?post=853"}],"version-history":[{"count":102,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/posts\/853\/revisions"}],"predecessor-version":[{"id":1071,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/posts\/853\/revisions\/1071"}],"wp:attachment":[{"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/media?parent=853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/categories?post=853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/domaintechnik\/wp-json\/wp\/v2\/tags?post=853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}