Ihr Warenkorb ist leer

Tipps zu Cassiopeia (J4)

Aktuelle Quickstarts

joomla 4 quickstart pakete
Es sind verschiedene Erweiterungen wählbar!

Banner anzeigen im Cassiopeia

Empfohlene Positionen für ein Banner

Grundsätzlich lassen sich Banner überall positionieren. Einige Modulpositionen sind hierfür besonders geeignet.

cassiopeia banner positionen

Modulposition " topbar"

Diese Modulposition befindet sich ganz oben und erstreckt sich über die gesamte Bildschirmbreite.

Modulposition "below-top"

Diese Modulposition befindet sich unmittelbar unter der Position "topbar"und oberhalb des Logos bzw. des alternativen Textes. Das Banner füllt dort maximal den Container und erstreckt sich nicht über die gesamte Bildschirmbreite. Wurde "Fluid" als Template-Layout eingestellt, dann ist der Unterschied zwischen den Positionen "below-top" und "topbar" nicht so gravierend. Anders hingegen, wenn "Static" als Template-Layout gewählt wurde. Dann ist der Unterschied insbesondere bei großen Bildschirmen beachtlich.

Tipp: Hat man ein Logo, welches sich aufgrund seiner Größe oder Form nicht für die Darstellung im Logo-Bereich eignet, kann man es idealerweise auch auf die Position "below-top" legen! Dabei sollte man in den Template-Einstellung die Option "Brand" auf "Nein" setzen, damit statt des Logo bzw. alternativen Textes nicht zusätzlich noch das Standard-Logo (mit dem Cassiopeia-Text) angezeigt wird.

Modulposition "banner"

Diese Modulposition befindet sich unterhalb der Logo-Area und des horizontalen Menüs (Modulposition "menu"). Das Banner kann über die gesamte Bildschirmbreite angezeigt werden. Statt eines Banners können Sie auch einen Text mit einem Hintergrundbild und einem automatischen Overlay-Effekt verwenden.

 

Banner-Modul erstellen auf Position "below-top"

Als Banner-Modul eignet sich ein Modul vom Typ "Eigenes Modul", welches man zunächst erstellen muss:

  • Gehen Sie zu "Inhalt" -> "Site Module" in den Modul-Manager!
  • Klicken Sie auf "Neu" und wähle Sie den Modultyp "Eigenes Modul"! Das neue Modul kann nun bearbeitet werden.

 

1. Bearbeiten des Banner-Moduls

cassiopeia eigenes modul

1. Wählen Sie einen passenden Namen für das Modul, z.B. "Banner"
2. Deaktivieren Sie die Anzeige des Modulnamens!
3. Legen Sie das Banner-Modul auf die Position "below-top"!
4. Um das Modul später stylen zu können, gehen Sie nun zum Tab "Erweitert" und nehmen Sie die beiden folgenden EInstellungen vor!

cassiopeia banner erweitert

5. Tragen Sie als CSS-Klasse (Modul) folgendes ein: mein-banner
6. Ändern Sie den Modulstil von "vererbt" in "Cassiopeia card"! Ansonsten kann die Modul-Klasse nicht verwendet werden.

7. Gehen Sie zurück zum Tab "Modul" und fügen Sie das gewünschte Bild ein, welches Sie als Banner nutzen möchten! Hierfür gibt es meist mehrere Möglichkeiten. Über den Editor TinyMCE können Sie den Medien Manager (CMS-Inhalt -> Medien) öffnen und dann Bilder hochladen, auswählen und einfügen. Ähnlich funktioniert das auch mit anderen Editoren wie beispielsweise dem JCE und dem Bilder-Manager.

8. Speichern Sie abschließend das Modul!

Das Ergebnis schaut dann folgendermaßen aus:

cassiopeia banner editor

2. Stylen des Banner-Moduls

Je nach Bildschirmbreite kann es sein, dass das Banner nicht über die gesamte Breite des Containers geht.
Um das zu vermeiden, kann man für das Banner eine Mindestgröße von 100% angeben. Dazu fügt man dem Banner die zuvor eingetragene Klasse "mein-banner" hinzu und erstellt anschließend in der user.css eine CSS-Anweisung für diese Klasse. Folgende Schritte sind auszuführen:

  • Schalten Sie in die Code-Ansicht des Editors, z.B. über den Button "Toggle Editor" im TinyMCE oder über den TAB "Code" im JCE!
  • Ergänzen Sie die Klasse "mein-banner" im HTML-Element:
    <p><img class="mein-banner" src=images/banner.png width="300" height="150" loading="lazy" /></p>

cassiopeia banner editor code

  • Speichern Sie das Modul!
  • Nun muss die Klasse nur noch in die user.css eingetragen und die CSS-Anweisung ergänzt werden. Die user.css liegt in folgendem Verzeichnis:
    templates/cassiopeia/css/user.css

    Die user.css kann direkt mit einem geeigneten Editor (z.B. Notepad++ , PSPAD usw.) oder auch über den Template-Manager bearbeitet werden:
    "System" -> "Templates: Site Templates" -> "Cassiopeia"

    Tragen Sie folgenden Code in die user.css ein:
    .mein-banner {
       min-width: 100%;
    }

 cassiopeia banner user css

  • Speichern Sie abschließend die user.css!

 
Tipp: Sollte noch keine user.css existieren, so können Sie diese direkt über einen FTP-Zugang oder den Template-Manager anlegen.
Für den letzteren Fall finden Sie eine Anleitung auf folgender Seite: Grundlagen (Cassiopeia)!

Nun füllt das Banner immer die gesamte Containerbreite aus, unabhängig von der Bildschirmgröße.

 

Banner-Modul erstellen auf Position "banner"

Auf der Modulposition "banner" können Sie als Banner-Modul wieder das Modul vom Typ "Eigenes Modul" nutzen. Wie oben beschrieben können Sie im Tab "Modul" ein Bild einfügen, welches Sie als Banner verwenden möchten.

Doch es gibt eine interessante Alternative:
Statt eines Banners/Bildes können Sie auch einen Text mit einem Hintergrundbild und einem automatischen Overlay-Effekt verwenden.

cassiopeia bannerposition

Wie Sie das machen, erfahren Sie jetzt!
 

Text mit Hintergrundbild und Overlay-Effekt

Als Banner-Modul eignet sich wieder ein Modul vom Typ "Eigenes Modul", welches man zunächst erstellen muss:

  • Gehen Sie zu "Inhalt" -> "Site Module" in den Modul-Manager!
  • Klicken Sie auf "Neu" und wähle Sie den Modultyp "Eigenes Modul"! Das neue Modul kann nun bearbeitet werden.

cassiopeia banner text

1. Wählen Sie einen passenden Namen für das Modul, z.B. "Banner-Overlay"
2. Deaktivieren Sie die Anzeige des Modulnamens!
3. Legen Sie das Banner-Modul auf die Position "banner"!
4. Geben Sie im Editor den Text an, der im Modul angezeigt werden soll!

5. Gehen Sie anschließend zum Tab "Optionen" und wählen Sie das gewünschte Hintergrundbild aus! Beachten Sie die Auflösung, damit das Hintergrundbild auch auf den verschiedenen Geräten gut ausschaut.

cassiopeia banner hintergrundbild

6. Um das vorgefertigte Override für den Overlay-Effekt einzustellen, gehen Sie nun zum Tab "Erweitert" und wählen als Layout einfach "banner" aus!

cassiopeia banner layout

7. Speichern Sie abschließend das Modul!

 

Wie kann man die Höhe des Banners ändern?

Das Banner wird über die gesamte Breite angezeigt und die Höhe ist standardmäßig auf 100% gestellt. Möchte man die Höhe ändern, dann empfiehlt es sich, den Wert durch einen Eintrag in der user.css zu überschreiben. Möchte man die Bannerhöhe z.B. auf 50% des Viewports einstellen, so ergänzt man folgenden Zeilen:

.container-banner .banner-oberlay {
   height: 50vh;
}

Das Ergebnis schaut dann folgendermaßen aus:

cassiopeia bannerposition 50%

Tipp: Über diese Klassen lassen sich auch andere Formatierungen im Bannerbereich vornehmen, z.B. die Textfarbe:

.container-banner .banner-oberlay {
   height: 50vh;
   color: #ffffff;
}

Anmerkungen

Alle angegebenen Preise sind in Euro und enthalten die gesetzliche deutsche MwSt. von derzeit 19%. Die Angebote richten sich an Kunden in Deutschland. Der Endpreis kann sich nach Eingabe der Rechnungsinformationen ändern, beispielsweise wenn die Bestellung als Unternehmen erfolgt. Die Preise beziehen sich auf das Erstellen der Quickstart-Pakete.
Mehr

Siwecos

Joominator.de gehört nicht zu The Joomla! Project ™ und wird auch nicht durch dieses unterstützt. Die Verwendung des Joomla!® -Namens, -Symbols, -Logos und der zugehörigen Marken ist im Rahmen einer von Open Source Matters, Inc. gewährten beschränkten Lizenz gestattet.
Joominator.de is not affiliated with or endorsed by The Joomla! Project™. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.

Joomla Logo