Website von einem Anfänger für neue Anfänger

Suche

NEUES TEMPLATE

Overrides Cassiopeia - Struktur für Firmen 

1️⃣ Override-Grundstruktur

📁 Pfad: /templates/cassiopeia_firma/html/ 

 2️⃣ Häufige Firmen-Overrides (empfohlen)

📂 Beiträge (com_content)
/templates/cassiopeia_firma/html/com_content/

├─ article/
│ └─ default.php
├─ category/
│ └─ blog.php

Für:

  • Corporate Artikel-Layout
  • Kategorie-Übersichten

📂 Menü (mod_menu)

/templates/cassiopeia_firma/html/mod_menu/
└─ default.php

📂 Module (z. B. Custom)

/templates/cassiopeia_firma/html/mod_custom/
└─ default.php

 

3️⃣ Override erstellen (sauberer Weg)

📍 Backend: System → Templates → Site-Templates → Cassiopeia Firma → Overrides

Joomla legt Ordner korrekt an
✔ Kein Kopierfehler 

4️⃣ Firmen-Best-Practice-Struktur

cassiopeia_firma/
├─ css/
│ └─ user.css
├─ html/
│ ├─ com_content/
│ ├─ mod_menu/
│ └─ mod_custom/
├─ images/
├─ index.php
├─ templateDetails.xml 

 

5️⃣ Typische Firmen-Anforderungen → Override

AnforderungOverride
Einheitlicher Artikelkopf com_content/article
Navigation anpassen mod_menu
Teaserboxen mod_custom
Barrierefreiheit HTML-Overrides

 

 6️⃣ Verständnisfragen

❓ Warum Overrides statt Core-Änderung?
Antwort: Updatesicher und sauber trennbar.

❓ Wo liegen Template-Overrides?
Antwort:  /templates/[template]/html/

 

Helix Ultimate -1-
Das kostenlose Universal-Template für Joomla 6

1. Überblick & Kompletter Pfad

EigenschaftBeschreibung
Name Helix Ultimate 
Version 2.2.4 (Stand: Januar 2026) 
Joomla-Kompatibilität Offiziell Joomla 6, 5 & 4 
Preis Kostenlos (GPL-Lizenz) 
Framework Helix Ultimate (Eigenentwicklung)
Basierte Technologie Bootstrap 5 
Download-Link (nur Template) https://www.joomshaper.com/joomla-templates/helixultimate 
Offizielle Dokumentation https://www.joomshaper.com/documentation/helix-framework 
Entwickler JoomShaper

Zwei Beispiele für die Installation

Es gibt zwei gängige Wege, Helix Ultimate zu nutzen. Welcher für dich der richtige ist, hängt von deinem Erfahrungsstand ab.

Beispiel A: Die Quickstart-Installation (Für Anfänger und zum Testen empfohlen)

Die Quickstart-Paket ist eine komplette, fertige Demo-Website. Es enthält Joomla, das Helix-Template, den Page Builder und viele Demo-Inhalte (Artikel, Bilder, Menüs). Du installierst es wie Joomla selbst und hast sofort eine funktionierende Seite, die genauso aussieht wie die Demo .

  • Wann verwenden? Wenn du Joomla noch nicht installiert hast oder eine fertige Website als Basis für dein Projekt nutzen möchtest.
  • Wichtiger Hinweis: Die im Quickstart enthaltenen Bilder sind oft nur Platzhalter (dummy grey images) und müssen durch eigene ersetzt werden .

Beispiel B: Die Template-Installation (Für Fortgeschrittene und bestehende Seiten)

Das reine Template-Paket (ca. 2 MB groß) enthält nur das Template selbst, also die Dateien, die für das Aussehen und Layout deiner Seite zuständig sind. Es enthält keine Demo-Inhalte, Module oder den Page Builder .

  • Wann verwenden? Wenn du Joomla bereits installiert hast und nur das Template wechseln möchtest. Du musst dann alle Inhalte (Menüs, Artikel, Module) selbst erstellen oder anpassen.

Beschreibung & Darstellung

Helix Ultimate ist ein "Multipurpose"-Template. Das bedeutet, es wurde entwickelt, um für jede Art von Website eingesetzt werden zu können – von Unternehmensseiten über Blogs und Portfolios bis hin zu Online-Shops .

Die Darstellung ist modern, clean und vollständig responsiv, d.h. sie passt sich perfekt an alle Endgeräte (Desktop, Tablet, Smartphone) an . Ein besonderes Feature ist die Live-Vorschau: Änderungen, die du in den Template-Einstellungen vornimmst, siehst du in Echtzeit, ohne die Seite neu laden zu müssen .

Beschreibung des Designs

  • Layout-Struktur: Das Layout ist extrem flexibel und basiert auf einem Layout Manager. Hier kannst du die Spaltenanzahl und -breite für verschiedene Bereiche der Seite (z.B. Header, Content, Sidebars) per Drag-and-Drop selbst bestimmen .
  • Header-Varianten: Es stehen 9 vordefinierte Kopfbereiche (Header) zur Auswahl, die das grundlegende Erscheinungsbild stark verändern. Du kannst auch eigene Header erstellen .
  • Typografie: Du hast die Wahl zwischen über 600 Google Fonts und den Betriebssystem-Schriftarten, um das Schriftbild perfekt anzupassen .
  • Farben: Es gibt 8 voreingestellte Farbkombinationen (Preset Styles), die du nach Belieben modifizieren kannst .

 

Anwendung

Dank seiner Vielseitigkeit ist Helix Ultimate für eine breite Palette von Projekten geeignet. Hier einige Beispiele aus der Praxis:

  • Unternehmens-Websites: Für Agenturen, Beratungsfirmen oder Versicherungen .
  • E-Commerce: In Kombination mit Erweiterungen wie HikaShop oder VirtueMart kannst du einen voll funktionsfähigen Online-Shop aufbauen .
  • Portfolio & Kreativ: Ideal für Fotografen, Designer oder Künstler, um ihre Arbeiten zu präsentieren .
  • Branchen-Lösungen: Viele spezialisierte (auch kostenpflichtige) Templates bauen auf Helix Ultimate auf, z.B. für Baugewerbe , IT-Dienstleister  oder Agenturen . Das Framework selbst ist aber die kostenlose Basis.

Besonderheiten

Hier sind die herausragenden Funktionen, die Helix Ultimate von anderen Templates abheben:

  • Mega-Menu-Builder: Erstelle komplexe Menüs mit mehreren Spalten, Bildern oder Modulen, um deine Besucher schnell zu leiten .
  • Volle Integration von SP Page Builder: Das Template ist perfekt auf den SP Page Builder abgestimmt, eines der leistungsstärksten Drag-and-Drop-Tools für Joomla. Damit kannst du individuelle Seiten gestalten, ohne eine Zeile Code schreiben zu müssen .
  • Ajax-Bewertung: Erlaube deinen Besuchern, Beiträge zu bewerten, ohne dass die Seite neu geladen werden muss. Dieses Feature ist gegen CSRF-Angriffe gesichert .
  • Erweiterte Blog-Optionen: Integrierte Social-Media-Buttons und Kommentarfunktionen (IntenseDebate, Disqus, Facebook) machen das Bloggen einfach .
  • Wartungsmodus: Schalte deine Seite in einen "Coming Soon"- oder Wartungsmodus mit einem Countdown-Timer, während du daran arbeitest .
  • Barrierefreiheit (Accessibility): Im Vergleich zu älteren Versionen wurde die Zugänglichkeit für Menschen mit Behinderungen verbessert .

Installation des Quickstart-Pakets (NEUE Joomla-Installation)

Diese Methode ist ideal, um eine komplette Demo-Seite zu erhalten .

  1. Vorbereitung: Lade das Quickstart-Paket (helixultimate_quickstart_x.x.zip) von der offiziellen Webseite herunter und entpacke es auf deiner Festplatte .
  2. Datenbank anlegen: Erstelle in deinem Webhosting-Kontrollzentrum (z.B. cPanel) eine neue, leere MySQL-Datenbank und weise ihr einen Benutzer mit allen Rechten zu .
  3. Dateien hochladen: Lade den gesamten Inhalt des entpackten Ordners per FTP in das Root-Verzeichnis deiner Domain (meist public_html oder htdocs) .
  4. Installation starten: Rufe deine Domain im Browser auf (z.B. https://deine-domain.de). Du wirst automatisch zum Joomla-Webinstaller weitergeleitet .
  5. Installations-Assistent: Folge den Schritten des Installers:
    • Konfiguration: Gib einen Namen für deine Seite ein.
    • Datenbank: Trage die Daten deiner neu erstellten Datenbank ein (Datenbankname, Benutzername, Passwort). Der Tabellenpräfix kann auf jos_ bleiben.
    • FTP: Überspringe diesen Schritt in der Regel.
    • Hauptkonfiguration: Lege einen Namen und eine E-Mail-Adresse für den Super-Admin an. Wichtig: Verwende nicht "admin" als Benutzername, sondern etwas Einzigartigeres aus Sicherheitsgründen .
  6. Abschluss: Nach erfolgreicher Installation solltest du eine Bestätigungsmeldung sehen. Lösche danach per FTP die Datei index.html aus dem Root-Verzeichnis und benenne die Datei htaccess.txt in .htaccess um (für SEO und Sicherheit) .

 

Installation des reinen Templates (BESTEHENDE Joomla-Installation)

Diese Methode ist für bereits bestehende Joomla-Websites gedacht .

  1. Voraussetzung: Stelle sicher, dass dein Server die technischen Anforderungen erfüllt (PHP 8.2+, MySQL 5.6+ etc.) .
  2. Download: Lade das reine Template-Paket (helixultimate_template_x.x.zip) herunter .
  3. Im Backend installieren:
    • Logge dich in dein Joomla-Admin-Backend ein.
    • Gehe zu System → Installieren → Erweiterungen.
    • Ziehe die heruntergeladene ZIP-Datei per Drag-and-Drop in das Feld "Drop file here" oder wähle sie über "Datei auswählen" aus und klicke auf "Hochladen & Installieren".
  4. Als Standard festlegen:
    • Gehe zu System → Site Templates → Stile (oder direkt zu "Templates").
    • Im Bereich "Site" siehst du alle installierten Templates. Klicke auf das Kontrollkästchen links neben dem Stil "Helix Ultimate - Default".
    • Klicke in der Symbolleiste oben auf die Schaltfläche "Default". Ein Sternsymbol markiert nun Helix Ultimate als Standard-Template für deine Seite .

Damit ist Helix Ultimate erfolgreich installiert und aktiv. Du findest die umfangreichen Einstellungen nun unter System → Site Template Stile → Helix Ultimate - Default → (Doppelklick).

Helix Ultimate -2-

Grundlage: Joomla 6

Offizielle Website: https://www.joomla.org
Backend-Zugang (Administrator): https://joomla6.rneuhoff.de/administrator
Typischer Serverpfad (z. B. bei All-Inkl): /www/htdocs/deinaccount/

Wichtige Joomla-Ordner: 
/administrator/
/components/
/modules/
/templates/
/media/templates/site/

Helix Ultimate (Universal-Template)

Helix Ultimate - Entwickler: JoomShaper
Offizielle URL: https://www.joomshaper.com/helix

Helix ist ein Template-Framework. Es ist kein fertiges Design, sondern ein Baukasten.

Komplette Pfade (Joomla 6 konform)

Nach Installation liegt Helix hier: Template-Ordner: /templates/shaper_helixultimate/
Update-sichere CSS-Datei: /media/templates/site/shaper_helixultimate/css/custom.css
Template-Details: /templates/shaper_helixultimate/templateDetails.xml
Layout-Dateien: /templates/shaper_helixultimate/html/

Wichtig:
Nie Core-Dateien von Joomla ändern. Nur im Template oder custom.css arbeiten.

Beispiel-Klassische Firmenwebsite

Struktur:

  • Header mit Logo
  • Hauptmenü
  • Inhaltsbereich (Component)
  • Sidebar mit Modulen
  • Footer mit Impressum

Geeignet für:

  • Selbständige
  • Vereine
  • kleinere Betriebe

Beispiel – Institutionelle Website

Struktur:

  • Großer Header
  • Mega-Menü
  • Suchfunktion
  • Themenbereiche
  • Service-Module
  • Mehrspaltiger Footer

Geeignet für:

  • Bildungsseiten
  • größere Organisationen
  • öffentliche Einrichtungen

Beschreibung Helix Ultimate

Helix bietet:

  • Drag & Drop Layout Builder
  • Responsive Design (mobil optimiert)
  • Mega Menü
  • Offcanvas Menü
  • Eigene CSS- und JS-Felder
  • Typografie- und Farbsteuerung
  • Preset-System

Du arbeitest mit:

  • Rows (Zeilen)
  • Columns (Spalten)
  • Modulpositionen

Darstellung im Backend

Backend → System → Templates → Site Templates → Helix Ultimate

Dort findest du:

  • Layout Builder
  • Typography
  • Colors
  • Menu
  • Blog
  • Custom Code

Der Layout Builder ist das Herzstück.

Beschreibung Design (seriös & Joomla-6-konform)

Für eine saubere Website:

  • Weißer oder heller Hintergrund
  • Gute Kontraste
  • Keine unnötigen Animationen
  • Klare Navigation
  • Lesbare Schriftgrößen
  • Struktur vor Spielerei

Helix erlaubt dir:

Typography → Schriftarten definieren
Colors → Primärfarbe festlegen
Layout → Header / Footer individuell gestalten

Anwendung (Praxis-Schritte)

Startseite einrichten

  1. Menü → Neues Menüelement
  2. Beitrag auswählen
  3. Als Startseite markieren
  4. Layout Builder → Component-Bereich aktiv lassen

Modul in Sidebar anzeigen

  1. Inhalte → Module → Neu
  2. Position z. B. „sidebar“
  3. Menüzuweisung → Nur ausgewählte Seiten
  4. Speichern

Wenn Module falsch zugewiesen sind, erscheinen sie überall oder springen zur Startseite.

Besonderheiten

  • Eigene CSS immer hier eintragen:
/media/templates/site/shaper_helixultimate/css/custom.css
  • Cache regelmäßig leeren:
    System → Wartung → Cache leeren
  • Layout Builder überschreibt viele klassische Template-Einstellungen
  • Updates überschreiben Template-Dateien – niemals direkt dort ändern

Helix funktioniert sauber mit Joomla 6, wenn:

  • PHP-Version aktuell ist
  • Keine veralteten Erweiterungen installiert sind
  • Cache richtig konfiguriert ist

Step-by-Step Installation

Helix ZIP-Datei von: https://www.joomshaper.com/helix
Installation Backend öffnen: https://deinedomain.de/administrator

Dann:

System → Erweiterungen → Installieren
ZIP-Datei hochladen
Installieren klicken

Als Standard setzen

System → Templates → Site Templates
Helix Ultimate auswählen
Als Standard festlegen

Grundkonfiguration

Templates → Helix Ultimate öffnen

  • Logo hochladen
  • Farben einstellen
  • Layout Builder konfigurieren
  • Menü auswählen

Menüstruktur anlegen

Menüs → Hauptmenü → Einträge erstellen
Startseite festlegen

Ehrliche Einschätzung

Helix Ultimate ist:

✔ flexibel
✔ professionell einsetzbar
✔ für Joomla 6 geeignet

Aber:

  • Du musst Struktur verstehen
  • Du musst sauber arbeiten
  • Design entsteht nicht automatisch

Das Werkzeug ist gut. Das Ergebnis hängt von deiner Planung ab.

 

Helix Ultimate -3-

Ziel mit dem Einsatz von Helix

Du brauchst kein komplexes Portal.
Du brauchst eine klare, ruhige Struktur.

Deine Stärke sollte sein:

  • Saubere Umsetzung
  • Strukturierte Navigation
  • Verständliche Inhalte

Nicht:
Design-Show.

Fertige Startseiten-Struktur (seriös & professionell)

Ziel: klar, ruhig, kein Spielzeug-Design.

Layout im Helix Layout Builder

Header

  • Logo links
  • Hauptmenü rechts
  • Optional: Suchmodul

Hero-Bereich

  • Überschrift
  • Kurzer Einführungstext
  • Button („Mehr erfahren“)

Hauptbereich

  • Component (für Beiträge)
  • 3 Spalten mit Themen
  • Aktuelle Beiträge Modul

Service-Bereich

  • 4 Icons mit Kurztext
  • Kontakt-Teaser

Footer

  • 3–4 Spalten:
    • Impressum
    • Datenschutz
    • Kontakt
    • Social Links

So baust du das konkret

Backend: https://joomla6.rneuhoff.de/administrator
 Gehe zu: System → Templates → Helix Ultimate → Layout Builder

 
  1. Neue Row anlegen Zeile
  2. Column-Struktur wählen (z. B. 3x 4er-Spalten)
  3. Modulposition einfügen
  4. Module erstellen und zuweisen

Wichtig:
Der Bereich „component“ muss aktiv bleiben – sonst wird kein Inhalt angezeigt.

Saubere Sidebar-Konfiguration (kein Zurückspringen)

Das Problem entsteht fast immer durch falsche Menüzuweisung.

Inhalte → Module → Neu

  1. Position wählen (z. B. sidebar)
  2. Menüzuweisung → „Nur auf ausgewählten Seiten“
  3. Die gewünschten Menüeinträge anhaken
  4. Speichern

Fertig.

 Typischer Fehler

❌ Modul steht auf „Auf allen Seiten“
→ erscheint überall

❌ Menüeintrag ist falsch als Startseite markiert
→ Weiterleitungen wirken komisch

Template-Pfad für eigene Anpassungen

Update-sicheres CSS: /media/templates/site/shaper_helixultimate/css/custom.css
Nicht hier ändern: /templates/shaper_helixultimate/ (Das wird bei Updates überschrieben.)

Typische Anfängerfehler mit Helix

Fehler 1 – Zu viele Effekte

Animationen, Slider, Parallax.
Sieht modern aus, wirkt aber unruhig.

Fehler 2 – Struktur ohne Planung

Einfach Rows anlegen ohne Konzept.
Ergebnis: Chaos.

Vorher Skizze machen.

Fehler 3 – Farben ohne Kontrast

Hellgrau auf Weiß ist unlesbar.
Institutionelle Seiten brauchen klare Kontraste.

Fehler 4 – Cache vergessen

Nach Änderungen nichts sichtbar?
System → Wartung → Cache leeren.

Fehler 5 – Direkt im Template ändern

Alles gehört in: /media/templates/site/shaper_helixultimate/css/custom.css 
Sonst ist es nach dem Update weg.

Besonderheiten von Helix

  • Layout Builder ersetzt klassische Positionslogik
  • Eigene Custom Code Felder (HTML, JS)
  • Mega-Menü integriert
  • Responsive automatisch

Aber:

Helix ist nur ein Werkzeug.
Struktur kommt von dir.

Komplette Installations-Übersicht (kurz & sauber)

  1. ZIP herunterladen von https://www.joomshaper.com/helix
  2. Backend öffnen https://joomla6.rneuhoff.de/administrator 
  3. System → Erweiterungen → Installieren
  4. ZIP hochladen
  5. System → Templates → Als Standard festlegen
  6. Layout Builder konfigurieren

Fertig.

🎯 Ziel deiner Website

Eine seriöse, ruhige Präsentationsseite, die zeigt:

  • Wer du bist
  • Was du machst
  • Welche Projekte du umgesetzt hast
  • Wie man dich erreicht

Kein überladenes Design. Keine Spielereien. Klare Struktur.

1️⃣ Seitenstruktur (einfach & professionell)

Hauptmenü

  1. Start
  2. Über mich
  3. Projekte
  4. KI & Experimente
  5. Kontakt

Mehr brauchst du nicht.

2️⃣ Startseite – konkrete Helix-Struktur

Im Layout Builder:

Header

  • Logo oder dein Name
  • Hauptmenü rechts
  • Optional: kleines Suchfeld

Hero-Bereich

Große Überschrift:
Kurzer Text darunter:
Button:

Bereich 1 – Deine Kompetenz

3 Spalten:

  • Joomla 6 Einrichtung
  • Template-Anpassungen
  • KI-Integration

Jeweils:
Icon + kurze Beschreibung

Bereich 2 – Aktuelle Projekte

Modul „Beiträge – Kategorie Projekte“
Max. 3 Einträge.

Bereich 3 – Kontakt-Teaser

Kurzer Text:
Button:

Footer

3 Spalten:

  • Kurzprofil
  • Navigation
  • Impressum / Datenschutz

3️⃣ Design-Richtlinien (wichtig)

Halte dich an:

  • Weißer Hintergrund
  • Dunkelgraue Schrift
  • Eine Akzentfarbe (z. B. Blau)
  • Keine Animationen
  • Keine Slider
  • Keine 5 Schriftarten

Helix → Typography: Nur eine Hauptschrift.
Helix → Colors: Eine Primärfarbe.

Fertig.

4️⃣ Technische Struktur (sauber arbeiten)

Update-sicheres CSS:  /media/templates/site/shaper_helixultimate/css/custom.css
Backend-Zugang: https://deinedomain.de/administrator
Template-Ordner: /templates/shaper_helixultimate/

Dort nichts direkt ändern.

5️⃣ Module richtig einsetzen

Beispiel: „Projekte Sidebar“ nur auf Projektseiten anzeigen:
Modul → Menüzuweisung → Nur ausgewählte Seiten → Projekte anhaken.

Sonst erscheint es überall.

Realistische Besonderheiten

Mit Helix kannst du:

✔ Layout schnell umbauen
✔ eigene CSS-Regeln einfügen
✔ Mega-Menü nutzen
✔ mobil optimieren

Aber:

  • Ohne klare Struktur wird es unruhig
  • Zu viele Module machen es chaotisch
  • Zu viele Farben wirken unseriös

Minimaler Installations-Ablauf

  1. Helix ZIP herunterladen https://www.joomshaper.com/helix
  2. Backend → System → Erweiterungen → Installieren
  3. ZIP hochladen
  4. Als Standard setzen
  5. Layout Builder strukturieren
  6. Menü anlegen
  7. Module zuweisen

Fertig.

Seite 2 von 2