Mit dem Smart-Editor können Sie Ihre bestehende Webseite jederzeit aktualisieren. Ob Sie Öffnungszeiten ändern, neue Bilder einsetzen, Texte überarbeiten oder einzelne Inhaltsbereiche neu gestalten möchten: Viele Änderungen lassen sich direkt in der grafischen Bearbeitungsansicht durchführen.

In dieser Anleitung erfahren Sie, wie Sie vorhandene Inhalte öffnen, bearbeiten und Ihre Änderungen anschließend überprüfen.

Außerdem zeigen wir Ihnen, worauf Sie achten sollten, wenn Sie bestehende Layouts verändern möchten.

1. Eine bestehende Seite zur Bearbeitung öffnen

Bevor Sie Änderungen vornehmen können, müssen Sie die gewünschte Seite im Smart-Editor öffnen.

1. Melden Sie sich mit Ihren persönlichen Zugangsdaten an der Joomla-Verwaltung Ihrer Webseite an.
2. Öffnen Sie den Menüpunkt Inhalt > Beiträge.
3. Suchen Sie den Beitrag, dessen Inhalt Sie bearbeiten möchten.
4. Klicken Sie auf den entsprechenden Beitragstitel.
5. Wählen Sie Mit Smart-Editor bearbeiten, um die grafische Bearbeitungsansicht zu öffnen.
6. Warten Sie, bis die Seite vollständig geladen wurde.

Nun sehen Sie die bestehenden Inhalte und können mit der Bearbeitung beginnen.

Hinweis: Der Smart-Editor kann nur Beiträge visuell bearbeiten, die mit diesem Editor erstellt oder entsprechend importiert wurden. Gewöhnliche Joomla-Beiträge werden mit dem dafür vorgesehenen Joomla-Editor bearbeitet.

2. Den gewünschten Inhaltsbereich finden

Um eine bestimmte Stelle Ihrer Webseite zu bearbeiten, können Sie direkt im Bearbeitungsbereich zum gewünschten Abschnitt scrollen.

Bei längeren Seiten ist es jedoch häufig einfacher, den Seiten-Navigator zu verwenden.

Mit dem Seiten-Navigator arbeiten

Im Seiten-Navigator finden Sie eine Übersicht der vorhandenen Blöcke Ihrer Webseite.

1. Öffnen Sie den Seiten-Navigator auf der linken Seite.
2. Suchen Sie den gewünschten Inhaltsbereich anhand seiner Vorschau.
3. Klicken Sie auf den entsprechenden Block.
4. Der Block wird im Bearbeitungsbereich ausgewählt.

Sie können nun die darin enthaltenen Elemente auswählen und verändern.

Die Ebenenansicht verwenden

Manchmal liegen mehrere Elemente übereinander oder befinden sich innerhalb verschachtelter Container.

In solchen Fällen kann die Ebenenansicht hilfreich sein.

Sie zeigt die Struktur der enthaltenen Elemente und ermöglicht es Ihnen, gezielt einzelne Objekte auszuwählen.

Tipp: Wenn Sie mit der Maus nicht das gewünschte Element erreichen, wählen Sie es über die Ebenenansicht aus. Das ist besonders bei überlagerten Bildern, Texten und komplexeren Layouts hilfreich.

3. Vorhandene Texte ändern

Texte gehören zu den Inhalten, die besonders häufig aktualisiert werden müssen.

Sie können bestehende Texte direkt im Bearbeitungsbereich ändern, ohne den vollständigen Inhaltsblock neu gestalten zu müssen.

1. Öffnen Sie die gewünschte Seite im Smart-Editor.
2. Wählen Sie das Textfeld aus, das Sie bearbeiten möchten.
3. Aktivieren Sie die Textbearbeitung.
4. Markieren Sie den vorhandenen Text oder positionieren Sie die Einfügemarke an der gewünschten Stelle.
5. Geben Sie Ihren neuen Text ein.
6. Kontrollieren Sie die Darstellung und speichern Sie Ihre Änderungen.

Einzelne Wörter formatieren

Sie können einzelne Wörter oder Textabschnitte hervorheben, beispielsweise durch Fettschrift, eine andere Farbe oder eine Verlinkung.

Markieren Sie dazu den gewünschten Text und verwenden Sie die entsprechenden Formatierungswerkzeuge.

Tipp: Verwenden Sie Hervorhebungen sparsam. Zu viele unterschiedliche Schriftgrößen, Farben und Formatierungen können eine Webseite schnell unübersichtlich wirken lassen.

Wenn ein Text länger wird

Ein längerer Text benötigt mehr Platz als der ursprüngliche Inhalt.

Dadurch können sich Abstände, Containerhöhen und die Position nachfolgender Elemente verändern.

Kontrollieren Sie deshalb nach umfangreicheren Textänderungen, ob alle Inhalte weiterhin richtig dargestellt werden.

Wichtig: Insbesondere bei frei positionierten Elementen oder Bereichen mit festgelegten Höhen sollten Sie nach einer größeren Textänderung auch die Smartphone-Ansichten überprüfen.

4. Bilder austauschen

Wenn Sie ein vorhandenes Bild durch eine neue Aufnahme ersetzen möchten, müssen Sie den betreffenden Inhaltsbereich normalerweise nicht neu erstellen.

1. Klicken Sie auf das Bild, das Sie austauschen möchten.
2. Öffnen Sie die Bildeinstellungen beziehungsweise die Funktion zum Ändern des Bildes.
3. Wählen Sie ein bereits vorhandenes Bild aus oder laden Sie eine neue Bilddatei hoch.
4. Übernehmen Sie die Auswahl.
5. Prüfen Sie den Bildausschnitt und die Darstellung.
6. Speichern Sie Ihre Änderungen.

Bildformat und Bildausschnitt beachten

Wenn das neue Bild ein anderes Seitenverhältnis besitzt, kann es innerhalb des vorhandenen Bildbereichs anders dargestellt werden.

Beispielsweise kann ein Hochformatbild in einem breiten Bildcontainer stärker zugeschnitten werden als eine Querformataufnahme.

Verwenden Sie die verfügbaren Bildeinstellungen, um einen passenden Ausschnitt festzulegen.

Bildqualität und Dateigröße

Achten Sie darauf, dass Ihre Bilder eine ausreichende Auflösung besitzen, aber nicht unnötig große Dateien erzeugen.

Eine sehr große Bilddatei verbessert die sichtbare Qualität nicht automatisch, kann jedoch die Ladezeit Ihrer Webseite deutlich erhöhen.

Tipp: Für gewöhnliche Webseitenbilder sind moderne, gut komprimierte Bildformate wie WebP häufig eine geeignete Wahl.

5. Schaltflächen und Verlinkungen bearbeiten

Schaltflächen werden häufig verwendet, um Besucher zu einer anderen Seite, einem Kontaktformular oder einer bestimmten Information zu führen.

Sie können sowohl die sichtbare Beschriftung als auch das Ziel einer vorhandenen Schaltfläche verändern.

Die Beschriftung ändern

1. Wählen Sie die gewünschte Schaltfläche aus.
2. Aktivieren Sie die Textbearbeitung.
3. Ersetzen Sie die bisherige Beschriftung.
4. Kontrollieren Sie, ob der neue Text vollständig innerhalb der Schaltfläche dargestellt wird.

Das Linkziel ändern

1. Wählen Sie die Schaltfläche aus.
2. Öffnen Sie die Linkeinstellungen.
3. Wählen Sie das gewünschte Ziel aus oder tragen Sie eine Internetadresse ein.
4. Übernehmen Sie die Einstellung.
5. Speichern Sie Ihre Änderungen.

Je nach Element können Links beispielsweise auf andere Seiten, bestimmte Seitenabschnitte oder externe Internetadressen verweisen.

Wichtig: Überprüfen Sie nach einer Änderung des Linkziels, ob die Schaltfläche tatsächlich zur gewünschten Seite führt.

6. Vorhandene Elemente verschieben

Der Smart-Editor erlaubt es Ihnen, zahlreiche Elemente innerhalb eines Inhaltsbereichs mit der Maus neu zu positionieren.

So können Sie beispielsweise ein Bild verschieben, den Abstand zwischen Texten verändern oder eine Schaltfläche anders anordnen.

1. Wählen Sie das gewünschte Element aus.
2. Verwenden Sie die vorgesehene Verschiebefunktion.
3. Bewegen Sie das Element an die gewünschte Position.
4. Kontrollieren Sie die angezeigten Ausrichtungshilfen.
5. Überprüfen Sie das Ergebnis in den verschiedenen Bildschirmansichten.

Elemente innerhalb eines Rasters

Wenn ein Element innerhalb eines Rasters liegt, wird seine Position durch die Struktur des Rasters und dessen Zellen beeinflusst.

Sie sollten deshalb zunächst überprüfen, ob Sie nur das einzelne Element oder die gesamte Rasterzelle verändern möchten.

Frei positionierte Elemente

Frei angeordnete Elemente erlauben eine besonders individuelle Gestaltung.

Allerdings können Positionsänderungen zusätzliche Anpassungen für andere Bildschirmgrößen erforderlich machen.

Tipp: Wenn Sie lediglich mehrere zusammengehörige Inhalte neu anordnen möchten, kann es einfacher sein, deren übergeordneten Container oder das entsprechende Raster zu bearbeiten, statt jedes Element einzeln zu verschieben.

7. Bestehende Blöcke bearbeiten

Ein Block ist ein größerer Abschnitt Ihrer Webseite, der verschiedene Texte, Bilder und weitere Elemente enthalten kann.

Sie können bestehende Blöcke verändern, ohne diese vollständig neu erstellen zu müssen.

Zu den typischen Anpassungen gehören:

• Hintergrundfarben ändern,
• Hintergrundbilder austauschen,
• Abstände anpassen,
• Elemente innerhalb des Blocks verändern,
• Blöcke an eine andere Position verschieben.

Einen Block auswählen

Wählen Sie den gewünschten Block entweder direkt im Bearbeitungsbereich oder über den Seiten-Navigator aus.

Im Eigenschaftenfenster erscheinen die verfügbaren Einstellungen für den gesamten Block.

Beachten Sie, dass Änderungen an einem Block Auswirkungen auf sämtliche enthaltenen Elemente haben können.

Blöcke neu anordnen

Sie können die Reihenfolge der Inhaltsbereiche Ihrer Webseite ändern.

Beispielsweise lässt sich eine Bildergalerie vor einen Beschreibungstext verschieben oder ein Kontaktbereich weiter oben platzieren.

Verwenden Sie dafür die entsprechenden Funktionen des Seiten-Navigators beziehungsweise die angebotenen Blockwerkzeuge.

Wichtig: Prüfen Sie nach dem Verschieben eines Blocks, ob die Übergänge zu den angrenzenden Bereichen weiterhin richtig dargestellt werden.

8. Inhalte kopieren statt neu erstellen

Wenn Sie einen bestehenden Inhaltsbereich in ähnlicher Form erneut benötigen, kann es sinnvoll sein, diesen zu kopieren.

Das spart Arbeit und erleichtert ein einheitliches Erscheinungsbild.

Ein Element kopieren

Wählen Sie das gewünschte Element aus und verwenden Sie die vorhandene Kopier- oder Duplizierfunktion.

Die Kopie können Sie anschließend anpassen, ohne das ursprüngliche Element vollständig neu erstellen zu müssen.

Einen Block duplizieren

Auch vollständige Blöcke lassen sich duplizieren.

Das ist beispielsweise hilfreich, wenn Sie mehrere ähnlich aufgebaute Leistungsbeschreibungen oder Informationsbereiche erstellen möchten.

Tipp: Bei umfangreicheren Änderungen kann eine Kopie des ursprünglichen Blocks als zusätzliche Absicherung dienen. Entfernen Sie die nicht benötigte Version erst, wenn Sie mit dem Ergebnis zufrieden sind.

9. Nicht mehr benötigte Inhalte entfernen

Wenn bestimmte Informationen nicht mehr benötigt werden, können Sie einzelne Elemente oder vollständige Blöcke entfernen.

Achten Sie dabei darauf, das richtige Objekt auszuwählen.

Der Smart-Editor unterscheidet zwischen einzelnen Elementen, Containern und übergeordneten Blöcken.

Wenn Sie einen gesamten Container löschen, können dadurch auch sämtliche darin enthaltenen Elemente entfernt werden.

Vor dem Löschen prüfen

Kontrollieren Sie zunächst, ob Sie wirklich den gewünschten Bereich ausgewählt haben.

Bei komplexeren Layouts hilft die Ebenenansicht, den Aufbau des betreffenden Inhaltsbereichs zu erkennen.

Wichtig: Verlassen Sie sich bei umfangreichen Löschaktionen nicht ausschließlich auf die Rückgängig-Funktion. Nach dem Speichern oder erneuten Öffnen des Editors stehen möglicherweise nicht mehr sämtliche vorherigen Bearbeitungsschritte zur Verfügung.

10. Änderungen auf verschiedenen Geräten kontrollieren

Der Smart-Editor ermöglicht es Ihnen, Ihre Webseite für unterschiedliche Bildschirmgrößen zu gestalten.

Deshalb sollten Sie Änderungen nicht ausschließlich in der großen Desktop-Ansicht überprüfen.

Das gilt insbesondere, wenn Sie:

• längere Texte eingefügt haben,
• Elemente verschoben haben,
• die Größe eines Containers verändert haben,
• neue Elemente hinzugefügt haben,
• Abstände oder Positionen verändert haben.

Die Bildschirmansichten durchgehen

1. Wählen Sie eine der verfügbaren Bildschirmansichten aus.
2. Kontrollieren Sie die Position und Größe der Inhalte.
3. Prüfen Sie, ob sich Texte und Bilder überlagern.
4. Achten Sie auf ungewöhnlich große oder kleine Abstände.
5. Wiederholen Sie die Kontrolle für die übrigen relevanten Ansichten.

Besonders auf Abstände achten

Ungewöhnliche Abstände können durch die Einstellungen einzelner Elemente, Container oder Blöcke entstehen.

Wenn ein Bereich unerwartet viel Platz benötigt oder andere Inhalte überlagert, überprüfen Sie insbesondere die Eigenschaften für Positionierung, Innenabstände und Außenabstände.

Tipp: Kontrollieren Sie bei unerwarteten Layoutproblemen auch die unteren und rechten Abstandswerte. Nicht alle Einstellungen sind im Eigenschaftenfenster gleichzeitig sichtbar.

11. Änderungen speichern

Speichern Sie Ihre Arbeit regelmäßig, damit bereits durchgeführte Anpassungen nicht verloren gehen.

1. Klicken Sie im Smart-Editor auf die Schaltfläche Speichern.
2. Warten Sie, bis der Speichervorgang abgeschlossen ist.
3. Schließen Sie den Smart-Editor über die vorgesehene Funktion.
4. Speichern und schließen Sie bei Bedarf anschließend auch den zugehörigen Joomla-Beitrag.

Beachten Sie, dass der Smart-Editor und die Joomla-Beitragsverwaltung unterschiedliche Bearbeitungsoberflächen sind.

Wenn Sie beispielsweise den Beitragstitel, die Kategorie oder den Veröffentlichungsstatus ändern möchten, erfolgen diese Einstellungen über die Joomla-Beitragsverwaltung.

12. Das Ergebnis auf der Webseite überprüfen

Nach dem Speichern sollten Sie Ihre Änderungen in der tatsächlichen Webseitenansicht kontrollieren.

1. Öffnen Sie Ihre Webseite in einem neuen Browser-Tab.
2. Rufen Sie die bearbeitete Seite auf.
3. Kontrollieren Sie Texte, Bilder, Abstände und Verlinkungen.
4. Prüfen Sie bei größeren Layoutänderungen auch die Darstellung auf anderen Bildschirmgrößen.

Wenn Änderungen nicht angezeigt werden

Wenn Sie weiterhin die vorherige Version sehen, kann ein Zwischenspeicher (Cache) dafür verantwortlich sein.

Versuchen Sie zunächst, die Seite neu zu laden.

Unter Windows können Sie dafür beispielsweise die Tastenkombination Strg + F5 verwenden.

Dadurch wird in vielen Browsern ein erneutes Laden der Seite und ihrer Ressourcen angestoßen.

Wenn die Änderung weiterhin nicht erscheint, kann auch ein serverseitiger Cache beteiligt sein.

Überprüfen Sie außerdem, ob Sie die richtige Seite bearbeitet und alle Änderungen gespeichert haben.

13. Änderungen an gemeinsam verwendeten Bereichen

Nicht jeder sichtbare Bereich einer Webseite gehört ausschließlich zu der gerade geöffneten Seite.

Beispielsweise können Kopfbereich, Fußbereich oder Navigationsmenü auf mehreren Seiten gemeinsam verwendet werden.

Wenn Sie einen solchen Bereich verändern, kann sich die Änderung deshalb auch auf andere Seiten auswirken.

Besonderheit bei Joomla-Modulen

Joomla verwendet Module, um beispielsweise Menüs, Kontaktinformationen oder weitere dynamische Inhalte an bestimmten Positionen auszugeben.

Diese Inhalte werden teilweise unabhängig vom eigentlichen Smart-Editor-Beitrag verwaltet.

Wenn Sie einen solchen Bereich nicht direkt bearbeiten können, liegt die entsprechende Einstellung möglicherweise in der Joomla-Verwaltung.

Wichtig: Prüfen Sie vor Änderungen an gemeinsam verwendeten Bereichen, ob diese auch auf anderen Seiten angezeigt werden. So vermeiden Sie unbeabsichtigte Veränderungen am übrigen Erscheinungsbild Ihrer Webseite.

14. Häufige Fehler bei der Bearbeitung vermeiden

Mit einigen einfachen Vorgehensweisen lassen sich viele typische Probleme vermeiden.

• Das richtige Element auswählen: Prüfen Sie vor einer Änderung, ob Sie das einzelne Objekt oder dessen übergeordneten Container ausgewählt haben.
• Bestehende Gestaltung beibehalten: Verwenden Sie nach Möglichkeit die vorhandenen Schriftarten, Farben und Abstände.
• Keine unnötigen Positionsänderungen: Verschieben Sie Elemente nur dann frei, wenn dies für die Gestaltung erforderlich ist.
• Texterweiterungen kontrollieren: Prüfen Sie nach längeren Textänderungen, ob alle Inhalte ausreichend Platz haben.
• Responsive Ansichten beachten: Kontrollieren Sie die Darstellung nach größeren Layoutänderungen auf verschiedenen Bildschirmgrößen.
• Regelmäßig speichern: Sichern Sie Ihre Arbeit nach abgeschlossenen Bearbeitungsschritten.
• Frontend überprüfen: Die tatsächliche Webseite ist die entscheidende Kontrolle für das Ergebnis.

15. Wie geht es weiter?

Sie wissen jetzt, wie Sie bestehende Webseiten mit dem Smart-Editor bearbeiten und Ihre Änderungen kontrollieren können.

Ob Texte, Bilder, Schaltflächen oder ganze Inhaltsbereiche: Viele Anpassungen lassen sich direkt in der grafischen Bearbeitungsansicht vornehmen.

In den nächsten Anleitungen erfahren Sie, wie Sie Änderungen zuverlässig speichern und veröffentlichen, neue Seiten erstellen und vorhandene Inhalte weiter strukturieren können.

Als Nächstes empfehlen wir Ihnen die Anleitung „Änderungen speichern und veröffentlichen“. Dort beschäftigen wir uns ausführlicher mit den Speicherfunktionen des Smart-Editors und der Beitragsverwaltung von Joomla.