Pukeko Dokumentation

Bildmaße in Pixel:
• eigenes Logobild: Breite flexibel + 960
• Beitragsbilder: 2010 x 1340 (Höhe flexibel)
• Headerbild: 2000 x 1200 (Höhe flexibel)
• Produktbilder: 1340 + Höhe flexibel
• Teambild einspaltig: 2010 + Höhe flexibel
• Teambilder mehrspaltig: 736 + Höhe flexibel

Wichtig:Um Beitragsbilder bereits veröffentlichter Blogbeiträge anzupassen, kannst du das Regenerate Thumbnails Plugin verwenden.

1. Theme-Installation

Nach dem erfolgreichen Einzeltheme- oder Theme Bundlekauf erhältst du eine Email mit einem individuellen Download-Link für dein Theme oder Theme Bundle. Du musst den Hauptordner (pukeko-master.zip) erst einmal entdecken, um die dort enthaltenen Theme-Ordner in deine WordPress Installation hochzuladen.

Im pukeko-master.zip Ordner enthaltene Dateien:

• pukeko.zip Ordner
• elementor-templates Ordner
• pukeko-import.xml

1.1. Installation über den WordPress Adminbereich

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

1.2. Installation über FTP

Alternativ zur Installation des Themes direkt über den WordPress-Adminbereich kannst du den entzipten „pukeko“ Theme-Ordner auch mit Hilfe eines FTP-Programms (z.B. dem kostenlosen Filezilla) über Web-FTP auf deinen Webserver hochladen. Dafür musst du den „pukeko“ Theme-Ordner (entzippt) in den WordPress Installations-Ordner …/wp-content/themes/ hochladen.

Nach dem Upload des Theme-Ordners über das FTP-Programm findest du Pukeko im WordPress-Adminbereich unter Design → Themes in der Liste verfügbarer Themes. Dort kannst du das Theme jetzt aktivieren.
Nach Oben ↑

2. Customizer Einstellungen

Unter Design → Customize findest du alle die Anpassungsoptionen für Pukeko. Diese werden wir Schrittweise in kommenden Theme Updates erweitern.

Du findest die folgende Unterteilung unter Theme:

• Allgemeines Styling
• Allgemeine Farben
• Header
• Featured Header
• Footer
• Blog

Unter Allgemeines Styling kannst du die das Button-Design des Themes festlegen (scharfkantig, abgerundet oder rund). Unter Allgemeine Farben kannst du die Linkfarbe deines Themes anpassen. Unter Header kannst du die Header-Suche verbergen.

Unter Featured Header kannst du die Inhalte deines Featured Headers anlegen. Dazu solltest aber vorab im Customizer unter Customize → Header-Medien dein Headerbild im Format 2000×1200 (ein höheres Bild kann nach dem Upload zugeschnitten werden) hochladen.

Hier die Optionen des Featured Header Inhalts:

Unter Footer kannst du die Footer-Textfarbe (hell oder dunkel) und die Footer-Hintergrundfarbe bestimmen und den Credittext im Footer ganz unten anpassen.

Und unter Blog kannst du festlegen, ob du den Blog 1, 2 oder 3-spaltig anzeigen möchtest und ob du die Blog-Sidebar nur auf der Blogstartseite, nur auf der Beitragseinzelseite oder auf beiden Seiten anzeigen möchtest. Wenn du die Blog-Sidebar nicht nutzen möchtest, musst du einfach alle Widgets aus der Sidebar entfernen. Das Layout passt sich dann automatisch an.

Außerdem kannst du noch einige Elemente des Blogs under Blogbeiträge wie Kategorien, Autorenname, Kommentaranzahl oder das Datum verbergen, falls du möchtest.


Nach Oben ↑

Unter Design → Customize → Website-Information hast du die Möglichkeit ein eigenes Logobild hochzuladen. Das Bild wird im Header angezeigt und sollte die Höhe 960 Pixel haben. Die Breite ist flexibel. Das Logo wird dann automatisch skaliert, so dass es in den Header passt. Am besten ist es, wenn du ein transparentes PNG als Logobild nutzt oder ein Bild, dass die gleiche Hintergrundfarbe wie dein Header hat.

Außerdem kannst du entscheiden, ob du den Webseiten-Titel und Beschreibungstext trotz Logobild anzeigen möchtest oder nicht.
Nach Oben ↑

4. Pagebuilder Einstellungen

Um individuelle Seiten mit den Pukeko Seiten-Elementen bauen zu können, benötigst du die kostenlose Plugin-Version des Elementar Page Builders. Du kannst das Plugin einfach über deinen WordPress-Adminbereich unter Plugins → Installieren installieren und aktivieren.

Sobald du das Plugin aktiviert ist, findest du im WordPress-Adminmenü den neuen Punkt Elementor. Unter Elementor → Einstellungen → Generell solltest du folgende Einstellungen vornehmen:

Unter Beitragsarten sollte „Seiten“ ausgewählt sein. Bei Colors und Fonts kannst du beides anwählen, um die Theme-Fonts und Farben zu nutzen und nicht die Elementor-eigenen Farben und Schriften.

Unter Style kannst du die Inhaltsbreite auf 1248 setzen und die Widgetabstandsbreite auf 0.


Nach Oben ↑

5. Seiten bauen mit Elementor

Nachdem du die Voreinstellungen vorgenommen hast, kannst du anfangen deine Seiten mit Hilfe des Elementor Plugins zu bauen. Dazu kannst du am einfachsten unsere vorbereiteten Template-Vorlagen für Elementor nutzen.

5.1. Elementor Vorlagen importieren

Die von uns vorbereiteten Pukeko Seiten-Vorlagen (Templates) kannst du unter Elementor → Meine Bibliothek → Vorlagen importieren hochladen. Du findest die Template-Dateien im pukeko-master Order im Ordner „elementor-templates“.

Die derzeit von uns vorbereiteten Elementor Seiten-Templates sind:

• Front Page
• Features Page
• About Page
• Contact Page

So importierst du die Pukeko-Vorlagen (Video Anleitung):

5.2. Elementor-Vorlagen in deine Seiten einfügen

Die Pukeko Seiten-Vorlagen (Templates) kannst du jetzt auf deiner eigenen Webseite einfügen und so als Vorlage zum Aufbau deiner Seiten verwenden.

Gehe dazu auf eine leere Seite, die du schon vorab angelegt hast (z.B. Kontakt) und wähle unter Seiten-Attribute → Template das Seiten-Template „Fullscreen“ aus und speichere deine Einstellungen.

Info: Das Fullscreen Seitentemplate hat einen komplett leeren Inhalt. Es wird also kein Seiten-Titel, keine Sidebar und auch keine Webseiten-Begrenzung in der Breite angezeigt. Daher eignet sich das Template hervorragend für den Seitenaufbau mit einem Pagebuilder.

Jetzt kannst du den großen blauen Button „Mit Elementor bearbeiten“ klicken, um Elementor zu starten.

Elementor wird gestartet und du siehst den Button „Neuen Abschnitt hinzufügen“ und „Vorlage hinzufügen“. Klicke auf Vorlage hinzufügen“.

Im Fenster, das jetzt aufgeht wählst du oben das Menü „Meine Vorlagen“.

Wenn du jetzt mit deiner Maus über die Vorlagen scrollst, kannst du dort den grünen Button „Einfügen“ auswählen.

Jetzt ist die Pukeko Seiten-Vorlage auf deiner eigenen Seite integriert und du kannst loslegen, die Inhalte mit deinen eigenen Inhalten auszutauschen. Dazu musst du nur den Bereich in der Vorschau anklicken (so das er blau umrahmt ist). So wird der Bearbeitungsbereich links im Elementor-Menü angezeigt und du kannst die Vorlagen-Inhalte mit deinen eigenen Inhalten austauschen.

So fügst du Seiten-Vorlagen in deine eigenen Seiten ein (Video Anleitung):

Nach Oben ↑

6. Individuelle Menüs

Es gibt fünf Menüpositionen in Pukeko: 1. Hauptmenü, 2. Header Social Icons, 3. Header CTA Buttons, 4. Footer, 5. Footer Social Icons

Unter Design → Customize → Menüs oder unter Design → Menüs kannst du dir deine eigenen Menüs anlegen (hier eine Anleitung dazu) und die neuen Menüs dann den Menüpositionen des Themes zuordnen. Für das Hauptmenü kannst du natürlich auch Untermenüpunkte anlegen.

6.1. Header CTA Buttons

Über das Menü Header CTA Buttons kannst du die Buttons rechtsbündig in der Headerleiste einfügen. Um das Design des Buttons auswählen zu können, musst du dem Menüpunkt eine eigene CSS-Klasse geben.

Wenn du die Option zur Eingabe der eigenen CSS-Klasse nicht siehst, musst du sie erst unter Design → Menüs aktivieren. Die Einstellung findest du über den grauen Button Ansicht anpassen oben rechts in deinem Menü-Adminbereich. Hier findest du die Option CSS-Klassen unter „Erweiterte Menüeigenschaften anzeigen“.

Es gibt vier Buttons CSS-Klassen zur Auswahl:
btn-primary, btn-secondary, btn-ghost, btn-flat

6.2. Header und Footer Social Icons

Die Header- und Footer Social Icons kannst du einfach über individuelle Links anlegen. Dazu gibst du einfach die den Namen des sozialen Netzwerkes ein und den Link zu deinem Profil an. Wir unterstützen die meisten beliebten sozialen Netzwerke mit ihren entsprechenden Icons. Falls du kein Icons zu deinem Link angezeigt bekommst, sag uns einfach im Support Forum Bescheid und wir werden uns bemühen das Icon in einem Theme-Update zur Verfügung zu stellen.
Nach Oben ↑

7. Widgets

Du findest die Widgetbereiche unter Design → Customize → Widgets oder Design → Widgets. Es gibt die folgenden Widgetbereiche im Pukeko-Theme: Blog Sidebar, Seiten Sidebar, Footer 1, Footer 2, Footer 3.

Die Blog Sidebar ist optional, wenn du sie nicht nutzen möchtest kannst du einfach alle Widgets aus dem Bereich entfernen und das Blog-Layout wird automatisch angepasst. Wenn du eine Sidebar auf Seiten anzeigen möchtest, kannst du Widgets in die Seiten Sidebar einfügen. Im Footer hast du einen zusätzlichen dreispaltigen Footerbereich zur Verfügung.

7.1. Pukeko Widgets

Die speziellen Pukeko-Widgets sind nicht für die Sidebar- oder Footer-Widgetbereiche vorbereitet, sondern für das Einfügen über das Pagebuilder-Plugin. Mit Hilfe des Pagebuilders kannst du die Pukeko-Widgets dann direkt auf Seiten einbinden. Wie das funktioniert, erfährst du im Kapitel 5.
Nach Oben ↑

8. Typografie Optionen

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

Dropcaps (Initiale) – Um einen Textparagraph hervorzuheben, kannst du einen großen Initial-Buchstaben zu Beginn des Absatzes verwenden. Dazu musst du diesen Code im Text-Editor einfügen:

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

Nach Oben ↑

9. Empfohlene Plugins

Elementor Page Builder für den Aufbau der Pukeko-Seiten
Contact Form 7 für Formulare
MailChimp for WordPress für ein Mailchimp-Newsletter Formular Widget
WP Instagram Widget für eine Instagram Bildervorschau
Jetpack für Teilen-Buttons, Jetpack Widgets, Galerie-Slideshows oder Bildergalerien
Nach Oben ↑

10. Theme Übersetzung

Pukeko ist für die Übersetzung in weitere Sprachen vorbereitet (Deutsch ist bereits 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.
Nach Oben ↑

11. Child Theme

Falls du Pukeko ü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 Eltern-Themes nicht verloren gehen. Du kannst dir das vorbereitete Pukeko Starter Child-Theme herunterladen. So kannst du schnell mit deinen eigenen Theme-Anpassungen loslegen.

12. Dokumentation drucken oder als PDF speichern

Um die Pukeko 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 oder PDF speichern
Nach Oben ↑