Mit dem Smart-Editor können Sie nicht nur bestehende Webseiten bearbeiten, sondern auch vollständig neue Seiten erstellen.

Ob Sie Ihr Unternehmen ausführlicher vorstellen, eine zusätzliche Dienstleistung präsentieren oder eine neue Informationsseite veröffentlichen möchten: Der Smart-Editor bietet Ihnen zahlreiche Möglichkeiten, neue Inhalte individuell zu gestalten.

In dieser Anleitung erfahren Sie, wie Sie eine neue Seite anlegen, ein passendes Ausgangsdesign auswählen, eigene Inhalte hinzufügen und die fertige Seite über Joomla zugänglich machen.

1. Vor dem Erstellen einer neuen Seite

Bevor Sie mit der Gestaltung beginnen, sollten Sie kurz überlegen, welche Aufgabe die neue Seite erfüllen soll.

Möchten Sie beispielsweise eine zusätzliche Dienstleistung vorstellen, benötigen Sie möglicherweise eine Überschrift, einen Beschreibungstext, einige Bilder und eine Kontaktmöglichkeit.

Für eine umfangreichere Unternehmensvorstellung können dagegen mehrere Inhaltsbereiche sinnvoll sein.

Eine einfache Planung hilft Ihnen dabei, die neue Seite von Anfang an übersichtlich aufzubauen.

Eine sinnvolle Seitenstruktur überlegen

Viele Webseiten lassen sich in einige grundlegende Bereiche aufteilen:

• Einleitung mit Überschrift und kurzer Beschreibung,
• ausführliche Informationen zum Thema,
• ergänzende Bilder oder andere Medien,
• weiterführende Informationen oder Vorteile,
• Kontaktmöglichkeit beziehungsweise Handlungsaufforderung.

Diese Reihenfolge ist selbstverständlich nicht verpflichtend. Sie dient lediglich als mögliche Orientierung.

Tipp: Überlegen Sie zuerst, welche Informationen Ihre Besucher benötigen. Das passende Design lässt sich anschließend wesentlich leichter auswählen.

2. Eine neue Seite im Smart-Editor anlegen

Neue Seiten können Sie direkt aus der Joomla-Verwaltung über die entsprechende Funktion des Smart-Editors erstellen.

1. Melden Sie sich an der Joomla-Verwaltung Ihrer Webseite an.
2. Öffnen Sie den Menübereich des Smart-Editors.
3. Wählen Sie die Funktion Neue Seite beziehungsweise New Page.
4. Der Smart-Editor öffnet die Auswahl für das Ausgangsdesign.
5. Entscheiden Sie sich für eine leere Seite oder eine vorhandene Designvorlage.
6. Beginnen Sie mit der Gestaltung Ihrer neuen Seite.

Je nach installierter Version kann die Bezeichnung der Funktion geringfügig abweichen.

Hinweis: Bei der Arbeit mit Joomla wird die neue Smart-Editor-Seite als Joomla-Beitrag verwaltet. Titel, Kategorie, Veröffentlichungsstatus und weitere Beitragseinstellungen werden deshalb über Joomla festgelegt.

3. Eine leere Seite oder eine Vorlage wählen?

Beim Erstellen einer neuen Seite können Sie zwischen verschiedenen Ausgangspunkten wählen.

Welche Variante am besten geeignet ist, hängt davon ab, wie individuell Sie die neue Seite gestalten möchten.

Mit einer leeren Seite beginnen

Wenn Sie eine leere Seite auswählen, beginnen Sie ohne vorgefertigte Inhaltsgestaltung.

Sie können anschließend eigene Blöcke, Texte, Bilder und weitere Elemente hinzufügen.

Diese Möglichkeit eignet sich besonders, wenn Sie eine genaue Vorstellung vom gewünschten Layout haben oder die Gestaltung einer bereits vorhandenen Webseite gezielt fortsetzen möchten.

Eine Designvorlage verwenden

Der Smart-Editor bietet zahlreiche vorgefertigte Designs, die Sie als Ausgangspunkt verwenden können.

Solche Vorlagen enthalten bereits eine Anordnung verschiedener Inhalte, beispielsweise Überschriften, Bilder, Schaltflächen und mehrspaltige Bereiche.

Sie können diese Inhalte anschließend an Ihre eigenen Anforderungen anpassen.

Eine Vorlage kann viel Zeit sparen, wenn ihre grundlegende Gestaltung bereits zum gewünschten Ergebnis passt.

Tipp: Achten Sie bei der Auswahl einer Vorlage nicht nur auf die verwendeten Bilder und Farben. Entscheidend ist vor allem, ob der Aufbau der Vorlage zu Ihren geplanten Inhalten passt.

4. Den ersten Inhaltsblock hinzufügen

Eine Seite besteht im Smart-Editor aus einzelnen Inhaltsbereichen, die als Blöcke bezeichnet werden.

Ein Block kann beispielsweise eine Überschrift mit Beschreibungstext, eine Bildergalerie oder einen größeren Informationsbereich enthalten.

Wenn Sie eine leere Seite erstellt haben, können Sie zunächst einen passenden Block hinzufügen.

1. Öffnen Sie die Funktion zum Hinzufügen neuer Blöcke.
2. Wählen Sie einen leeren Block oder ein vorgefertigtes Blockdesign aus.
3. Fügen Sie den gewählten Block zur Seite hinzu.
4. Wählen Sie den neuen Block im Bearbeitungsbereich aus.
5. Passen Sie die enthaltenen Elemente und die Blockeigenschaften an.

Sie können beliebig weitere Blöcke ergänzen, um Ihre Seite Schritt für Schritt aufzubauen.

Leere Blöcke verwenden

Ein leerer Block eignet sich besonders für individuelle Gestaltungen.

Sie können selbst entscheiden, welche Elemente darin enthalten sein sollen und wie diese angeordnet werden.

Vorgefertigte Blockdesigns verwenden

Vorgefertigte Blöcke enthalten bereits eine bestimmte Anordnung von Elementen.

So können Sie beispielsweise einen Begrüßungsbereich, eine Galerie oder eine Leistungsübersicht schneller erstellen.

Die enthaltenen Beispieltexte und Bilder können anschließend durch Ihre eigenen Inhalte ersetzt werden.

5. Texte und Überschriften einfügen

Texte gehören zu den wichtigsten Bestandteilen einer Webseite. Sie vermitteln Informationen und helfen Besuchern dabei, sich auf Ihrer Seite zu orientieren.

Für eine neue Seite benötigen Sie in der Regel mindestens eine aussagekräftige Überschrift und einen passenden Beschreibungstext.

Eine Überschrift 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 ein Überschrift-Element.
4. Geben Sie Ihren gewünschten Text ein.
5. Passen Sie bei Bedarf Schriftgröße, Farbe und Ausrichtung an.

Einen Beschreibungstext hinzufügen

1. Fügen Sie ein Textelement hinzu.
2. Geben Sie Ihren Text ein.
3. Verwenden Sie bei Bedarf Absätze, Listen oder Hervorhebungen.
4. Kontrollieren Sie die Lesbarkeit und die Abstände zu anderen Elementen.

Tipp: Verwenden Sie für jede Seite eine eindeutige Hauptüberschrift. Weitere Überschriften sollten die Inhalte sinnvoll gliedern und nicht ausschließlich aus gestalterischen Gründen verwendet werden.

6. Bilder und weitere Elemente ergänzen

Nachdem Sie die grundlegenden Texte eingefügt haben, können Sie die Seite mit Bildern und anderen Gestaltungselementen ergänzen.

Je nach Inhalt kommen beispielsweise folgende Elemente infrage:

• Bilder und Bildergalerien,
• Schaltflächen,
• Symbole,
• Trennlinien und Formen,
• Videos,
• mehrspaltige Raster,
• Kontaktformulare und weitere interaktive Elemente.

Ein Bild hinzufügen

1. Wählen Sie den gewünschten Inhaltsbereich aus.
2. Fügen Sie ein Bildelement hinzu.
3. Wählen Sie ein vorhandenes Bild aus oder laden Sie eine neue Bilddatei hoch.
4. Platzieren Sie das Bild an der gewünschten Stelle.
5. Passen Sie bei Bedarf Größe und Bildausschnitt an.

Achten Sie darauf, dass die verwendeten Bilder zur Aussage der Seite passen und eine geeignete Dateigröße besitzen.

Eine Schaltfläche hinzufügen

Eine Schaltfläche kann Besucher beispielsweise zu einem Kontaktformular, einer Leistungsübersicht oder einer anderen Seite führen.

1. Fügen Sie ein Schaltflächen-Element hinzu.
2. Geben Sie eine verständliche Beschriftung ein.
3. Öffnen Sie die Linkeinstellungen.
4. Legen Sie das gewünschte Ziel fest.
5. Kontrollieren Sie die Darstellung und später auch die Funktion des Links.

Tipp: Verwenden Sie möglichst aussagekräftige Schaltflächentexte wie „Kontakt aufnehmen“ oder „Unsere Leistungen ansehen“ anstelle allgemeiner Bezeichnungen wie „Hier klicken“.

7. Die neue Seite übersichtlich gestalten

Eine gut gestaltete Seite zeichnet sich nicht dadurch aus, dass möglichst viele Effekte und Elemente verwendet werden.

Wichtiger ist eine klare Struktur, durch die Besucher die gewünschten Informationen schnell finden können.

Zusammengehörige Inhalte gruppieren

Verwenden Sie Container und Raster, um zusammengehörige Elemente sinnvoll anzuordnen.

So können Sie beispielsweise ein Bild mit einem Beschreibungstext kombinieren oder mehrere Leistungsangebote nebeneinander darstellen.

Einheitliche Farben und Schriftarten verwenden

Orientieren Sie sich möglichst am bereits vorhandenen Erscheinungsbild Ihrer Webseite.

Wenn beispielsweise Überschriften und Schaltflächen auf anderen Seiten bestimmte Farben verwenden, sollten Sie diese Gestaltung auch auf der neuen Seite berücksichtigen.

Dadurch entsteht ein einheitliches Erscheinungsbild.

Ausreichend Abstand lassen

Texte, Bilder und andere Elemente benötigen genügend Platz, damit sie übersichtlich wirken.

Nutzen Sie dafür die vorgesehenen Abstands- und Ausrichtungsfunktionen des Smart-Editors.

Tipp: Verwenden Sie für gewöhnliche mehrspaltige Inhalte möglichst Container und Raster. Eine vollständig freie Positionierung ist nicht für jede Gestaltungsaufgabe notwendig und kann die spätere Anpassung an unterschiedliche Bildschirmgrößen erschweren.

8. Die Darstellung auf verschiedenen Geräten kontrollieren

Bevor Sie die neue Seite veröffentlichen, sollten Sie deren Darstellung auf unterschiedlichen Bildschirmgrößen überprüfen.

Der Smart-Editor stellt dafür verschiedene responsive Ansichten bereit.

1. Wählen Sie zunächst eine große Bildschirmansicht aus.
2. Kontrollieren Sie die Anordnung Ihrer Inhalte.
3. Wechseln Sie anschließend zu einer Tablet-Ansicht.
4. Prüfen Sie Texte, Bilder, Abstände und die Anordnung der Elemente.
5. Wechseln Sie zu den Smartphone-Ansichten.
6. Nehmen Sie bei Bedarf entsprechende Anpassungen vor.
7. Kontrollieren Sie zum Abschluss erneut die übrigen Ansichten.

Typische Darstellungsprobleme

Achten Sie insbesondere auf folgende Auffälligkeiten:

• Texte ragen über den verfügbaren Bereich hinaus.
• Bilder oder andere Elemente überlagern sich unbeabsichtigt.
• Abstände zwischen einzelnen Bereichen sind ungewöhnlich groß.
• Schaltflächen sind zu klein oder schwer zu bedienen.
• Inhalte werden abgeschnitten oder sind nicht vollständig sichtbar.

Wichtig: Änderungen innerhalb einer Bildschirmansicht können Auswirkungen auf andere Ansichten haben. Kontrollieren Sie deshalb nach größeren Anpassungen stets die gesamte responsive Gestaltung.

9. Die neue Seite im Smart-Editor speichern

Wenn Sie mit der grundlegenden Gestaltung zufrieden sind, können Sie Ihre Arbeit speichern.

1. Klicken Sie in der oberen Werkzeugleiste des Smart-Editors auf Speichern.
2. Warten Sie, bis der Speichervorgang abgeschlossen ist.
3. Schließen Sie den Smart-Editor über die vorgesehene Funktion.
4. Öffnen beziehungsweise überprüfen Sie anschließend die Einstellungen des zugehörigen Joomla-Beitrags.

Die gestalteten Inhalte werden als Bestandteil eines Joomla-Beitrags verwaltet.

Hinweis: Die Speicherung der grafischen Inhalte im Smart-Editor und die Speicherung der Joomla-Beitragseinstellungen sind voneinander zu unterscheiden.

10. Titel, Kategorie und Veröffentlichungsstatus festlegen

Nach dem Erstellen Ihrer Seite können Sie in Joomla die zugehörigen Beitragseinstellungen kontrollieren.

Den Beitragstitel eingeben

Vergeben Sie einen kurzen und verständlichen Titel, der den Inhalt Ihrer neuen Seite beschreibt.

Beispielsweise:

• Unsere Leistungen
• Über unser Unternehmen
• Aktuelle Angebote
• Kontakt und Anfahrt

Der Beitragstitel wird von Joomla verwaltet und kann abhängig vom verwendeten Template auch auf der Webseite angezeigt werden.

Eine Kategorie auswählen

Joomla organisiert Beiträge mithilfe von Kategorien.

Wählen Sie eine passende Kategorie für Ihre neue Seite aus.

Welche Kategorien verfügbar sind, hängt von der Einrichtung Ihrer Webseite ab.

Den Veröffentlichungsstatus festlegen

Wenn die neue Seite öffentlich zugänglich sein soll, stellen Sie den Status auf Veröffentlicht.

Wenn Sie die Inhalte zunächst vorbereiten möchten, können Sie den Beitrag vorerst unveröffentlicht lassen.

Kontrollieren Sie außerdem die Zugriffsebene und gegebenenfalls den Veröffentlichungszeitraum.

Speichern Sie anschließend die Joomla-Beitragseinstellungen.

11. Die neue Seite mit dem Menü verknüpfen

Eine neue Seite wird nicht automatisch als zusätzlicher Menüpunkt auf Ihrer Webseite angezeigt.

Wenn Ihre Besucher die Seite über das Hauptmenü oder ein anderes Navigationsmenü erreichen sollen, muss ein entsprechender Menüeintrag vorhanden sein.

Joomla bietet hierfür eine eigene Menüverwaltung.

Einen Menüeintrag in Joomla erstellen

1. Öffnen Sie die Joomla-Verwaltung.
2. Wechseln Sie in den Bereich Menüs.
3. Wählen Sie das gewünschte Menü aus.
4. Erstellen Sie einen neuen Menüeintrag.
5. Wählen Sie als Menüeintragstyp Beiträge > Einzelner Beitrag.
6. Wählen Sie den zuvor erstellten Joomla-Beitrag aus.
7. Vergeben Sie einen passenden Menütitel.
8. Legen Sie bei Bedarf einen übergeordneten Menüeintrag fest.
9. Speichern Sie den neuen Menüeintrag.

Die Seite ist nun über den entsprechenden Menüpunkt erreichbar, sofern auch der Menüeintrag veröffentlicht ist und die Zugriffsrechte dies erlauben.

Menüs direkt im Smart-Editor bearbeiten

Der Smart-Editor bietet außerdem Funktionen zur visuellen Bearbeitung vorhandener Joomla-Menüs.

Damit können Sie beispielsweise Menüeinträge hinzufügen, umbenennen oder ihre Reihenfolge verändern.

Beachten Sie dabei, dass Änderungen an einem gemeinsam verwendeten Menü auch auf anderen Seiten sichtbar werden können.

Wichtig: Eine Seite muss nicht zwingend einen eigenen Menüeintrag besitzen. Sie kann beispielsweise auch über eine Schaltfläche, einen Textlink oder eine Beitragsübersicht erreichbar sein.

12. Die neue Seite im Browser überprüfen

Nachdem Sie Ihre neue Seite gespeichert und veröffentlicht haben, sollten Sie sie im Frontend kontrollieren.

1. Öffnen Sie Ihre Webseite in einem neuen Browser-Tab.
2. Rufen Sie die neue Seite auf.
3. Überprüfen Sie Überschriften, Texte und Bilder.
4. Testen Sie die vorhandenen Schaltflächen und Verlinkungen.
5. Kontrollieren Sie die Darstellung auf unterschiedlichen Bildschirmgrößen.
6. Achten Sie auf ungewöhnliche Abstände oder überlagerte Elemente.

Die tatsächliche Darstellung im Browser ist besonders wichtig, wenn die Seite dynamische Joomla-Inhalte oder zusätzliche Module enthält.

Wenn die Seite nicht erscheint

Überprüfen Sie zunächst folgende Einstellungen:

• Ist der Joomla-Beitrag veröffentlicht?
• Ist die zugehörige Kategorie veröffentlicht?
• Erlaubt die Zugriffsebene den gewünschten Besuchern den Aufruf?
• Ist gegebenenfalls der Menüeintrag veröffentlicht?
• Verweist der Menüeintrag auf den richtigen Beitrag?
• Liegt der Veröffentlichungsbeginn möglicherweise in der Zukunft?

Falls die Seite weiterhin nicht erscheint oder Änderungen fehlen, kann auch ein aktiver Cache beteiligt sein.

Tipp: Öffnen Sie die neue Seite testweise direkt über ihre Internetadresse. So können Sie leichter unterscheiden, ob das Problem bei der Seite selbst oder bei der Navigation liegt.

13. Eine bestehende Seite als Ausgangspunkt verwenden

Wenn Ihre neue Seite ähnlich aussehen soll wie eine bereits vorhandene, müssen Sie nicht unbedingt wieder bei einer leeren Seite beginnen.

Je nach verfügbarer Funktion können Sie eine bestehende Smart-Editor-Seite beziehungsweise deren Inhalte kopieren und als Grundlage für eine neue Gestaltung verwenden.

Das ist besonders sinnvoll, wenn mehrere Seiten denselben grundsätzlichen Aufbau besitzen sollen.

Warum Kopieren sinnvoll sein kann

Sie übernehmen dadurch beispielsweise:

• bereits abgestimmte Abstände,
• einheitliche Schriftgrößen,
• vorhandene Rasterstrukturen,
• gestaltete Schaltflächen,
• bewährte responsive Einstellungen.

Die kopierten Inhalte können anschließend durch neue Texte und Bilder ersetzt werden.

Wichtig: Kontrollieren Sie bei einer kopierten Seite sämtliche Verlinkungen und Inhalte. Sonst kann es passieren, dass Schaltflächen weiterhin auf das ursprüngliche Ziel verweisen oder alte Angaben übernommen werden.

Achten Sie außerdem darauf, dass die Kopierfunktion die Smart-Editor-Gestaltung vollständig übernimmt. Eine gewöhnliche Joomla-Beitragskopie muss nicht zwangsläufig alle zusätzlichen Layoutdaten des Editors enthalten.

14. Tipps für neue Seiten

Mit einigen einfachen Grundregeln erleichtern Sie sich die Gestaltung und spätere Pflege Ihrer Webseite.

• Inhalte zuerst planen: Überlegen Sie, welche Informationen auf der Seite stehen sollen, bevor Sie eine aufwendige Gestaltung beginnen.
• Vorhandenes Design beachten: Verwenden Sie möglichst die bereits festgelegten Farben, Schriftarten und Gestaltungsregeln Ihrer Webseite.
• Blöcke sinnvoll aufteilen: Erstellen Sie für größere inhaltliche Abschnitte eigene Blöcke.
• Raster und Container verwenden: Diese erleichtern häufig die Anordnung und responsive Anpassung der Inhalte.
• Regelmäßig speichern: Sichern Sie abgeschlossene Arbeitsschritte.
• Alle Bildschirmansichten kontrollieren: Achten Sie besonders auf Abstände und die Positionierung von Elementen.
• Verlinkungen prüfen: Testen Sie neue Schaltflächen und Menüeinträge nach der Veröffentlichung.
• Frontend kontrollieren: Überprüfen Sie das fertige Ergebnis auf der tatsächlichen Webseite.

15. Wie geht es weiter?

Sie wissen jetzt, wie Sie eine neue Seite im Smart-Editor erstellen, mit eigenen Inhalten gestalten und anschließend über Joomla veröffentlichen.

Sie haben außerdem gelernt, wie sich eine Seite in die Navigation Ihrer Webseite einbinden lässt.

In den weiterführenden Anleitungen beschäftigen wir uns unter anderem mit der Verwaltung, dem Kopieren und dem Löschen von Seiten sowie mit den vielfältigen Gestaltungsmöglichkeiten einzelner Blöcke und Elemente.

Als Nächstes empfehlen wir Ihnen die Anleitung „Seiten bearbeiten und umbenennen“. Dort erfahren Sie, wie Sie bestehende Seiten verwalten und deren Eigenschaften nachträglich verändern können.