YoothemePro Kurzanleitung für Joomla!

Hier eine kleine Kurzanleitung zum Yootheme Builder.

Der Yootheme Builder ermöglicht es Inhalte auf der Website schnell und einfach anzupassen.

Den Builder öffnen

Zu Starten des Builders gibt es zwei Möglichkeiten:

1. Man öffnet im Bereich «Inhalt -> Beiträge» einen entsprechenden Artikel welcher schon mit dem Builder erstellt wurde.
2. Der zweite (meist besser Weg) ist die es den Builder über «Erweiterungen -> Templates» zu starten.

Arbeiten mit dem Builder

Grundsätzlich ist der Builder in zwei Spalten getrennt. Links sehen wir alle Inhalte (Bausteine) die auf der Seite verwendet werden und rechts die Vorschau der Website.

Achtung!!! Alle Aktionen zum Bearbeiten erstellen und Einstellen der Inhalte werden über die linke Spalte vorgenommen.

Neues Layout

Um ein neues Layout von Grund auf zu erstellen, klickt man links auf die Schaltfläche "Neues Layout" und beginnt, Abschnitte und Elemente hinzuzufügen. Alternativ kann man ein bestehendes Layout aus der Layoutbibliothek importieren, indem man auf die Schaltfläche "Bibliothek" klickt.

Jedes Mal, wenn ein Layout geändert wird, erscheinen in der oberen rechten Ecke die Schaltflächen Layout speichern und Abbrechen. Wenn man auf Abbrechen klickt oder den Page Builder verlässt, werden alle Layoutänderungen seit dem letzten Speichern verworfen.

Aufbau des Layouts

Ein Layout ist in drei verschiedene Bausteine organisiert.

1. Sektion: Sektionen gruppieren Inhalte in größeren visuellen Blöcken. Sie enthalten eine oder mehrere Zeilen.
2. Zeilen und Spalten: Zeilen bestehen aus einer oder mehreren Spalten, die wiederum Elemente enthalten.
3. Elemente: Die Elemente stellen den eigentlichen Inhalt dar.

Layout-Struktur

Ein neues Layout beginnt immer mit einer Sektion, in der eine Zeile mit einer leeren Spalte enthalten ist. Um das Layout entsprechend zu Bearbeiten und zu erweitern muss wie folgt vorgegangen werden:

1. Mit einem Klick auf das "+" in der leeren Spalte kann man nun ein Element hinzufügen.
2. Um eine neue Zeile hinzuzufügen fährt man mit der Maus über eine Zeile und klickt auf das "+" rechts unterhalb der bestehenden Zeile. Der Klick fügt eine neue Zeile direkt unterhalb ein.
3. Um eine neue Sektion einzufügen muss man mit der Maus über eine Sektion fahren und dann das kleine "+" auf der linken Seite wählen. Die Sektion wird dann direkt darunter eingefügt.
4. Per Drag & Drop lassen sich alle Elemente entsprechend verschieben.

Die wichtigsten Bestandteile

Titel

Werden in Yootheme als Headlines bezeichnet, wenn Sie nun im Builder über eine Headline mit Ihrer Maus fahren sehen Sie rechts blau umrandet welche Headline Sie gerade "anfahren".

Klickt man nun auf die Box mit dem Namen Headline. Öffnet sich ein kleiner Editor in dem der entsprechende Text eingefügt werden kann. Wichtig ist hier, dass man beim Einfügen per "Copy/Paste" die Textformatierungen entfernt.

Haben Sie Änderungen vorgenommen gehen Sie zurück in den Builder Hauptmenu und klicken auf Save Page.

Achtung! Da der Builder ein Server basierter dienst ist kann es einen Moment dauern bis der Save Button erscheint und Änderungen registriert werden. 

Text

Text verhält sich genau gleich wie ein Titel.

Image

Wichtig ist das alle Bilder die richtige Grösse, Format und Hochauflösend sind.

Um ein Bild einzufügen klicken wir nun auf select Image:
Wenn man "select Imag" angelkickt Öffnet sich ein Popup mit allen Dateien und Ordnern + der Möglichkeit neue Ordner anzulegen, Dateien hochzuladen und einer Suchfunktion die die Datei/Ordnernamen einschließt.

Wenn man nun ein Bild auswählt und die Auswahl mit «Select» (unten rechts) bestätigt sieht man das ausgewählte Bild in der Vorschau auf der Website.

Overlay-Element

Das Overlay-Element zeigt ein Bild mit einem Inhalts-Overlay an. Es hat ein Inhaltsfeld für Titel, Meta, Beschreibung, Bild und Link. Dies ist sehr nützlich, um Inhalte in einem Element zu gruppieren, anstatt separate Elemente zu verwenden. Wenn Sie mehrere Overlays nebeneinander haben, verwenden Sie das Gallery-Element, das mehrere Elemente anzeigen kann.

Panel-Element

Das Panel-Element zeigt ein Panel oder eine Karte mit Text und Bild an. Es hat ein Inhaltsfeld für Titel, Meta, Beschreibung, Bild und Link. Dies ist sehr nützlich, um Inhalte in einem Element zu gruppieren, anstatt separate Elemente zu verwenden. Wenn Sie mehrere Panels nebeneinander haben, verwenden Sie das Grid-Element, das mehrere Elemente anzeigen kann.

Galerie-Element

Das Gallery-Element zeigt mehrere Overlay-Elemente innerhalb eines Gitters an. Standardmäßig werden die Links in einem Fenster geöffnet. Alternativ können sie in einer Lightbox geöffnet werden, die auch das Navigieren zwischen den Elementen ermöglicht.

Grid-Element

Das Grid-Element zeigt mehrere Panel-Elemente innerhalb eines Gitters an. Standardmäßig werden die Links in einem Fenster geöffnet. Alternativ können sie in einem Leuchtkasten geöffnet werden, der auch das Navigieren zwischen den Elementen ermöglicht.

Kleine Tutorials für YOOtheme Pro

Video in voller Breite / Höhe einbinden

Um ein Video mit Flexiblen Höhen und Breiten einzubinden gibt es kleinen Trick:

1. Das Video-Element an der gewünschten Stelle einfügen
2. Im Video-Element unter Erweitert -> CSS muss noch der folgende Style eingefügt werden:

.el-element{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; height: auto}
.el-element iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%}

Jetzt ist die Videoeinbindung Flexibel in der Höhe / Breite und im 16:9 Format.

Joomla Template "YOOtheme Pro" um eigene Schriftarten erweitern

Schritt 1 - Schrift hochladen

Als erstes muss man natürlich die Schrift im Format woff woff2 hochgeladen werden. Am besten ins Verzeichnis "templates/yootheme/fonts"

Schritt 2 - Schrift im ins Theme Laden

Als nächstes muss die Schrift in das Theme geladen werden, dazu geht man in der Administration auf "Erweiterungen -> Templates -> NAME_DES_YOOTHEME_TEMPLATES

wird einfach des Theme im Customizer öffnen und unter "Einstellungen-> Benutzerdefinierter Code -> CSS/LESS". In das Feld muss dann an erster Stelle ein Code wie der folgende eingefügt werden:

@font-face { 

    font-family: 'SCHRIFTNAME'; 

    src: url('../fonts/DATEINAME1.woff2') format('woff2'), url('../fonts/DATEINAME2.woff') format('woff');

} 

Hinweis: Den Schriftnamen erhält man vom Herausgeber der Schrift bzw. der Quelle von der man sie bezogen hat.

Achtung! Es dürfen keine vorhandenen Dateien überschrieben werden, da diese bei einem Update sonst zurückgesetzt werden.

Schritt 3 - Auswählen der Schrift

Als letzter Schritt muss nun die Schrift noch in den Einstellungen des Themes ausgewählt werden. Zum Auswählen der Schrift geht man unter "Styles -> Global" oder in die gewünschte Komponente. Im Feld "FontFamily" trägt man dann den SCHRIFTNAMEN ein und drückt "Enter".