Eine Webseite besteht aus verschiedenen Bereichen, die zusammen das vollständige Erscheinungsbild ergeben. Im Smart-Editor werden diese Inhaltsbereiche als Blöcke bezeichnet.

Blöcke bilden die Grundlage für die Gestaltung Ihrer Webseite. Sie können Texte, Bilder, Schaltflächen, Raster und zahlreiche weitere Elemente enthalten.

In dieser Anleitung erfahren Sie, wie Blöcke aufgebaut sind, welche Aufgaben sie erfüllen und wie sie mit den darin enthaltenen Elementen zusammenarbeiten.

1. Was ist ein Block?

Ein Block ist ein eigenständiger Inhaltsbereich innerhalb einer Webseite.

Er kann aus einem einzelnen Element bestehen oder zahlreiche unterschiedliche Inhalte enthalten.

Typische Beispiele für Blöcke sind:

• Ein Begrüßungsbereich mit Überschrift und Hintergrundbild,
• eine Unternehmensvorstellung mit Text und Foto,
• eine Übersicht verschiedener Dienstleistungen,
• eine Bildergalerie,
• ein Bereich mit Kundenbewertungen,
• ein Kontaktbereich mit Anschrift und Schaltfläche.

Mehrere solcher Blöcke bilden zusammen den Inhalt einer vollständigen Webseite.

Wichtig: Ein Block ist nicht mit einer vollständigen Webseite gleichzusetzen. Eine Seite besteht normalerweise aus mehreren Blöcken, die untereinander angeordnet sind.

2. Der grundsätzliche Aufbau einer Webseite

Um die Arbeitsweise des Smart-Editors besser zu verstehen, hilft es, sich die Struktur einer Webseite vorzustellen.

Eine einfache Unternehmensseite könnte beispielsweise aus fünf aufeinanderfolgenden Blöcken bestehen.

Block 1: Begrüßung

Der erste Block enthält eine große Überschrift, einen kurzen Einführungstext und möglicherweise ein Hintergrundbild.

Block 2: Unternehmensvorstellung

Hier werden das Unternehmen und seine Tätigkeit beschrieben. Neben dem Text könnte sich ein Foto befinden.

Block 3: Leistungen

Dieser Block stellt mehrere Dienstleistungen nebeneinander dar, beispielsweise mit Symbolen, Überschriften und kurzen Beschreibungen.

Block 4: Bildergalerie

Mehrere Bilder geben Besuchern einen Einblick in die Arbeit oder die angebotenen Produkte.

Block 5: Kontakt

Am Ende der Seite befindet sich eine Kontaktmöglichkeit oder eine Schaltfläche zur Kontaktseite.

Jeder dieser Blöcke kann unabhängig von den anderen gestaltet und bearbeitet werden.

Tipp: Eine Aufteilung in übersichtliche Inhaltsblöcke erleichtert nicht nur die Gestaltung, sondern auch spätere Änderungen. Wenn sich beispielsweise Ihre Kontaktdaten ändern, finden Sie den entsprechenden Bereich schneller wieder.

3. Was ist der Unterschied zwischen Block und Abschnitt?

Im Zusammenhang mit Webseiten werden häufig die Begriffe Block und Abschnitt verwendet.

Beide bezeichnen meist einen größeren, zusammenhängenden Inhaltsbereich.

Der Smart-Editor verwendet für diese Bereiche hauptsächlich den Begriff Block. In englischsprachigen Anleitungen werden solche Abschnitte teilweise auch als Sections bezeichnet.

Für die praktische Arbeit können Sie sich merken:

• Eine Seite enthält mehrere Inhaltsblöcke.
• Ein Block enthält die eigentlichen Gestaltungselemente.
• Die Elemente können direkt im Block oder innerhalb weiterer Container und Raster liegen.

Die einzelnen Blöcke werden üblicherweise untereinander angeordnet.

4. Aus welchen Bestandteilen besteht ein Block?

Ein Block kann verschiedene Arten von Elementen enthalten.

Dazu gehören beispielsweise Texte, Bilder, Schaltflächen und Formen.

Für komplexere Gestaltungen stehen außerdem Container, Raster und weitere Layout-Elemente zur Verfügung.

Texte und Überschriften

Texte vermitteln die Informationen Ihrer Webseite. Überschriften helfen dabei, diese Informationen sinnvoll zu gliedern.

Bilder und andere Medien

Bilder ergänzen die Inhalte und können die Gestaltung eines Blocks wesentlich beeinflussen.

Neben gewöhnlichen Bildern können je nach verwendetem Element auch Videos oder andere Medien eingebunden werden.

Schaltflächen und Links

Schaltflächen ermöglichen es Besuchern, weitere Seiten oder bestimmte Funktionen aufzurufen.

Container

Container dienen dazu, mehrere Elemente innerhalb eines gemeinsamen Bereichs zusammenzufassen.

Sie können beispielsweise einen Beschreibungstext, ein Bild und eine Schaltfläche enthalten.

Raster

Raster erleichtern die Anordnung von Inhalten in mehreren Spalten oder Zellen.

Sie eignen sich beispielsweise für Leistungsübersichten oder die Kombination von Bildern und Texten.

Tipp: Verwenden Sie Container und Raster immer dann, wenn mehrere Elemente eine gemeinsame inhaltliche oder gestalterische Einheit bilden sollen.

5. Den Aufbau eines Blocks verstehen

Ein Block kann aus mehreren ineinander verschachtelten Bestandteilen bestehen.

Ein typischer Aufbau könnte folgendermaßen aussehen:

• Block
  • Raster
    • Erste Rasterzelle
      • Überschrift
      • Beschreibungstext
      • Schaltfläche
    • Zweite Rasterzelle
      • Bild

Der Block enthält in diesem Beispiel ein Raster mit zwei Zellen.

In der ersten Zelle befinden sich die Texte und eine Schaltfläche. Die zweite Zelle enthält ein Bild.

Diese Struktur ermöglicht es, die Inhalte gemeinsam anzuordnen und ihre Darstellung für verschiedene Bildschirmgrößen anzupassen.

Wichtig: Wenn Sie ein übergeordnetes Element verändern, kann sich diese Änderung auf sämtliche darin enthaltenen Elemente auswirken.

6. Einen Block auswählen

Bevor Sie die Eigenschaften eines Blocks verändern können, müssen Sie diesen auswählen.

Dafür stehen Ihnen im Smart-Editor verschiedene Möglichkeiten zur Verfügung.

Direkt im Bearbeitungsbereich

Bewegen Sie den Mauszeiger über den gewünschten Inhaltsbereich.

Der Smart-Editor zeigt passende Markierungen beziehungsweise Bedienelemente an, über die Sie den Block auswählen können.

Achten Sie darauf, tatsächlich den gesamten Block und nicht nur ein enthaltenes Element auszuwählen.

Über den Seiten-Navigator

Alternativ können Sie einen Block über den Seiten-Navigator auswählen.

1. Öffnen Sie den Seiten-Navigator.
2. Suchen Sie den gewünschten Inhaltsbereich.
3. Klicken Sie auf dessen Vorschau beziehungsweise Eintrag.
4. Der entsprechende Block wird zur Bearbeitung ausgewählt.

Der Seiten-Navigator ist besonders hilfreich, wenn Ihre Webseite viele Blöcke enthält.

Tipp: Wenn Sie einen gesamten Inhaltsbereich verändern möchten, ist die Auswahl über den Seiten-Navigator häufig einfacher als das Anklicken eines einzelnen Elements im Bearbeitungsbereich.

7. Block und Element unterscheiden

Bei der Arbeit mit dem Smart-Editor ist es wichtig, zwischen einem vollständigen Block und den darin enthaltenen Elementen zu unterscheiden.

Wenn Sie beispielsweise einen Text anklicken, wird zunächst das betreffende Textelement ausgewählt.

Änderungen an dessen Schriftgröße oder Textfarbe betreffen normalerweise dieses Element.

Wenn Sie dagegen den gesamten Block auswählen, können Sie Eigenschaften des übergeordneten Inhaltsbereichs bearbeiten.

Dazu gehören beispielsweise:

• Hintergrundfarbe,
• Hintergrundbild,
• Blockhöhe,
• Innenabstände,
• die Anordnung und Position enthaltener Elemente.

Beispiel: Wenn Sie den Hintergrund hinter einer vollständigen Leistungsübersicht verändern möchten, sollten Sie den betreffenden Block beziehungsweise dessen Hintergrund auswählen und nicht die Textfelder innerhalb des Blocks.

8. Die Höhe eines Blocks verstehen

Die Höhe eines Blocks bestimmt, wie viel vertikalen Platz dieser Inhaltsbereich auf der Webseite einnimmt.

Ein Block kann seine Höhe aus den enthaltenen Elementen und deren Abständen erhalten. Je nach Gestaltung können aber auch bestimmte Größen festgelegt werden.

Blöcke mit wenig Inhalt

Ein Block mit einer kurzen Überschrift benötigt normalerweise weniger Platz als ein Block mit mehreren längeren Texten und Bildern.

Blöcke mit festgelegten Größen

Bei bestimmten Gestaltungen kann eine vorgegebene Mindesthöhe oder andere Höhenangabe sinnvoll sein.

Das wird beispielsweise häufig bei großen Begrüßungsbereichen mit Hintergrundbild verwendet.

Was passiert bei längeren Texten?

Wenn ein Text länger wird, benötigt er möglicherweise zusätzlichen Platz.

Bei einer ungünstig festgelegten Blockhöhe kann es dadurch vorkommen, dass Inhalte über den vorgesehenen Bereich hinausragen oder sich mit nachfolgenden Elementen überschneiden.

Tipp: Verwenden Sie feste Größen nur dort, wo sie für die Gestaltung tatsächlich benötigt werden. Inhaltsbereiche, die sich an ihre Texte anpassen können, sind häufig leichter zu pflegen.

9. Innenabstände und Außenabstände verstehen

Abstände spielen bei der Gestaltung von Blöcken eine wichtige Rolle.

Sie bestimmen unter anderem, wie viel Platz zwischen einzelnen Elementen und den Begrenzungen eines Inhaltsbereichs vorhanden ist.

Innenabstand (Padding)

Der Innenabstand beschreibt den Abstand zwischen dem Inhalt eines Bereichs und seiner Begrenzung.

Ein Block mit einem großzügigen oberen und unteren Innenabstand wirkt häufig offener und übersichtlicher.

Außenabstand (Margin)

Der Außenabstand beschreibt den Abstand eines Elements zu seiner Umgebung.

Er kann beispielsweise verwendet werden, um Abstand zwischen einer Überschrift und einem nachfolgenden Text herzustellen.

Warum entstehen manchmal ungewöhnliche Abstände?

Wenn mehrere Elemente eigene Innen- und Außenabstände besitzen, können sich deren Auswirkungen auf die gesamte Gestaltung bemerkbar machen.

Ein ungewöhnlich großer Abstand entsteht deshalb nicht unbedingt durch den Block selbst. Die Ursache kann auch bei einem enthaltenen Container oder Element liegen.

Wichtig: Nicht sämtliche Abstandseinstellungen werden im Eigenschaftenfenster immer gleichzeitig angezeigt. Überprüfen Sie bei Layoutproblemen auch zusätzliche beziehungsweise eingeklappte Einstellungsbereiche.

10. Hintergrundfarben und Hintergrundbilder

Blöcke können unterschiedliche Hintergrundgestaltungen besitzen.

Dadurch lassen sich einzelne Inhaltsbereiche optisch voneinander trennen.

Eine Hintergrundfarbe verwenden

Wählen Sie den gewünschten Block und öffnen Sie dessen Hintergrund- beziehungsweise Farbeinstellungen.

Verwenden Sie eine Farbe, die zum Erscheinungsbild Ihrer Webseite passt.

Ein Hintergrundbild verwenden

Statt einer einfachen Farbe können Sie auch ein Bild als Blockhintergrund verwenden.

Diese Gestaltung eignet sich besonders für Begrüßungsbereiche oder hervorgehobene Abschnitte.

Achten Sie darauf, dass Texte auf dem Hintergrund gut lesbar bleiben.

Auf ausreichenden Kontrast achten

Wenn sich Text vor einem Bild befindet, kann dieser je nach Motiv schwer lesbar werden.

Eine passende Textfarbe oder eine zusätzliche Farbüberlagerung kann die Lesbarkeit verbessern.

Tipp: Verwenden Sie unterschiedliche Hintergrundgestaltungen gezielt, um wichtige Abschnitte hervorzuheben. Zu viele wechselnde Farben und Hintergrundbilder können eine Seite unruhig wirken lassen.

11. Blöcke und responsive Gestaltung

Eine moderne Webseite muss auf unterschiedlichen Bildschirmgrößen funktionieren.

Deshalb können sich die Anordnung und Darstellung der Inhalte eines Blocks je nach verfügbarem Platz verändern.

Darstellung auf großen Bildschirmen

Auf einem großen Bildschirm können beispielsweise Text und Bild nebeneinander dargestellt werden.

Darstellung auf Smartphones

Auf einem schmalen Smartphone-Bildschirm ist für dieselbe Anordnung möglicherweise nicht genügend Platz vorhanden.

Dann können die Inhalte untereinander angeordnet werden.

Bei einer passenden Rastergestaltung erfolgt diese Anpassung teilweise automatisch. Andere Layouts benötigen zusätzliche Einstellungen.

Warum können Probleme entstehen?

Wenn Elemente frei positioniert oder mit ungünstigen Größen und Abständen versehen wurden, kann ihre Darstellung auf kleineren Bildschirmen problematisch werden.

Typische Probleme sind:

• überlagerte Texte und Bilder,
• abgeschnittene Inhalte,
• ungewöhnlich große Leerflächen,
• zu kleine Schaltflächen,
• Elemente außerhalb des sichtbaren Bereichs.

Wichtig: Kontrollieren Sie nach größeren Änderungen an einem Block immer auch die anderen Bildschirmansichten. Eine Änderung in der Desktop-Ansicht kann Auswirkungen auf die Gestaltung bei kleineren Bildschirmgrößen haben.

12. Blöcke und gemeinsam verwendete Seitenbereiche

Nicht jeder sichtbare Inhaltsbereich einer Webseite gehört zu einem gewöhnlichen Joomla-Beitrag.

Bestimmte Bereiche werden übergreifend verwendet und können beispielsweise Bestandteil des Joomla-Templates sein.

Dazu gehören häufig:

• der Kopfbereich mit Logo und Navigation,
• der Fußbereich mit rechtlichen Hinweisen,
• bestimmte Seitenleisten,
• global eingebundene Joomla-Module.

Solche Bereiche können auf zahlreichen Seiten gleichzeitig angezeigt werden.

Gewöhnliche Inhaltsblöcke

Diese befinden sich innerhalb der jeweiligen Smart-Editor-Seite und können dort bearbeitet werden.

Gemeinsam verwendete Bereiche

Diese gehören möglicherweise zum übergeordneten Seitenlayout oder zu einer Joomla-Erweiterung.

Änderungen an ihnen können sich auf mehrere Seiten auswirken.

Wichtig: Wenn Sie einen Bereich nicht wie einen gewöhnlichen Inhaltsblock bearbeiten können, prüfen Sie, ob dieser zum Joomla-Template oder zu einem Joomla-Modul gehört.

13. Blöcke als Gestaltungseinheiten nutzen

Eine übersichtliche Webseite entsteht häufig dadurch, dass zusammengehörige Informationen in eigenen Blöcken untergebracht werden.

Ein Block sollte möglichst eine klar erkennbare Aufgabe erfüllen.

Beispielsweise könnte eine Dienstleistungsseite aus folgenden Bereichen bestehen:

• Einleitung und wichtigste Informationen,
• ausführliche Beschreibung der Dienstleistung,
• besondere Vorteile,
• Beispiele und Referenzen,
• Kontaktmöglichkeit.

Eine solche Aufteilung macht die Webseite für Besucher verständlicher.

Außerdem können Sie einzelne Abschnitte später leichter verschieben, ergänzen oder ersetzen.

Wann sollte ein neuer Block verwendet werden?

Ein neuer Block bietet sich insbesondere dann an, wenn ein neuer Themenbereich beginnt oder eine deutlich andere Gestaltung benötigt wird.

Sie müssen allerdings nicht für jeden Absatz einen eigenen Block anlegen.

Tipp: Verwenden Sie lieber einige sinnvoll aufgebaute Blöcke als zahlreiche unnötig kleine Abschnitte. Dadurch bleibt die Seitenstruktur leichter überschaubar.

14. Häufige Fehler beim Arbeiten mit Blöcken

Die folgenden Punkte helfen Ihnen, typische Gestaltungsprobleme zu vermeiden:

• Block und Element nicht verwechseln: Prüfen Sie vor Änderungen, ob das richtige Objekt ausgewählt wurde.
• Container sinnvoll einsetzen: Gruppieren Sie zusammengehörige Inhalte innerhalb geeigneter Layout-Elemente.
• Feste Höhen mit Bedacht verwenden: Längere Texte benötigen möglicherweise zusätzlichen Platz.
• Abstände überprüfen: Ungewöhnliche Leerflächen können durch Einstellungen enthaltener Elemente entstehen.
• Raster bevorzugen: Für mehrspaltige Inhalte sind strukturierte Layouts häufig einfacher zu pflegen als eine vollständig freie Positionierung.
• Bildschirmansichten kontrollieren: Überprüfen Sie die Darstellung auch auf Smartphones und Tablets.
• Gemeinsam verwendete Bereiche beachten: Änderungen am Template oder an Modulen können andere Seiten beeinflussen.
• Übersichtliche Strukturen verwenden: Teilen Sie Ihre Webseite in sinnvolle Inhaltsbereiche auf.

15. Wie geht es weiter?

Sie wissen jetzt, wie Blöcke im Smart-Editor aufgebaut sind und wie sie mit den darin enthaltenen Elementen zusammenarbeiten.

Sie haben außerdem gelernt, welche Rolle Container, Raster, Abstände und die responsive Gestaltung spielen.

In den folgenden Anleitungen beschäftigen wir uns mit der praktischen Bearbeitung dieser Inhaltsbereiche.

Als Nächstes empfehlen wir Ihnen die Anleitung „Neue Blöcke hinzufügen“. Dort erfahren Sie Schritt für Schritt, wie Sie neue Inhaltsbereiche einfügen und geeignete Blockvorlagen auswählen.