Tutorial

  • Main Menü (Top)
  • Sidebar Menü
  • NewsflashPro - MetroBase

Main Menü

Hier gibt es keine Veränderung zum MetroBase Template. Lesen Sie dazu Diese Tutorial Main Menü (Top)

Sidebar Menü

Das MetroBasePro-Template hat die Möglichkeit ein Menü in der Sidebar einzublenden. Dafür sind folgende Einstellungen notwendig.
Klicken Sie oben in der Symbolleiste auf Erweiterungen/Module. Klicken Sie anschließend auf NEU und wählen als Modultyp: Menü. Geben Sie dem Modul einen Titel und wählen als Position: metro-sidebar-menu.
Unter Basisoptionen auf der rechten Seite stellen Sie "Untermenüeinträge anzeigen" auf ja, sofern ihr Menü Untermenüeinträge enthält. Und zum Abschluss stellen Sie unter Erweiterte Optionen / Menü-Tag-ID / sidebar-menu ein.
Bild 1 - MetroBasePro - SidebarMenu

Geben Sie das Modul frei und Speichern Sie es.

NewsflashPro - MetroBase

Bitte lesen Sie das MetroBase Newsflash Tutorial.

Im NewsflashPro Modul gibt es ein paar Optionen zusätzlich. Klicken Sie oben in der Symbolleiste auf Erweiterungen/Module. Sie sollten jetzt das Modul "Beiträge - Newsflash - MetroBase - Pro" sehen, es ist standardmäßig deaktiviert. Klicken Sie nun auf das Modul (Bild 2).
Bild 2 - NewsFlashPro - Options

Um Bilder effektvoll anzuzeigen (Demo) sind folgende Schritte notwendig:

  • Klicken Sie oben in der Symbolleiste auf Inhalt/Kategorien/Neue Kategorie. Geben Sie der Kategorie einen Titel. zum Beispiel: "MetroPro Bilder"
  • Jetzt erstellen Sie einen Beitrag in dieser Kategorie mit folgenden Inhalt:
     
    <div class="view view-fourth">
        <img src="images/beispiel.jpg" alt="" title="" />
        <div class="mask">
            <h2>Hover Style #1</h2>
               <p>Ihr Inhalt</p>
               <a href="#" class="button">Read More</a>
          </div>
    </div>
     
    oder diesen Inhalt:
     
    <div class="view view-eighth">
        <img src="images/beispiel.jpg" alt="" title="" />
        <div class="mask">
            <h2>Hover Style #2</h2>
               <p>Ihr Inhalt</p>
               <a href="#" class="button">Read More</a>
          </div>
    </div>
     
    Diese Bild Hover effekte stammen von http://tympanus.net/.
  • Als letztes laden Sie die Kategorie in "Zeile 3" (Bild 3).

    Bild 3 - NewsFlashPro - Katergorie laden

  • Die vierte und letzte Einstellung ist die Blockgröße und Blockbreite. Diese Größen richten Sich nach der Bildgröße/Bildbreite. In meinem Fall sind die Bilder 156px hoch und 250px breit.