Der Smart-Editor bietet Ihnen zahlreiche Werkzeuge, mit denen Sie Ihre Webseite individuell gestalten und bearbeiten können. Damit Sie sich schnell zurechtfinden, lernen Sie in dieser Anleitung die wichtigsten Bereiche der Benutzeroberfläche kennen.
Sie erfahren, wo Sie neue Inhalte hinzufügen, bestehende Elemente bearbeiten, das Layout verändern und die Darstellung auf verschiedenen Bildschirmgrößen kontrollieren können.
Die Benutzeroberfläche ist in mehrere Bereiche gegliedert. Sobald Sie deren grundlegende Funktionen kennen, wird Ihnen die Arbeit mit dem Smart-Editor wesentlich leichter fallen.
1. Aufbau der Benutzeroberfläche
Nach dem Öffnen des Smart-Editors sehen Sie die grafische Bearbeitungsansicht Ihrer Webseite.
Die Benutzeroberfläche besteht im Wesentlichen aus fünf Bereichen:
- Obere Werkzeugleiste: Hier finden Sie wichtige Funktionen zur Bearbeitung und Verwaltung Ihrer Webseite.
- Schnellzugriff: Über diesen Bereich erreichen Sie verschiedene Werkzeuge und Verwaltungsfunktionen.
- Seiten-Navigator: Hier verwalten Sie die Inhaltsbereiche Ihrer Webseite und können deren Struktur betrachten.
- Bearbeitungsbereich: In diesem Bereich gestalten und bearbeiten Sie Ihre Webseite direkt.
- Eigenschaftenfenster: Hier verändern Sie die Einstellungen des ausgewählten Elements.
Die verschiedenen Bereiche arbeiten zusammen. Wenn Sie beispielsweise im Bearbeitungsbereich ein Bild auswählen, erscheinen im Eigenschaftenfenster automatisch die dazugehörigen Einstellungen.
Hinweis: Die genaue Anordnung und Bezeichnung einzelner Werkzeuge kann sich durch Aktualisierungen des Smart-Editors verändern. Auch können sich die verfügbaren Funktionen je nach ausgewähltem Element unterscheiden.
2. Die obere Werkzeugleiste
Die obere Werkzeugleiste enthält wichtige Funktionen, die Sie während der Bearbeitung regelmäßig benötigen.
Hier finden Sie unter anderem Möglichkeiten zum Hinzufügen von Inhalten, zum Wechseln der Bildschirmansicht sowie zum Speichern und zur Vorschau Ihrer Arbeit.
Inhalte hinzufügen
Über die Funktion zum Hinzufügen neuer Inhalte können Sie beispielsweise Texte, Bilder, Schaltflächen, Formulare und weitere Gestaltungselemente auf Ihrer Webseite platzieren.
Außerdem stehen Ihnen vorgefertigte Designs und vollständige Inhaltsbereiche zur Verfügung, die Sie als Grundlage für Ihre eigene Gestaltung verwenden können.
Bildschirmansichten wechseln
Der Smart-Editor bietet verschiedene Ansichten für unterschiedliche Bildschirmgrößen.
Über die entsprechenden Symbole können Sie zwischen großen Monitoren, Desktop-Ansichten, Tablets und Smartphones wechseln.
Dadurch können Sie die Gestaltung Ihrer Webseite direkt für verschiedene Geräte kontrollieren und bei Bedarf anpassen.
Speichern und Vorschau
In der oberen Werkzeugleiste finden Sie außerdem Funktionen, mit denen Sie Ihre Änderungen speichern und eine Vorschau Ihrer Webseite öffnen können.
Die Vorschau hilft Ihnen dabei, das Ergebnis Ihrer Arbeit zu überprüfen, bevor Sie weitere Änderungen vornehmen.
Wichtig: Kontrollieren Sie umfangreichere Änderungen zusätzlich auf der tatsächlichen Webseite. Insbesondere bei komplexeren Layouts und eingebundenen Joomla-Inhalten kann die Darstellung von der Bearbeitungsansicht abweichen.
3. Der Schnellzugriff und die Werkzeugauswahl
Der Schnellzugriff bietet Ihnen Zugang zu verschiedenen Funktionen des Smart-Editors, ohne dass Sie diese jedes Mal über die gesamte Benutzeroberfläche suchen müssen.
Je nach Version und Arbeitsbereich finden Sie hier beispielsweise Werkzeuge für:
- das Hinzufügen neuer Elemente und Inhaltsbereiche,
- die Verwaltung von Seiten und Inhalten,
- die Auswahl von Gestaltungsvorlagen,
- die Verwendung vorhandener Medien,
- die Bearbeitung von Design- und Seiteneinstellungen.
Viele dieser Funktionen öffnen eigene Auswahlbereiche, in denen Sie die verfügbaren Elemente oder Einstellungen durchsuchen können.
Die Suchfunktion verwenden
Der Smart-Editor verfügt über Suchfunktionen, mit denen Sie beispielsweise Gestaltungselemente, Vorlagen oder andere verfügbare Funktionen schneller finden können.
Wenn Sie ein bestimmtes Element benötigen, müssen Sie daher nicht zwangsläufig sämtliche Kategorien durchsuchen.
Geben Sie stattdessen einen passenden Suchbegriff ein und wählen Sie das gewünschte Ergebnis aus.
Tipp: Gerade bei selten verwendeten Funktionen kann die Suche schneller sein als das Durchsuchen mehrerer Menüs.
4. Der Seiten-Navigator
Der Seiten-Navigator befindet sich auf der linken Seite des Editors. Er ermöglicht Ihnen, die verschiedenen Inhaltsbereiche Ihrer Webseite auszuwählen und zu verwalten.
Eine Webseite besteht im Smart-Editor aus einzelnen Abschnitten, die als Blöcke bezeichnet werden.
Ein Block kann beispielsweise einen Einleitungstext, eine Bildergalerie, einen Kontaktbereich oder eine Kombination verschiedener Elemente enthalten.
Die Blockübersicht
In der Blockübersicht sehen Sie die einzelnen Abschnitte Ihrer Webseite in ihrer Reihenfolge.
Die Blöcke werden durch kleine Vorschauansichten dargestellt. So können Sie auch umfangreiche Seiten übersichtlich verwalten.
Sie können hier unter anderem:
- einen bestimmten Block auswählen,
- die Reihenfolge vorhandener Blöcke verändern,
- Blöcke kopieren oder duplizieren,
- nicht mehr benötigte Blöcke entfernen,
- weitere Blockfunktionen über das jeweilige Optionsmenü aufrufen.
Wenn Sie einen Block auswählen, wird dieser auch im Bearbeitungsbereich hervorgehoben.
Die Struktur- und Ebenenansicht
Neben der Blockübersicht bietet der Seiten-Navigator eine Strukturansicht, die auch als Ebenenansicht bezeichnet wird.
Hier sehen Sie nicht nur die einzelnen Blöcke, sondern auch deren enthaltene Elemente und Container.
Das ist besonders hilfreich, wenn mehrere Elemente übereinanderliegen oder sich ein bestimmtes Element mit der Maus nur schwer auswählen lässt.
In der Ebenenansicht können Sie gezielt auf einzelne Elemente zugreifen. Je nach Element stehen Ihnen außerdem weitere Funktionen wie Umbenennen, Sperren oder vorübergehendes Ausblenden zur Verfügung.
Tipp: Wenn Sie ein Element im Bearbeitungsbereich nicht auswählen können, versuchen Sie es über die Ebenenansicht. Häufig ist das wesentlich einfacher als wiederholtes Anklicken mit der Maus.
5. Der zentrale Bearbeitungsbereich
Der Bearbeitungsbereich ist das Herzstück des Smart-Editors. Hier sehen Sie die aktuelle Gestaltung Ihrer Webseite und können Änderungen unmittelbar vornehmen.
Sie können Texte auswählen, Bilder austauschen, Elemente hinzufügen und deren Position verändern.
Elemente auswählen
Klicken Sie auf ein Element, um es auszuwählen. Das ausgewählte Objekt wird durch Markierungen oder einen Rahmen hervorgehoben.
Gleichzeitig zeigt der Smart-Editor die passenden Bearbeitungsfunktionen und Eigenschaften an.
Je nachdem, welches Element Sie auswählen, stehen unterschiedliche Möglichkeiten zur Verfügung.
Elemente verschieben
Viele Elemente können Sie direkt mit der Maus verschieben.
- Klicken Sie auf das gewünschte Element.
- Bewegen Sie es mithilfe der vorgesehenen Verschiebefunktion an die neue Position.
- Achten Sie auf die eingeblendeten Ausrichtungshilfen.
- Kontrollieren Sie die neue Position im Layout.
Die Ausrichtungshilfen unterstützen Sie dabei, Elemente beispielsweise an anderen Objekten oder an den Begrenzungen eines Containers auszurichten.
Wichtig: Frei positionierte Elemente können bei anderen Bildschirmgrößen anders dargestellt werden. Kontrollieren Sie deshalb nach größeren Positionsänderungen auch die übrigen Bildschirmansichten.
Elemente in Containern und Rastern
Für eine übersichtliche und flexible Gestaltung können Sie Elemente in Containern und Rastern anordnen.
Ein Container fasst mehrere Elemente zusammen. Ein Raster unterteilt einen Bereich in Zeilen und Spalten.
Dadurch lassen sich beispielsweise Bilder und Texte nebeneinander darstellen oder mehrere gleichmäßig angeordnete Inhaltsfelder erstellen.
Solche Strukturen erleichtern häufig die Anpassung an unterschiedliche Bildschirmgrößen.
6. Das Eigenschaftenfenster
Das Eigenschaftenfenster befindet sich normalerweise auf der rechten Seite der Benutzeroberfläche.
Hier nehmen Sie die meisten gestalterischen und technischen Einstellungen vor.
Die angezeigten Optionen hängen davon ab, welches Objekt Sie gerade ausgewählt haben.
Bei einem Text stehen beispielsweise andere Funktionen zur Verfügung als bei einem Bild oder einem gesamten Block.
Eigenschaften von Texten
Wenn Sie einen Text auswählen, können Sie unter anderem dessen Schriftart, Schriftgröße, Farbe, Ausrichtung und weitere Formatierungsmerkmale verändern.
Eigenschaften von Bildern
Bei einem Bild finden Sie Einstellungen zum Austauschen der Bilddatei, zum Bildausschnitt und zu verschiedenen Darstellungsoptionen.
Eigenschaften von Blöcken
Wenn Sie einen ganzen Block auswählen, können Sie beispielsweise dessen Hintergrund, Abmessungen und weitere Layout-Eigenschaften bearbeiten.
Zwischen Eigenschaftsebenen wechseln
Im oberen Bereich des Eigenschaftenfensters können Sie über entsprechende Register zwischen verschiedenen Ebenen wechseln.
So lassen sich nicht nur die Eigenschaften eines einzelnen Elements bearbeiten, sondern bei Bedarf auch die Einstellungen des übergeordneten Containers oder Blocks.
Diese Unterscheidung ist wichtig: Eine Änderung am Container kann sich auf mehrere darin enthaltene Elemente auswirken.
Weitere Einstellungen einblenden
Nicht alle Eigenschaften sind gleichzeitig sichtbar. Manche Einstellungen befinden sich in zusätzlichen Bereichen oder aufklappbaren Menüs.
Wenn Sie eine bestimmte Funktion nicht unmittelbar finden, überprüfen Sie deshalb auch die weiteren Einstellungsgruppen im Eigenschaftenfenster.
Tipp: Achten Sie bei Positions- und Abstandsproblemen besonders auf die Einstellungen für Abstände, Größen und Ausrichtung. Auch Werte, die zunächst nicht sichtbar sind, können das Layout beeinflussen.
7. Die Kontext-Werkzeugleiste
Zusätzlich zum Eigenschaftenfenster bietet der Smart-Editor eine kontextabhängige Werkzeugleiste.
Diese erscheint bei der Auswahl bestimmter Elemente und stellt häufig benötigte Funktionen direkt zur Verfügung.
Welche Schaltflächen angezeigt werden, richtet sich nach dem ausgewählten Objekt.
Bei Texten können dies beispielsweise Formatierungsfunktionen sein. Bei anderen Elementen stehen entsprechende Werkzeuge zum Bearbeiten, Kopieren oder für weitere Aktionen bereit.
Die Kontext-Werkzeugleiste ermöglicht dadurch häufig eine schnellere Bearbeitung, ohne jedes Mal zum Eigenschaftenfenster wechseln zu müssen.
8. Die verschiedenen Bildschirmansichten
Eine moderne Webseite muss auf unterschiedlichen Bildschirmgrößen gut funktionieren.
Der Smart-Editor unterstützt deshalb mehrere sogenannte responsive Ansichten beziehungsweise Breakpoints.
Diese Ansichten entsprechen unterschiedlichen Bildschirmbreiten, beispielsweise für:
- große Desktop-Monitore,
- gewöhnliche Desktop- und Laptop-Bildschirme,
- Tablets,
- Smartphones im Querformat,
- Smartphones im Hochformat.
Welche Ansichten unmittelbar eingeblendet werden, hängt von den Einstellungen und der verwendeten Editor-Version ab.
Zwischen Ansichten wechseln
- Öffnen Sie die gewünschte Seite im Smart-Editor.
- Wählen Sie in der oberen Werkzeugleiste eine andere Bildschirmansicht aus.
- Kontrollieren Sie die Darstellung der Inhalte.
- Nehmen Sie bei Bedarf Anpassungen für die gewählte Ansicht vor.
- Wechseln Sie anschließend zu den anderen Ansichten, um das Ergebnis zu überprüfen.
Unterschiedliche Layouts gestalten
Sie können verschiedene Eigenschaften abhängig von der Bildschirmgröße anpassen.
Dazu gehören beispielsweise Schriftgrößen, Abstände, Elementpositionen und die Sichtbarkeit einzelner Elemente.
Auch die Anordnung von Inhalten innerhalb eines Rasters kann für unterschiedliche Bildschirmgrößen angepasst werden.
Wichtig: Änderungen in einer Bildschirmansicht können sich auf andere Ansichten auswirken. Kontrollieren Sie insbesondere nach dem Verschieben, Vergrößern oder Hinzufügen von Elementen sämtliche relevanten Bildschirmgrößen.
Die ausführliche Gestaltung responsiver Layouts behandeln wir in einer eigenen Anleitung.
9. Rückgängig machen und Änderungen kontrollieren
Bei der Gestaltung einer Webseite kann es vorkommen, dass ein Element versehentlich verschoben oder eine Einstellung unbeabsichtigt verändert wird.
Der Smart-Editor bietet Funktionen zum Rückgängigmachen und Wiederherstellen von Bearbeitungsschritten.
Diese Funktionen erreichen Sie über die entsprechenden Bedienelemente beziehungsweise die unterstützten Tastenkombinationen.
Beachten Sie dabei, dass sich nicht jede Änderung unter allen Umständen rückgängig machen lässt, insbesondere nach dem Schließen oder erneuten Öffnen des Editors.
Speichern Sie Ihre Arbeit deshalb regelmäßig.
Tipp: Wenn Sie größere Änderungen an einem komplexen Layout planen, kann es sinnvoll sein, zunächst eine Kopie des betreffenden Blocks oder der Seite anzulegen. So haben Sie bei Bedarf eine zusätzliche Ausgangsversion.
10. Praktische Tipps zur Orientierung
Gerade am Anfang kann die Vielzahl der Funktionen etwas unübersichtlich wirken. Mit einigen einfachen Gewohnheiten erleichtern Sie sich die Arbeit:
- Gezielt auswählen: Prüfen Sie vor jeder Änderung, ob Sie tatsächlich das gewünschte Element, den Container oder den gesamten Block ausgewählt haben.
- Seiten-Navigator nutzen: Verwenden Sie die Blockübersicht, um sich auf längeren Webseiten schnell zu orientieren.
- Ebenenansicht verwenden: Greifen Sie bei überlagerten oder schwer auswählbaren Elementen auf die Strukturansicht zurück.
- Eigenschaften überprüfen: Achten Sie darauf, welche Einstellungsgruppe gerade geöffnet ist.
- Änderungen kontrollieren: Prüfen Sie nach größeren Layoutanpassungen auch die übrigen Bildschirmansichten.
- Regelmäßig speichern: Sichern Sie Ihre Arbeit besonders nach umfangreicheren Änderungen.
- Frontend prüfen: Vergleichen Sie bei komplexen Gestaltungen das Ergebnis im Editor mit der tatsächlichen Webseite.
11. Wie geht es weiter?
Sie kennen jetzt die wichtigsten Bereiche der Benutzeroberfläche und wissen, wo Sie die grundlegenden Funktionen des Smart-Editors finden.
Mit zunehmender Erfahrung werden Ihnen viele Arbeitsschritte vertraut werden. Sie müssen deshalb nicht sämtliche Funktionen sofort beherrschen.
In den weiteren Anleitungen erfahren Sie Schritt für Schritt, wie Sie Seiten verwalten, neue Blöcke hinzufügen, einzelne Elemente gestalten und komplexere Layouts erstellen.
Als Nächstes empfehlen wir Ihnen die Anleitung „Die wichtigsten Begriffe verstehen“. Dort erklären wir die grundlegenden Begriffe wie Block, Container, Raster, Element und Breakpoint anhand praktischer Beispiele.