Hawea Dokumentation

Hawea Maße (Pixel):
• Blog-Beitragsbild: 500 breit + Höhe flexibel
• Produktbild: 1500 breit, Höhe flexibel
• Produkt-Kategoriebild: 1410 breit + Höhe flexibel
• Startseiten Slider-Bild: Breite flexibel (maximal 1880) + 1200 hoch

Bild-Einstellungen WooCommerce:
(unter WooCommerce → Einstellungen → Produkte → Darstellung → Produktbilder)
• Katalogbilder: 1410 x 1000
• Einzelnes Produktbild: 1500 x 1800
• Produkt-Vorschaubilder: 650 x 780
• Genau zuschneiden, bei allen Bildern deaktivieren

Wichtig! Um Artikelbilder von bereits veröffentlichten Artikeln anzupassen, bitte das Regenerate Thumbnails Plugin installieren und einmal laufen lassen.

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 Hawea Theme-Ordner (hawea.zip) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um das Hawea-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 hawea.zip Datei von deinem lokalen Computer auswählen und installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Hawea-Theme ist jetzt das aktuell aktive Theme deiner Webseite.

Wichtig: Der Hawea 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 Hawea 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 Hawea 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

Bei Theme-Installation siehst du standardmäßig die dreispaltige Blog-Ansicht von Hawea mit der linksbündigen Sidebar. Um die individuelle Shop-Startseite zu nutzen, musst du als erstes das kostenlose WooCommerce-Plugin installieren.

Danach kannst du eine neue, leere Seite mit einem beliebigen Seiten-Titel (z.B. Front oder Start) in WordPress erstellen und für diese Seite unter Attribute → Template das Startseiten-Template auswählen und deine Einstellung speichern.

Jetzt kannst du unter Design → Anpassen → Statische Startseite deine neue Startseite als „statische Startseite“ auswählen.

Möchtest du auch die Standard-Blogansicht nutzen (wie du es auch über den Link „Blog“ in der Hawea Live-Demo siehst), musst 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 Shop-Elemente

Unter Design → Anpassen → Theme Optionen → Startseiten-Einstellungen findest du die Optionen für die WooCommerce-Shopbereiche der Startseite. Hier kannst du bestimmen welche Shop-Bereiche du anzeigen möchtest und wie viele Produkte bzw. Produktkategorien du im jeweiligen Bereich zeigen möchtest. Außerdem kannst du auch die Überschriften der Bereiche individualisieren.

2.2. Der Slider

Den Startseiten-Bilderslider kannst du unter Design → Anpassen → Startseite Sider einrichten. Du kannst zwischen 1-5 Bilder hochladen (siehe Bild-Maße in der grauen Infobox oben). Außerdem kannst du jedem Bild einen Link geben und einen zusätzlichen kleinen Text (HTML ist möglich) unter jedes Slides-Bild einfügen. Ein Beispiel für ein Text mit Link:

New In Store / <a href="http://themes.elmastudio.de/hawea/product-category/new-in/">Shop Now</a>
2.3. Der Seiten-Inhalt für extra Promotions

Um den farbig hinterlegten Textbereich der Hawea Startseite zu nutzen, kannst du einfach Text in normalen den Startseiten-Seiteninhalt einfügen. Du kannst so auch Buttons über den Text-Editor der Seite einbinden. Der Text mit Button aus der Hawea Live-Demo ist z.B.:

<h5><strong>New Years Sale</strong></h5>
01.01.16—31.01.16
<p class="big-font">Get 50% Discount Off All Products</p>
Use the coupon code "Happy New Year" to receive a 50% discount on all products (except new arrivals). We wish you happy shopping!

Shop Now
2.4. Instagram-Bilder auf der Startseite

Um eine Reihe von Instagram Bildern unten auf der Startseite zu zeigen, musst du das WP Instagram Widget installieren.

Dann kannst du unter Design → Anpassen → Widgets das Instagram-Widget in den Startseite – Instagram Widgetbereich einfügen.

3. Widgetbereiche und Widgets

Alle Widgetbereiche für Hawea findest du unter Design → Widgets oder unter Design → Anpassen → Widgets.

3.1. Die Sidebar

Der linksbündige Sidebar-Widgetbereich ist auf der Standard-Showseite, auf allen Seiten und im Blog (Blogstart- und Einzelseite) sichtbar.

Du kannst die Sidebar nutzen, um die WooCommerce-Widgets und alle Standard-Widgets zu integrieren.

3.2. Footer-Widgetbereiche

Hawea bietet auch einen optionalen, großzügigen Footer-Widgetbereich an. Der Footer besteht aus einem großen einspaltigen Widgetbereich Footer (einspaltig), einem zwei-spaltigen und einem fünfspaltigen Widgetbereich.

Der einspaltige Footer-Widgetbereich bietet sich z.B. besonders gut für ein Newsletter-Formular an. Wir haben dafür extra das MailChimp for WordPress-Plugin vorbereitet.

4. Individuelle Menüs

Im Adminbereich unter Design → Menüs kannst du dir ein eigenes Haupt-Menü für deine Hauptnavigation im Headerbereich und ein Social-Menü für die feststehenden Social-Iconlinks anlegen.

Du kannst ein Menü erstellen, indem du einen beliebigen Namen für dein Menü wählst und dann deine gewünschten Menüpunkte aus dem Optionen links in dein Menü hinzufügst. Nachdem du deine Menüpunkte angelegt hast, musst du dein neues Menü noch unter Menü-Einstellungen → Position im Theme unten im Menü als das jeweilige Menü markieren und speichern.

4.1. Social Links-Menü

Um deine Social-Links mit Icons links auf der Webseite feststehend anzuzeigen, musst du die Links mit Hilfe der „Link“-Option in einem eigenen Menü anlegen und das Menü als „Social-Menü“ speichern. Für die folgenden sozialen Dienste sind Icons vorbereitet:

Codepen, Digg, Dropbox, Facebook, Flickr, Google+, Instagram, LinkedIn, Pinterest, Path, Dribbble, PollDaddy, Pocket, Reddit, Skype, StumpleUpOn, Tumblr, Twitter, Vimeo, YouTube, WordPress.com, WordPress.org, Spotify, Feed (alle URLs mit /feed) und Email (mit mailto).

5. Theme Optionen und Anpassungen

Unter Design → Anpassen kannst du den WordPress-Customizer mit einer Live-Vorschau deiner Webseite aufrufen. Hier findest du alle Anpassungs-Optionen für das Hawea-Theme.

Theme Optionen – Unter Allgemein kannst den Footer-Kredittext anpassen und unter Startseiten-Einstellungen findest du alle Optionen für die Einrichtung der Hawea Shop-Startseite.

Startseite Slider – Hier kannst du deinen Bilder-Slides für die Startseite einrichten.

Farben – Hier kannst du die Textfarbe deines Seiten-Titels, die Theke-Hintergrundfarbe, deine Linkfarbe, die Footer-Hintergrundfarbe, die Hintergrundfarbe des Startseiten-Inhaltsbereiches, die Farbe des Sale-Buttons und die Text-Farbe des Sale-Buttons anpassen.

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

6. Typografie Optionen

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

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:

<span class="dropcap">E</span>rster Buchstabe…

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.

<p class="pull-left">Das ist ein linksbündiger Pullquote-Text.</p>

Intro-Text – Du kannst einen Text-Abschnitt in einer größeren Schrift anzeigen, z.B. den ersten Absatz deines Artikels oder deiner Seite. Dazu kannst du diesen Absatz in einen p tag mit der CSS-Klasse „intro“ setzen:

<p class="intro">Deinen Introtext hier einfügen…</p>

7. 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 Hawea Live-Demo.

8. Unterstützte Plugins

WooCommerce für Online-Shops
WP Instagram Widget für eine Instagram Bildervorschau
MailChimp for WordPress für ein Mailchimp-Newsletter-Formular
Jetpack 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)

9. Theme-Übersetzung

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

10. Child Theme

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

11. Dokumentation drucken oder als PDF speichern

Um die Hawea 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