Bei der Arbeit mit dem Smart-Editor begegnen Ihnen verschiedene Begriffe wie Block, Container, Raster, Element oder Breakpoint. Diese Begriffe beschreiben den Aufbau Ihrer Webseite und die Möglichkeiten, ihre Inhalte zu gestalten.

Sie müssen dafür weder HTML noch CSS programmieren können. Ein grundlegendes Verständnis hilft Ihnen jedoch dabei, Ihre Webseite übersichtlicher aufzubauen und typische Gestaltungsprobleme zu vermeiden.

In dieser Anleitung erklären wir die wichtigsten Begriffe anhand praktischer Beispiele.

1. Seite, Block und Element – der grundlegende Aufbau

Eine mit dem Smart-Editor gestaltete Seite ist hierarchisch aufgebaut. Sie besteht aus mehreren Inhaltsbereichen, die wiederum unterschiedliche Gestaltungselemente enthalten.

Stellen Sie sich beispielsweise eine Unternehmenswebseite vor:

• Die Seite enthält sämtliche sichtbaren Inhalte.
• Ein Block bildet beispielsweise den Begrüßungsbereich.
• Innerhalb des Blocks befinden sich Elemente wie eine Überschrift, ein Bild und eine Schaltfläche.
• Container und Raster helfen dabei, diese Elemente sinnvoll anzuordnen.

Diese Struktur bildet die Grundlage für nahezu jede Gestaltung im Smart-Editor.

2. Was ist eine Seite (Page)?

Eine Seite ist ein eigenständiger Inhaltsbereich Ihrer Webseite, der über eine entsprechende Internetadresse aufgerufen werden kann.

Typische Beispiele sind die Startseite, eine Über-uns-Seite oder eine Kontaktseite.

Eine Seite kann aus wenigen oder aus zahlreichen Blöcken bestehen.

Im Smart-Editor gestalten Sie diese Inhalte grafisch, ohne dafür selbst HTML-Code schreiben zu müssen.

Wichtig für Joomla: Eine Seite im Smart-Editor ist nicht automatisch mit einem Joomla-Menüeintrag gleichzusetzen. Joomla verwaltet unter anderem Beiträge, Kategorien, Module und Menüeinträge. Der Smart-Editor übernimmt die visuelle Gestaltung der jeweiligen Inhalte.

3. Was ist ein Block (Block oder Section)?

Ein Block ist ein größerer, horizontaler Abschnitt einer Webseite. Häufig wird dafür auch der Begriff Section verwendet.

Stellen Sie sich eine Startseite mit folgenden Bereichen vor:

• Begrüßung mit großem Hintergrundbild,
• Vorstellung des Unternehmens,
• Übersicht der angebotenen Leistungen,
• Kundenbewertungen,
• Kontaktinformationen.

Jeder dieser Bereiche kann als eigenständiger Block gestaltet werden.

Welche Eigenschaften besitzt ein Block?

Ein Block kann verschiedene Gestaltungseigenschaften besitzen. Dazu gehören beispielsweise:

• Hintergrundfarben oder Hintergrundbilder,
• Höhe und Abmessungen,
• Abstände zu anderen Inhalten,
• die darin enthaltenen Elemente und Container,
• besondere Hintergrund- und Darstellungseffekte.

Blöcke können im Seiten-Navigator ausgewählt, verschoben, kopiert oder entfernt werden.

Warum mehrere Blöcke sinnvoll sind

Auch wenn Sie viele Elemente innerhalb eines einzigen Blocks unterbringen können, ist das nicht immer empfehlenswert.

Mehrere übersichtlich gegliederte Blöcke erleichtern die Bearbeitung und helfen dabei, Ihre Webseite für unterschiedliche Bildschirmgrößen anzupassen.

Tipp: Verwenden Sie möglichst für jeden größeren inhaltlichen Abschnitt einen eigenen Block. Dadurch lassen sich einzelne Bereiche später wesentlich einfacher umgestalten oder verschieben.

4. Was ist ein Element (Element)?

Als Element bezeichnet der Smart-Editor ein einzelnes Objekt, das Sie auf Ihrer Webseite einfügen und bearbeiten können.

Zu den häufig verwendeten Elementen gehören:

• Texte und Überschriften,
• Bilder,
• Schaltflächen,
• Symbole und Formen,
• Videos,
• Kontaktformulare,
• Tabellen,
• Galerien und Bild-Slider.

Jedes Element besitzt eigene Eigenschaften. Beispielsweise können Sie bei einem Text die Schriftgröße verändern, während bei einem Bild andere Einstellungen wie Bildausschnitt oder Darstellung zur Verfügung stehen.

Elemente können direkt innerhalb eines Blocks oder in einem übergeordneten Container beziehungsweise Raster platziert werden.

Elemente und ihre übergeordneten Bereiche

Wenn Sie ein Element auswählen, können Sie im Eigenschaftenfenster häufig auch zu dessen übergeordnetem Bereich wechseln.

Das ist wichtig, weil beispielsweise ein Textfeld, sein Container und der gesamte Block unterschiedliche Einstellungen besitzen können.

Beispiel: Möchten Sie den Hintergrund einer gesamten Textgruppe ändern, müssen Sie unter Umständen den Container auswählen und nicht das einzelne Textfeld.

5. Was ist ein Container (Box)?

Ein Container ist ein Gestaltungselement, das mehrere andere Elemente aufnehmen kann.

Im Smart-Editor wird hierfür unter anderem das Element Box verwendet.

Stellen Sie sich eine Informationskarte vor, die aus einer Überschrift, einem Beschreibungstext und einer Schaltfläche besteht.

Diese drei Elemente können gemeinsam in einer Box platziert werden.

Der Container kann beispielsweise einen eigenen Hintergrund, einen Rahmen, abgerundete Ecken und Innenabstände erhalten.

Warum Container hilfreich sind

Ein Container hält mehrere zusammengehörige Elemente in einem gemeinsamen Gestaltungsbereich.

Dadurch können Sie:

• Elemente übersichtlich zusammenfassen,
• einen gemeinsamen Hintergrund gestalten,
• Innenabstände festlegen,
• die Ausrichtung der enthaltenen Elemente steuern,
• zusammengehörige Inhalte leichter bearbeiten.

Container sind auch für die responsive Darstellung hilfreich, da sie die Anordnung und Ausrichtung der enthaltenen Elemente unterstützen.

6. Was ist eine Gruppe (Group)?

Eine Gruppe fasst mehrere Elemente zusammen, damit diese gemeinsam ausgewählt und bearbeitet werden können.

Das klingt zunächst ähnlich wie ein Container. Es gibt jedoch einen wichtigen Unterschied.

Gruppe und Container im Vergleich

Gruppe: Mehrere Elemente werden zu einer gemeinsamen Auswahl zusammengefasst. Sie lassen sich beispielsweise zusammen verschieben oder löschen.

Container: Die Elemente befinden sich innerhalb eines eigenen Gestaltungsbereichs. Dieser Bereich besitzt zusätzliche Eigenschaften wie Hintergrund, Rahmen und Innenabstand.

Eine Gruppe besitzt im Gegensatz zu einer Box keine eigenen Einstellungen für Hintergrund, Rahmen, Eckenradius oder Innenabstand.

Beispiel: Möchten Sie ein Symbol und eine Überschrift gemeinsam verschieben, kann eine Gruppe ausreichen. Soll beides zusätzlich auf einer farbigen Fläche mit Innenabstand stehen, ist ein Container die geeignetere Wahl.

Tipp: Verwenden Sie Gruppen vor allem, wenn mehrere Elemente gemeinsam behandelt werden sollen. Benötigen Sie einen eigenen Gestaltungsbereich, verwenden Sie einen Container.

7. Was ist ein Raster (Grid)?

Ein Raster ist ein Gestaltungselement, das Inhalte in Zeilen und Spalten aufteilt.

Im Smart-Editor wird dafür der Begriff Grid verwendet.

Ein Raster eignet sich besonders gut, wenn mehrere Inhalte nebeneinander dargestellt werden sollen.

Typische Beispiele sind:

• ein Bild links und ein Beschreibungstext rechts,
• drei nebeneinander angeordnete Leistungsangebote,
• mehrere Bilder in einer Galerieübersicht,
• eine Übersicht verschiedener Produkte oder Dienstleistungen.

Zeilen, Spalten und Zellen

Ein Raster besteht aus Zeilen (Rows) und Spalten (Columns).

Die einzelnen Bereiche innerhalb des Rasters werden als Zellen (Cells) bezeichnet.

Jede Zelle kann eigene Inhalte enthalten und individuell gestaltet werden.

Beispiel: Ein Raster mit zwei Spalten enthält links ein Bild und rechts eine Überschrift mit Beschreibungstext.

Warum Raster für Smartphones wichtig sind

Raster besitzen einen entscheidenden Vorteil: Ihre Zellen können abhängig von der verfügbaren Bildschirmbreite automatisch anders angeordnet werden.

Was auf einem großen Monitor nebeneinander erscheint, kann auf einem Smartphone untereinander dargestellt werden.

Damit lassen sich viele typische Probleme bei der mobilen Darstellung vermeiden.

Tipp: Verwenden Sie bei mehrspaltigen Layouts möglichst ein Raster, statt sämtliche Elemente unabhängig voneinander frei auf der Seite zu positionieren.

8. Was ist eine Raster-Wiederholung (Grid Repeater)?

Der Grid Repeater ist ein spezielles Raster für wiederkehrende Inhalte mit einem einheitlichen Aufbau.

Er eignet sich beispielsweise für:

• Produkt- oder Leistungsübersichten,
• Teammitglieder,
• Referenzen,
• gleichartig aufgebaute Informationskarten.

Der entscheidende Unterschied zu einem gewöhnlichen Raster liegt in der gemeinsamen Gestaltung der wiederholten Einträge.

Wenn Sie beispielsweise die Gestaltung eines Elements innerhalb eines Eintrags verändern, können entsprechende Änderungen automatisch auf die übrigen Einträge übertragen werden.

Die einzelnen Einträge können dabei unterschiedliche Inhalte besitzen.

Wann ist welches Raster sinnvoll?

Gewöhnliches Raster: Verwenden Sie dieses, wenn sich die einzelnen Zellen unabhängig voneinander gestalten lassen sollen.

Grid Repeater: Verwenden Sie diesen, wenn mehrere Einträge denselben gestalterischen Aufbau erhalten sollen.

Beispiel: Für drei vollkommen unterschiedliche Inhaltsbereiche ist ein normales Raster geeignet. Für sechs gleichartig gestaltete Mitarbeiterprofile kann ein Grid Repeater die Arbeit erheblich erleichtern.

9. Was bedeutet Layout?

Der Begriff Layout beschreibt die räumliche Anordnung und Gestaltung der Inhalte einer Webseite.

Dazu gehören unter anderem:

• Position und Größe von Elementen,
• Aufteilung in Zeilen und Spalten,
• Abstände zwischen den Inhalten,
• Schriftarten und Schriftgrößen,
• Farben und Hintergründe,
• Anordnung auf unterschiedlichen Bildschirmgrößen.

Ein gutes Layout soll nicht nur ansprechend aussehen, sondern auch übersichtlich, verständlich und auf verschiedenen Geräten gut bedienbar sein.

10. Was bedeuten Margin und Padding?

Diese beiden Begriffe gehören zu den wichtigsten Grundlagen der Webgestaltung.

Beide beschreiben Abstände, beziehen sich jedoch auf unterschiedliche Bereiche.

Margin – Außenabstand

Margin bezeichnet den Abstand eines Elements zu seiner Umgebung.

Ein Außenabstand kann dafür sorgen, dass beispielsweise zwischen zwei Textfeldern ausreichend Platz bleibt.

Außenabstände können für oben, rechts, unten und links getrennt eingestellt werden.

Padding – Innenabstand

Padding bezeichnet den Abstand zwischen dem Inhalt eines Elements und dessen innerer Begrenzung.

Stellen Sie sich einen Container mit farbigem Hintergrund und einem Text darin vor.

Ohne ausreichenden Innenabstand könnte der Text unmittelbar am Rand des Containers beginnen.

Durch Padding schaffen Sie innerhalb des Containers Platz zwischen dem Text und dem Rand.

Der Unterschied in der Praxis

Margin: Schafft Abstand außerhalb eines Elements.

Padding: Schafft Abstand innerhalb eines Elements.

Beispiel: Eine Informationskarte soll zu anderen Karten 20 Pixel Abstand besitzen. Dafür verwenden Sie einen Außenabstand beziehungsweise den vorgesehenen Rasterabstand.

Der Text innerhalb dieser Karte soll ebenfalls 20 Pixel Abstand zum Kartenrand haben. Dafür verwenden Sie Padding.

Wichtig: Überprüfen Sie bei unerwarteten Abständen nicht nur die oberen und linken Werte, sondern gegebenenfalls auch die Einstellungen für rechts und unten. Negative Außenabstände können zu Überlagerungen oder ungewöhnlichen Positionierungen führen.

11. Was bedeuten Width, Height und Alignment?

Mit diesen Einstellungen bestimmen Sie die Abmessungen und Ausrichtung von Elementen.

Width – Breite

Width bezeichnet die Breite eines Elements.

Je nach Element und Einstellung kann die Breite beispielsweise in Pixeln oder Prozent angegeben werden.

Eine prozentuale Breite orientiert sich am verfügbaren Platz innerhalb des übergeordneten Bereichs.

Height – Höhe

Height bezeichnet die Höhe eines Elements oder Containers.

Bei manchen Inhalten passt sich die Höhe automatisch an den enthaltenen Inhalt an. Bei anderen Elementen können feste oder vorgegebene Höhen verwendet werden.

Bei festen Höhen sollten Sie darauf achten, dass sämtliche Inhalte ausreichend Platz haben.

Alignment – Ausrichtung

Alignment beschreibt, wie Elemente innerhalb ihres verfügbaren Bereichs ausgerichtet werden.

Dabei wird grundsätzlich zwischen horizontaler und vertikaler Ausrichtung unterschieden.

Sie können Elemente beispielsweise links, mittig oder rechts beziehungsweise oben, mittig oder unten ausrichten.

Tipp: Verwenden Sie nach Möglichkeit die vorgesehenen Ausrichtungsfunktionen des Smart-Editors. Sie sind häufig zuverlässiger als das manuelle Verschieben einzelner Elemente um wenige Pixel.

12. Was bedeutet Responsive Design?

Responsive Design bezeichnet die Fähigkeit einer Webseite, sich an unterschiedliche Bildschirmgrößen anzupassen.

Eine Webseite soll sowohl auf einem großen Monitor als auch auf einem Tablet oder Smartphone gut dargestellt werden.

Der Smart-Editor bietet dafür verschiedene Bildschirmansichten, in denen Sie das Layout kontrollieren und verändern können.

Was ist ein Breakpoint?

Ein Breakpoint bezeichnet eine festgelegte Bildschirmbreite, an der andere Gestaltungsregeln für das Layout angewendet werden können.

Der Smart-Editor verwendet mehrere solcher Bereiche, beispielsweise für Desktop-Monitore, Tablets und Smartphones.

Je nach Bildschirmbreite kann sich dadurch die Anordnung der Inhalte verändern.

Was kann sich zwischen den Ansichten verändern?

Unter anderem können Sie folgende Eigenschaften anpassen:

• Schriftgrößen,
• Breiten und Höhen,
• Abstände,
• Positionen,
• Rasteranordnungen,
• Sichtbarkeit einzelner Elemente.

Ein dreispaltiges Raster kann beispielsweise auf einem Smartphone so dargestellt werden, dass die drei Zellen untereinander erscheinen.

Warum Änderungen mehrere Ansichten beeinflussen können

Die Gestaltung der verschiedenen Bildschirmansichten ist nicht vollständig voneinander unabhängig.

Der Smart-Editor erzeugt zunächst responsive Anpassungen und ermöglicht es Ihnen anschließend, einzelne Ansichten gezielt zu verändern.

Änderungen an Größen, Positionen oder übergeordneten Containern können deshalb Auswirkungen auf andere Ansichten haben.

Wichtig: Kontrollieren Sie nach größeren Layoutänderungen möglichst alle Bildschirmansichten. Besonders bei frei positionierten Elementen und komplexeren Strukturen können zusätzliche Anpassungen notwendig sein.

Die genaue Funktionsweise der Breakpoints erläutern wir in einer gesonderten Anleitung.

13. Was bedeutet freie Positionierung?

Der Smart-Editor bietet Ihnen die Möglichkeit, zahlreiche Elemente weitgehend frei innerhalb eines Blocks oder Containers anzuordnen.

Das erlaubt individuelle Gestaltungen, die mit starren Spaltenlayouts schwieriger umzusetzen wären.

Sie können beispielsweise Bilder überlagern, Texte seitlich versetzen oder ungewöhnliche grafische Anordnungen erstellen.

Diese Gestaltungsfreiheit erfordert jedoch eine sorgfältige Kontrolle der verschiedenen Bildschirmansichten.

Freie Positionierung oder Raster?

Beide Möglichkeiten haben ihre Vorteile.

Freie Positionierung: Besonders geeignet für individuelle grafische Gestaltungen und bewusst überlagerte Elemente.

Raster und Container: Besonders geeignet für strukturierte Inhalte, mehrspaltige Bereiche und Layouts, die sich flexibel an unterschiedliche Bildschirmgrößen anpassen sollen.

In der Praxis lassen sich beide Techniken miteinander kombinieren.

Tipp: Verwenden Sie die freie Positionierung gezielt dort, wo sie gestalterisch sinnvoll ist. Für gewöhnliche Text- und Bildbereiche sind Container und Raster häufig die wartungsfreundlichere Lösung.

14. Was sind Ebenen (Layers)?

Elemente einer Webseite können sich überlagern. Dabei liegt ein Element optisch vor oder hinter einem anderen.

Die Reihenfolge solcher Elemente wird als Ebenenreihenfolge bezeichnet.

Der Smart-Editor bietet Funktionen, mit denen Sie Elemente in der Reihenfolge nach vorne oder nach hinten verschieben können.

Beispiel: Eine Überschrift soll über einem dekorativen Bild erscheinen. Dazu muss die Überschrift in der richtigen Ebenenreihenfolge liegen.

Die Ebenenansicht im Seiten-Navigator hilft Ihnen außerdem dabei, einzelne Elemente innerhalb der Struktur gezielt auszuwählen.

Hinweis: Die strukturelle Anordnung im Navigator und die sichtbare Überlagerung von Elementen sind nicht immer dasselbe. Auch die Positionierung und weitere Layout-Eigenschaften beeinflussen die Darstellung.

15. Was bedeuten Header, Footer und Sidebar?

Diese Begriffe beschreiben häufig verwendete Bereiche einer Webseite.

Header – Kopfbereich

Der Header befindet sich normalerweise am oberen Rand einer Webseite.

Er enthält häufig das Firmenlogo, das Hauptmenü und gegebenenfalls weitere Bedienelemente.

Footer – Fußbereich

Der Footer befindet sich normalerweise am unteren Ende einer Webseite.

Dort stehen häufig Kontaktinformationen, rechtliche Verlinkungen oder ergänzende Navigationsmöglichkeiten.

Sidebar – Seitenleiste

Eine Sidebar ist ein seitlicher Inhaltsbereich, der beispielsweise eine zusätzliche Navigation, Informationen oder weitere Funktionen enthalten kann.

Auf schmalen Bildschirmen werden Seitenleisten häufig unterhalb oder oberhalb des eigentlichen Inhalts angeordnet.

Wichtig: Bei Joomla können solche Bereiche auch mit Modulpositionen und Template-Einstellungen zusammenhängen. Nicht jeder Inhalt des Headers, Footers oder einer Sidebar gehört deshalb unmittelbar zum aktuell bearbeiteten Beitrag.

16. Was sind Vorlagen und Presets?

Der Smart-Editor stellt vorgefertigte Gestaltungen bereit, mit denen Sie neue Inhalte schneller erstellen können.

Dabei begegnen Ihnen unterschiedliche Begriffe.

Designvorlagen (Templates und Designs)

Eine Designvorlage enthält eine bereits ausgearbeitete Gestaltung mit Farben, Schriftarten, Bildern und Inhaltsbereichen.

Sie können diese als Ausgangspunkt verwenden und anschließend an Ihre eigenen Anforderungen anpassen.

Presets – Gestaltungsvorgaben

Presets sind vorbereitete Einstellungen oder Strukturen, die Ihnen die Gestaltung bestimmter Elemente und Inhaltsbereiche erleichtern.

Je nach Funktion können sie beispielsweise eine bestimmte Anordnung, einen Stil oder eine Kombination mehrerer Gestaltungseigenschaften vorgeben.

Tipp: Vorlagen und Presets können die Arbeit erheblich beschleunigen. Achten Sie beim Einsatz jedoch darauf, dass neue Inhalte zum bestehenden Erscheinungsbild Ihrer Webseite passen.

17. Was bedeutet Drag & Drop?

Drag & Drop bedeutet, ein Element mit der Maus aufzunehmen und an einer anderen Stelle wieder abzulegen.

Im Smart-Editor wird diese Technik beispielsweise verwendet, um Bilder, Elemente oder Inhaltsbereiche zu verschieben.

1. Wählen Sie das gewünschte Element aus.
2. Halten Sie die Maustaste an der vorgesehenen Verschiebestelle gedrückt.
3. Bewegen Sie das Element zur gewünschten Position.
4. Lassen Sie die Maustaste los.

Während des Verschiebens unterstützt Sie der Smart-Editor häufig mit Markierungen und Ausrichtungshilfen.

Hinweis: Nicht jede Stelle eines Elements dient als Verschiebegriff. Bei Texten kann ein einfacher Mausklick beispielsweise zunächst die Textbearbeitung aktivieren.

18. Was bedeutet WYSIWYG?

WYSIWYG ist die Abkürzung für What You See Is What You Get. Sinngemäß bedeutet das: „Was Sie sehen, entspricht dem späteren Ergebnis.“

Der Smart-Editor arbeitet nach diesem Prinzip. Sie gestalten Ihre Webseite in einer grafischen Ansicht, die dem späteren Erscheinungsbild möglichst nahekommt.

Das erleichtert die Arbeit erheblich, weil Sie nicht selbst den vollständigen HTML- und CSS-Code erstellen müssen.

Allerdings kann die tatsächliche Darstellung im Browser von der Editoransicht abweichen, beispielsweise durch dynamische Inhalte, zusätzliche Erweiterungen oder besondere Layout-Eigenschaften.

Deshalb empfiehlt es sich, umfangreichere Änderungen auch auf der tatsächlichen Webseite zu kontrollieren.

19. Die wichtigsten Begriffe im Überblick

Zum Abschluss finden Sie die wichtigsten Begriffe noch einmal in kompakter Form:

• Page: Eine einzelne Seite Ihrer Webseite.
• Block / Section: Ein größerer horizontaler Inhaltsabschnitt.
• Element: Ein einzelnes Objekt wie Text, Bild oder Schaltfläche.
• Box / Container: Ein Gestaltungsbereich, der mehrere Elemente aufnehmen kann.
• Group: Eine Zusammenfassung mehrerer Elemente zur gemeinsamen Bearbeitung.
• Grid: Ein Raster aus Zeilen und Spalten.
• Cell: Eine einzelne Zelle innerhalb eines Rasters.
• Grid Repeater: Ein Raster mit wiederholten, einheitlich gestalteten Einträgen.
• Margin: Außenabstand eines Elements.
• Padding: Innenabstand eines Elements.
• Width / Height: Breite und Höhe.
• Alignment: Ausrichtung eines Elements.
• Responsive Design: Anpassung der Gestaltung an unterschiedliche Bildschirmgrößen.
• Breakpoint: Bildschirmbreite, ab der bestimmte Layoutregeln gelten.
• Layer: Ebene beziehungsweise Überlagerungsreihenfolge.
• Header: Kopfbereich einer Webseite.
• Footer: Fußbereich einer Webseite.
• Sidebar: Seitlicher Inhaltsbereich.
• Preset: Vorbereitete Gestaltungsvorgabe.
• Drag & Drop: Verschieben von Objekten mit der Maus.
• WYSIWYG: Grafische Bearbeitung mit unmittelbarer Darstellung des Ergebnisses.

20. Wie geht es weiter?

Sie kennen nun die wichtigsten Begriffe, die Ihnen bei der Arbeit mit dem Smart-Editor begegnen werden.

Insbesondere das Zusammenspiel zwischen Blöcken, Containern, Rastern und einzelnen Elementen ist eine wichtige Grundlage für die Gestaltung übersichtlicher und responsiver Webseiten.

Sie müssen sich nicht alle Begriffe sofort merken. Nutzen Sie diese Anleitung bei Bedarf als Nachschlagewerk.

In den nächsten Anleitungen beschäftigen wir uns mit der praktischen Bearbeitung und Verwaltung bestehender Webseiten sowie dem Speichern und Veröffentlichen Ihrer Änderungen.