Mit dem Smart-Editor können Sie Ihre Webseite jederzeit um neue Inhaltsbereiche erweitern. Dazu fügen Sie sogenannte Blöcke hinzu.

Ein Block kann beispielsweise eine Überschrift, einen Beschreibungstext, ein Bild oder eine vollständige Leistungsübersicht enthalten.

Sie können entweder einen leeren Block selbst gestalten oder eine der zahlreichen vorgefertigten Blockvorlagen verwenden.

In dieser Anleitung erfahren Sie, wie Sie neue Blöcke hinzufügen, passende Vorlagen auswählen und die eingefügten Inhaltsbereiche an Ihre eigenen Anforderungen anpassen.

1. Was bedeutet „Block hinzufügen“?

Eine Webseite besteht im Smart-Editor normalerweise aus mehreren Inhaltsblöcken, die untereinander angeordnet sind.

Jeder Block stellt einen eigenen Bereich der Webseite dar.

Wenn Sie einen neuen Block hinzufügen, erweitern Sie Ihre Seite um einen zusätzlichen Inhaltsbereich.

Beispielsweise können Sie:

• eine neue Unternehmensleistung vorstellen,
• einen zusätzlichen Beschreibungstext einfügen,
• eine Bildergalerie ergänzen,
• eine Liste mit besonderen Vorteilen erstellen,
• einen Kontaktbereich hinzufügen,
• eine neue Veranstaltungsankündigung einbauen.

Sie können mehrere Blöcke hintereinander verwenden und dadurch auch umfangreichere Webseiten übersichtlich gestalten.

Tipp: Verwenden Sie möglichst für jeden größeren Themenbereich einen eigenen Block. Das erleichtert die spätere Bearbeitung und sorgt für eine nachvollziehbare Seitenstruktur.

2. Einen neuen Block einfügen

Neue Blöcke können Sie direkt im grafischen Bearbeitungsbereich des Smart-Editors hinzufügen.

1. Öffnen Sie die gewünschte Seite im Smart-Editor.
2. Bewegen Sie den Mauszeiger an die Stelle, an der Sie einen neuen Inhaltsbereich einfügen möchten.
3. Verwenden Sie die angezeigte Funktion zum Hinzufügen eines Blocks oder öffnen Sie die entsprechende Blockauswahl.
4. Wählen Sie einen leeren Block oder eine passende Blockvorlage aus.
5. Der neue Block wird in die Seite eingefügt.
6. Beginnen Sie anschließend mit der Bearbeitung.

Je nach ausgewähltem Block erscheinen bereits vorgefertigte Inhalte oder ein zunächst leerer Gestaltungsbereich.

Hinweis: Die genaue Position der Schaltfläche zum Hinzufügen kann sich je nach Smart-Editor-Version und ausgewähltem Inhaltsbereich unterscheiden.

3. Einen leeren Block hinzufügen

Wenn Sie einen Inhaltsbereich vollständig selbst gestalten möchten, können Sie mit einem leeren Block beginnen.

Dieser enthält zunächst keine umfangreiche vorgefertigte Gestaltung.

Sie entscheiden selbst, welche Elemente eingefügt werden und wie diese angeordnet sein sollen.

Einen leeren Block erstellen

1. Öffnen Sie die Funktion zum Hinzufügen eines Blocks.
2. Wählen Sie die Möglichkeit, einen leeren Block einzufügen.
3. Der Smart-Editor ergänzt einen neuen Inhaltsbereich.
4. Wählen Sie den neuen Block aus.
5. Fügen Sie die gewünschten Gestaltungselemente hinzu.

Wann ist ein leerer Block sinnvoll?

Leere Blöcke eignen sich besonders für individuelle Gestaltungen, beispielsweise:

• einen kurzen Hinweistext,
• eine besondere Überschrift,
• eine individuell gestaltete Infobox,
• eine Kombination aus Text und Bild,
• einen zusätzlichen Kontaktbereich.

Tipp: Für einfache Inhalte ist ein leerer Block häufig die übersichtlichste Lösung. Bei komplexeren Gestaltungen kann eine vorgefertigte Blockvorlage dagegen viel Zeit sparen.

4. Eine vorgefertigte Blockvorlage auswählen

Der Smart-Editor bietet zahlreiche bereits gestaltete Inhaltsblöcke.

Diese Vorlagen enthalten beispielsweise Überschriften, Bilder, Schaltflächen und mehrspaltige Layouts.

Sie können dadurch einen aufwendigeren Inhaltsbereich einfügen, ohne alle enthaltenen Elemente einzeln anlegen zu müssen.

Die Blockauswahl öffnen

1. Öffnen Sie die Funktion zum Hinzufügen eines neuen Blocks.
2. Wechseln Sie zur Auswahl der vorgefertigten Blockdesigns.
3. Durchsuchen Sie die angebotenen Vorlagen.
4. Wählen Sie eine geeignete Gestaltung aus.
5. Fügen Sie den ausgewählten Block in Ihre Webseite ein.

Anschließend können Sie sämtliche enthaltenen Beispielinhalte anpassen.

Welche Blockvorlagen gibt es?

Je nach Version und verfügbarer Vorlagensammlung finden Sie beispielsweise Gestaltungen für:

• Überschriften und Einleitungen,
• Unternehmensvorstellungen,
• Dienstleistungen und Produkte,
• Bildergalerien,
• besondere Vorteile und Eigenschaften,
• Kundenbewertungen,
• Kontaktinformationen,
• Handlungsaufforderungen mit Schaltflächen.

Tipp: Wählen Sie einen Block vor allem nach seiner Struktur aus. Die Beispieltexte, Bilder und Farben lassen sich später verändern.

5. Einen Block an der richtigen Position einfügen

Die Reihenfolge der Inhaltsblöcke bestimmt, in welcher Abfolge Besucher die Informationen Ihrer Webseite sehen.

Überlegen Sie deshalb, an welcher Stelle der neue Block eingefügt werden soll.

Ein neuer Inhaltsbereich kann beispielsweise zwischen zwei vorhandenen Blöcken oder am Ende der Seite ergänzt werden.

Zwischen vorhandenen Blöcken einfügen

Wenn Sie einen bestimmten Themenbereich erweitern möchten, ist es häufig sinnvoll, den neuen Block direkt neben den dazugehörigen Inhalten einzufügen.

Dadurch bleiben zusammengehörige Informationen beieinander.

Am Ende der Seite einfügen

Zusätzliche Informationen, Kontaktmöglichkeiten oder weiterführende Hinweise werden häufig am Ende einer Seite ergänzt.

Hinweis: Wenn ein neuer Block zunächst nicht an der gewünschten Position erscheint, können Sie ihn anschließend innerhalb der Seite verschieben.

6. Einen neuen Block über den Seiten-Navigator verwalten

Bei längeren Webseiten ist es manchmal schwierig, den Überblick über alle Inhaltsbereiche zu behalten.

Der Seiten-Navigator zeigt die vorhandenen Blöcke in ihrer Reihenfolge an.

Sie können damit gezielt einen Block auswählen und seine Position innerhalb der Seite kontrollieren.

Den neuen Block im Navigator finden

1. Öffnen Sie den Seiten-Navigator.
2. Suchen Sie den neu eingefügten Block anhand seiner Vorschau.
3. Klicken Sie auf den entsprechenden Eintrag.
4. Der Block wird im Bearbeitungsbereich ausgewählt.

Bei umfangreicheren Seiten ist der Navigator häufig die einfachste Möglichkeit, bestimmte Inhaltsbereiche wiederzufinden.

Die Reihenfolge kontrollieren

Überprüfen Sie, ob der neue Block an der gewünschten Stelle angeordnet ist.

Bei Bedarf können Sie die Reihenfolge der Blöcke mithilfe der vorgesehenen Verschiebefunktionen verändern.

Tipp: Nutzen Sie den Seiten-Navigator besonders bei längeren Webseiten. Er ist häufig übersichtlicher als das manuelle Scrollen durch sämtliche Inhaltsbereiche.

7. Beispieltexte und Bilder ersetzen

Wenn Sie eine vorgefertigte Blockvorlage eingefügt haben, enthält diese möglicherweise bereits Beispieltexte und Bilder.

Diese dienen lediglich zur Veranschaulichung des Designs.

Sie sollten die Inhalte deshalb durch Ihre eigenen Informationen ersetzen.

Beispieltexte ändern

1. Klicken Sie auf das gewünschte Textelement.
2. Aktivieren Sie die Textbearbeitung.
3. Ersetzen Sie den vorhandenen Text.
4. Kontrollieren Sie die Darstellung und die Abstände.

Beispielbilder austauschen

1. Wählen Sie das betreffende Bild aus.
2. Öffnen Sie die Funktion zum Ändern des Bildes.
3. Wählen Sie eine vorhandene Datei oder laden Sie ein eigenes Bild hoch.
4. Übernehmen Sie die Auswahl.
5. Kontrollieren Sie den Bildausschnitt.

Wichtig: Längere Texte und Bilder mit anderen Seitenverhältnissen können die Gestaltung eines Blocks verändern. Kontrollieren Sie deshalb nach dem Austausch der Inhalte auch die verschiedenen Bildschirmansichten.

8. Zusätzliche Elemente in einen Block einfügen

Sie müssen einen eingefügten Block nicht auf seine ursprünglichen Elemente beschränken.

Sie können weitere Inhalte ergänzen und dadurch die Gestaltung erweitern.

Dazu gehören beispielsweise:

• zusätzliche Überschriften,
• Beschreibungstexte,
• Bilder,
• Schaltflächen,
• Symbole,
• Container und Raster,
• Trennlinien oder Formen.

Ein neues Element hinzufügen

1. Wählen Sie den gewünschten Block aus.
2. Öffnen Sie die Funktion zum Hinzufügen eines Elements.
3. Wählen Sie die gewünschte Elementart.
4. Fügen Sie das Element in den Block ein.
5. Positionieren und gestalten Sie das Element nach Ihren Wünschen.

Tipp: Wenn mehrere Elemente zusammengehören, kann es sinnvoll sein, diese innerhalb eines Containers oder Rasters anzuordnen. Dadurch lassen sich ihre Positionen und Abstände häufig leichter verwalten.

9. Den Hintergrund eines neuen Blocks gestalten

Nachdem Sie einen Block eingefügt haben, können Sie dessen Hintergrund an das Erscheinungsbild Ihrer Webseite anpassen.

Je nach Gestaltung können Sie beispielsweise eine Hintergrundfarbe oder ein Hintergrundbild verwenden.

Eine Hintergrundfarbe festlegen

1. Wählen Sie den gesamten Block aus.
2. Öffnen Sie die Hintergrund- beziehungsweise Farbeinstellungen.
3. Wählen Sie die gewünschte Farbe.
4. Kontrollieren Sie die Lesbarkeit der enthaltenen Texte.

Ein Hintergrundbild verwenden

Alternativ können Sie ein Bild als Hintergrund einsetzen.

Dies eignet sich insbesondere für großflächige Einleitungen oder hervorgehobene Inhaltsbereiche.

Achten Sie darauf, dass die Texte vor dem Bild gut erkennbar bleiben.

Tipp: Wenn Sie Text vor einem Hintergrundbild verwenden, kann eine halbtransparente Farbüberlagerung helfen, einen ausreichenden Kontrast herzustellen.

10. Die Größe eines neuen Blocks anpassen

Ein Block benötigt ausreichend Platz, um die enthaltenen Elemente vollständig darzustellen.

Je nach Gestaltung können Sie seine Höhe sowie verschiedene Abstände anpassen.

Die Blockhöhe

Ein kurzer Informationsblock benötigt normalerweise weniger Platz als ein umfangreicher Bereich mit mehreren Texten und Bildern.

Verwenden Sie möglichst Größen, die zur Menge Ihrer Inhalte passen.

Innenabstände

Mit Innenabständen bestimmen Sie, wie viel Platz zwischen den Inhalten und den Grenzen eines Blocks vorhanden ist.

Großzügige Innenabstände können einen Bereich übersichtlicher wirken lassen.

Außenabstände einzelner Elemente

Außenabstände beeinflussen den Platz zwischen einzelnen Elementen.

Sie können beispielsweise den Abstand zwischen einer Überschrift und einem Beschreibungstext vergrößern.

Wichtig: Wenn ein Block ungewöhnlich groß erscheint oder Inhalte zu weit auseinanderliegen, überprüfen Sie nicht nur die Blockhöhe, sondern auch die Abstände der enthaltenen Container und Elemente.

11. Neue Blöcke auf Smartphones kontrollieren

Nach dem Einfügen eines neuen Blocks sollten Sie die Darstellung auf unterschiedlichen Bildschirmgrößen überprüfen.

Das ist besonders wichtig, wenn Sie eigene Texte eingefügt oder Elemente innerhalb des Blocks verschoben haben.

Die verschiedenen Ansichten durchgehen

1. Wechseln Sie im Smart-Editor zur Tablet-Ansicht.
2. Kontrollieren Sie die Anordnung der Inhalte.
3. Wechseln Sie anschließend zu den Smartphone-Ansichten.
4. Prüfen Sie, ob Texte und Bilder vollständig sichtbar sind.
5. Achten Sie auf ungewöhnliche Abstände und überlagerte Elemente.
6. Nehmen Sie bei Bedarf Anpassungen vor.

Besonderheit vorgefertigter Blöcke

Vorgefertigte Blockdesigns besitzen bereits eine responsive Grundgestaltung.

Diese wurde jedoch für die ursprünglichen Beispielinhalte angelegt.

Wenn Sie beispielsweise einen sehr kurzen Text durch mehrere längere Absätze ersetzen, kann zusätzlicher Platz erforderlich sein.

Wichtig: Verlassen Sie sich deshalb nicht ausschließlich auf die ursprüngliche Darstellung der Blockvorlage. Kontrollieren Sie nach Ihren Änderungen die tatsächliche Gestaltung auf den verschiedenen Bildschirmgrößen.

12. Einen eingefügten Block duplizieren

Wenn Sie mehrere ähnlich gestaltete Inhaltsbereiche benötigen, können Sie einen bereits vorhandenen Block duplizieren.

Das ist beispielsweise sinnvoll, wenn Sie verschiedene Dienstleistungen mit demselben Aufbau vorstellen möchten.

Einen Block kopieren

1. Wählen Sie den gewünschten Block aus.
2. Öffnen Sie die Blockoptionen.
3. Wählen Sie die Funktion zum Duplizieren.
4. Der Smart-Editor erstellt eine Kopie des Blocks.
5. Ersetzen Sie die enthaltenen Texte und Bilder durch die neuen Informationen.

Auf diese Weise lassen sich mehrere einheitliche Abschnitte erstellen, ohne jedes Mal eine neue Blockvorlage auswählen zu müssen.

Tipp: Gestalten Sie zunächst einen Block vollständig und duplizieren Sie ihn erst danach. So können Sie wiederkehrende Inhalte besonders effizient erstellen.

13. Einen versehentlich eingefügten Block entfernen

Wenn Sie einen Block nicht mehr benötigen, können Sie ihn wieder aus der Seite entfernen.

1. Wählen Sie den betreffenden Block aus.
2. Kontrollieren Sie, ob der richtige Inhaltsbereich markiert ist.
3. Öffnen Sie die Blockoptionen.
4. Verwenden Sie die Funktion zum Löschen beziehungsweise Entfernen.

Der Block wird daraufhin aus der Gestaltung entfernt.

Wichtig: Beim Entfernen eines vollständigen Blocks werden auch die darin enthaltenen Elemente entfernt.

Wenn Sie lediglich ein Bild oder einen Text löschen möchten, wählen Sie deshalb nur das entsprechende Element aus.

14. Häufige Fehler beim Hinzufügen von Blöcken

Mit einigen einfachen Vorgehensweisen lassen sich viele typische Probleme vermeiden.

• Passende Blockvorlagen auswählen: Achten Sie vor allem auf die Struktur und nicht nur auf das Aussehen der Beispielbilder.
• Blöcke sinnvoll anordnen: Zusammengehörige Inhalte sollten möglichst direkt aufeinanderfolgen.
• Beispieltexte ersetzen: Kontrollieren Sie nach dem Einfügen alle vorhandenen Platzhalter.
• Verlinkungen prüfen: Vorgefertigte Schaltflächen können Beispieladressen enthalten.
• Container und Raster verwenden: Strukturierte Layouts sind häufig leichter an verschiedene Bildschirmgrößen anzupassen.
• Unnötige feste Größen vermeiden: Inhaltsbereiche sollten ausreichend Platz für ihre Texte und Bilder besitzen.
• Abstände kontrollieren: Zu große Leerflächen können durch Block-, Container- oder Element-Einstellungen entstehen.
• Responsive Ansichten überprüfen: Testen Sie die Darstellung nach größeren Änderungen auch auf Smartphones.
• Regelmäßig speichern: Sichern Sie Ihre Arbeit nach abgeschlossenen Bearbeitungsschritten.

15. Wie geht es weiter?

Sie wissen jetzt, wie Sie neue Blöcke im Smart-Editor hinzufügen, vorgefertigte Blockdesigns auswählen und die enthaltenen Elemente an Ihre Anforderungen anpassen.

Außerdem haben Sie gelernt, worauf Sie bei der Platzierung, Gestaltung und responsiven Darstellung neuer Inhaltsbereiche achten sollten.

In den nächsten Anleitungen beschäftigen wir uns ausführlicher mit dem Bearbeiten, Verschieben und Duplizieren vorhandener Blöcke.

Als Nächstes empfehlen wir Ihnen die Anleitung „Blöcke verschieben und anordnen“. Dort erfahren Sie, wie Sie die Reihenfolge Ihrer Inhaltsbereiche verändern und Ihre Webseite neu strukturieren können.