Container und Gruppen verwenden

Wenn Sie mehrere Texte, Bilder oder Schaltflächen gemeinsam gestalten möchten, müssen Sie diese im Smart-Editor nicht immer einzeln bearbeiten.

Mit Containern und Gruppen können Sie zusammengehörige Elemente organisieren, gemeinsam verschieben und übersichtliche Layouts erstellen.

Besonders bei umfangreicheren Webseiten erleichtern diese Funktionen die Gestaltung und spätere Pflege Ihrer Inhalte.

In dieser Anleitung erfahren Sie, worin sich Container und Gruppen unterscheiden, wie Sie diese verwenden und worauf Sie bei der responsiven Darstellung achten sollten.

1. Was sind Container und Gruppen?

Container und Gruppen dienen dazu, mehrere Elemente zu einer gemeinsamen Einheit zusammenzufassen.

Ein solcher Bereich kann beispielsweise folgende Inhalte enthalten:

eine Überschrift,
einen Beschreibungstext,
ein Bild,
eine Schaltfläche,
ein Symbol oder eine dekorative Form.

Sie können diese Inhalte anschließend gemeinsam auswählen und bearbeiten.

Allerdings gibt es einen wichtigen Unterschied zwischen einem Container und einer Gruppe.

Container beziehungsweise Box

Eine Box ist ein eigenes Gestaltungselement, das andere Elemente enthalten kann.

Sie besitzt eigene Eigenschaften wie Hintergrundfarbe, Rahmen, Größe und Innenabstände.

Damit eignet sie sich besonders für zusammengehörige Inhaltsbereiche mit einer gemeinsamen Gestaltung.

Gruppe

Eine Gruppe fasst mehrere ausgewählte Elemente zusammen, damit diese gemeinsam bewegt, skaliert oder dupliziert werden können.

Im Unterschied zur Box besitzt eine Gruppe nicht dieselben Möglichkeiten zur Gestaltung eines eigenen Hintergrunds, Rahmens oder Innenabstands.

Wichtig: Im Smart-Editor wird die Box häufig als Container verwendet. Eine Gruppe ist dagegen in erster Linie eine organisatorische Zusammenfassung mehrerer Elemente.

2. Wann sollte ein Container verwendet werden?

Container sind besonders hilfreich, wenn mehrere Inhalte einen gemeinsamen Bereich bilden sollen.

Ein typisches Beispiel ist eine Informationskarte mit Hintergrundfarbe, Überschrift, Beschreibung und Schaltfläche.

Statt jedes Element unabhängig voneinander anzuordnen, können Sie die Inhalte innerhalb einer gemeinsamen Box platzieren.

Geeignete Anwendungen sind beispielsweise:

Informationskästen,
Leistungsbeschreibungen,
Kontaktbereiche,
Produktvorstellungen,
Hinweise mit farbigem Hintergrund,
Text-Bild-Kombinationen.

Tipp: Wenn mehrere Elemente gemeinsam einen Hintergrund oder einen Rahmen erhalten sollen, ist eine Box normalerweise die bessere Wahl als eine einfache Gruppe.

3. Einen Container hinzufügen

Sie können eine neue Box über die Elementauswahl des Smart-Editors einfügen.

Eine Box erstellen

Öffnen Sie die gewünschte Seite im Smart-Editor.
Wählen Sie den Inhaltsblock aus, in dem der Container eingefügt werden soll.
Öffnen Sie die Funktion zum Hinzufügen eines Elements.
Wählen Sie das Element Box beziehungsweise Container.
Positionieren Sie die neue Box an der gewünschten Stelle.
Passen Sie bei Bedarf Größe und Gestaltung an.

Anschließend können Sie weitere Elemente in die Box einfügen.

Die Größe verändern

Wählen Sie die Box aus und verwenden Sie die angebotenen Größenmarkierungen oder Einstellungen im Eigenschaftenfenster.

Sie können damit unter anderem die Breite und Höhe des Containers beeinflussen.

Hinweis: Eine Box kann sich abhängig von ihren Einstellungen und den enthaltenen Elementen an den benötigten Platz anpassen. Bei bestimmten Größen- und Positionierungseinstellungen sind zusätzliche Anpassungen erforderlich.

4. Elemente in einen Container einfügen

Nachdem Sie eine Box erstellt haben, können Sie diese mit Inhalten füllen.

Dazu stehen Ihnen die gewöhnlichen Elemente des Smart-Editors zur Verfügung.

Ein neues Element hinzufügen

Wählen Sie die Box aus.
Verwenden Sie die Funktion zum Hinzufügen eines Elements innerhalb der Box.
Wählen Sie beispielsweise eine Überschrift, einen Text oder eine Schaltfläche.
Bearbeiten Sie den eingefügten Inhalt.
Kontrollieren Sie seine Position innerhalb des Containers.

Vorhandene Elemente in eine Box verschieben

Auch bereits vorhandene Elemente können in eine Box verschoben werden, sofern die gewünschte Anordnung vom Editor unterstützt wird.

Verwenden Sie dafür die entsprechenden Verschiebefunktionen.

Kontrollieren Sie anschließend in der Ebenenansicht, ob sich die Elemente tatsächlich innerhalb der Box befinden.

Wichtig: Ein Element, das optisch über einer Box liegt, muss nicht automatisch Bestandteil dieses Containers sein. Entscheidend ist seine tatsächliche Zuordnung innerhalb der Elementstruktur.

5. Einen Container gestalten

Eine Box besitzt verschiedene eigene Gestaltungseigenschaften.

Dadurch können Sie mehrere Elemente zu einem optisch zusammengehörigen Bereich verbinden.

Eine Hintergrundfarbe verwenden

Wählen Sie die betreffende Box aus.
Öffnen Sie die Hintergrund- beziehungsweise Fülleinstellungen.
Wählen Sie die gewünschte Farbe.
Kontrollieren Sie, ob sich die enthaltenen Texte gut vom Hintergrund abheben.

Einen Rahmen hinzufügen

Sie können eine Box mit einem Rahmen versehen.

Über die Rahmeneinstellungen lassen sich je nach verfügbarer Option beispielsweise die Farbe, Stärke und Gestaltung des Rahmens verändern.

Abgerundete Ecken verwenden

Mit einem Eckenradius können Sie die Form des Containers verändern.

Dadurch lassen sich beispielsweise Informationskarten mit leicht abgerundeten Ecken gestalten.

Innenabstände einstellen

Mit den Innenabständen bestimmen Sie, wie viel Platz zwischen den enthaltenen Elementen und den Rändern der Box vorhanden ist.

Ausreichende Innenabstände verhindern, dass Texte und Bilder unmittelbar an der Begrenzung beginnen.

Tipp: Für einheitliche Informationskarten sollten Sie möglichst dieselben Hintergrundfarben, Rahmen und Innenabstände verwenden.

6. Was ist eine Gruppe?

Eine Gruppe fasst mehrere Elemente zu einer gemeinsamen Bearbeitungseinheit zusammen.

Das ist besonders hilfreich, wenn Elemente in einer bestimmten Anordnung gemeinsam verschoben werden sollen.

Ein Beispiel ist eine kleine Kombination aus Symbol und Beschriftung.

Wenn Sie beide Elemente einzeln verschieben, müssen Sie anschließend möglicherweise den Abstand und die Ausrichtung erneut anpassen.

Als Gruppe lassen sich die Elemente dagegen gemeinsam bewegen.

Typische Anwendungen

Symbole mit Beschriftungen,
mehrere dekorative Formen,
zusammengehörige Textelemente,
kleinere frei positionierte Gestaltungen,
Elementkombinationen, die gemeinsam verschoben werden sollen.

Wichtig: Eine Gruppe dient vor allem der gemeinsamen Bearbeitung. Wenn Sie eine eigenständige Fläche mit Hintergrund, Rahmen und Innenabständen benötigen, verwenden Sie stattdessen eine Box.

7. Mehrere Elemente gruppieren

Um eine Gruppe zu erstellen, wählen Sie zunächst die Elemente aus, die zusammengefasst werden sollen.

Elemente gemeinsam auswählen

Öffnen Sie die gewünschte Seite im Smart-Editor.
Wählen Sie das erste Element aus.
Halten Sie die Umschalt- oder Strg-Taste gedrückt.
Wählen Sie weitere Elemente aus, die zur Gruppe gehören sollen.
Kontrollieren Sie die Auswahl.

Alternativ können Sie mehrere Elemente mit der Maus durch Aufziehen eines Auswahlbereichs markieren, sofern deren Anordnung dies ermöglicht.

Die Gruppe erstellen

Wählen Sie mindestens zwei Elemente aus.
Öffnen Sie die Kontextwerkzeuge oder das Kontextmenü.
Verwenden Sie die Funktion Gruppieren beziehungsweise Group.
Die ausgewählten Elemente bilden anschließend eine gemeinsame Gruppe.

Für das Gruppieren steht außerdem die Tastenkombination Strg + G zur Verfügung.

Tipp: Verwenden Sie die Gruppierung besonders dann, wenn Sie mehrere Elemente immer wieder gemeinsam positionieren müssen.

8. Eine Gruppe verschieben und bearbeiten

Nach dem Gruppieren können Sie mehrere Elemente gemeinsam auswählen und bewegen.

Die gesamte Gruppe verschieben

Wählen Sie die gewünschte Gruppe aus.
Verwenden Sie die Verschiebefunktion des Editors.
Bewegen Sie die Gruppe an die gewünschte Position.
Kontrollieren Sie das Ergebnis.

Die enthaltenen Elemente werden dabei gemeinsam verschoben.

Die Größe einer Gruppe verändern

Über die angebotenen Größenmarkierungen können Sie die Größe der ausgewählten Gruppe anpassen.

Beachten Sie dabei, dass sich Größenänderungen auf die Anordnung und Darstellung der enthaltenen Elemente auswirken können.

Ein einzelnes Element innerhalb der Gruppe bearbeiten

Auch innerhalb einer Gruppe können die enthaltenen Elemente weiterhin einzeln bearbeitet werden.

Durch einen Doppelklick auf das gewünschte Element können Sie dieses gezielt auswählen.

Anschließend stehen Ihnen die entsprechenden Eigenschaften des Elements zur Verfügung.

Tipp: Wenn Sie Schwierigkeiten haben, ein bestimmtes Element innerhalb einer Gruppe anzuklicken, verwenden Sie die Ebenenansicht.

9. Eine Gruppierung wieder aufheben

Wenn Sie mehrere gruppierte Elemente wieder unabhängig voneinander bearbeiten möchten, können Sie die Gruppierung aufheben.

Eine Gruppe auflösen

Wählen Sie die gewünschte Gruppe aus.
Öffnen Sie die Kontextwerkzeuge beziehungsweise das Kontextmenü.
Wählen Sie Gruppierung aufheben beziehungsweise Ungroup.
Die zuvor gruppierten Elemente können anschließend wieder einzeln ausgewählt werden.

Alternativ können Sie die Tastenkombination Strg + Umschalt + G verwenden.

Wichtig: Das Aufheben einer Gruppierung ist nicht mit dem Löschen der enthaltenen Elemente gleichzusetzen. Die Elemente bleiben grundsätzlich vorhanden und können unabhängig weiterbearbeitet werden.

10. Box und Gruppe im direkten Vergleich

Ob Sie eine Box oder eine Gruppe verwenden sollten, hängt von Ihrer Gestaltungsaufgabe ab.

Eigenschaft	Box / Container	Gruppe
Mehrere Elemente zusammenfassen	Ja	Ja
Gemeinsam verschieben	Ja	Ja
Eigenen Hintergrund gestalten	Ja	Nicht wie bei einer Box
Rahmen und Eckenradius	Ja	Keine entsprechenden Box-Eigenschaften
Innenabstände festlegen	Ja	Keine eigenen Box-Innenabstände
Einzelne Elemente bearbeiten	Ja	Ja
Typischer Einsatz	Informationskarten und strukturierte Inhaltsbereiche	Gemeinsame Bearbeitung und Positionierung

Merksatz: Eine Box organisiert und gestaltet einen gemeinsamen Inhaltsbereich. Eine Gruppe verbindet mehrere Elemente hauptsächlich für die gemeinsame Bearbeitung.

11. Container und Gruppen in der Ebenenansicht

Bei umfangreicheren Gestaltungen kann es schwierig werden, den Überblick über verschachtelte Elemente zu behalten.

Der Smart-Editor bietet dafür eine Ebenenansicht innerhalb des Seiten-Navigators.

Diese zeigt den Aufbau Ihrer Inhaltsbereiche und die enthaltenen Elemente.

Die Ebenenansicht öffnen

Öffnen Sie den Seiten-Navigator.
Wechseln Sie zur Ebenen- beziehungsweise Gliederungsansicht.
Suchen Sie den gewünschten Block.
Klappen Sie dessen enthaltene Elemente auf, sofern diese eingeklappt sind.
Wählen Sie die gewünschte Box, Gruppe oder das einzelne Element aus.

Verschachtelte Strukturen erkennen

Eine typische Struktur könnte beispielsweise folgendermaßen aussehen:

Block
- Box
  - Überschrift
  - Beschreibungstext
  - Schaltfläche
- Gruppe
  - Symbol
  - Beschriftung

Sie erkennen dadurch, welche Elemente zu welchem übergeordneten Bereich gehören.

Tipp: Bei komplexeren Seiten kann es hilfreich sein, wichtige Blöcke, Container und Elemente in der Ebenenansicht eindeutig zu benennen.

12. Container innerhalb von Rastern verwenden

Container können auch innerhalb von Rasterzellen eingesetzt werden.

Damit lassen sich mehrspaltige Layouts mit einheitlich gestalteten Inhaltsbereichen erstellen.

Ein Beispiel mit drei Leistungsangeboten

Sie möchten drei Dienstleistungen nebeneinander darstellen.

Dafür können Sie ein Raster mit drei Spalten verwenden.

Innerhalb jeder Spalte befindet sich eine Box mit:

einem Symbol oder Bild,
einer Überschrift,
einem Beschreibungstext,
einer Schaltfläche.

Alle Boxen können dieselben Hintergrundfarben, Innenabstände und Rahmen erhalten.

So entsteht eine einheitliche Gestaltung.

Warum ist diese Struktur sinnvoll?

Das Raster übernimmt die Anordnung der Spalten, während die enthaltenen Boxen als eigenständige Gestaltungseinheiten dienen.

Dadurch lassen sich Layout und Gestaltung getrennt voneinander anpassen.

Tipp: Wenn Sie mehrere ähnliche Inhaltskarten erstellen, verwenden Sie möglichst einheitlich aufgebaute Boxen innerhalb eines Rasters.

13. Container und responsive Gestaltung

Eine der wichtigsten Aufgaben von Containern besteht darin, mehrere Elemente in einer gemeinsamen Layoutstruktur zu verwalten.

Das ist besonders bei der Darstellung auf Smartphones und Tablets hilfreich.

Veränderte Bildschirmbreiten

Auf einem großen Monitor steht mehr Platz zur Verfügung als auf einem Smartphone.

Container können ihre Breite und die Anordnung der enthaltenen Elemente abhängig vom verfügbaren Platz anpassen.

Längere Texte

Wenn ein Text auf einem schmalen Bildschirm in mehr Zeilen umbricht, benötigt er zusätzlichen Platz.

Ein geeignet aufgebauter Container kann diese Veränderung häufig besser berücksichtigen als mehrere unabhängig frei positionierte Elemente.

Gruppen auf Smartphones

Auch Gruppen können in verschiedenen Bildschirmansichten angepasst werden.

Allerdings sorgt das Gruppieren allein nicht automatisch für ein flexibles, responsives Layout.

Wenn mehrere Elemente in einer festen Anordnung gruppiert werden, kann diese auf einem schmalen Bildschirm zusätzlichen Anpassungsbedarf verursachen.

Wichtig: Eine Box erleichtert häufig die responsive Gestaltung. Sie ersetzt aber nicht die Kontrolle der unterschiedlichen Bildschirmansichten.

14. Wenn Elemente aus einem Container herausragen

Gelegentlich werden Elemente nicht vollständig innerhalb der vorgesehenen Box angezeigt.

Das kann beispielsweise bei längeren Texten, ungeeigneten Größen oder frei positionierten Elementen vorkommen.

Die Containergröße überprüfen

Wählen Sie die Box aus und kontrollieren Sie ihre Breite und Höhe.

Prüfen Sie, ob die enthaltenen Elemente ausreichend Platz besitzen.

Innenabstände kontrollieren

Große Innenabstände können den verfügbaren Platz für die eigentlichen Inhalte verkleinern.

Auf Smartphones kann sich dies besonders deutlich bemerkbar machen.

Die Position einzelner Elemente prüfen

Wenn ein Element außerhalb des Containers liegt, kontrollieren Sie seine Positionierung und die übergeordneten Layoutbedingungen.

Die Ebenenansicht verwenden

Prüfen Sie, ob das betreffende Element tatsächlich Bestandteil der Box ist oder lediglich optisch darüberliegt.

Tipp: Wenn ein Container unerwartet reagiert, kontrollieren Sie zuerst seine Größe und Innenabstände. Untersuchen Sie anschließend die Positionierung der enthaltenen Elemente.

15. Container und Gruppen kopieren

Bereits gestaltete Container und Gruppen können Sie wiederverwenden.

Das spart Zeit, wenn ähnliche Inhaltsbereiche mehrfach benötigt werden.

Eine Box duplizieren

Wählen Sie die gewünschte Box aus.
Öffnen Sie die zugehörigen Optionen.
Verwenden Sie die Duplizierfunktion.
Positionieren Sie die Kopie an der gewünschten Stelle.
Passen Sie die enthaltenen Inhalte an.

Eine Gruppe duplizieren

Auch Gruppen können als zusammengehörige Einheit dupliziert werden.

Dafür können Sie die entsprechende Editorfunktion verwenden.

Für ausgewählte Gruppen unterstützt Nicepage unter anderem die Tastenkombination Strg + D.

Kopierte Inhalte überprüfen

Kontrollieren Sie nach dem Duplizieren insbesondere:

Texte und Bilder,
Schaltflächen und Verlinkungen,
Abstände und Positionen,
die Darstellung auf verschiedenen Bildschirmgrößen.

Wichtig: Kopierte Container und Gruppen sind normalerweise eigenständige Gestaltungseinheiten. Eine spätere Änderung am ursprünglichen Objekt wird nicht automatisch auf sämtliche Kopien übertragen.

16. Häufige Fehler beim Arbeiten mit Containern und Gruppen

Die folgenden Empfehlungen helfen Ihnen, typische Probleme zu vermeiden.

Box und Gruppe unterscheiden: Verwenden Sie eine Box für gemeinsame Hintergründe, Rahmen und Innenabstände.
Elemente richtig zuordnen: Prüfen Sie in der Ebenenansicht, ob sich ein Element tatsächlich innerhalb des gewünschten Containers befindet.
Nicht unnötig verschachteln: Zu viele ineinanderliegende Container können die Bearbeitung erschweren.
Größen sinnvoll festlegen: Vermeiden Sie unnötig starre Höhen bei veränderlichen Textinhalten.
Innenabstände kontrollieren: Zu große Abstände können insbesondere auf Smartphones zu Platzproblemen führen.
Gruppen gezielt einsetzen: Eine Gruppierung erleichtert das gemeinsame Bewegen, macht aber nicht automatisch jedes Layout responsiv.
Raster verwenden: Für mehrspaltige Anordnungen sind Raster häufig geeigneter als mehrere frei positionierte Gruppen.
Kopierte Inhalte überprüfen: Denken Sie an übernommene Verlinkungen und Beispieltexte.
Responsive Ansichten kontrollieren: Überprüfen Sie Änderungen auch auf Tablets und Smartphones.
Frontend prüfen: Kontrollieren Sie das endgültige Ergebnis nach dem Speichern im Browser.

17. Wie geht es weiter?

Sie wissen jetzt, wie Sie Container und Gruppen im Smart-Editor einsetzen und worin die wichtigsten Unterschiede bestehen.

Sie haben außerdem gelernt, wie Sie mehrere Elemente gemeinsam verwalten, Container gestalten und ihre Darstellung auf unterschiedlichen Bildschirmgrößen kontrollieren können.

Für komplexere Seitenaufbauten spielen neben Containern und Gruppen insbesondere Raster eine wichtige Rolle.

Als Nächstes empfehlen wir Ihnen die Anleitung „Raster und Spalten verstehen“. Dort erfahren Sie, wie Sie mehrere Inhaltsbereiche nebeneinander anordnen und flexible mehrspaltige Layouts erstellen.