{"id":250,"date":"2022-12-02T09:34:23","date_gmt":"2022-12-02T08:34:23","guid":{"rendered":"https:\/\/hpdkb.ledl.net\/netzadresse\/?p=250"},"modified":"2024-02-06T08:03:25","modified_gmt":"2024-02-06T07:03:25","slug":"richtig-loslegen-mit-dem-baukasten","status":"publish","type":"post","link":"https:\/\/hpdkb.ledl.net\/netzadresse\/blog\/erste-schritte\/richtig-loslegen-mit-dem-baukasten\/","title":{"rendered":"Richtig loslegen mit dem Baukasten"},"content":{"rendered":"\n

Mithilfe dieser Anleitung erlernen Sie den Aufbau einer Webseite mit dem Homepage-Baukasten und wie Sie am besten mit dem Erstellen 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 Sie in Ihrem Hosting Control Panel ein SSL-Zertifikat. Dies k\u00f6nnen Sie im Modul „SSL-Sicherheit“ ganz einfach mit einem Klick erledigen. Das SSL-Zertifikat erm\u00f6glicht eine sicher verschl\u00fcsselte Kommunikation zwischen Website und Browser. Das ist sehr wichtig, damit Ihre Website nicht als unsicher gekennzeichnet wird und ist in den meisten F\u00e4llen durch die DSGVO vorgeschrieben.<\/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 sich eine der zahlreichen Vorlagen aussuchen, die Ihnen im Baukasten zur Verf\u00fcgung stehen. Wenn Sie sich sp\u00e4ter umentscheiden, k\u00f6nnen Sie jederzeit eine andere Vorlage ausw\u00e4hlen, jedoch werden in dem Fall die Inhalte, die Sie bereits erstellt haben, zur\u00fcckgesetzt.<\/p>\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 (Kopfzeile), dem Body (Hauptbereich) und dem Footer (Fu\u00dfzeile). Im Header befinden sich \u00fcblicherweise Ihr Logo und ein Men\u00fc zur Seitennavigation. Er wird auf allen Seiten angezeigt. Sie sollten also hier keine Inhalte hinzuf\u00fcgen, die nur f\u00fcr eine bestimmte Seite gedacht sind.<\/p>\n\n\n\n

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

Ganz unten in der Fu\u00dfzeile sind gew\u00f6hnlicherweise das Impressum und Kontaktdaten verlinkt. Der Footer ist, gleich wie der Header, auf allen Seiten zu sehen.<\/p>\n\n\n\n

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

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

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

Es gibt drei verschiedene Layouts: vertikale, horizontale und schwimmende Layouts.<\/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, sind der Header, Body und Footer vertikale Layouts. 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 3 Elemente \u00dcberschrift, Text und Button von einem vertikalen Layout umschlossen, wodurch sie untereinander angezeigt werden.<\/p>\n\n\n\n

Im rechten Seitenmen\u00fc des Baukastens im Reiter „Seitenstruktur“ sehen Sie den Aufbau der Elemente. Die umschlossenen Elemente werden jeweils mit einem kleinen Einzug von links unter dem umschlie\u00dfenden Element angezeigt.<\/p>\n\n\n

\n
\"Seitenstruktur\"
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 Layouts k\u00f6nnen Sie Elemente horizontal, also nebeneinander, anzeigen lassen. Dadurch k\u00f6nnen Sie zum Beispiel einen Text neben ein Bild setzen. Wenn ein Website-Besucher Ihre Webseite auf dem Smartphone besucht, so wird jedes horizontale Layout zu einem vertikalen Layout um sich an die geringe Bildschirm-Breite anzupassen.<\/p>\n\n\n

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

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

\n
\"Seitenstruktur\"
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. Sie verhalten sich nicht responsiv und k\u00f6nnen durch eine absolute Position an den Bildschirm fixiert werden.<\/p>\n\n\n\n

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

Durch Kombinationen aus verschachtelten Layouts k\u00f6nnen Sie verschiedene Strukturen erstellen. Der Baukasten bietet einige Vorlagen, mit denen Sie ganz einfach an Ihre gew\u00fcnschte Struktur kommen.<\/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>\n\n\n\n

Es handelt sich um drei Karten mit jeweils einem Bild und zwei Text-Elementen darunter.<\/p>\n\n\n

\n
\"\"
Eine der Karten<\/figcaption><\/figure><\/div>\n\n
\n
\"\"
Aufbau der Karte<\/figcaption><\/figure><\/div>\n\n\n

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

Die zwei Texte sind wieder verschachtelt in einem vertikalen Layout. Dies liegt daran, dass der Text nicht die ganze Breite einnehmen soll, das Bild aber schon. Das vertikale Layout, in dem sich die beiden Text-Elemente befinden, hat einen entsprechenden Innenabstand.<\/p>\n\n\n

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

Den Abstand k\u00f6nnen Sie im rechten Seitenmen\u00fc im Reiter „Abstand“ einstellen.<\/p>\n\n\n\n

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

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

Mithilfe dieser Anleitung erlernen Sie den Aufbau einer Webseite mit dem Homepage-Baukasten und wie Sie am besten mit dem Erstellen Ihrer Webseite starten. 1. SSL-Zertifikat Bevor Sie mit dem Erstellen der Website beginnen, installieren Sie in Ihrem Hosting Control Panel ein SSL-Zertifikat. Dies k\u00f6nnen Sie im Modul „SSL-Sicherheit“ ganz einfach mit einem Klick erledigen. Das […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87],"tags":[90,88,93,94,92,91,95,89,12,96],"class_list":["post-250","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\/netzadresse\/wp-json\/wp\/v2\/posts\/250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hpdkb.ledl.net\/netzadresse\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hpdkb.ledl.net\/netzadresse\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/netzadresse\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/netzadresse\/wp-json\/wp\/v2\/comments?post=250"}],"version-history":[{"count":19,"href":"https:\/\/hpdkb.ledl.net\/netzadresse\/wp-json\/wp\/v2\/posts\/250\/revisions"}],"predecessor-version":[{"id":339,"href":"https:\/\/hpdkb.ledl.net\/netzadresse\/wp-json\/wp\/v2\/posts\/250\/revisions\/339"}],"wp:attachment":[{"href":"https:\/\/hpdkb.ledl.net\/netzadresse\/wp-json\/wp\/v2\/media?parent=250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/netzadresse\/wp-json\/wp\/v2\/categories?post=250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hpdkb.ledl.net\/netzadresse\/wp-json\/wp\/v2\/tags?post=250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}