Mit dem Smart-Editor müssen Sie nicht jede Webseite vollständig selbst gestalten. Zahlreiche vorgefertigte Seitenvorlagen bieten Ihnen einen schnellen Einstieg und helfen dabei, ansprechende und übersichtliche Webseiten zu erstellen.

Eine Vorlage enthält bereits eine grundlegende Gestaltung mit passenden Inhaltsbereichen, Texten, Bildern und weiteren Elementen. Diese können Sie anschließend nach Ihren eigenen Vorstellungen verändern.

In dieser Anleitung erfahren Sie, wie Sie geeignete Seitenvorlagen auswählen, anpassen und für Ihre eigene Webseite verwenden.

1. Was ist eine Seitenvorlage?

Eine Seitenvorlage ist eine bereits vorbereitete Gestaltung, die Sie als Ausgangspunkt für eine neue Seite verwenden können.

Sie müssen dadurch nicht alle Texte, Bilder, Container und Inhaltsbereiche einzeln anlegen.

Stattdessen erhalten Sie eine vollständige Grundstruktur, die Sie anschließend mit Ihren eigenen Inhalten füllen.

Eine Seitenvorlage kann beispielsweise enthalten:

• Überschriften und Beschreibungstexte,
• Bilder und Hintergrundbilder,
• mehrspaltige Inhaltsbereiche,
• Schaltflächen und Verlinkungen,
• Bildergalerien,
• verschiedene Farben und Schriftgrößen,
• bereits angepasste Layouts für unterschiedliche Bildschirmgrößen.

Wichtig: Eine Seitenvorlage ist lediglich der Ausgangspunkt. Sie können die enthaltenen Elemente verändern, ergänzen oder entfernen.

2. Welche Arten von Seitenvorlagen gibt es?

Der Smart-Editor bietet verschiedene Möglichkeiten, eine neue Seite zu beginnen.

Leere Seiten

Bei einer leeren Seite beginnen Sie ohne vorgefertigte Inhaltsgestaltung.

Diese Variante eignet sich besonders, wenn Sie bereits eine genaue Vorstellung vom gewünschten Aufbau haben.

Einfache Layoutvorlagen

Einfache Layoutvorlagen, häufig auch Wireframes genannt, enthalten einen grundlegenden Seitenaufbau mit Platzhaltern für Texte und Bilder.

Sie geben Ihnen eine Struktur vor, ohne bereits eine vollständig ausgearbeitete Gestaltung festzulegen.

Das ist hilfreich, wenn Sie eigene Farben, Schriften und Bilder verwenden möchten, sich aber nicht selbst um die grundlegende Anordnung aller Elemente kümmern wollen.

Fertig gestaltete Seitenvorlagen

Fertig gestaltete Vorlagen enthalten bereits ein weitgehend vollständiges Design.

Sie können beispielsweise als Unternehmensvorstellung, Kontaktseite, Leistungsübersicht oder Portfolio gestaltet sein.

Sie ersetzen die vorhandenen Beispielinhalte durch Ihre eigenen Texte und Bilder und passen die Gestaltung bei Bedarf an.

3. Eine passende Vorlage auswählen

Beim Erstellen einer neuen Seite können Sie eine passende Vorlage aus den angebotenen Designs auswählen.

1. Melden Sie sich an der Joomla-Verwaltung Ihrer Webseite an.
2. Öffnen Sie die Funktion zum Erstellen einer neuen Smart-Editor-Seite.
3. Wählen Sie die Möglichkeit, eine vorgefertigte Seitenvorlage zu verwenden.
4. Durchsuchen Sie die angebotenen Designs.
5. Öffnen Sie gegebenenfalls die Vorschau einer interessanten Vorlage.
6. Wählen Sie die gewünschte Gestaltung aus.
7. Übernehmen Sie die Vorlage in Ihre neue Seite.

Die genaue Darstellung der Vorlagenauswahl kann abhängig von der installierten Smart-Editor-Version variieren.

Vorlagen nach Themen suchen

Die Vorlagen sind teilweise nach Themen und Einsatzzwecken gegliedert.

Typische Beispiele sind:

• Startseiten,
• Unternehmensvorstellungen,
• Dienstleistungen,
• Portfolios,
• Bildergalerien,
• Kontaktseiten,
• Landingpages.

Je nach Version stehen außerdem Such- und Filtermöglichkeiten zur Verfügung, mit denen Sie passende Designs schneller finden können.

Tipp: Achten Sie bei der Vorlagenauswahl vor allem auf die Anordnung der Inhalte. Bilder, Texte und Farben lassen sich später leichter ändern als eine vollständig ungeeignete Seitenstruktur.

4. Eine Vorlage in den Smart-Editor übernehmen

Wenn Sie eine geeignete Seitenvorlage gefunden haben, können Sie diese als Grundlage für Ihre neue Seite verwenden.

Nach der Übernahme wird das Design im grafischen Bearbeitungsbereich angezeigt.

Die enthaltenen Blöcke und Elemente lassen sich nun auswählen und bearbeiten.

Sie können beispielsweise:

• Beispieltexte ersetzen,
• Bilder austauschen,
• Schaltflächen anpassen,
• Inhaltsbereiche verschieben,
• nicht benötigte Elemente entfernen,
• weitere Blöcke hinzufügen.

Die ursprüngliche Vorlage dient dabei als Gestaltungshilfe.

Hinweis: Achten Sie bei der Auswahl darauf, dass Sie eine neue Seite erstellen und nicht versehentlich eine bereits vorhandene Seite überschreiben.

5. Beispieltexte durch eigene Inhalte ersetzen

Die meisten Seitenvorlagen enthalten bereits Beispielüberschriften und Platzhaltertexte.

Diese dienen lediglich dazu, die Gestaltung zu demonstrieren.

Für Ihre Webseite sollten Sie sämtliche Beispieltexte durch eigene Inhalte ersetzen.

Eine Überschrift ändern

1. Klicken Sie auf die gewünschte Überschrift.
2. Aktivieren Sie die Textbearbeitung.
3. Markieren Sie den vorhandenen Text.
4. Geben Sie Ihre eigene Überschrift ein.
5. Kontrollieren Sie die Darstellung.

Beschreibungstexte ersetzen

Verfahren Sie bei gewöhnlichen Textfeldern entsprechend.

Wenn Ihr eigener Text länger oder kürzer als der Beispieltext ist, kann sich dadurch der benötigte Platz verändern.

Überprüfen Sie deshalb gegebenenfalls die Höhe des Inhaltsbereichs und die Abstände zu anderen Elementen.

Tipp: Versuchen Sie nicht, Ihre Texte künstlich auf die Länge der ursprünglichen Beispieltexte zu bringen. Passen Sie lieber die Gestaltung an Ihre tatsächlichen Inhalte an.

6. Beispielbilder austauschen

Fertig gestaltete Vorlagen enthalten häufig bereits Bilder, die das Thema und das Erscheinungsbild der Vorlage veranschaulichen.

Diese können Sie durch eigene Fotos, Grafiken oder andere geeignete Bilddateien ersetzen.

1. Wählen Sie das gewünschte Bild aus.
2. Öffnen Sie die Funktion zum Austauschen des Bildes.
3. Wählen Sie eine vorhandene Bilddatei aus oder laden Sie ein neues Bild hoch.
4. Übernehmen Sie die Auswahl.
5. Kontrollieren Sie den Bildausschnitt und die Darstellung.

Auf das Seitenverhältnis achten

Ein neues Bild kann ein anderes Seitenverhältnis besitzen als das ursprünglich verwendete Beispielbild.

Wenn Sie beispielsweise ein Hochformatfoto in einen breiten Bildbereich einsetzen, werden möglicherweise Teile des Bildes abgeschnitten.

Passen Sie deshalb den Bildausschnitt oder die Größe des Bildbereichs entsprechend an.

Bilddateien nicht unnötig groß wählen

Große Bilddateien können die Ladezeit Ihrer Webseite beeinträchtigen.

Verwenden Sie möglichst für das Internet optimierte Bilddateien in ausreichender, aber nicht unnötig hoher Auflösung.

Wichtig: Verwenden Sie nur Bilder, für deren Veröffentlichung Sie die erforderlichen Nutzungsrechte besitzen. Achten Sie insbesondere bei ausgetauschten Vorlagenbildern darauf, welche Lizenzbedingungen für das jeweilige Bild gelten.

7. Farben und Schriftarten anpassen

Eine vorgefertigte Seitenvorlage muss nicht exakt die Farben und Schriftarten Ihrer bisherigen Webseite verwenden.

Sie können das Design deshalb an Ihr vorhandenes Erscheinungsbild anpassen.

Farben ändern

Wählen Sie das betreffende Element oder den gewünschten Inhaltsblock aus und öffnen Sie die entsprechenden Farbeinstellungen.

Je nach Element lassen sich beispielsweise Hintergrundfarben, Textfarben, Rahmenfarben oder Schaltflächenfarben verändern.

Schriftarten und Schriftgrößen ändern

Auch die Schriftgestaltung kann angepasst werden.

Achten Sie dabei auf eine einheitliche Darstellung Ihrer Überschriften und Fließtexte.

Tipp: Verwenden Sie nach Möglichkeit die bereits festgelegten Gestaltungsregeln Ihrer Webseite. Dadurch wirken neue Seiten wie ein zusammengehöriger Bestandteil Ihres Internetauftritts.

8. Nicht benötigte Inhaltsbereiche entfernen

Nicht jede Seitenvorlage passt vollständig zu Ihren Anforderungen.

Vielleicht enthält das ausgewählte Design eine Bildergalerie, obwohl Sie nur einen kurzen Beschreibungstext benötigen.

Solche Bereiche können Sie entfernen.

1. Öffnen Sie den Seiten-Navigator.
2. Wählen Sie den nicht benötigten Block aus.
3. Kontrollieren Sie, ob tatsächlich der richtige Inhaltsbereich ausgewählt ist.
4. Verwenden Sie die Funktion zum Entfernen des Blocks.
5. Prüfen Sie anschließend die Anordnung der verbleibenden Inhalte.

Sie können auch einzelne Elemente innerhalb eines Blocks entfernen, ohne gleich den gesamten Inhaltsbereich zu löschen.

Wichtig: Wenn Sie einen übergeordneten Container oder vollständigen Block entfernen, können auch sämtliche darin enthaltenen Elemente gelöscht werden.

9. Zusätzliche Blöcke hinzufügen

Wenn Ihre Vorlage nicht genügend Platz für alle geplanten Inhalte bietet, können Sie weitere Inhaltsblöcke ergänzen.

Dafür müssen Sie keine neue Seitenvorlage auswählen.

1. Öffnen Sie die Funktion zum Hinzufügen neuer Blöcke.
2. Wählen Sie einen leeren Block oder ein passendes Blockdesign.
3. Fügen Sie den Block an der gewünschten Stelle ein.
4. Ersetzen Sie gegebenenfalls vorhandene Beispielinhalte.
5. Passen Sie die Gestaltung an die übrige Seite an.

Sie können auch einen bereits vorhandenen Block duplizieren und anschließend verändern.

Dadurch lassen sich einheitliche Inhaltsbereiche besonders einfach erstellen.

Auf einheitliche Abstände achten

Wenn Sie zusätzliche Blöcke einfügen, sollten Sie die Abstände zwischen den einzelnen Bereichen kontrollieren.

Unterschiedlich große Abstände können eine eigentlich einheitliche Seite unruhig wirken lassen.

Tipp: Verwenden Sie für ähnliche Inhalte möglichst auch ähnlich aufgebaute Blöcke. Das erleichtert die Orientierung und sorgt für ein zusammenhängendes Erscheinungsbild.

10. Vorlagen für die eigene Webseite anpassen

Fertig gestaltete Vorlagen enthalten häufig ein vollständiges Beispielkonzept.

Sie sollten dieses jedoch nicht unbedingt unverändert übernehmen.

Eine Vorlage für ein Restaurant kann beispielsweise eine attraktive Galerie und einen großen Begrüßungsbereich enthalten.

Dieselbe Anordnung kann auch für einen Handwerksbetrieb oder ein kleines Unternehmen geeignet sein, wenn Sie die Inhalte entsprechend austauschen.

Die Gestaltung ist wichtiger als das ursprüngliche Thema

Bei der Vorlagenauswahl sollten Sie vor allem auf die Struktur achten.

Fragen Sie sich beispielsweise:

• Gibt es ausreichend Platz für meine Texte?
• Passt die Anzahl der Spalten zu meinen Inhalten?
• Kann ich meine Bilder sinnvoll unterbringen?
• Benötige ich alle vorhandenen Inhaltsbereiche?
• Ist die Vorlage auf Smartphones gut nutzbar?

Wenn diese Punkte passen, können Sie eine Vorlage häufig auch für ein anderes Thema verwenden als ursprünglich vorgesehen.

11. Die Smartphone-Ansichten überprüfen

Vorgefertigte Seitenvorlagen besitzen bereits eine responsive Gestaltung für unterschiedliche Bildschirmgrößen.

Diese ist jedoch auf die ursprünglichen Beispielinhalte abgestimmt.

Wenn Sie Texte verlängern, Bilder austauschen oder Elemente verschieben, kann es erforderlich sein, die Darstellung für Smartphones und Tablets anzupassen.

1. Wechseln Sie im Smart-Editor zur Tablet-Ansicht.
2. Kontrollieren Sie die Anordnung und Größe aller Elemente.
3. Wechseln Sie anschließend zu den Smartphone-Ansichten.
4. Achten Sie besonders auf Textumbrüche, Bildausschnitte und Abstände.
5. Korrigieren Sie die Darstellung bei Bedarf.
6. Prüfen Sie anschließend erneut die übrigen Bildschirmansichten.

Wenn sich Elemente überlagern

Überprüfen Sie die Größen und Positionen der betroffenen Elemente.

Besonders bei frei angeordneten Inhalten können längere Texte oder veränderte Abstände dazu führen, dass sich einzelne Bereiche überschneiden.

Wenn große Leerflächen entstehen

Prüfen Sie die Eigenschaften des betreffenden Blocks und der darin enthaltenen Container.

Ursachen können beispielsweise feste Höhen, übermäßige Innenabstände oder ungewöhnliche Außenabstände sein.

Wichtig: Die responsive Gestaltung einer Vorlage ist eine Ausgangsbasis, aber keine Garantie dafür, dass nach beliebigen Inhaltsänderungen sämtliche Bildschirmgrößen weiterhin korrekt dargestellt werden.

12. Den Unterschied zwischen Seitenvorlage und Joomla-Template verstehen

Im Zusammenhang mit dem Smart-Editor und Joomla wird der Begriff „Vorlage“ für unterschiedliche Dinge verwendet.

Diese sollten Sie nicht miteinander verwechseln.

Seitenvorlage im Smart-Editor

Eine Seitenvorlage enthält eine vorbereitete Gestaltung für die Inhalte einer einzelnen Seite.

Sie dient als Ausgangspunkt für Texte, Bilder, Inhaltsblöcke und weitere Gestaltungselemente.

Joomla-Template

Das Joomla-Template bestimmt den grundlegenden Aufbau und das Erscheinungsbild Ihrer Webseite.

Es kann beispielsweise Kopf- und Fußbereiche, Modulpositionen und weitere übergreifende Layoutvorgaben enthalten.

Ein Joomla-Template ist deshalb nicht dasselbe wie eine Seitenvorlage.

Beitragsvorlagen und Layouts

Zusätzlich können Joomla und der Smart-Editor besondere Darstellungen für Beitragsansichten verwenden.

Solche Layouts beeinflussen, wie Beiträge innerhalb des übergeordneten Webseiten-Designs angezeigt werden.

Wichtig: Wenn Sie lediglich eine neue Inhaltsseite gestalten möchten, benötigen Sie dafür normalerweise kein neues Joomla-Template.

13. Die fertige Seite speichern und veröffentlichen

Wenn Sie die Vorlage mit Ihren eigenen Inhalten versehen und die Darstellung überprüft haben, können Sie die neue Seite speichern.

1. Klicken Sie im Smart-Editor auf Speichern.
2. Warten Sie, bis der Speichervorgang abgeschlossen ist.
3. Schließen Sie den Smart-Editor über die vorgesehene Funktion.
4. Kontrollieren Sie den zugehörigen Joomla-Beitrag.
5. Vergeben Sie einen passenden Beitragstitel.
6. Wählen Sie die gewünschte Kategorie.
7. Prüfen Sie den Veröffentlichungsstatus und die Zugriffsebene.
8. Speichern Sie die Joomla-Beitragseinstellungen.

Wenn die Seite über ein Menü erreichbar sein soll, können Sie anschließend einen entsprechenden Menüeintrag erstellen.

Tipp: Veröffentlichen Sie eine neue Seite erst dann, wenn Sie sämtliche Beispieltexte, Bilder und Verlinkungen durch die gewünschten Inhalte ersetzt beziehungsweise überprüft haben.

14. Häufige Fehler bei der Verwendung von Seitenvorlagen

Mit einigen einfachen Vorgehensweisen vermeiden Sie typische Probleme bei der Arbeit mit vorgefertigten Designs.

• Vorlage nicht nur nach Bildern auswählen: Achten Sie vor allem auf die Anordnung und Struktur der Inhalte.
• Beispieltexte vollständig ersetzen: Kontrollieren Sie auch kleinere Beschriftungen und Schaltflächen.
• Verlinkungen überprüfen: Vorlagen können Beispielverknüpfungen enthalten, die nicht zu Ihrer Webseite passen.
• Bildgrößen beachten: Ein anderer Bildausschnitt kann die Darstellung verändern.
• Einheitlich gestalten: Passen Sie Farben und Schriften möglichst an Ihre bestehende Webseite an.
• Unnötige Blöcke entfernen: Behalten Sie nur die Inhaltsbereiche, die Sie tatsächlich benötigen.
• Responsive Ansichten kontrollieren: Änderungen an Texten und Bildern können die Darstellung auf kleineren Bildschirmen beeinflussen.
• Frontend überprüfen: Kontrollieren Sie die fertige Seite nach dem Speichern im Browser.

15. Wie geht es weiter?

Sie wissen jetzt, wie Sie vorgefertigte Seitenvorlagen im Smart-Editor auswählen und an Ihre eigenen Anforderungen anpassen können.

Mit passenden Vorlagen lassen sich auch umfangreichere Seiten schnell aufbauen, ohne jedes Gestaltungselement vollständig neu erstellen zu müssen.

In den nächsten Anleitungen beschäftigen wir uns ausführlicher mit dem Aufbau und der Bearbeitung einzelner Inhaltsblöcke.

Als Nächstes empfehlen wir Ihnen die Anleitung „Blöcke und Abschnitte verstehen“. Dort erfahren Sie, wie Inhaltsbereiche aufgebaut sind und welche Möglichkeiten Ihnen der Smart-Editor für deren Gestaltung bietet.