Richten Sie verschiedene Vorlagen für verschiedene Seiten in Joomla ein. Einrichten verschiedener Vorlagen für verschiedene Seiten in Joomla Bearbeiten des Stils der neuen Vorlage

Nicht alle Seiten Ihrer Joomla-Site können das gleiche Design haben und gleich aussehen. Einige Websites haben radikal unterschiedliche Farbschemata und Blocklayouts für verschiedene Bereiche der Website. Und Joomla ermöglicht Ihnen genau das.

In diesem Tutorial zeigen wir Ihnen, wie Sie verschiedene Vorlagen oder verschiedene Stile derselben Vorlage für verschiedene Bereiche Ihrer Joomla-Site verwenden.

Schritt 1: Allgemeine Informationen zu Templates in Joomla

Joomla hat standardmäßig drei Hauptvorlagen vorinstalliert: Atomic, Beez5 und Beez2.

Diese drei Vorlagen sind in der Spalte „Standort“ mit „Site“ gekennzeichnet und gelten für den öffentlichen Teil der Site. Die Bluestork- und Hathor-Vorlagen sind mit „Administrator“ gekennzeichnet und nur für den Admin-Bereich vorgesehen. Sie können auch andere Vorlagen von Drittanbietern installieren oder Ihre eigene Vorlage entwerfen oder erstellen.

Eine der Vorlagen ist immer als Standard für die externe Seite markiert und eine für den Admin. Um herauszufinden, welche die Standardeinstellung ist, suchen Sie nach dem goldenen Stern in der Spalte „Standard“, wie in der Abbildung unten gezeigt:

Sie können die Standardvorlage jederzeit ändern, indem Sie einfach auf einen der leeren Sterne klicken, dann wird es golden und die entsprechende Vorlage wird standardmäßig verwendet.

Wenn Sie Joomla zum ersten Mal installieren, wird das Beez2-Template standardmäßig installiert. Wenn Sie auf den Vorlagennamen klicken, können Sie die Vorlageneinstellungen bearbeiten.

Wie Sie in diesem Beispiel sehen können, wird diese Vorlage standardmäßig für verwendet alle Seiten und muss nicht für jeden Menüpunkt eingestellt werden.

Schritt 2. Verschiedene Vorlagen auf verschiedenen Seiten anzeigen

Werfen wir einen Blick auf andere Vorlageneinstellungen und sehen Sie, wie Sie sie einer bestimmten Kategorie zuweisen.

  • Öffnen Sie den Vorlagen-Manager
  • Schauen Sie sich die Beez5-Vorlage an.
  • Klicken Sie auf die Schaltfläche Bearbeiten.

  • Das CMS installiert verschiedene Templates auf verschiedene Seiten ah, basierend ausschließlich auf den Menülinks. Gehen Sie zum Abschnitt "Menübindung" und Sie können auswählen, für welche Menülinks diese Vorlage verwendet werden soll.
  • Das Element „Standard“ ist auf „Keine“ eingestellt, da wir bereits einen anderen Standardvorlagensatz haben.
  • Aktivieren Sie das Kontrollkästchen neben dem gewünschten Menüpunkt.

  • Speichern Sie diese Menübindung und testen Sie dann Ihre Website.
  • Nach dem Speichern sehen Sie, dass Sie die Beez_20-Vorlage standardmäßig installiert haben.
  • Und das Beez5-Template ist einem eigenen Menüpunkt zugeordnet (Assigned) und wird durch ein grünes Häkchen gekennzeichnet.

So Hauptseite sieht mit dem Standard-Template - Beez2 aus:

Es sei daran erinnert, dass das Ändern der Vorlage keine Auswirkungen auf den Inhalt hat. Dadurch ändern sich jedoch Titel, Logo, Design und Positionen der Module. Das bedeutet, dass Sie die Vorlage nicht einfach ändern können, ohne zusätzliche Arbeit zu leisten.

Sie müssen das Logo sowohl für Vorlagen als auch für Modulpositionen an Ihre Bedürfnisse anpassen. Gesamtstruktur Grundstück.

Schritt 3: Erläuterung der unterschiedlichen Positionen von Modulen in verschiedenen Vorlagen

Die Positionen der Beez5- (oben) und Beez2-Module (unten) sind fast gleich, sodass es bei einer Änderung des Designs nicht zu großen Problemen kommt. Allerdings gibt es auch Unterschiede.

Einer der offensichtlichsten Unterschiede zwischen den beiden Vorlagen ist die Position der Module um das Logo herum. In Beez5 befinden sich die Module Position-1 und Position-0 unter dem Logo:

In Beez 2 befindet sich das Position-0-Modul über dem Logo und Position-1 darunter:

Es ist ein ziemlich kleiner Unterschied, aber gutes Beispiel wie sich Templates in ihren Modulpositionen unterscheiden können. In diesem Fall ist es ein ziemlich einfaches Beispiel, da alle Module den gleichen Namen haben.

Was aber, wenn die Positionen der Module völlig unterschiedlich sind, an verschiedenen Orten unter verschiedenen Namen?

  • Kehren Sie zum Vorlagen-Manager zurück und verknüpfen Sie die Atomic-Vorlage mit einer anderen Kategorie.
  • Sie werden sehen, dass es völlig unterschiedliche Modulpositionen hat, die Sie im Bild unten sehen können:

Diese Seite enthält nur die folgenden Modulpositionen:

  • atomares Topmenü
  • Atom-Topquote
  • atomare Suche
  • atomare Seitenleiste
  • atomar-unten links
  • atomare Mitte

Wenn Sie diese Vorlage zusätzlich zu Beez2 auf Ihrer Website haben möchten, müssen Sie mehr Arbeit leisten.

Schritt 4. Hinzufügen eines Menümoduls für die neue Vorlage

  • Wählen Sie Erweiterungen > Modul-Manager aus dem Menü und klicken Sie auf die Schaltfläche Erstellen.
  • Wählen Sie Menü.
  • Binden Sie das neue Modul an die atomare Seitenleistenposition.
  • Eine neue Funktion in Joomla 2.5 ist das Notizfeld. Dies wird Ihnen helfen, in den Modulen mit einer großen Anzahl von Modulen nicht verwirrt zu werden.

  • Jetzt binden wir das Modul an bestimmte Seiten.
  • Wählen Sie „Nur auf ausgewählten Seiten“.
  • Aktivieren Sie das Kontrollkästchen neben dem gewünschten Menüpunkt.

  • Jetzt ist mein Menü in der Seitenleiste. Sie können sehen, dass dies ein horizontales Menü ist und dort nicht genügend Platz dafür ist. Wir müssen versuchen, eine bessere Position für ihn zu finden.

  • Gehen Sie zum Modul-Manager und verschieben Sie das Menü an die atomare oberste Menüposition. Das Menü sollte nun wie im Bild unten aussehen:

Ich habe dieses Beispiel nur bereitgestellt, um die Art von Problemen zu veranschaulichen, auf die Sie stoßen könnten, wenn Sie anfangen, Vorlagen hinzuzufügen, ohne vorher zu recherchieren.

Sie können auch eine Kopie Ihrer vorhandenen Vorlage als Thema für einen alternativen Abschnitt oder eine alternative Seite verwenden. Der große Vorteil ist, dass sich alles an einem Ort befindet und Sie nur die notwendigen Änderungen mit dem CSS vornehmen müssen, wodurch größere Nacharbeiten vermieden werden.

Schritt 5: Vorlagenstile vs. verschiedene Vorlagen

Anstatt völlig unterschiedliche Vorlagen für verschiedene Seiten Ihrer Website zu verwenden, können Sie einfach erstellen Verschiedene Optionen Ihre Standardvorlage. Das neue Chance bei Joomla 2.5. Sie können auf jeder Seite unterschiedliche Designs erstellen, ohne alle oben beschriebenen Schritte ausführen zu müssen.

  • Gehen Sie zum Vorlagen-Manager.
  • Aktivieren Sie das Kontrollkästchen neben der Vorlage, die Sie kopieren möchten. In diesem Fall verwenden wir Beez2.
  • Klicken Sie auf das Symbol „Duplizieren“.

  • Aktivieren Sie das Kontrollkästchen neben Beez2-Default (2).
  • Klicken Sie auf die Schaltfläche "Bearbeiten".

  • Beez2 wird mit zwei Farbschemata geliefert, Personal und Nature. Wählen Sie Natur aus der Dropdown-Liste.
  • Verknüpfen Sie die Vorlage mit einer Kategorie im Abschnitt Link zum Menü.
  • Beachten Sie, dass es andere Optionen gibt, Sie können auch das Logo, den Site-Namen und die Navigationsposition ändern.

  • Jetzt haben Sie eine Site mit zwei verschiedenen Stilen derselben Vorlage, die an verschiedene Menüpunkte angehängt sind.

  • Sie können beim Erstellen von Menüelementen auch eine Vorlage binden.
  • Wenn Sie sich im Menü-Manager befinden, können Sie die gewünschte Vorlage für diesen Menüpunkt festlegen (siehe unten).


Bei Fragen nutzen Sie bitte unsere

Dieser Artikel zeigt, wie man die Standard-Beez_20-Vorlage "Gummi" erstellt. Damit nimmt die Seite unabhängig von der Bildschirmauflösung die gesamte Breite des Bildschirms ein. Diese Methode getestet auf Joomla 1.7 und Joomla 2.5

Falls gebraucht Dateimanager Hosting-Anbieter oder FTP-Manager, dann müssen Sie die Stildatei " unsere_seite\templates\beez_20\css\position.css". Wenn es verwendet wird Schalttafel Joomla, dann müssen Sie zu gehen Erweiterungen -> Vorlagenmanager

Auf der rechten Seite sind alle Beez_20-Template-Stylesheets aufgelistet. Eine Zeichenfolge finden css/position.css bearbeiten und klicken Sie darauf. Ein Fenster wird geöffnet Vorlagenmanager: Datei bearbeiten.

Hier können wir diese Datei bearbeiten.
Ermitteln der Breite des Haupt-Div. Es ist gleich 1050px.

#alle
{
Rand: 0 automatisch;
maximale Breite: 1050px
Polsterung: 0px
Textausrichtung: links;
}

Ändern Sie diesen Wert auf 100 %.

#alle
{
Rand: 0 automatisch;
maximale Breite: 100 %
Polsterung: 0px
Textausrichtung: links;
}

Dann finden wir in derselben Datei die Breite der Fußzeile. Es ist gleich 1020px.

#footer-inner
{
maximale Breite: 1020px
Rand: 0 automatisch;
Schriftgröße: 0,8em
Polsterung: 10px 15px 15px 10px;
}

Ändern Sie diesen Wert auf 100 %.

#footer-inner
{
maximale Breite: 100 %
Rand: 0 automatisch;
Schriftgröße: 0,8em
Polsterung: 10px 15px 15px 10px;
}

Speichern Sie die Datei und gehen Sie zu Ihrer Website - sehen Sie, was passiert ist. Um nach dem Ändern des CSS sofort das Ergebnis zu sehen, muss der Browser die neuen Stile neu laden. Klicken Sie dazu auf Strg+r

Das letzte, was zu tun ist, ist die Kopfzeile zu korrigieren. Nachdem sich die Website auf die volle Breite des Bildschirms ausgedehnt hatte, verschob sich das Header-Bild nach rechts und ein blaues Rechteck erschien auf der linken Seite. Dies geschah, weil die Breite des Bildes 1060 Pixel beträgt. Das Header-Bild befindet sich im Ordner „ unsere_seite\templates\beez_20\images\personal\personal2.jpg". Sie können Ihr eigenes größeres Bild erstellen und die Datei personal2.jpg durch Ihre eigene ersetzen (lassen Sie den Dateinamen personal2.jpg). Wenn kein passendes Bild vorhanden ist, können Sie die Anzeige des Bildes im Stylesheet ausschalten und die gesamte Kopfzeile wird blau.

Um das Bild auszuschalten, benötigen wir eine Datei mit Stileinstellungen, die sich unter " unsere_seite\templates\beez_20\css\personal.css". Darin finden wir:

Logoheader
{
Hintergrund: #0c1a3e URL(../images/personal/personal2.png) keine Wiederholung unten rechts ;
Farbe:#fff;
Mindesthöhe: 200 Pixel;
}

Entfernen Sie die URL (../images/personal/personal2.png) ohne Wiederholung unten rechts. Sie sollten Folgendes erhalten:

Logoheader
{
Hintergrund: #0c1a3e;
Farbe:#fff;
Mindesthöhe: 200 Pixel;
Rand:0em 10px 0 10px !wichtig;
}

Wir speichern die Datei. Das ist alles.

Bevor wir uns in die Diskussion einer bestimmten Vorlage vertiefen, versuchen wir noch einmal herauszufinden, was eine Vorlage in Joomla ist. Nach dem Verständnis der meisten Benutzer ist das Template für die äußere Gestaltung der Seiten Ihrer Website verantwortlich. Eine Vorlage ist jedoch nicht nur ein Design.

Es enthält auch Mechanismen, die die Platzierung von Daten, Methoden und Intervallen zum Anzeigen verschiedener Datenmodule bestimmen, Sprachoptionen usw.
IN vorherige Versionen Joomla verwendete das Basis-Beez-Template. IN letzte Version Vorlagen, die auf seiner Basis erstellt wurden (Beez5, Beez_20), haben sich im Vergleich dazu erheblich verändert. Bei der Erstellung des Beez-Templates haben die Entwickler in mögliche Optionen zur Anpassung an die Bedürfnisse jedes Websitebesitzers investiert. Quelle die Schablone kann leicht geändert werden. Durch Änderungen an den Cascading Stylesheets konnte ohne großen Aufwand eine komplett neue Designvorlage erstellt werden. Im Laufe der Arbeit versuchten die Designer jedoch, diese Vorlage nicht zu verwenden, sondern entwickelten ihre eigene von Grund auf neu.
Als Ergebnis wurden für die Version Joomla 2.5 zwei komplett neue Templates entwickelt. Beide Vorlagen verwenden JavaScript, die beez5-Vorlage verwendet HTML5 und die beez_20-Vorlage erfordert keine Überschreibungen. Wenn das Layout nicht erforderlich ist, um Tabellen zu verwenden. Die Klassennamen der kaskadierenden Tabellen wurden geändert.

Vorlageneigenschaften

Neue Vorlagen wurden allgemein verfügbar, es wurde möglich, die Position des Navigationsblocks auf der Seite zu wählen, WAI-ARIA-Funktionsbezeichnungen wurden hinzugefügt, Module in Registerkarten können angezeigt werden automatischer Modus, zusammenklappbare Positionen für Module und Spalten wurden hinzugefügt, zwei Designformen sind in das beez_20-Template eingebaut: natürlich und menschlich, Unterstützung für die HTML5-Sprache wurde dem beez5-Template hinzugefügt.
Es ist kein Geheimnis, dass es Menschen gibt, die eine geschwächte Fähigkeit haben, die Welt um sich herum wahrzunehmen. Jemand ist nicht in der Lage, visuell wahrzunehmen, jemand ist auf die Wahrnehmung von Geräuschen beschränkt. Allerdings verwenden diese Leute auch Informationsressourcen das Internet. Und alle erstellten Internetportale sollten für diese Benutzerkategorie konzipiert sein. Joomla-Vorlagen haben alle notwendige Werkzeuge Menschen mit Behinderungen die Möglichkeit zu geben, das Internet zu nutzen.
Beim Erstellen von Vorlagen müssen Sie die grundlegenden Anforderungen einhalten: Website-Materialien sollten sich nicht mit dem Design dieser Materialien überschneiden, die Website-Struktur sollte nicht überladen sein, die Navigation durch die Website-Seiten sollte durch Tastaturbefehle unterstützt werden, die Farbgestaltung des Inhalts sollte kontrastieren.
Der wichtigste Punkt aus Entwicklersicht ist die Trennung von Inhalt und Design. Dazu müssen Sie das tabellarische Design des Materials auf der Seite entfernen. Die Formatierung verwendet nur CSS. Das Material muss linear von oben nach unten aufgebaut werden.
Das semantische Design ermöglicht es Ihnen, auf der Grundlage von Überschriften, Listen usw. zwischen den Seiten der Website zu navigieren und eine allgemeine Vorstellung vom Dokumentenmaterial zu erstellen.
Das lineare Layout des Seiteninhalts hat jedoch einen Nachteil - es kann einige Zeit dauern, bis Sie zu den erforderlichen Informationen gelangen (wenn die Informationen am Ende der Seite enthalten sind). Um dieses Problem zu beheben, können Sie HTML-Lesezeichen verwenden, um die Seitennavigation zu beschleunigen. In diesem Fall soll es ein zusätzliches Menü zum Bewegen auf der Seite erstellen. Für diejenigen, die bereits mit der Struktur der Website vertraut sind, kann dieses Menü ausgeblendet werden.
Zum Beispiel:

  • Zum Haupttext springen.
  • Gehen Sie zum Hauptnavigationsblock und melden Sie sich an.

Beim Erstellen einer Website müssen Sie auf das Farbschema im Design achten. Wenn wegen regelmäßiger Benutzer Beim Farbkontrast gibt es keinen signifikanten Unterschied, der Kontrast ist für Menschen mit Behinderungen von besonderer Bedeutung. In diesem Fall sollten Hintergrund- und Textfarbe kontrastreich sein. Maximaler Kontrast ist mit schwarzem Text auf weißem Hintergrund möglich. Um Probleme mit optischen Verzerrungen zu vermeiden, sollte der Hintergrund der Seite jedoch leicht farbig sein.

Ein Template ist eine Art Erweiterung in Joomla, die darstellt Aussehen deine Seite. Es werden zwei Arten von Mustern verwendet CMS Joomla: Front-End-Vorlagen und Back-End-Vorlagen. Front-End (Front-End) - bestimmt das Erscheinungsbild Ihrer Website. Dies ist der gesamte visuelle Teil der Internetressource, den der Benutzer sieht. Backend ist eine Art Template, mit dem Sie das Erscheinungsbild (Schnittstelle) der Joomla!

Joomla 2.5 bietet mehrere Standardvorlagen, die mit der CMS-Installation geliefert werden (3 Frontend- und 2 Backend-Vorlagen):

Vorlagen für Websites

  • Beez 20 (Standardvorlage);
  • Beez 5;
  • Atomar.

Vorlagen für das Admin-Panel

  • Bluestorkk (Standardvorlage)
  • Hathor.

Vorlagenzweck

Die Vorlage steuert das Layout und Erscheinungsbild der Website. Es bietet ein Framework, das gemeinsame Elemente, Module, Komponenten und Plugins zusammenführt, und stellt ein Cascading Style Sheet für die Site bereit.


Bei der Erstinstallation von Joomla! Die beiden im obigen Abschnitt erwähnten Vorlagen sind automatisch enthalten. Auf anderen Websites finden Sie viele weitere Vorlagen für jeden Geschmack und jede Farbe. Eine große Anzahl von Vorlagen steht den Benutzern in kostenloser Form unter verschiedenen Lizenzen zur Verfügung, aber es gibt auch kostenpflichtige Vorlagen. Jeder Benutzer kann seine eigene Vorlage erstellen, Sie müssen sie nur definieren H viel Wissen in diesem Bereich.

Vorlagen werden über das Joomla-Admin-Panel installiert im Extension Manager, nach der Installation steht das Template im Template Manager zur Verfügung.

Warum Joomla! verwendet Vorlagen?

CMS Joomla! hebt mehrere Schlüsselaufgaben hervor, die mit der Erstellung einer effektiven Internet-Ressource verbunden sind. Eine dieser Aufgaben ist die Erstellung einer ästhetischen (Layout-)Site. Eine solche Aufgabe umfasst Entscheidungen über die Platzierung von Inhaltselementen (Module, Plugins und Komponenten).

Beim Erstellen einer neuen Webseite sollte die Position der meisten Inhaltselemente gleich bleiben (Menüs, Seitenleiste, Bannerplätze usw.). Außerdem möchte der Benutzer das gleiche Erscheinungsbild für alle sehen neue Seite und deren Inhalt (Schriftarten, Überschriftenstile, Farbpalette usw.). Außerdem kann der Benutzer einige gemeinsame Elemente der Site ändern, um andere Anzeigeoptionen usw. (z. B. Module) festzulegen. Am Ende, nach ein wenig Design, werden Sie sich auf ein allgemeines Layout für Ihre Website festlegen und das Problem lösen, eine Vorlage für jede Seite und ihren Inhalt vorzubereiten.

Und jetzt lohnt es sich, darüber nachzudenken. Warum Code für jede Seite separat schreiben, wenn Sie eine Vorlage für jeden Abschnitt auf der Website verwenden können und wenn Sie eine neue Seite hinzufügen, müssen Sie nur „die Lücken ausfüllen“. All dies ist nicht so einfach, wie sie sagen, aber dieses Material enthält grundlegende Informationen zur Verwendung der Vorlage und zu ihrem Zweck.

Die Hauptimplikation dieses Materials besteht darin, dass die Vorlage das Erscheinungsbild Ihrer Website steuert und es dem Ressourcenadministrator gleichzeitig ermöglicht, dem tatsächlichen Inhalt mehr Aufmerksamkeit zu schenken, anstatt Code zu schreiben.

Vorlagenbearbeitung. Was kann getan werden?

Die Vorlage wird verwendet, um Inhalte, die von einem Webbrowser zum weiteren Lesen auf dem Bildschirm geladen werden, organisch zu gestalten. Sie können Farbschemata, Bilder und Effekte, Schriftarten und das Layout selbst unabhängig voneinander ändern.

Layout. Eine Vorlage ist ein Bereich, in dem die Designstile Ihrer Website festgelegt werden. Dazu gehört die Platzierung verschiedener Elemente (Komponenten, Module und Plugins), die dafür verantwortlich sind Verschiedene Arten Inhalt. Zum Beispiel: verschiedene Menüs (Sie können den Menüstil aus auswählen bestehende Optionen und verwenden Sie sein Beispiel, um Ihr eigenes, einzigartiges Menü zu erstellen).

Farbpalette. Mit CSS können Sie die Farbe des Hintergrunds, der Links, des Textes und mehr ändern.


Schriftarten. Dasselbe gilt für Schriftarten. Mit CSS-Stilen können Sie das einheitliche Erscheinungsbild von Texten auf Ihren Seiten festlegen. Auf diese Weise können Sie das Erscheinungsbild aller Textinformationen einfach ändern, indem Sie eine oder zwei Dateien bearbeiten, anstatt jede einzelne Seite.

Bilder und Effekte. Sie haben die volle Kontrolle darüber, wie Bilder auf der Seite angezeigt werden, und können sogar Flash-Effekte wie Dropdown-Menüs erstellen.

18. Juni 2012

Verschiedene Vorlagen für verschiedene Seiten der Website - 3,8 von 5 basierend auf 5 Stimmen

Nicht alle Seiten einer Website müssen das gleiche Design haben. Einige Websites haben unterschiedliche Farben und Stile für verschiedene Seiten. Andere Seiten haben radikal unterschiedliche Designs in einem Abschnitt von einem anderen. Mit Joomla können Sie eine ähnliche Idee umsetzen.

Dieses Tutorial zeigt Ihnen, wie Sie mehrere Vorlagen oder mehrere Stile derselben Vorlage für verschiedene Teile Ihrer Joomla-Site verwenden.

Schritt 1: Parsing eines Standard-Joomla-Templates

Joomla hat 3 Standardvorlagen: Atomic, Beez5 und Beez2. Diese drei Vorlagen sind für die Website. Die anderen beiden – Bluestork und Hathor – sind dem Joomla-Admin-Panel gewidmet. Sie können auch eine andere Vorlage installieren oder eine eigene erstellen.

Standardmäßig wird immer eine der Vorlagen zugewiesen. Die Standardvorlage ist mit einem goldenen Stern gekennzeichnet, wie in der Abbildung gezeigt.

Sie können die Standardvorlage ganz einfach ändern, indem Sie auf einen der nicht gefüllten Sterne klicken. Wenn der Stern übermalt wird, wurde ein neues Standardmuster zugewiesen.

Nach der Installation Joomla-Vorlage der Standardwert ist Beez2. Durch Klicken auf den Vorlagennamen können Sie einige der Vorlageneinstellungen bearbeiten.

In diesem Beispiel sehen Sie die Seite mit den Vorlageneinstellungen. Diese Vorlage wird standardmäßig zugewiesen und ist nicht speziell an einen Menüpunkt gebunden. (Option: Link zum Menü).


Schritt 2: Weisen Sie verschiedenen Joomla-Seiten verschiedene Vorlagen zu

Sehen wir uns an, wie Sie eine andere Vorlage bearbeiten und wie Sie sie einer bestimmten Kategorie zuweisen.

  • Schließen Sie die Vorlagenbearbeitungsseite Beez2.
  • Vorlage zum Bearbeiten öffnen beez5, indem Sie das Kontrollkästchen neben der Vorlage aktivieren und auf die Schaltfläche klicken: "Bearbeiten".

Das Verbinden verschiedener Templates mit verschiedenen Seiten der Site wird ausschließlich über Menüpunkte realisiert. Fahren Sie mit dem Abschnitt „Menübindung“ fort und Sie können die Seiten der Website auswählen, denen Sie separate Vorlagen zuweisen möchten.

In diesem Fall ist das Feld „Standard“ für diese Vorlage auf gesetzt "Nein", weil wir bereits eine andere Vorlage standardmäßig verwendet haben. Aktivieren Sie das Kontrollkästchen neben "Kategorie 1" oder jede andere, die Sie verwenden werden.

Speichern Sie diese Bindung und testen Sie dann Ihre Website. Nach dem Speichern sehen Sie, dass die Beez20-Vorlage standardmäßig zugewiesen ist. Und das Beez5-Template ist mit einem grünen Häkchen markiert.

So sieht die Homepage mit der Standard-Beez-Vorlage aus.

An dieser Moment Es sei daran erinnert, dass das Ändern der Vorlage den Inhalt der Website nicht beeinflusst. Allerdings ändern sich Titel, Logo, Design und Positionen der Module. Das bedeutet, dass Sie die Vorlage nicht einfach ändern können, ohne zusätzliche Arbeit zu leisten.

Schritt 3: Definieren verschiedener Modulpositionen in verschiedenen Vorlagen

Die Positionen der Module in der Beez5-Vorlage (oben) und der Beez20-Vorlage (unten) sind fast gleich, daher sind die Änderungen geringfügig. Allerdings gibt es auch Unterschiede.

Ein bemerkenswerter Unterschied zwischen den Vorlagen ist die Position der Module neben dem Logo. Im Beez5-Template befinden sich die Positionen 1 und 0 unterhalb des Logos.

In Beez20 befindet sich Position-0 über dem Logo und Position-1 darunter.

Dies ist ein eher geringfügiger Unterschied, aber ein gutes Beispiel dafür, wie sich Modulpositionen in Vorlagen unterscheiden können. In diesem Fall wird ein einfaches Beispiel gegeben, da die Positionen der Module in beiden Vorlagen die gleichen Namen haben.

Was aber, wenn sich die Positionen der Module in den Templates nicht nur in der Position, sondern auch im Namen unterscheiden?

Kehren Sie zum Vorlagen-Manager zurück und verknüpfen Sie die Atomic-Vorlage mit der Seite Kategorie 2 Sie sehen die Atomic-Vorlage auf der Seite Kategorie 2 Es hat völlig unterschiedliche Modulpositionen, und Sie können es im Bild unten sehen.

Diese Seite listet die Positionen der Module auf:

  1. atomares Topmenü
  2. Atom-Topquote
  3. atomare Suche
  4. atomare Seitenleiste
  5. atomar-unten links
  6. atomare Mitte

Wenn Sie möchten, dass das Atomic-Template zusätzlich zu Beez20 funktioniert, müssen Sie mehr Arbeit leisten. Es ist nicht garantiert, dass eine Modulposition, die in Beez20 funktioniert, auch in Atomic funktioniert.

Schritt 4: Hinzufügen des Menümoduls zur neuen Vorlage.

  • Gehen Sie zu Erweiterungen - Modul-Manager und klicken Sie auf die Schaltfläche Erstellen.
  • Wählen Sie den Typ des Menümoduls aus.
  • Weisen Sie Ihrem neuen Modul eine Position zu atomare Seitenleiste.
  • Joomla 2.5 führt ein neues Feature ein: das Notizfeld für ein Modul. Dies verhindert, dass Sie verwirrt werden, wenn Sie viele Module haben.

Jetzt werden wir das Modul nur an eine bestimmte Seite binden.

  • Wählen Sie in der Option "Bindung an Menüpunkte" den Wert aus "Nur auf bestimmten Seiten."
  • Aktivieren Sie das Kontrollkästchen auf der Seite, auf der Sie das Modul anzeigen möchten.

Das Menümodul befindet sich nun in der Seitenleiste. Sie haben vielleicht bemerkt, dass dies ein horizontales Menü ist und der Platz dafür begrenzt ist. Wir müssen erneut versuchen, eine bessere Position zu finden.

Gehen Sie zum Modul-Manager und verschieben Sie Ihr Menü an Position atomares Topmenü. Das Ergebnis seht ihr im nächsten Bild.

Schritt 5: Stile aus derselben Vorlage statt aus verschiedenen Vorlagen.

Anstatt völlig unterschiedliche Vorlagen auf verschiedenen Seiten Ihrer Website zu verwenden, können Sie einfach eine kleine Änderung an Ihrer Standardvorlage vornehmen. Dies ist eine neue Funktion, die in Joomla 2.5 eingeführt wurde. Mit dieser Technik können Sie mehr erstellen feine Unterschiede auf jeder Seite, ohne die oben beschriebenen Arbeiten ausführen zu müssen.

  • Gehen Sie zum Vorlagen-Manager.
  • Wählen Sie die Vorlage aus, die Sie duplizieren möchten (aktivieren Sie das Kästchen daneben).
  • Drück den Knopf "Duplikat".

  • Aktivieren Sie das Kontrollkästchen neben der Vorlage Beez2-Default (2).
  • Drück den Knopf "Ändern".

  • Beez20 ist in zwei Farbschemata erhältlich: Personal und Nature. Wählen Sie Natur aus der Dropdown-Liste.
  • Weisen Sie einem Menüpunkt eine Vorlage zu Kategorie 1 im Block "Link zum Menü". Bitte beachten Sie, dass es noch andere Einstellungen gibt, die Sie ändern können. Zum Beispiel: Logo, Seitenname und Navigationsposition.

Sie haben jetzt zwei verschiedene Vorlagenstile, die mit zwei Seiten Ihrer Website verknüpft sind.

  • Sie können auch beim Erstellen von Menüpunkten eine Vorlage zuweisen.
  • Wenn Sie sich im Menümanager befinden, können Sie beim Erstellen eines Menüeintrags einen Vorlagenstil binden.

Bewertung 3.80

Aufrufe: 25562

Wird geladen...
Spitze