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.

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.

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.

Wählen Sie zuerst ein Widget aus und dann alle Sprachen aus, die Ihre Website unterstützen soll. Die erste Sprache, die Sie hinzufügen ist standardmäßig die Hauptsprache. Eine Änderung der Hauptsprache ist durch klicken auf den Stern neben der Sprache möglich.

Inhalte übersetzen

Über den Sprach-Selektor können Sie die Sprache der Website ändern, sowie Übersetzungen einpflegen und ändern.

Bei allen Eingabefeldern finden Sie zusätzlich das Sprachkürzel der aktiven Sprache. Dieses Kürzel können Sie bei dem jeweiligen Feld eigens ändern.

Sichtbarkeit von Inhalten für bestimmte Sprachen

Wenn Sie Elemente nur in einer Sprache benötigen, können Sie diese für verschiedene Sprachversionen ausblenden. Beispielsweise soll eine Grafik mit Text nur in einer Sprache angezeigt werden.

Ziehen Sie mit der Maus das Modul auf die gewünschte Position der Webseite und wählen Sie dann die gewünschte Karte.

2. Google Maps einrichten

Tipp:
Wenn Sie keinen Google API-Schlüssel verwenden möchten, können Sie stattdessen einfach einen Link zu Google Maps einfügen. So lässt sich beispielsweise über einen Button oder Textlink wie „Route berechnen“ der gewünschte Standort direkt in Google Maps öffnen – ganz ohne Einbindung der Google Maps API.

Damit Google^® Maps funktioniert, benötigen Sie einen sogenannten API Schlüssel. Diesen Schlüssel tragen Sie im rechten Seitenmenü im gleichnamigen Feld „API Schlüssel“ ein.
Wie Sie einen API Schlüssel erstellen können erfahren Sie im nächsten Schritt: „3. API Schlüssel erstellen„

Bei „Adresse“ tragen Sie die Adresse des Standorts der angezeigt werden soll, ein. Bei „Zoom Level“ können Sie noch die Ansicht der Karte ändern.

3. API Schlüssel erstellen

3.1 API aktivieren

Für die Nutzung von Google^® Maps und die Erstellung eines API Schlüssels, wird in erster Linie ein Google^® Konto benötigt. Sollten Sie noch kein Google^® Konto besitzen, können Sie über den folgenden Link ein neues Konto erstellen.

Rufen Sie die Seite https://console.developers.google.com/?hl=de auf, damit Sie sich in die Google^® Entwickler Konsole mit Ihrem Google Konto einloggen können.

Wählen Sie dann den Punkt „+APIs und Dienste aktivieren„.

Tippen Sie im Suchfeld das Wort „Maps“ ein, damit nur die relevanten APIs angezeigt werden.
Wählen Sie die gewünschte API Anwendung aus welche Sie aktivieren möchten (z.B.: Maps Embed API).

3.2 Schlüssel erstellen

Die API wurde nun erfolgreich aktiviert und Sie können nun über den Reiter „Anmeldedaten“ den benötigten API Schlüssel generieren lassen.

Rufen Sie für die Erstellung des Schlüssels den Link „‚Zugangsdaten‘ unter ‚APIs und Dienste‘“ auf.

Als nächstes wählen Sie im Reiter „Anmeldedaten“ die Schaltfläche „Anmeldedaten erstellen“ und wählen dann den Punkt „API-Schlüssel„.

Sie können den Zugriff auf den Schlüssel mit der gleichnamigen Schaltfläche einschränken.
Kopieren Sie nun den erstellten API-Schlüssel und fügen Sie diesen im entsprechenden Feld im Homepage Baukasten ein (siehe Schritt 3 dieser Anleitung).

Dazu gehen Sie wie folgt vor:

Erstellen Sie ein neues Menü-Element

Klicken Sie auf Ihr Menü und anschließend auf „+ Neues Menü-Element“.

Geben Sie der neuen Unterseite den Namen „Blog“ und setzen Sie einen Haken bei „Inhalt der Seite löschen“.

Blog-Element einfügen

Um zu Ihrer neu erstellten Unterseite zu gelangen, klicken Sie in der Seitennavigation (Kopfzeile) auf „Blog“.

Wählen Sie nun Ihr gewünschtes Blog-Layout. Das Layout können Sie im Nachhinein noch verändern.

Blog bearbeiten

Blogposts

Mit einem Doppelklick auf den gewünschten Blogpost gelangt man in das Menü „Beitrag bearbeiten“. Alternativ kann man auf „Beiträge bearbeiten“ klicken und dort den gewünschten Blogpost auswählen.

Bearbeiten oder löschen Sie bestehende Blogposts und fügen Sie neue Posts hinzu.

Sie können die Blogposts einer beliebigen Kategorie zuordnen, ein Titelbild wählen usw. Fügen Sie Überschriften (H1, H2, H3 …), Bilder oder Links ein.

Bei jedem Blogpost lassen sich individuelle SEO-Einstellungen vornehmen.

Layout

Das Layout des Blogs können Sie jederzeit anpassen, indem Sie auf das Blogmodul klicken im rechten Reiter können Sie nun verschiedene Layouts wählen.

Es stehen Ihnen viele weitere Einstellungen zur Verfügung. Sie können festlegen, wie viele Blogposts auf der ersten Seite angezeigt werden, die Blogpost-Beschreibungen anpassen (Größe, Hintergrundfarbe, Schriftart, Ausrichtung …) und vieles mehr.