ElmaStudio

Quick Specs (all Zeitreise measurements in pixels)
• Default post width (also Featured Image width): 1005
• Sticky Post Featured Image width: 2010 (on Front Page)
• Footer Widget + Overlay Widget width: 590
• Portfolio + Services image widths: 1280
• Team Image width: 800 x 960
• Header Slider Images: 2560 x 1440

Note: Since a lot of images are quite big in the Zeitreise theme, it’s important that you try to save your images with a low image file size. It’s enough to save images with 70% file size in programs like Photoshop. Then you can also use a tool to decrease the file size further (like JPEGmini).

1. Theme Installation

After the successful theme purchase you will receive an email including your individual theme or theme bundle download link. With this link you can download the Zeitreise theme folder (zeitreise.zip).

1.1. Installation via the WordPress admin panel

After downloading the zeitreise.zip file to your local computer, please go to Appearance → Themes in your WordPress admin panel and click the Install button at the top of the page. Now click the Upload Theme button and upload the zeitreise.zip file from your computer. You can activate the theme by hovering over the preview image, here you will see the Activate button.

1.2. Installation via FTP

Alternatively you can also install the theme directly to your server with a FTP client (e.g. Filezilla). Just drop the un-ziped Zeitreise theme folder into your …/wp-content/themes/ folder. Now you can see the Zeitreise theme in your WordPress admin panel under Appearance → Themes → Available Themes. From there you can activate the Zeitreise theme.

2. The Front Page

After the theme installation the default blog will be your front page. To use the custom Zeitreise Front page, you will need to create a new, empty page first. Then choose the Template Front Page under “Page Attributes” in your page admin panel. Now you can go to Appearance → Customize → Static Front Page and choose your new created Page as your Front Page.

If you also want to show the default blog (and maybe link to it in your main menu like we did in the Zeitreise live demo) you will need to create another new, empty page and call it “Blog” or “News”. The Page Template should stay the default one. Now you can choose your new page as your “Posts Page” under Appearance → Customize → Static Front Page.

2.1. Add content to your Front page

You can add a number of content sections to the custom Zeitreise Front page:

a) The default page content of the Front page. We used this content to show a short intro text.

b) A number of Portfolio projects. You can set the number of projects to show under Appearance → Customize → Theme Options → Front page.

To use the Portfolio you first need to install the free Jetpack plugin. Then you need to connect the plugin in your admin area with an also free WordPress.com account. After you have done this you can now activate the “Custom Content Types” in the Jetpack settings and activate your Portfolio (and the testimonials, if you also want to use them) under Settings → Reading.

c) A certain number of blog posts. Again you can set the number of blog posts to show on the front page under Appearance → Customize → Theme Options → Front page. If you mark a post as a sticky post it will be shown in a single column on the front page.

d) A team area. You can set up the team area by including the “Team Member (Zeitreise)” widget into the Team widget area under Appearance → Widgets.

e) A testimonial slider. To show the slider you will need to use the Jetpack plugin with its “Custom Content Type” feature (the same feature as used for the portfolio). After Jetpack is set up, you need to activate your testimonials under Settings → Reading. To set the number of testimonials in the slider go to Appearance → Customize → Theme Options → Front page.

3. The Header Slider

to use the fullscreen front page slider you only need to add your slider images under Appearance → Customize → Front Page Header Images. You can also just use one big header image, if you only add one header image.

The images should have the dimensions of 2560×1440 pixels. The images will then be scaled automatically, depending on the screen size.

You can also add small text links (at the left bottom of the screen) with text links by filling out the text and link option for each slider image.

4. Widget Areas

Zeitreise offers one widget area at the right column of the overlay area and additional three widget areas for the three-column footer.

You can use all standard widgets and the additional Jetpack widgets. To show a newsletter widget in one of the widget areas we prepared the Mailchimp for WordPress plugin for Zeitreise.

5. Page Templates

Next to the Front page you can also use additional page templates we prepared especially for the Zeitreise theme.

5.1. Team Page

To use the Team page just choose the Template “Team Page” under Attributes in the page admin area. If you already prepared the Team widget area for the Front page, the Team widgets will show automatically on your Front page in a bigger one-column design. If you included the Team Member text in the widget you can now see the additional team member info here, too. You can use HTML to include links in the text:

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

You can also include links from the Team widget on the Front page to each team member on the Team page. To do this you need to fill out the team member ID (e.g. ellen-bauer) and then add the link URL from the Team page like so:

[code]

Who we are

[/code]

5.2. Portfolio page

You can also use the “Portfolio page template” to show all your portfolio projects and add a little intro text above your projects. For the intro text you can just use the default page content area. Then you only need to choose the “Portfolio Page” template under “Page Attributes”.

You can choose between three different layout types to show your portfolio. The default big one-column layout (like on the Front page) or a two- or three-column masonry grid layout. You can choose the portfolio layout under Appearance → Customize → Theme Options → Portfolio page.

5.3. Services-Page

To show your services in a nice, individual layout you can use the “Services Page” template. Then you need to copy and paste the following example code snippet into the text editor area of your services page and change the example content with your own text and images.

to add more services sections just add another code snippet like this one:

[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 Options

Under Appearance → Customize you will find all customization options for the Zeitreise theme.

Under Logo you can upload your own logo image to use instead of the default site title and description text. You can then uncheck the “Display Header Text” option in the Site Identity tab. Especially if you also use the header slider option, you should prepare your logo image as a transparent PNG file.

In the Colors tab you can change your default site title and description text color, the themes background color, your text link color and the default dark background color of the testimonials and overlay area (since the text in this areas is white, please always choose a darker color).

You can also choose a light text color for the header slider texts under Theme Options → Front page.

Under Theme Options you find all all options general theme options as well as the options for the Front page and the Portfolio page.

A note on custom CSS:
To include custom CSS you can use the Custom CSS feature of the Jetpack WordPress plugin, in case you have already installed the Jetpack plugin. Or you can use the Simple Custom CSS WordPress plugin. Please read our blog post “How to use Custom CSS in WordPress” for further info.

7. Custom Menu

You can find the two custom menu options for Zeitreise under Appearance → Menus. Here you can include pages, categories, tags, custom links, portfolio types or projects as menu items. You can choose your new custom menu as the “Primary menu” (visible in the overlay section in the theme) in the menu settings at the bottom of your new custom menu.

To show your Social Links at the bottom of the Zeitreise footer you can create a custom Social Links menu using custom links to your social sites. You just need to mark your Social menu as the “Footer Social Menu” in the Menu settings.

8. Typography Styles

You can use a number of typography styles to design more interesting posts and pages. (Here is an overview of all typography styles in the Zeitreise live demo).

Pull Quotes – You can use pull quotes on your text, by wrapping a sentence or short text in a p tag with the CSS class “pull-left” or “pull-right” for left or right aligned pull quotes.

[code]
<p class=”pull-left”>This is a left-aligned pull quote text.</p>
[/code]

Wide and fullwidth content areas – You can add extra wide and even full-width content areas in your posts and pages using the following additional div containers with the CSS classes:

[code]
<div class=”wide-content”>
Your content here, images, text or iframe videos…
</div>
[/code]

[code]
<div class=”fullwidth-content”>
Your content here, images, text or iframe videos…
</div>
[/code]

9. Shortcodes

You can find a documentation and code snippets (ready to copy/paste) for all Zeitreise shortcodes on the Zeitreise live demo Shortcode page.

10. Supported Plugins

Zeitreise is ready to be used with the following WordPress plugins:

• Jetpack for the Portfolio and Testimonial custom content types as well as for share buttons, blog subscribe widget, Jetpack Carousel Gallery or Infinite Scroll
• Contact Form 7 for forms
• MailChimp for WordPress

11. Theme Translations

Zeitreise is ready for theme trans­la­tions. You can add your own trans­la­tion or cust­o­mize an exis­ting trans­la­tion easily using the WordPress plugin Loco Translate. (It would be great if you like to make your Zeitreise theme translation available to other theme users. Please let us know, if you want to share your translation.)

12. Child Theme for Customizations

If you want to cust­o­mize the Zeitreise theme a little further and you need to change the code in the styleeheet (style.css) or in any of the theme tem­plate files, please con­sider crea­ting a child theme for your changes. Using a child theme is quite easy and saves all your changes from being over ­written by a future update of the Zeitreise parent theme. You can find more infor­ma­tion on crea­ting a child theme in the article “WordPress Child Theme Basics” on the Themeshaper blog.

To get started you can download the sample child theme folder for the Zeitreise theme. Download: Zeitreise Child-Theme via GitHub.

13. Print Doc / Save as PDF

To print out or save a PDF file of this Zeitreise theme documentation, just click in the Print Friendly button below. You can choose to exclude images from your print file or delete certain parts of the text.

Print or Save as PDF