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.

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.

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.

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.

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

Skripte einbinden

Wählen Sie die gewünschte Seite auf der Sie das Skript einbinden wollen oder „Standard“ (für alle Seiten) und anschließend den Reiter „Skripte„. Hier lassen sich nun zusätzliche, externe Skripte, einbinden. Diese können entweder vor dem </head> Bereich, vor dem </body> Bereich oder nach dem <body> Bereich Ihrer Webseite eingebunden werden.

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

robots.txt aktivieren und Werte festlegen

Wählen Sie den Reiter „Dateien„. Wenn Sie den Haken bei „Aktivieren .robots.txt“ setzen, können Sie im Feld darunter diverse Einträge machen.

Mit der robots.txt Datei kann zum Beispiel festlegt werden, welche Seiten und Verzeichnisse von Google^® und anderen Suchmaschinen indexiert werden dürfen und welche nicht.

Beispiele für Werte der robots.txt finden Sie auf Wikipedia.

Klicken Sie auf Menü und klicken Sie anschließend auf ein Menüelement.

Anschließend wählen Sie rechts unten „+ Neues Menü-Element“.

Geben Sie Ihrem neuen Pop-Up einen Namen und wählen Sie den Menü-Typ „Als Pop-Up-Fenster“.
Legen Sie die Größe Ihres Pop-Ups fest und klicken Sie auf übernehmen.

Pop-Up aus dem Menü entfernen

Ihr Pop-Up wird automatisch ins Menü übernommen, sollten Sie das Pop-Up aber nicht als „Link“ im Menü haben wollen, so müssen Sie diesen Link entfernen:

Klicken Sie wieder auf Ihr Menüelement und anschließend im rechten Seitenmenü auf „Menü bearbeiten“.

Klicken Sie bei dem soeben erstellten Pop-Up auf das X um dieses zu löschen.

Beim Bestätigen dürfen Sie NICHT die Option „Entfernen Sie auch „Pop-Up“ verknüpfte Seite“ wählen. Diese Option würde nicht nur die Verlinkung im Menü löschen sondern auch das Popup an sich. Anschließend klicken Sie auf auf „anwenden“.

Binden Sie Ihr Pop-up in eine Seite ein

Öffnen Sie die Einstellungen und klicken Sie anschließend auf „Seiten“.

Wählen Sie nun die Seite bei der das Pop-up erscheinen soll an und setzen Sie einen Haken bei „Pop-up anzeigen, wenn die Seite geöffnet wird“. Nun wählen Sie noch Ihr soeben erstelltes Pop-up an.

Gestalten Sie Ihr Pop-up

Wählen Sie im Drop-Down-Menü links oben Ihr soeben erstelltes Popup, und schon können Sie mit dem Gestalten Ihres Pop-ups anfangen.

Über die Designvorlage:

Wenn Sie ein neues Webseitenprojekt über den Baukasten erstellen, können Sie zu Beginn eine Designvorlage für die verschiedensten Branchen auswählen. Wenn Sie auf der linken Seite eine Vorlage aus dem Bereich „Elektronischer Handel“ wählen, sind der Warenkorb und die Artikelübersicht bereits enthalten.

Auf bestehende Webseite einfügen

Wenn Sie für ein bestehendes Projekt den Warenkorb und die Artikelübersicht für Ihren Onlineshop einfügen möchten, ist dies über die Tool-Bar mit dem Schaltfläche „E-Commerce“ möglich.

Klicken Sie auf die Schaltfläche und ziehen Sie die jeweiligen Module per Drag&Drop (ziehen und fallen lassen) auf die gewünschte Position auf Ihrer Webseite.

Onlineshop Artikel anlegen und verwalten

Klicken Sie einmal auf das „Shopmodul“ und anschließend auf „Artikel bearbeiten„.

Im linken Bereich sehen Sie die Übersicht aller angelegten Artikel. Neue Artikel können mit „+ Objekt hinzufügen“ angelegt werden. Durch einen Klick auf das „x“ neben dem Artikel, kann das Produkt gelöscht werden. Die Anordnung der einzelnen Artikel können Sie per Drag & Drop ändern, ziehen Sie den Artikel einfach auf die gewünschte Position.

Im rechten Bereich sehen Sie die Artikeldetails.

Erklärung der einzelnen Felder

Einstellungen für Währung, Artikelbilder, E-Mail Versand (Bestellbestätigung) und Kontaktformular

Währung festlegen

Klicken Sie links auf das „Shopmodul“ und im Rechten Reiter anschließend auf „Einstellungen„.
Hier können Sie alle nötigen Anpassungen zur Preisdarstellung vornehmen.

Erklärung der einzelnen Felder

Einstellungen für Artikelbilder

Im Reiter „Bilder“ legen Sie die Größe und Erscheinung der Artikelbilder und Vorschaubilder fest.

Einstellungen für E-Mail Versand und Kontaktformular

Damit Sie bei einer neuen Bestellung eine E-Mail Benachrichtigung erhalten und die Bestellbestätigung sowie eine Rechnung an den Kunden per E-Mail gesendet werden können, müssen die E-Mail Einstellungen konfiguriert werden. Diese finden Sie rechts unter dem Reiter „Speichern“.

Felder für das Kontaktformular festlegen

Im Reiter „Felder“ legen Sie die angezeigten Formularfelder für das Kontaktformular fest.

E-Mail Einstellungen

Im Reiter „E-Mail“ legen Sie die grundlegenden E-Mail Einstellungen fest:

• Formular wird an diese E-Mail Adresse gesendet: Hier tragen Sie die gewünschte Empfängeradresse ein. Sie können auch mehrere E-Mail Empfänger festlegen. Wenn Sie mehrere Empfänger festlegen, müssen die einzelnen E-Mail Adressen durch einen Strichpunkt getrennt werden.
• Formular wird von dieser E-Mail-Adresse verwendet: Von dieser Adresse aus wird das Formular an die Empfängeradresse gesendet. Diese E-Mail Adresse erscheint auch als Absender wenn der Kunde die Bestellbestätigung, weitere Informationen oder die Rechnung erhält.
• Mit Betreff: E-Mail Betreff festlegen
• Nachricht gesendet: Hier legen Sie den Bestätigungstext fest der erscheint wenn das Formular abgesendet wird.

Zahlungsarten & Rechnung

Klicken Sie auf den „Warenkorb“ und wählen Sie anschließend im rechten Seitenmenü „Speichern“.

Zahlungsarten festlegen

Unter Zahlungsgateways können Sie die Zahlungsanbieter aktivieren/deaktivieren. Bei manchen Anbietern ist ein Testmodus verfügbar. Das heißt Sie können den gesamten Bestellvorgang inklusive Zahlung testen ohne das eine echte Zahlung durchgeführt wird.

Folgende Zahlungsarten sind möglich:

Rechnung

Versandländer und Versandkosten

Versandländer

Klicken Sie auf den „Warenkorb“ und im rechten Seitenmenü anschließend auf „Versandländer„.

Neues Objekt erstellen

Erstellen Sie ein neues Versandland in dem Sie anschließend „+ Objekt hinzufügen“ wählen.

Neues Element

Vergeben Sie einen eindeutigen Namen unter „Benennung“ für das Versandland und wählen Sie anschließend das gewünschte Land aus dem Drop down Menü „Länder“. Jetzt können Sie entweder mit „Objekt hinzufügen“ ein neues Versandland anlegen oder Sie bestätigen die Eingaben mit „Anwenden„.

Versandkosten und Versandarten festlegen

Wählen Sie bei den Eigenschaften des Warenkorbs den Button „Versandarten„.

Versandarten Objekt hinzufügen

Füllen Sie rechts das Formular aus und drücken Sie anschließend auf „Objekt hinzufügen„.

Versandart anlegen

• Vergeben Sie unter „Benennung“ einen eindeutigen Namen für die Versandart.
• Wählen Sie die Zielzone (Versandland) für die Versandart. Dieses Feld bezieht sich auf die Versandländer. Wenn Sie noch keine Versandländer angelegt haben, klicken Sie beim Drop-Down Feld einfach auf das Stift Symbol und legen Sie die gewünschten Versandländer an.
• Beim Drop-Down Feld „Typ“ wählen Sie nun nach welchem Kriterium sich die Versandkosten richten. Es stehen die Werte kostenlos, Pauschale, nach Gewicht und nach Zwischensumme zur Auswahl. Je nach gewähltem Wert können Sie nun unterschiedliche Versandkosten festlegen.
• Sie können bei diesem Feld noch die voraussichtliche Lieferzeit für die erstellte Versandart bzw. das Versandland angeben.

Bestellübersicht ansehen

Um alle Bestellungen anzusehen, klicken Sie auf den „Warenkorb“ im rechten Seitenmenü nun anschließend auf „Bestellungen prüfen„.

Bestellprotokoll

Beim Bestellprotokoll sehen Sie eine detaillierte Übersicht aller Bestellungen mit Bestellnummer, Rechnungsnummer, Datum/Zeit, Namen des Käufers, E-Mail Adresse des Käufers, Summe und dem Status. Mit Hilfe des Filters können Sie die Bestellungen sortieren.

Steuerregeln festlegen

Klicken auf den „Warenkorb“ und anschließend im rechten Seitenmenü auf „Steuerregeln.

Neues Element erstellen

• Vergeben Sie beim Feld „Benennung“ einen eindeutigen Namen für die Steuerregel und wählen Sie anschließend „Steuersatz hinzufügen„.
• Im Drop-Down Feld wählen Sie das gewünschte Versandland aus, für das der Steuersatz gelten soll. Dieses Feld bezieht sich auf die Versandländer. Wenn Sie noch keine Versandländer angelegt haben, wählen Sie beim Drop-Down Feld einfach „den Stift“ und legen Sie die gewünschten Versandländer an.
• Im Feld Steuersatz legen Sie den Prozentsatz für die Steuerregel fest.
• Mit „Objekt hinzufügen“ können Sie eine weitere Steuerregel erstellen oder Sie speichern die Änderungen einfach mit „Anwenden„.

Schriftarten und Schrift Stil für die Artikelansicht

Im rechten Seitenmenü beim Reiter „Stil“ können Sie für das Artikel Modul Schriftart, Schriftgröße, Ausrichtung und vieles mehr festlegen.

Textsuchfilter und Preisfilter

Klicken Sie links auf das „Shopmodul“ und im Rechten Reiter anschließend auf „Filter„. Dort können Sie den Textsuchfilter und/oder Preisfilter aktivieren/deaktivieren. Hier kann auch die Position, an der diese Filter angezeigt werden sollen, bestimmt werden. Der Textsuchfilter erlaubt eine Textsuche nach Artikelname, Kategorie oder Produktvariante. Mit dem Preisfilter können Sie die Artikel nach Preis sortieren lassen.

Größe und Position der Artikel Übersicht

Im rechten Seitenmenü beim Reiter „Größe“ kann die Position und Größe der Artikelübersicht auf Belieben angepasst werden.