1. Innenabstand (Padding)

• Der Innenabstand ist der Raum zwischen dem Inhalt eines Elements (z. B. Text, Bild) und seinem Rahmen.
• Padding sorgt dafür, dass der Inhalt nicht direkt am Rand klebt und verbessert dadurch die Lesbarkeit und Ästhetik.

2. Außenabstand (Margin)

• Der Außenabstand ist der Raum, der ein Element von anderen Elementen oder vom Seitenrand trennt.
• Margin wird verwendet, um Layoutbereiche klar voneinander abzugrenzen und Elemente optisch zu gruppieren.

Abstandsfaktoren

Ein hilfreiches Feature ist die Möglichkeit, Abstände prozentual für verschiedene Bildschirmgrößen zu verkleinern oder zu vergrößern. Dadurch können Sie sicherstellen, dass Ihre Website auf Breitbild-, Desktop-, Tablet- und Mobilgeräten optimal dargestellt wird.

Wie funktioniert die Anpassung?

Zunächst legen Sie die Abstände fest, zum Beispiel 50 px oben und unten sowie 80 px links und rechts. Auf Mobilgeräten kann das jedoch zu groß wirken, da der Bildschirm deutlich schmaler ist. Um dies anzupassen, können Sie den Abstandsfaktor für Mobilgeräte beispielsweise auf 50 % reduzieren. Dadurch halbieren sich die Abstände automatisch: 25 px oben und unten sowie 40 px links und rechts, sodass die Gestaltung besser an die kleineren Bildschirme angepasst wird.

1. SSL-Zertifikat

Bevor Sie mit dem Erstellen der Website beginnen, installieren Sie im Hosting-Control-Panel ein SSL-Zertifikat. Dies können Sie im Modul „SSL-Sicherheit“ ganz einfach mit einem Klick erledigen. Das SSL-Zertifikat ermöglicht eine sicher verschlüsselte Kommunikation zwischen Website und Browser. Das ist wichtig, damit Ihre Website nicht als unsicher eingestuft wird und ist in den meisten Fällen aufgrund der DSGVO erforderlich.

2. Vorlage wählen

Nun können Sie den Baukasten im Hosting-Control-Panel starten und eine der zahlreichen Vorlagen auswählen, die Ihnen dort zur Verfügung stehen. Wenn Sie sich später um entscheiden, können Sie jederzeit eine andere Vorlage wählen, allerdings werden in diesem Fall die Inhalte, die Sie bereits erstellt haben, zurückgesetzt.

Wenn Sie sich für eine der Vorlagen entschieden haben, erstellt der Baukasten die Seitenstruktur und Sie können mit dem Bearbeiten loslegen.

3. Seitenstruktur

Eine Seite besteht grundsätzlich aus drei Abschnitten: dem Header (Kopfzeile), dem Body (Hauptbereich) und dem Footer (Fußzeile).

Im Header befinden sich üblicherweise Ihr Logo und ein Menü zur Seitennavigation. Er wird auf allen Seiten angezeigt. Daher sollten Sie dort keine Inhalte platzieren, die nur für eine bestimmte Seite gedacht sind.

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

Ganz unten im Footer (Fußzeile) sind üblicherweise das Impressum und die Kontaktdaten verlinkt. Der Footer ist – ebenso wie der Header – auf allen Seiten sichtbar.

4. Layouts

Mit den Elementen, die Sie in der Werkzeugleiste sehen, können Sie den Body nun mit Inhalten befüllen. Die wichtigsten Elemente sind die Layouts. Mit ihnen können Sie andere Elemente wie Textblöcke oder Bilder horizontal und vertikal anordnen.

Fügen Sie ein Layout-Element hinzu und legen Sie darin die Elemente ab, die Sie neben- oder untereinander anordnen möchten.

Es gibt drei verschiedene Layouts: vertikale, horizontale und schwimmende Layouts.

4.1 Vertikale Layouts

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

In diesem Beispiel werden die drei Elemente Überschrift, Text und Button von einem vertikalen Layout umschlossen, sodass sie untereinander angezeigt werden.

Im rechten Seitenmenü 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ßenden Element dargestellt.

4.2 Horizontale Layouts

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

In diesem Beispiel werden drei Bilder nebeneinander angezeigt. Die Bilder befinden sich in einem horizontalen Layout.

4.3 Schwimmende Layouts

Schwimmende Layouts sind für fortgeschrittene User. Sie sind nicht responsiv und können durch absolute Positionierung am Bildschirm fixiert werden.

4.4 Layouts verschachteln

Durch die Kombination verschachtelter Layouts können Sie verschiedene Strukturen erstellen. Der Baukasten bietet einige Vorlagen, mit denen Sie ganz einfach Ihre gewünschte Struktur umsetzen können.

Erstellen wir zum Beispiel diese Konstruktion:

Es handelt sich um drei Karten, die jeweils ein Bild und zwei Text-Elemente darunter enthalten.

Die Karte selbst ist ein vertikales Layout, wodurch alle Elemente untereinander angezeigt werden. Das erste Element in der Karte ist das Bild.

Das vertikale Layout, in dem sich die Elemente befinden, verfügt über einen entsprechenden Innenabstand.

Den Abstand können Sie im rechten Seitenmenü, im Reiter „Abstand“, einstellen. Wenn Sie mehr über Abstände erfahren möchten, können Sie sich unseren Beitrag „Abstände“ ansehen.

Los geht’s

Jetzt verstehen Sie die Seitenstruktur und die Layout-Elemente des Baukastens und können mit dem Erstellen der Webseite beginnen. Weitere Erklärungen rund um den Baukasten finden Sie in unseren anderen Anleitungen.

Mit dem Akkordeon Modul können Sie verschiedene Beiträge in einem Drop-Down-Menü umschalten.

Im rechten Seitenmenü unter dem Reiter „Akkordeon“ können Sie das „Layout“ des Akkordeon Modul zu einer Registerkarte oder zu einem Slider Modul (Schieberegler) umwandeln.

Mit dem Schieberegler Modul können Sie verschiedene Artikel in einer Slideshow umschalten.

Die Farbe der Umschaltpunkte können Sie mit einem Klick auf das Tab Modul im rechten Seitenmenü unter „Accordion“ -> „Hintergrund“ bearbeiten.

Registerkarten können über das Modul „Erweitert“ hinzugefügt werden. Sie ermöglichen das Umschalten von Artikeln in einem übersichtlichen Element.

Unter „Accordion“ -> „Layout“ können Sie das Accordion Modul zu einem Tabs oder Slider Modul umwandeln.

DSGVO-konforme Schriftarten

Schriftarten, die von externen Servern geladen werden, können gegen die DSGVO verstoßen, da die IP-Adresse des Besuchers möglicherweise an einen unsicheren Drittstaat übertragen wird.

Um dies zu vermeiden, klicken Sie auf „Einstellungen“ und dann erneut auf „Einstellungen“. Setzen Sie nun unter „Generelles“ einen Haken bei „Schriftarten lokal einbinden“.

Klicken Sie anschließend auf „Anwenden“, damit die Änderung übernommen wird.

Schriftarten bearbeiten

1. Schritt: Öffnen Sie die Style-Einstellungen

Fahren Sie mit der Maus über „Einstellungen und klicken Sie auf „Style“.

2. Schritt: Schriftart auswählen und bearbeiten

Wählen Sie beispielsweise für Heading 1 usw. die gewünschte Schriftart aus. Sie können die Schriftart anpassen, indem Sie Größe, Buchstabenabstand usw. verändern.

Den Texten auf der Website sind verschiedene Styles mit den von Ihnen ausgewählten Schriftarten zugewiesen. So haben Sie einen guten Überblick über die auf der Seite verwendeten Schriften und können diese für mehrere verschiedene Texte mit nur einer Änderung des jeweiligen Styles anpassen.

3. Schritt: Weitere Schriftarten hinzufügen

Sie können ganz einfach weitere Schriftarten hinzufügen, indem Sie im „Drop-Down-Menu“ bis nach unten scrollen und auf „Schriftarten bearbeiten“ klicken.

Klicken Sie links unten auf „+ Neue Schriftart“ und wählen Sie entweder eine der vorhandenen Schriftarten aus, oder laden Sie eine eigene hoch. Mit Klick auf „Anwenden“ kann die Schriftart dann verwendet werden.

4. Schritt: Schriftart hochladen

Gehen Sie wie im vorherigen Schritt beschrieben vor und wählen Sie „Eigene Schriftart hochladen“.

Unterstütze Formate sind .TTF, .WOFF, .WOFF2, .OTF, .EOT, .SVG

Versuchen Sie möglichst viele Schriftformate hochzuladen, für den optimalen Support in verschiedenen Browsern.

Um so einen Seitenanker zu erstellen brauchen Sie ein Element dem Sie einen Ankernamen geben und einen Link der auf diesen Ankernamen verweist.

Sie können Elementen einen Ankernamen vergeben indem Sie sie auswählen und im rechten Seitenmenü unter „Erweitert“ in dem Feld „Ankername“ einen beliebigen Namen eingeben. Ein Ankername muss pro Seite einzigartig sein.

Nun müssen Sie nur mehr einen Link erstellen, in den „Link Eigenschaften“ wählen sie „Seiten auf Ihrer Website“ und wählen nun Ihren zuvor vergebenen Ankernamen aus.

Einstellungen öffnen

Öffnen Sie die Einstellungen (Zahnradsymbol) und wählen Sie anschließend nochmals Einstellungen.

Erklärungen

• Aufruf der Website mit „https:“ (SSL) erzwingen: Wenn Sie diese Option aktivieren, ist der Aufruf Ihrer Webseite nur mehr SSL verschlüsselt, also mit https statt http, möglich. Damit diese Option verwendet werden kann, muss das jeweilige SSL Zertifikat für Ihre Webseite im Hosting Control Panel aktiviert sein. Hier finden Sie eine Anleitung wie Sie das kostenlose Let’s Encrypt SSL Zertifikat aktivieren.
• Darstellung der URL mit bzw. ohne „www“ erzwingen: Um duplicate Content (doppelten Inhalt) und damit eine mögliche Abstrafung durch Google zu verhindern, sollten Sie diese Option aktivieren. Sie können Ihre Webseite von „nicht www“ auf www, also zum Beispiel von https://ihredomain.tld auf https://www.ihredomain.tld, weiterleiten oder umgekehrt. Welche Variante Sie wählen macht hier keinen Unterschied.
• Anhängen des Schrägstrichs „/“ an jede Seiten-URL erzwingen: Wenn diese Option aktiviert wird, haben die Seiten-URLs am Ende einen nachgestellten Schrägstrich. Beispielsweise wird die URL „ihredomain.tld/about“ auf „ihredomain.tld/about/“ umgestellt.
• Rechten Mausklick deaktivieren: Wenn diese Option aktiviert ist, wird das Kontextmenü nicht angezeigt, wenn Sie mit der rechten Maustaste auf den Site-Bereich klicken.
• Schriftarten lokal einbinden: Diese Einstellung ist für die DSGVO-Konformität erforderlich, sie bewirkt, dass Schriftarten nicht über externe Server geladen werden.
• Lazy Loading aktivieren (empfohlen): Lazy Loading verschiebt das Laden von Bildern, bis diese in die Ansicht gescrollt werden, und beschleunigt so das anfängliche Laden der Seite.
• Website-Breite: Mit diesen Einstellungen können Sie die mindeste und maximale Website-Breite festlegen.

Öffnen Sie die Einstellungen (Zahnradsymbol) und wählen Sie anschließend Einstellungen.

Cookie Hinweis aktivieren

Wählen Sie den fünften Reiter „Cookie Richtlinie„. Um den Cookie Hinweis zu aktivieren, setzen Sie den Haken bei „Cookie Hinweis aktivieren„. Im Feld „Nachricht„, können Sie den Text für den Cookie Hinweis festlegen. Als weitere Optionen können bei Bedarf die Schriftart, Schriftgröße, Beschriftung des „Bestätigen Buttons“, Buttonfarbe und Hintergrundfarbe geändert werden.

Im unteren Abschnitt der Einstellungen können Sie dem Nutzer die Möglichkeit geben, Cookies abzulehnen. Klicken Sie auf Neue hinzufügen und geben Sie den Namen und eine Beschreibung des Cookies an. Websitebesucher haben nun die Möglichkeit über die Schaltfläche „Anpassen“ eine eigene Auswahl zu treffen. Sie können außerdem für Cookies die für die Funktion der Webseite erforderlich sind die Schaltfläche „Erforderlicher funktionaler Cookie“ anhaken.

Hinweis: Seit Einführung der DSGVO ist ein Cookie Hinweis Pflicht. Zusätzlich muss ein Hinweis auf die Speicherung von Cookies bei Ihrer Datenschutzerklärung vorhanden sein.

Wenn Sie eine neue Seite erstellen wollen wählen Sie „Seite“, dadurch wird eine neue Seite erstellt und ins Menü übernommen.

Wenn Sie eine bestehende Seite ins Menü übernehmen wollen wählen Sie „Verknüpfung“. Eine bestehende Seite können Sie nun unter „Zu einer internen Seite“ auswählen und somit ins Menü übernehmen.