Zeitreise Dokumentation

Demo / Theme kaufen

Zeitreise Bild-Maße in Pixel:
• Standard Artikelbilder (inkl. Beitragsbild): 1005
• Sticky Post Beitragsbild (wenn Startseite genutzt wird): 2010
• Breite Footer Widgets + Overlay Widgetbereich: 590
• Breite Portfolio + Services Images: 1280
• Breite Team Images: 800 x 960
• Header Slider-Bilder: 2560 x 1440

Hinweis: Da die Bilder im Zeitreise teilweise sehr groß sind, ist es wichtig alle Bilder in möglichst geringer Dateigröße abzuspeichern. Bei der Bearbeitung von Bildern in einem Bildbearbeitungsprogramm reicht daher 70% der max. Dateigröße. Zusätzlich ist es sinnvoll ein Programm wie JPEGmini zu nutzen, um die Dateigröße von Bildern weiter zu reduzieren.

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 Zeitreise Theme-Ordner (zeitreise.zip) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um das Zeitreise-Theme direkt über den WordPress-Adminbereich zu installieren, klickst du im WordPress-Admin-Menü auf Design → Themes. Hier findest du den Button Installieren ganz oben auf der Seite. Über den Button Theme hochladen kannst du dann die zeitreise.zip Datei von deinem lokalen Computer auswählen und installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Zeitreise-Theme ist jetzt das aktuell aktive Theme deiner Webseite.

Wichtig: Der Zeitreise Theme-Ordner muss für das Hochladen direkt über den WordPress-Adminbereich im zip-Format sein.

1.2. Installation via FTP-Programm

Alternativ zur Installation des Themes direkt über den WordPress-Adminbereich kannst du den entzipten Zeitreise Theme-Ordner auch mit Hilfe eines FTP-Programms (z.B. dem kostenlosen Programm Filezilla) über Web-FTP auf deinen Serverspace 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 Zeitreise in der Vorschau-Ansicht unter Design → Themes bei den verfügbaren Themes in deinem WordPress-Adminbereich. Dort kannst du das Theme dann aktivieren.

2. Die Startseite

Nach der Theme-Installation wird standardmäßig die normale Blog-Ansicht von Zeitreise auf der Startseite gezeigt. Wenn du die individuelle Startseite des Themes nutzen möchtest, musst du dir als erstes eine neue, individuelle Startseite einrichten und diese als statische Startseite speichern.

Dazu erstellst du eine neue, leere Seite (z.B. mit dem Titel „Start“ oder „Startseite“) und wählst für diese Seite im Bearbeitungsfeld „Attribute“ das Template Front Page (Startseite) aus. Jetzt kannst du unter Design → Anpassen → Statische Startseite diese neue Startseite als „statische Startseite“ auswählen.

Möchtest du zusätzlich auch die Standard-Blogansicht nutzen (wie wir es auch über den Link „Blog“ in der Zeitreise Live-Demo tun), kannst du eine weitere neue, leere Seite anlegen (z.B. mit dem Namen „News“ oder „Blog“) und diese unter Design → Anpassen → Statische Startseite als „Beitragsseite“ auswählen.

2.1. Die Startseite mit Inhalten füllen

Auf der Startseite kannst du die folgenden Inhaltsbereiche anzeigen:

a) Den Standard-Inhalt der Startseite. In der Live Demo nutzen wir diesen Bereich, um einen Introtext anzuzeigen.

b) Eine bestimmte Anzahl von Portfolio-Projekten. Die Anzahl deiner Projekte kannst du unter Design → Anpassen → Theme Optionen → Startseite festlegen.

Um das Portfolio zu nutzen, musst du als erstes das kostenlose Jetpack-Plugin installieren. Dann musst du das Plugin mit einem ebenfalls kostenlosen WordPress.com-Konto verknüpfen, jetzt die Jetpack-Einstellung „Individuelle Inhaltstypen“ aktivieren und dann unter Einstellung → Schreiben die Portfolio-Projekte aktivieren.

c) Eine bestimmte Anzahl deiner neuesten Blogbeiträge. Auch die Anzahl der Blogbeiträge kannst du unter Design → Anpassen → Theme Optionen → Startseite bestimmen.

d) Ein Team-Bereich. Diesen kannst du über den Widgetbereich „Team“ unter Design → Widgets (oder Design → Anpassen → Widgets) mit Hilfe des „Team (Zeitreise)“ Widgets anlegen.

e) Ein Referenzen-Slider (Testimonials-Slider). Dazu benötigst du wie schon beim Portfolio das Jetpack-Plugin. Nach der Plugin-Installation und der Aktivierung der „individuellen Inhaltstypen“ kannst du die Referenzen-Option unter Einstellungen → Lesen aktivieren und deine Referenzen über das Admin-Menü einfügen. Unter Design → Anpassen → Theme Optionen → Startseite kannst du jetzt noch die Anzahl der angezeigten Referenzen im Slider bestimmen.

3. Der Headerslider

Um den Fullscreen-Headerslider auf deiner Startseite zu nutzen (das geht auch, wenn du den Blog oder eine anderer statische Seite als Startseite nutzt), musst du unter Design → Anpassen → Startseite Headerbilder zwischen 1-5 Bilder einfügen. Die Maße deiner Headerbilder sollten 2560x1440px sein. Je nach Bildschirmformat werden deine Bilder dann etwas skaliert.

Wenn du keinen Slider, sondern nur ein Headerbild einfügen möchtest, musst du einfach nur ein Bild einfügen. Außerdem kannst du zu jedem Bild noch einen kleinen Text einfügen. Um den Text als Link anzuzeigen, kannst du optional eine Link-URL in den Headerbild-Option einfügen.

4. Widgetbereiche

Im Zeitreise-Theme gibt es einen Widgetbereich im Overlay, rechts neben dem Hauptmenü. Außerdem gibt es drei weitere Widgetbereiche im dreispaltigen Footer.

Hier kannst du alle WordPress-Standardwidgets und Jetpack-Widgest einbinden. Um einen Newsletter in einem der Widgetbereiche zu promoten, haben wir außerdem das Mailchimp for WordPress-Plugin unterstützt.

5. Seiten-Templates

5.1. Team-Seite

Neben dem Startseiten-Template hast du auch noch die Möglichkeit eine Team-Seite anzulegen. Dafür wählst du einfach auf einer neuen Seite unter Attribute / Template das Team-Page Template aus.

Wenn du schon für die Startseite den Team-Widgetbereich unter Design → Widgets angelegt hast, werden jetzt alle Teammitglieder auf der Team-Seite in einer großen Ansicht untereinander angezeigt.

Für die Team-Seite kannst du außerdem die Option Team-Text nutzen, um einen beschreibenden Text zu jedem Teammitglied zu schreiben. Du kannst in diesem Bereich auch Absätze und Links einfügen. Links musst du im HTML Format einfügen, wie z.B.:

[code]
Ellen auf <a href="https://twitter.com/ellenbauer/">Twitter</a>
[/code]

Außerdem kannst du die Team-Widgets auf der Startseite noch mit dem Team-Widget auf der Team-Seite verlinken. Dazu musst du einfach eine ID für die Team-Seite eintragen (z.B. ellen-bauer) Die URL zum Team-Mitglieder auf der Teamseite lautet dann:
http://themes.elmastudio.de/zeitreise/who-we-are/#ellen-bauer.

5.2. Portfolio-Seite

Als weiteres Seiten-Template kannst du eine Portfolio-Seite anlegen. So hast du die Möglichkeit einen kleinen Intro-Text zu deinem Portfolio zu schreiben (indem du einfach den normalen Inhaltsbereich deiner Seite nutzt). Dann kannst du das Template „Portfolio-Page“ unter „Attribute“ auswählen und deine Portfolio-Projekte werden automatisch auf der Seite angezeigt.

Zeitreise bietet drei Optionen für die Ansicht des Portfolios an. Das einspaltige Layout (wie auf der Startseite) oder ein zwei- oder drei-spaltiges Masonry Grid-Layout. Du kannst das Portfolio-Layout unter Design → Anpassen → Theme Optionen → Portfolio-Seite auswählen.

5.3. Services-Seite

Um dein Angebot in einem ansprechenden Layout präsentieren zu können, haben wir auch noch ein Services-Template vorbereitet. Hier musst du einfach nur das Template „Services-Page“ unter Attribute auswählen und dann über den Text-Editor den folgenden Beispiel-Code kopieren und einfügen.

Jetzt musst du den Beispiel-Code nur noch mit deinen Texten und Inhalten füllen. Wenn du weitere Services einfügen möchtest, müsstest du nur diesen Code kopieren und einfügen:

[code]
<div class="service cf">
<div class="service-header">
<div class="centered-wrap">
<div class="centered">

YOUR SERVICE 2 TEXT HERE

</div>
</div>
</div>
<div class="service-thumbnail">UPLOAD YOUR SERVICE IMAGE 2 HERE (width 1280px)</div>
</div>
[/code]

6. Theme Optionen und Anpassungsmöglichkeiten

Unter Design → Anpassungen kannst du den WordPress-Customizer mit einer Live-Vorschau aufrufen. Hier findest du auch alle Anpassungs-Optionen (einige haben wir ja schon angesprochen) für das Zeitreise-Theme.

6.1. Ein eigenes Logo

Dein eigenes Logo-Bild kannst du unter Design → Logo einfügen. Den Standard-Titel und Beschreibungstext kannst du dann unter Seiten-Titel deaktivieren. Am besten ist es (vor allem wenn du den Header-Slider nutzt), wenn du dein Logo als transparentes PNG-Bild speicherst.

6.2. Farben

Im Tab Farben kannst du die Textfarbe deines Standard Seiten-Titels, die Standard-Hintergrundfarbe, die Text-Linkfarbe und die Hintergrundfarbe des Overlay- und Testimonialsbereiches anpassen. Da die Schrift dieser beiden Bereiche weiß ist, solltest du immer eine dunkle Farbe wählen.

Außerdem kannst du unter Theme-Optionen → Startseite eine weiße Schrift für deinen Header-Slider wählen. Das ist sinnvoll, wenn du dunkle Headerbilder nutzt.

6.3. Theme Optionen

Im Tab Theme Optionen findest du allgemeine Einstellungsoptionen, Optionen für die Startseite und die Portfolio-Seite.

Hinweis zu eigenen CSS-Anpassungen:
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. Ein hilfreicher Artikel mit Tipps zu CSS-Anpassungen im Theme ist auch: Eigenes CSS in ein WordPress-Theme integrieren – so funktioniert’s

7. Individuelle Menüs

Im Adminbereich unter Design → Menüs kannst du dir ein eigenes Haupt-Menü anlegen. Dieses erscheint im Zeitreise-Theme immer in der linken Spalte des Overlay-Bereiches, welcher über den „Menü-Button“ oben rechts im Theme aufrufbar ist.

Außerdem kannst du noch ein Social-Links Menü anlegen, um deine Social-Seiten in einer extra-großen Schrift ganz unten im Footer des Themes zu verlinken.

8. Typografie Optionen

Du kannst eine Reihe von extra Typografie-Styles im Zeitreise-Theme nutzen, um deine Texte noch ansprechender und individudeller zu präsentieren. Hier findest du auch noch eine Übersicht der Text-Styles in der Live-Demo.

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- und Fullwidth-Inhaltsbereiche – Um Inhalte in der max. Theme-Breite oder sogar in einer Fullwidth-Ansicht auf Seiten oder in Artikeln anzuzeigen, kannst du diese Inhalte in einem extra div-Container mit diesen CSS-Klassen anzeigen (wichtig! immer den Text-Editor und nicht den visuellen Editor dazu nutzen):

[code]
<div class="wide-content">
Dein Inhalt hier, Text, Videos oder Bilder, alles ist möglich…
</div>
[/code]

[code]
<div class="fullwidth-content">
Dein Inhalt hier, Text, Videos oder Bilder, alles ist möglich…
</div>
[/code]

9. 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 Zeitreise Live-Demo.

10. Unterstützte Plugins

Jetpack für Portfolio und Referenzen (über die individuellen Inhaltstypen), sowie für Teilen-Buttons, Jetpack Widgets wie Blog Subscribe, Carousel Galerie-Slideshow, Tiled Gallery, Kontaktformulare und Infinite Scroll
Contact Form 7 für Formulare (z.B. das Kontaktformular)
MailChimp for WordPress Lite für ein Mailchimp-Newsletter Formular in einem der Widgetbereiche

11. Theme-Übersetzung

Zeitreise 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 Zeitreise-Nutzer zur Verfügung stellen möchtest, würden wir uns sehr freuen.)

12. Child Theme

Falls du Zeitreise ü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 Zeitreise Eltern-Themes nicht verloren gehen. Du kannst dir den vorbereiteten Zeitreise Child-Theme Ordner herunterladen. So kannst du schnell mit deinen Anpassungen loslegen.

13. Text-Dokumentation drucken oder als PDF speichern

Um die Zeitreise Theme-Dokumentation als PDF zu speichern oder auszudrucken, kannst du einfach den Print Friendly-Button klicken und die von dir gewünschten Optionen (z.B. Drucken mit oder ohne Bilder oder nur Ausschnitte der Dokumentation drucken) auswählen.

Print Friendly and PDFAusdrucken / PDF speichern