Diese Anleitung zeigt Ihnen, wie Sie „Bildgrößen und Seitenverhältnisse“ im Smart-Editor und – soweit erforderlich – in Joomla praktisch umsetzen.
Das Seitenverhältnis bestimmt die Form eines Bildes und beeinflusst das Layout deutlich.
1. Worum geht es bei „Bildgrößen und Seitenverhältnisse“?
Das Seitenverhältnis bestimmt die Form eines Bildes und beeinflusst das Layout deutlich.
Arbeiten Sie möglichst in einer klaren Reihenfolge: zuerst den richtigen Inhaltsbereich auswählen, anschließend die gewünschte Einstellung verändern und zum Schluss das Ergebnis in der veröffentlichten Seite prüfen.
2. Vorbereitung und Orientierung
Öffnen Sie zunächst die betroffene Webseite beziehungsweise den zuständigen Verwaltungsbereich. Prüfen Sie, ob Sie einen Joomla-Beitrag, einen Menüeintrag, einen Block oder ein einzelnes Element bearbeiten. Nicht jede Einstellung befindet sich an derselben Stelle.
Bei Elementen innerhalb von Containern, Gruppen oder Rastern hilft Ihnen die Ebenenansicht, den richtigen Bestandteil auszuwählen.
3. Schritt für Schritt vorgehen
- Prüfen Sie Breite und Höhe des verwendeten Bildes.
- Wählen Sie das Bildelement aus und kontrollieren Sie die Größenangaben.
- Vermeiden Sie ein unbeabsichtigtes Strecken des Motivs.
- Passen Sie das Bild an die verfügbare Containerbreite an.
- Überprüfen Sie den Textumfluss und mobile Umbrüche.
4. Praktisches Beispiel
Angenommen, Sie überarbeiten einen Abschnitt Ihrer Unternehmenswebseite. Ziel ist eine gut lesbare, einheitliche Darstellung, die sich später einfach pflegen lässt.
Wenden Sie die oben beschriebenen Schritte zunächst nur auf einen einzelnen passenden Bereich an. Übertragen Sie die Gestaltung erst danach auf weitere vergleichbare Inhalte. So erkennen Sie frühzeitig, ob die gewählte Lösung zu Ihrer Seite passt.
5. Gestaltung und Benutzerfreundlichkeit
Achten Sie auf eine nachvollziehbare Reihenfolge, ausreichend Abstand und eindeutige Beschriftungen. Besucher sollen die Funktion eines Elements möglichst ohne zusätzliche Erklärung verstehen.
Ein 16:9-Foto passt nicht ohne Beschneidung in eine quadratische Bildfläche. Entscheiden Sie bewusst zwischen vollständigem Motiv und gefüllter Fläche.
6. Darstellung auf Mobilgeräten prüfen
Wechseln Sie im Smart-Editor zwischen Desktop-, Tablet- und Smartphone-Ansichten. Prüfen Sie insbesondere Textumbruch, verfügbare Breite, Bildausschnitte, Abstände und die Bedienbarkeit von Verlinkungen.
Ein korrektes Layout in der Desktop-Ansicht garantiert noch keine fehlerfreie mobile Darstellung. Testen Sie kritische Änderungen zusätzlich im tatsächlichen Frontend.
7. Häufige Fehler vermeiden
- Falscher Bearbeitungsbereich: Kontrollieren Sie, ob Sie das Element oder seinen übergeordneten Container ausgewählt haben.
- Ungeprüfte Kopien: Übernommene Texte, Bilder und Linkziele müssen gegebenenfalls angepasst werden.
- Nur eine Geräteansicht geprüft: Kontrollieren Sie auch die Smartphone-Ansicht.
- Ergebnis nicht getestet: Speichern Sie und prüfen Sie den tatsächlichen Seitenaufruf.
8. Kontrolle und Abschluss
Gehen Sie die bearbeiteten Inhalte erneut durch. Prüfen Sie die Verständlichkeit, die Verknüpfungen und den gewünschten Veröffentlichungsstatus. Bei Joomla-Beiträgen sollten auch Kategorie, Schlagwörter und Meta-Beschreibung stimmen.
Wenn die Änderung nur für angemeldete Benutzer sichtbar sein soll, achten Sie ausdrücklich auf die getrennten Zugriffsebenen von Beitrag und Menüeintrag.
9. Wie geht es weiter?
Damit haben Sie die grundlegenden Arbeitsschritte kennengelernt und können die betreffende Funktion bei der Gestaltung Ihrer Webseite gezielt einsetzen.
Als Nächstes empfehlen wir die Anleitung „Bildergalerien gestalten“.