Ubud Dokumentation

Video Tutorial

[lightgrey_box] Ubud Maße in Pixel:
• Standard Artikelbreite: 700 Pixel
• Beitragsbild-Breite (Thumbnails): mind. 970 Pixel breit (für Artikelbilder in voller Breite auf den Einzelartikelseiten)
• Standard-Seiten + wide-content Breite: 935 Pixel
• Full Width Seite: 1305 Pixel
Bitte beachten: Um Artikelbilder von bereits veröffentlichten Artikeln anzupassen, bitte das Regenerate Thumbnails Plugin installieren und einmal laufen lassen.
[/lightgrey_box]

1. Theme-Installation

Nach dem erfolgreichen Theme- oder Theme Bundlekauf erhältst du eine Email mit deinem individuellen Download-Link. Über diesen Link kannst du dir den Ubud Theme-Ordner (ubud.zip Datei) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um das Ubud-Theme direkt über den WordPress-Adminbereich zu installieren, klickst du im WordPress-Admin-Menü auf Design → Themes. Hier findest du neben dem Tab Themes verwalten den Tab Themes installieren. Ganz oben in der Leiste wählst du jetzt den Menü-Punkt Hochladen.

Der Ubud Theme-Ordner muss für das Hochladen direkt über den WordPress-Adminbereich immer noch im .zip-Format sein. Wähle also die Datei ubud.zip aus und klicke auf den Button Jetzt installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Ubud-Theme ist jetzt das aktuell aktive Theme deiner Webseite.

1.2. Installation via FTP-Programm

Alternativ zur Installation des Themes direkt im Adminbereich kannst du den entzipten Ubud Theme-Ordner auch mit Hilfe eines FTP-Programms (z.B. dem kostenlosen Programm Filezilla) auf deinen Serverplatz hochladen. Dafür musst du den kompletten Theme-Ordner in den WordPress Installations-Ordner …/wp-content/themes/ hochladen.

Nach dem Upload des Theme-Ordners findest du Ubud in der Vorschau-Ansicht unter Design → Themes bei den verfügbaren Themes in deinem WordPress-Adminbereich. Dort kannst du das Theme aktivieren.
Nach Oben ↑

2. Theme Optionen

Über Design → Anpassungen kannst du den WordPress-Customizer mit einer Live-Vorschau aufrufen. Dort findest du alle Anpassungs-Optionen für das Ubud-Theme.

2.1. Farb-Optionen

Individuelle Farbanpassungen sind möglich für: den Seiten-Titel Textfarbe, dieTheme-Hintergrundfarbe, die Link- und Link-Hoverfarbe und die Footer-Hintergrundfarbe. Da die Schrift im Footer standardmäßig weiß ist, sollte deine Footer-Hintergrundfarbe nicht allzu hell sein, so dass die Schrift noch gut lesbar ist.

2.2. Theme Optionen

Unter Theme-Optionen im Customizer findest du außerdem die Optionen, das Standard Grid-Layout für deinen Blog auszuwählen. Es kann zwischen einem 1, 2, 3, 4 oder 5-spaltigen Layout gewählt werden. Außerdem kannst du angeben, ob du deine Bilder im Hochformat, Querformat oder als Quadrate anzeigen möchtest.

Du kannst wählen, ob du die Haupt-Navigationsleiste im Header fixed positionieren möchtest. Diese Option ist erst auf Bildschirmen mit einer Mindestbreite von 1200px sichtbar. In den Theme-Optionen kannst du außerdem den Footer Credit-Text anpassen und die Teilen-Buttons (Facebook, Twitter und Pinterest) auf Einzel-Artikelseiten aktivieren.

2.3. Hinweis zu eigenem CSS

Um das Theme mit eigenem CSS anzupassen, kannst du das Custom CSS Feature von Jetpack nutzen, falls du das Jetpack-Plugin sowieso bereits installiert hast. Alternativ kannst du das Plugin “Simple Custom CSS” installieren, um dein eigenes CSS Theme-unabhängig einzutragen.
Nach Oben ↑

3. Headerbild und Header About Widget

Unter Design → Kopfzeile kannst wählen, ob du ein kleines Logo-Bild statt des Standard Blog-Titels und dem Beschreibungstext anzeigen möchtest. Du kannst dazu einfach ein Logobild in der gewünschten Größe (z.B. 300x100px) vorbereiten und das Bild über die Upload-Funktion in deinem Adminbereich hochladen.

Alternativ kannst du auch ein großes Headerbild einfügen (z.B. mit der maximalen Theme-Breite von 1305px). Auf kleineren Bildschirmen wird das Bild dann automatisch skaliert. Du kannst in der Option auch nur die Schriftfarbe des Titels anpassen oder unter Design → Anpassen → Seitentitel und Untertitel bestimmen, nur den Untertitel zu verbergen.

3.1. Header About Widget

Außerdem hat Ubud noch eine schöne Header About-Widget Option. So kannst du under Design → Widgets das About (Ubud) Widget in den About Header Wigetbereich einfügen und einen kleinen Introtext, einen weiterführenden About-Text (standardmäßig nicht sofort sichtbar) und ein About-Bild mit Bildunterschrift eintragen. Das About-Widget wird dann im Headerbereich angezeigt und die Zusatzinfo und das About-Bild wird erst bei Klick auf “Weitere Info” angezeigt.
Nach Oben ↑

4. Individuelle Menüs

Im Adminbereich unter Design → Menüs kannst du dir ein angepasstes Haupt-Menü für deine Hauptnavigation in der oberen Top-Leiste einrichten. Du kannst ein Menü erstellen, indem du einen beliebigen Namen für dein Menü wählst und dann deine gewünschten Seiten, Links, Kategorien, Schlagworte oder Formatvorlagen in dein Menü addierst. Nachdem du deine Menüpunkte angelegt hast, musst du dein neues Menü noch unter Menü-Einstellungen als Haupt-Navigation markieren und das neue Menü dann speichern.

Zusätzlich kannst du für die Footer Widgetbereiche weitere Menüs anlegen und diese dann über das “Individuelle Menü”-Widget (siehe Design → Widgets) in den vierspaltigen Footer einbinden.
Nach Oben ↑

5. Footer Widgets

Alle Widget_Optionen im Ubud-Theme findest du unter Design → Widgets. hier kannst du alle WordPress-Standardwidgets oder Jetpack-Widgets in die 4 Footer-Widgets von Ubud eintragen. Die Widgetbereiche 1-4 stehen für die vier Spalten im Ubud Footer-Bereich.

Zusätzlich kannst du das Social Links (Ubud) Widget in den Social Links Widgetbereich einfügen, um Icons mit Links zu deinen sozialen Profilen wie Twitter, Facebook und viele mehr direkt über dem Footer-Credittext anzuzeigen.
Nach Oben ↑

6. Full Width Seiten-Template

Neben Standardseiten mit einer Inhaltsbreite von 935px, kannst du auch Seiten mit der vollen Theme-Breite von 1305px anlegen. Dazu musst du einfach das Full Width Seiten-Template unter Attribute → Template im Adminbereich der jeweiligen Seite auswählen. Die Shortcodes für mehrspaltige Inhalte sind besonders gut für das Full Widget Seiten-Template geeignet.
Nach Oben ↑

7. Typografie Optionen

Du kannst eine Reihe von extra Typografie-Styles im Ubud-Theme nutzen, um deine Texte noch ansprechender zu präsentieren.

Dropcaps /Initial – Um einen Paragraph z.B. am Anfang eines Artikels hervorzuheben, kannst du einen großen Initial-Buchstaben zu Beginn des Absatzes nutzen. Dazu musst du diesen Code im HTML-Editor auf deinem Artikel oder auf deiner Seite nutzen:

[code]
<span class=”dropcap”>E</span>rster Buchstabe…
[/code]

Pull Quotes – Um einen Satz im Text noch einmal extra zu betonen, kannst du rechts- und linksbündige Pull Quotes im Text einfügen. Dazu musst du einfach ein oder zwei Sätze in einem p tag mit der CSS-Klasse “pull-left” oder “pull-right” einbinden.

[code]
<p class=”pull-left”>Das ist ein linksbündiger Pullquote-Text.</p>
[/code]

Wide-Content – Um extra Breiten Artikel-Inhalt von 935px statt der Standard-Arikelbreite von 700px (sehr schön für Bilder geeignet) in einem Artikel zu nutzen, kannst diesen Inhalt einfach in einem div-Container mit der CSS-Klasse “wide-content” einbinden. Ein Beispiel siehst du hier in der Ubud Live-Demo.

[code]
<div class=”wide-content”>
Dein Inhalt hier…
</div>
[/code]

Nach Oben ↑

8. Shortcodes

Du kannst Shortcodes für mehrspaltige Elemente, Infoboxen und Buttons nutzen. Beispiele und alle Codes zum Kopieren/Einfügen der Shortcodes findest du auf der Shortcode-Seite der Ubud Live-Demo.
Nach Oben ↑

9. Unterstützte Plugins

• Contact Form 7 für Formulare (z.B. das Kontaktformular)
• Jetpack für Jetpack Widgets, Carousel Galerie-Slideshow, Tiled Gallery und Infinite Scroll
• WP-PageNavi für eine nummerierte Seiten-Navigation (bitte deaktiviere auch hier die CSS-Styles des Plugins in den Plugin-Einstellungen)
Nach Oben ↑

10. Theme-Übersetzung

Ubud ist für die Übersetzung in weitere Sprachen vorbereitet. Am besten verwendest du das WordPress-Plugin Loco Translate, wenn du das Theme in eine weitere Sprache übersetzen oder eine Übersetzung anpassen möchtest. (Wenn du deine Übersetzung auch für andere Ubud-Nutzer zur Verfügung stellen möchtest, würden wir uns sehr freuen.)
Nach Oben ↑

11. Child Theme

Falls du Ubud über die Theme-Optionen hinaus individuell anpassen möchtest, solltest du am besten ein eigenes Child-Theme für deine Anpassungen anlegen. Auf diese Weise können deine Anpassungen bei einem Update des Ubud Eltern-Themes nicht verloren gehen. Du kannst dir den vorbereiteten Ubud Child-Theme Ordner herunterladen. So kannst du schnell mit deinen Anpassungen loslegen.
Nach Oben ↑