YoothemePro Kurzanleitung

Seite 1 von 2

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.