Im zweiten Teil der Reihe erläutern wir grundlegende Arbeitsschritte beim Aufbau eines Templates und tauchen in die spannende Welt der Template-Overrides ein.
Inhalte
- Grafikdesign - Was bauen wir gemeinsam?
- Grundstruktur des Templates anlegen
- index.php
- template-details.xml
- language-files
- Contentstrukur anlegen - Administrative Arbeiten
- Kategorien
- Beiträge und Kontakte anlegen
- Menüeinträge anlegen
- Inhaltsseiten Seiten aufbauen & stylen
- Cases
- Case
Agenturwebseite für WebGorillas - eine fiktive Webagentur
Nachdem wir im ersten Part des Tutorials gemeinsam den grundlegenden Aufbau eines Joomla!-Templates, sowie die Funktionen der einzelnen Dateien beschäftigt haben, möchten wir das gelernte nutzen und vertiefen und die Portfolio-Website für eine fiktive Webagentur erstellen.
Wie man es von vielen Websites dieser Art kennt, besteht diese primär aus den folgenden Bestandteilen:
- Einer Homepage, die eine schnelle Übersicht über die angebotenen Leistungen und Referenzprojekte bietet
- Einer Projektübersicht, in der die verschiedenen Referenzen ähnlich eines Blogs dargestellt werden
- Projekt-Seiten, die detaillierte Informationen zu einzelnen Referenzprojekten geben
- Einer Team-Seite, auf der die einzelnen Mitarbeiter*innen vorgestellt werden
Den umzusetzenden Entwurf findest du hier: https://www.figma.com/proto/TmeIWSna4djAXavnsPSPo8/Monkey-Template?page-id=0%3A1&node-id=1%3A248&scaling=min-zoom
Im zweiten Teil unserer Serie möchten wir dabei zunächst auf die Seite Cases sowie die Projekt-Detailseiten eingehen, bevor wir uns im dritten Teil der Artikelserie mit den restlichen verbleibenden Seiten beschäftigen.
Um das gewünschte Layout in Form eines Joomla-Templates umsetzen zu können, werden wir uns der kompletten Flexibilität von Joomla-Templates bedienen und dabei alle Techniken präsentieren, die du benötigst, um professionelle Joomla-Templates für Kunden und Kundinnen zu entwickeln.
Achtung: Natürlich können wir in diesem Tutorial einige Themen nur oberflächlich und nicht im Detail behandeln. Wir zeigen die Grundsystematiken des Templating: Template-Overrides, Language-Strings und die flexible Nutzung von Custom-Fields. Auf Basis des Gelernten ist es anschließend problemlos möglich, sich tiefer in die Materie einzuarbeiten. Bei konkreten Rückfragen stehen wir als Team natürlich immer gerne zur Verfügung.
Die Grundstruktur unseres Templates
Im ersten Schritt gilt es, das konkrete angelieferte Design in eine abstrakte Template-Struktur zu überführen, in der die notwendigen Positionen für Module und unsere Komponenten-Ausgabe bestimmt werden.
Unter folgendem Link findest du eine Übersicht darüber, wie die Seite später strukturiert sein soll:
Das Markup der Seite: index.php
Zunächst starten wir mit der index.php und schreiben das Markup unserer Seite. An den Stellen im Code, an denen später Module oder unsere Komponenten-Ausgabe dargestellt werden soll, werden entsprechende Platzhalter im Code hinterlegt.
Header
Der Kopfbereich unserer Seite ist schnell gebaut: Neben dem Logo, dass als SVG-Code im HTML-Code eingebettet wird, hinterlegen wir zudem einen Button, der die Darstellung der Offcanvas-Navigation auf mobilen Endgeräten steuert sowie die eigentliche Hauptnavigation.
Der Button zur Steuerung der Offcanvas-Darstellung beinhaltet 3 leere <span>-Elemente, welche anschließend per CSS gestyled werden.
Main
Der primäre Inhaltsbereich unserer Seite ist ebenfalls sehr schlank und besteht aus zwei Modulpositionen, der Komponente-Ausgabe sowie den Introduction-Bereich, der ausschließlich auf der Startseite gezeigt werden soll. Hierzu haben wir eine kleine Homepage-Detection integriert, die dafür sorgt, dass der Bereich “introarea” nur auf der Startseite angezeigt wird.
Der Text, der als Introtext gezeigt werden soll, wird in Form eines Language-Strings hinterlegt. Hierzu später mehr.
Zwar wird die Modulposition “wg-contenttop” zum aktuellen Zeitpunkt nicht gebraucht, doch hat es sich in der Praxis als nützlich erwiesen, eine Modulposition ober- und unterhalb der Komponentenausgabe zu platzieren, da dies mehr Flexibilität in der Gestaltung von Inhalten bringt.
Footer
Im Fußbereich der Website hinterlegen wir die Links zu den verschiedenen sozialen Medien. Die eigentlichen Links werden als Language-Strings hinterlegt, damit diese später für Kund*innen als Sprach-Override für alle Sprachen separat pflegbar sind. Ebenso verhält es sich mit den Kontakt- und Adressdaten. Zudem haben wir so die Möglichkeit, sinnvolle Fallbacks in den Language-Dateien unseres Templates zu hinterlegen, sofern keine Overrides über den Administrations-Bereich der Seite gesetzt werden.
templateDetails.xml - Modulpositionen hinzufügen
Im nächsten Schritt fügen wir die Modulpositionen, die wir in der index.php unseres Templates hinterlegt haben zu den definierten Positionen in der templateDetails.xml unseres Templates hinzu. So können diese anschließend im Administrations-Bereich unserer Seite ausgewählt werden.
Language-Files - Sprachstrings hinterlegen
Mit Hilfe von Sprachdateien können Sprach-Strings zu unserem Template hinzugefügt werden. Dieses Sprach-Strings können anschließend im Administrationsbereich der Seite überschrieben werden und sind so für Kund*innen pflegbar.
Wie Sprachdateien angelegt werden, findet Ihr hier: https://docs.joomla.org/Location_of_template_language_files/en
Innerhalb der Sprachdateien können Variablen Textinhalte zugeordnet werden, die anschließend die Platzhalter in unserem Code ersetzen.
Zusammenfassung Part 1: Die Grundstruktur des Templates
Geschafft, wir haben die grundlegende Struktur unseres Templates aufgebaut und sind im nächsten Schritt dazu in der Lage unsere Website mit Inhalten zu füllen, um diese anschließend mit Hilfe von CSS und JavaScript zu stylen und Interaktivität zur Seite hinzuzufügen.
Was wir bisher bereits geschafft haben:
index.php: Implementierung des gewünschten Markups mit Hilfe von Platzhaltern für Module, die Komponentenausgabe und einige Sprachstrings, die später als Sprach-Override angepasst werden können.
templateDeatils.xml: Integration der angelegten Modul-Position im Bereich “positions”, damit diese später als Modul-Position im Administrations-Bereich der Seite ausgewählt werden können.
Der nächste Schritt: Contentstrukturen anlegen
Um sinnvoll am Styling unseres Templates arbeiten zu können, werden wir im zweiten Schritt die Inhaltsstruktur für unsere Website anlegen.
Mit Hilfe von Custom-Fields benötigen wir hierfür keinerlei Erweiterungen, sondern können die komplette Darstellung der Inhalte mit Joomla!-Boardmitteln und dem ausgezeichneten Override-System erledigen.
Wer noch nie mit Custom-Fields gearbeitet hat sollte vorab den Artikel von Mike Brandner auf joomla.de lesen, um die grundsätzliche Funktion von Custom-Fields zu verstehen.
Hierzu legen wir die folgende Inhaltsstruktur an:
Inhalte - Kategorien:
- Services - Darstellung der Services als Übersicht auf der Startseite
- Cases - Darstellung der Projekte in übersichtlichen Grid, Slider auf Startseite
- Blog - Darstellung der drei neuesten Blogbeiträge auf der Startseite
Innerhalb dieser Kategorien legen wir eine beliebige Anzahl von Beiträgen an, die es uns ermöglicht, unsere Styling-Vorgaben angemessen zu testen.
Custom-Fields anlegen
Mit Hilfe von Custom-Fields können beliebige zusätzliche Informationen zu Inhalten (bspw. einem Beitrag oder einem Kontakt) hinzugefügt werden. Diese mit Joomla 3.7 hinzugewonnene Flexibilität machen wir uns zunutze, um die Referenzprojekte einfach pflegen zu können und die Informationen an den gewünschten Stellen im Layout zu platzieren.
Hier eine Übersicht, die zeigt, wie die Inhaltsstruktur für Projekt-Seiten später einmal aussehen soll. Inhalte, die per Custom-Field gepflegt werden, sind rot markiert. Inhalte die, über Standard-Felder gepflegt werden sind violett markiert.
Daraus resultieren die folgenden Felder, die nun angelegt werden müssen:
|
Feld |
Feldtyp |
|
Client |
text |
|
Services |
list |
|
Technologies |
list |
|
Website |
url |
|
Introduction |
textarea |
|
Subtitle (shown on project-overview-page) |
text |
Darüber hinaus fügen wir zwei weitere Felder hinzu, die wir später zur Darstellung des Sliders auf der Startseite benötigen.
|
Feld |
Feldtyp |
|
Backgroundcolor |
color |
|
Date |
09 - 2020 |
Anschließend sollte unsere Feldübersicht im Administrationsbereich der Seite in etwa so aussehen:
Beiträge und Kontakte anlegen
Nachdem die Vorbereitungen abgeschlossen sind können wir nun die eigentlichen Beiträge und Kontakte für die Team-Seite angelegt werden. Für die Kontakt müssen keine weiteren Custom-Fields hinzugefügt werden, da für die gewünschten Informationen bereits Felder seitens des Joomla!-Cores vorgesehen sind (Name, Position, Bild).
Menüeinträge anlegen und Inhalte hinzufügen
Abschließend müssen wir die gerade erstellten Inhalte zu Menüeinträgen hinzufügen. Hier benötigen wir zwei verschiedene Menüs (Mainmenu und Footermenu) mit den entsprechenden Menüeinträgen:
Mainmenu:
Home - Kategorie-Blog (Services)
Cases - Kategorie-Blog (Cases)
Team - Kontakte einer Kategorie auflisten (Team)
Contact - Einzelner Kontakt (Agentur-Kontakt)
Footermenu:
Imprint - Einzelner Beitrag
Data Policy - Einzelner Beitrag
Herzlichen Glückwunsch - die Fleißarbeit ist erledigt! Bis hierhin haben wir die grundlegende Struktur unseres Templates angelegt und alle notwendigen (Dummy-)Inhalte angelegt, um im folgenden Schritt zum Fun-Part zu kommen. Dem hinzufügen von Styles und Interaktivität, um die statischen grafischen Entwürfe in eine interaktive Website zu überführen.
Der Fun-Part: Styling und Interaktivität
Es ist soweit, unsere Inhalte stehen und werden, wenn auch wenig hübsch, auf unserer Website ausgegeben. Solltet ihr das Tutorial mithilfe des Beispielcodes von Schritt 1 und einer eigenen Joomla!-Installation bis hierher verfolgt haben, dann sollte eure Website nun in etwa so aussehen:
Die schlechte Nachricht: Die Seite sieht natürlich noch sehr bescheiden und wenig aufregend aus. Die gute Nachricht: Das werden wir nun ändern!
Die ersten Schritte: Variable, globale Styles, seitenübergreifende Elemente
Zu Beginn eines jeden Styling-Prozesses haben sich bei uns die folgenden Schritte als erste Schritte bewährt:
- Variablen anlegen (Farben, Typographie, Abstände etc.)
- Globale Styles definieren
- Seitenübergreifende Elemente stylen (bspw. Footer)
Nachdem diese Schritte erledigt sind, kann man sich mit einzelnen Elementen auf der Website beschäftigen und diese Schritt für Schritt in das gewünschte Layout überführen.
Da es an dieser Stelle zu aufwendig und wenig sinnvoll wäre jede einzelne CSS-Deklaration ausführlich zu besprechen und darzustellen, möchten wir die Chance nutzen um allgemeine Tipps und Tools mit auf den Weg zu geben, die sich in unserem Agentur-Alltag bewährt haben:
- Mobile First!
- CSS custom properties
- CSS-Grid und CSS-Flexbox (Hervorragende Guides auf CSS-Tricks)
- BEM als Naming-Convention für (S)CSS-Klassen
- SCSS-Partials / -Modules zur besseren Strukturierung von Styles
- Utility-Variablen für Abstände und Typography
Alle Styles/Scripts sind zudem im Github-Repository des fertigen Templates (erscheint mit dem abschließenden Artikel dieser Reihe im August) einsehbar. Bei Detailfragen kannst du dich gerne über die sozialen Medien oder unter
Nachdem wir die ersten Styles für unser Template hinterlegt haben können wir uns im nächsten Schritt mit der Gestaltung der einzelnen Seitenelemente beschäftigen. Los geht’s!
Das Override System in Joomla: Komponenten und Module nach deinen Wünsche gestalten
Joomla! bietet ein umfangreiches System, um die Standard-Ausgabe von Modulen und Komponenten an die eigenen Wünsche anzupassen. Dies geschieht mit Hilfe von Template-Overrides.
Da dies unserer Erfahrung in einer Vielzahl der Projekte notwendig ist, gilt es, sich mit diesem Werkzeug vertraut zu machen. Hat man Overrides einmal verstanden, sind sie ein mächtiges Werkzeug, um Kundenwünsche wahr werden zu lassen.
Hier geht’s zur Joomla!-Dokumentation zu Template-Overrides: https://docs.joomla.org/Understanding_Output_Overrides
Die Funktionsweise von Template-Overrides ist schnell erklärt. Innerhalb unseres Template-Verzeichnis können wir einen weiteren Ordner “html” anlegen. Innerhalb dieses Ordners können wir eine Kopie der Datei hinterlegen, die wir überschreiben möchten.
Schauen wir uns hierzu unser Beispiel-Projekt an: Auf der Seite “Cases” soll in einem mehrspaltigen Raster die verschiedenen Referenzprojekte kurz angeteasert werden. Die Reihenfolge, in der die Informationen angezeigt werden sollen, ist die folgende:
- Intro-Image
- Subtitle
- Title
Vergleichen wir dies mit der Standard-Ausgabe von Joomla (s. Screenshot), so fällt auf, dass zum einen die Reihenfolge der Informationen eine andere ist und zum anderen, dass der Subtitle (noch) nicht ausgegeben wird. Die Ausgabe des Subtitles haben wir in den Einstellungen des Custom-Fields bewusst ausgestellt, da wir die Positionierung und das umliegende Markup in unserem Overrides selbst steuern wollen.
Um die gewünschten Änderungen an der Ansicht für unser Template zu hinterlegen, müssen wir nun also unseren ersten Overrides anlegen, in diesem Fall für die Kategorie-Blog ansicht (com_content / category).
Wir könnten nun händisch die einzelnen Dateien aus dem folgenden Verzeichnis:
JOOMLABASE/components/com_content/views/category/tmpl/TEMPLATEDATEIEN.PHP
in unser Template-Verzeichnis kopieren:
TEMPLATE_NAME/html/com_contenct_category/TEMPLATEDATEIEN.PHP
Einfacher funktioniert es jedoch direkt über die Administrations-Oberfläche von Joomla selbst, die ebenfalls die Funktion bietet, Template-Overrides mit wenigen Klicks anzulegen.
Hierzu reicht es, den Administrationsbereich unseres Templates aufzurufen und im Reiter “Create Overrides” die gewünschte Komponente und Ansicht (bzw. das gewünschte Modul) auszuwählen. Anschließend wird die benötigte Ordnerstruktur automatisch in unserem Template-Verzeichnis angelegt.
Projekte in der Übersicht - Category Blog
Nachdem wir die benötigten Dateien für unseren Override angelegt haben, können wir im nächsten Schritt mit der eigentlichen Arbeit am Code beginnen. Innerhalb des Overrides müssen primär 2 Änderungen vorgenommen werden:
- Anpassung der Inhaltsreihenfolge
- Inhalte ausgeben: $this, $this->item, $this->item-XYZ
- Integration des Subtitles (Custom Field)
Reihenfolge von Elementen anpassen:
Im ersten Schritt wollen wir wie besprochen den Titel unterhalb des Intro-Images ausgeben. Hierzu müssen wir in der Datei blog-item.php die Reihenfolge der dafür vorgesehen Platzhalter tauschen.
Hierzu schneiden wir den Code, der für die Ausgabe des Intro-Images zuständig ist aus Zeile 48 und fügen diesen oberhalb des Codes ein, der für die Ausgabe des Titels zuständig ist (Zeile 30).
Laden wir die Projekte-Seite nun neu, sehen wir, dass sich die Reihenfolge der Elemente gedreht hat und nun den Vorgaben unseres Layouts entspricht.
Inhalte ausgeben - $this, $this->item, $this->item->XYZ
Für den Fall, dass nicht nur Inhaltsblöcke ihre Position tauschen sollen, sondern weitere beitragsbezogene Inhalte zum Layout hinzugefügt werden gibt es eine goldenen Code-Schnipsel, der einem alle Inhalte des Beitrags-Objekt listet.
$this -> item ist die Variable, hinter dem sich der aktuelle Beitrag (das dazugehörige PHP-Objekt) verbirgt. Mit Hilfe des folgenden Code-Schnipsel kann das Beitrags-Objekt mit Hilfe von PHP ausgegeben werden, sodass die gewünschten Informationen bequem gesucht und gefunden werden können.
<pre><?php var_dump($this->item); ?></pre>
Möchten wir beispielsweise zusätzlich zum Beitragstitel auch den Alias auf der Seite ausgeben, sind uns jedoch unsicher, wie dieser aufgerufen werden kann, können wir uns mit Hilfe des oben genannten Code-Schnipsel zunächst das komplette Beitrags-Objekt im Frontend ausgeben.
Dort finden wir schnell, was wir suchen. In diesem Fall wissen wir nun, dass wir den Alias mit dem folgenden Code ausgeben können:
<?php echo $this->item->alias ;?>
Ausgegeben wir in diesem Fall der String “bananas-for-peace” der insgesamt 17 Zeichen lang ist.
Haben wir alle Inhalte, die ausgegeben werden gefunden, können wir im Anschluss die Ausgabe per var_dump wieder aus unserem Override löschen.
Custom Fields in Override ausgeben
Im nächsten Schritt wollten wir den Subtitle, der als Custom Field gepflegt wurde, in unseren Override einfügen. Hierzu müssen wir im ersten Schritt Ordnung in unsere Custom-Fields bekommen.
Ordnung? Nun, Joomla gibt die Custom-Fields als sog. Array zurück - und zwar genau genommen als assoziatives Array, bei dem der jeweilige Schlüssel für den Aufruf (also gewissermaßen der “Name” des Elements im Array) die ID des Fields ist. Das ist zwar eindeutig, im Code aber wenig lesbar - denn wer weiß schon was $customFields[1] war!
Mit Hilfe des folgenden Codes strukturieren wir die Custom-Fields des jeweiligen Beitrags daher so, dass wir anschließend einzelne Inhalte (Value, Label) eines Custom-Fields mit Hilfe des Namens des Custom Field abrufen können.
$customFields = $this->item->jcfields;
foreach ($customFields as $customField)
{
$customFields[$customField->name] = $customField;
}
Den Code können wir an einer beliebigen Stelle in der Datei einfügen, wichtig ist nur, dass der Code vor der Ausgabe Custom-Field-Daten platziert ist.
Nun haben wir alle Werkzeuge zur Hand, um den Subtitle zwischen dem Intro-Image unseres Beitrags und dem Beitragstitel auszugeben. Der Name des Customfields ist “subtitle”, entsprechend können wir den Inhalt des Custom-Fields mit dem folgenden Code ausgeben:
<?php echo $customFields['subtitle']->value ;?>
An der richtigen Stelle platziert ergibt sich der folgende Code:
Schauen wir nun in unser Frontend, so werden wir sehen, dass der Subtitle (sofern er gesetzt wurde) wie gewünscht zwischen Intro-Image und Beitragstitel ausgegeben wird.
Der Code haben wir um eine kleine If-Abfrage ergänzt, um vorab zu überprüfen, ob für das ausgegebene Custom-Field ein Wert eingetragen wurde. So können wir der Ausgabe einer leeren <h3> vorbeugen.
Nachdem wir nun die HTML-Ausgabe der Ausgabe mit Hilfe unseres ersten Template-Overrides an unsere Bedürfnisse angepasst haben können wir uns im nächsten Schritt an die Styling-Anpassungen setzen und das gewünschte Design aus den grafischen Entwürfen in Code überführen.
Mit Hilfe von CSS-Grid kann das gewünschte Layout schnell und unkompliziert umgesetzt werden. Die Textausgabe oberhalb der eigentlichen Blogbeiträgen pflegen wir als Kategorie-Beschreibung, die oberhalb der Blogeinträge ausgegeben wird.
Projekte-Detailseite - Custom Fields flexibel nutzen
Nachdem wir uns im vorherigen Schritt mit der Übersichtsseite der Referenzprojekte beschäftigt haben, wollen wir uns nun mit der Detailseite eines Projekts beschäftigen. Auf diesem sollen neben einem Bild und Text weitere Informationen zum Projekte (erbrachte Leistungen, Technologien etc). im immer gleichen Layout präsentiert werden.
Da es sich im Falle der Referenzen um einzelne Beiträge handelt, müssen wir für genau diese Ansicht einen Override anlegen. Los geht’s!
Zur Übersichtlichkeit hier nochmal das Design, dass Umgesetzt werden soll:
Hierzu erstellen wir zunächst die gewünschte Markup-Struktur mit Platzhalter-Texten und werden diese im Anschluss durch die Inhalte unser Custom-Fields ersetzen.
Override anlegen und als Beitrags-Layout bereitstellen
Vielen von euch wird das Auswahlfeld “Layout” im Tab “Options” eines Menüeintrags oder Beitrag bereits aufgefallen sein. Mit Hilfe von Template-Overrides ist es nämlich nicht “nur” möglich, die Standard-Ausgabe von Joomla zu überschreiben, sondern darüber hinaus auch möglich verschiedene Layouts für verschiedene Zwecke anzulegen. Im Falle unseres Beispiels können wir so gezielt ein gesondertes Layout für Referenzen erstellen, Blogbeiträge und Textseiten wie bspw. das Impressum bleiben hiervon jedoch unberührt.
Hierzu gehen wir zunächst den Weg wie zuvor auch und legen über die Administrations-Oberfläche einen neuen Template-Override für die Ansicht com_content / article an. Die gewünschten Dateien wurden nun dem Ordner html in unserem Template-Verzeichnis hinzugefügt.
In einem zweiten Schritt benennen wir nun die Dateien default.php und default_links.php in casestudy.php und casestudy_link.php um, um ein neues Layout zu erstellen.
In der Administrationsoberfläche stehen uns nun beide Layouts zur Verfügung. Dort wählen wir das gewünschte Layout aus und speichern den Menüeintrag.
Achtung: Bitte beachtet, das Vererbungs-Konzept von Parametern in Joomla.
Das Markup der Referenz-Beiträge anpassen
Auch in diesem Override strukturieren wir zunächst unsere Custom Field Inhalte wie auch auf der Übersichtsseite mithilfe des bekannten Code-Snippets.
Anschließend können wir die Informationen zum Projekt als “definition-list” unterhalb der Überschrift ausgeben.
Es folgt das Beitragsbild (fullimage), unter dem eine Kurzeinleitung, die wir zuvor per Custom-Field gepflegt haben, sowie Introtext und der Beitragstext ausgegeben werden.
Starten wir mit dem Beitragsbild. Das Beitragsbild wir bereits ausgegeben und muss entsprechend in unserer Datei zu finden sein. Nach einer kurzen Suche finden wir den zuständigen Code-Abschnitt:
Anders als beispielsweise beim Introtext sehen wir, dass an dieser Stelle nicht direkt das Fullimage ausgegeben wird, sondern ein Layout mit Hilfe der JLayoutHelper-Funktion geladen wird.
Würden wir also die Ausgabe des Beitragsbildes editieren wollen, müssten wir das entsprechende Layout (Joomla/Content/Fullimage) bearbeiten. Layout-Overwrites folgen derselben Systematik wie Template-Overwrites auch und können ebenfalls über das Backend angelegt werden.
Da dies in diesem Fall zunächst nicht nötig ist, überspringen wir diesen Punkt. Wichtig ist jedoch, dass ihr wisst, dass und wie man Layouts editieren kann, um die gewünschte Ausgabe für Seitenelemente zu erzeugen.
Unterhalb des Beitragsbild fügen nun wie gewohnt die Inhalte unsere Custom-Fields und den Introtext ein. Beide Inhalte liegen in einem umliegenden <div>-Element, dass aus stylinggründen als container fungiert. Darunter geben wir uns per $this->item->fulltext den Inhalt des Artikels OHNE Introtext aus.
Geschafft - auch hier haben wir nun alle Inhalte und die passende Markup-Struktur, zur Darstellung des gewünschten Layouts in unserem Override hinterlegt und können diese nun mithilfe von CSS entsprechend den Layoutvorgaben stylen.
Wenige Minuten CSS-Magie später sieht die Seite dann auch schon aus wie gewünscht:
Im nächsten Teil unseres Tutorials möchten wir mit euch gemeinsam noch die drei fehlenden Seiten aufbauen: Home, Team und Kontakt und dabei das gelernte Wissen vertiefen.
Wir hoffen, dass euch unser Tutorial bis hierhin den Einstieg in die Entwicklung von Joomla!-Templates erleichtert hat. Bei Fragen und Rückmeldungen zu unserem Artikel sind wir natürlich jederzeit für euch per Mail oder in den sozialen Medien erreichbar. Wir freuen uns auf euer Feedback.