Gefällt dir mein aktuelles Webseitendesign? Dann hab ich hier etwas für dich: Theme ‚FUENFZEHN‘ steht ab sofort zum kostenlosen Download bereit.

WordPress Theme 'FUENFZEHN'

Charakteristisch ist die dunkle Farbgebung und das große, in den Inhaltsbereich hineinragende, Kopfzeilenbild. Das Theme ist responsiv, also angepasst für mobile Endgeräte und kleine Bildschirmauflösungen, und bietet jede Menge cooler Features und CSS3-Funktionen.

Über vielfältige Theme-Optionen kannst du das Theme auf einfache Weise deinen Bedürfnissen anpassen. So kannst du beispielsweise die Farbgestaltung verschiedener Theme-Elemente über Color-Picker verändern, Featured Posts in verschiedenen Varianten nutzen und aus einer großen Auswahl vordefinierter Schriftarten (Google Web Fonts und Standard-Schriftarten) deine Lieblingsschriftart auswählen.

[fullwidth-infobox color=“inset-shadow“]

Features
  • Layout ist komplett CSS-basiert (keine Grafiken)
  • Cross-Browser kompatibel (Chrome, Firefox, Internet Explorer 9 + 10, Android und iOS 6 getestet)
  • responsives Layout (CSS3 Media Queries) für optimale Darstellung auf mobilen Endgeräte (Navigation nutzt den Checkbox-Hack)
  • Post-Thumbnail-Funktion integriert
  • vorbereitetes Gästebuch-Template
  • vier Widget-Bereiche im Fuß
  • vielfältige Theme-Optionen
  • Social Media-Profillinks (Twitter, Facebook, Google+, Xing, Tumblr, Picasa, flickr, Last.fm, Youtube und RSS-Feed)
  • integrierte „Teilen“-Buttons (Twitter, Facebook, Google+ und Pinterest)
  • Custom-Background- und Custom-Header-Funktion
  • Shortcodes für mehrspaltiges Layout, Info-Boxen und Buttons
  • Unterstützung von WordPress Post-Formats
  • Schriftartauswahl (Google Web Fonts und Standardfonts)
  • zwei vorbereitete Bereiche für individuelle WordPress-Menüs (Kopf- und Fußbereich)
  • zahlreiche Farbgestaltungsmöglichkeiten
  • zusätzliche Bildklassen für Anordnung und Farbgebung von Bildern im Content-Bereich
  • „translation-ready“: englisch und deutsch sind dabei
  • Stylesheet für den visuellen Editor (Farben, Schriftarten des Themes im Editor)
  • ab WordPress Version 3.4

[/fullwidth-infobox]

Eine Live-Demo gibt es hier:

Den Download findest du unter folgendem Link:

Und hier findest du eine Übersicht meiner WordPress-Themes:

Das Theme ist kostenlos und kann uneingeschränkt genutzt, verändert und weitergegeben werden. Einzige Voraussetzungen: der Autor im Fußbereich darf nicht gelöscht und das Theme nicht von Dritten vertrieben werden.

Frequently Asked Questions (FAQ)

F: Wo finde ich die Theme-Optionen bzw. die Theme-Vorschau?

A: Du findest die Theme-Vorschau unter „Desgin“ -> „Anpassen“ oder aber unter „Desgin“ -> „Themes“, nachdem du das Theme aktiviert hast.

Theme Anpassen

In der Theme-Vorschau kannst du jede Veränderung an Theme-Optionen live mitverfolgen. Nachdem du eine Option verändert hast, wird die Ansicht aktualisiert und du siehst sofort, wie deine Webseite nach der Änderung aussehen wird. Die Beschreibung der einzelnen Optionen sollte selbsterklärend sein. Falls nicht, probier es einfach aus. Erst nachdem du die Änderung(en) gespeichert hast wird die Webseite auch für deine Besucher aktualisiert.

F: Wie installiere ich das Theme?

A: Lad dir diese Datei herunter. Anschließend loggst du dich im Backend deiner WordPress Installation ein und wählst aus dem Menü „Design“ den Punkt „Themes“. Dort wechselst du zum Register „Themes installieren“ und wählst über den Button „Datei auswählen“ die eben heruntergeladene Zip-Datei aus.

Ein Klick auf den Button „Jetzt installieren“ startet die Installation. Klick auf „Aktivieren“ und schon sieht deine Webseite heiß aus.

Ich habe dazu ein kurzes Video-Tutorial erstellt:

Nun solltest du dich an das Anpassen und Ausprobieren der Theme-Optionen machen. Dazu noch ein Hinweis: wer bereits eines meiner Themes genutzt hat und sich über Darstellung und Farbgebung des neuen Themes wundert, muss gegebenenfalls einige Theme-Optionen manuell anpassen, da die Optionen und Farbwerte aus dem früheren Theme noch in der Datenbank gespeichert sind.

F: Ich würde gerne ein anderes Hintergrundbild nutzen.

A: Im Menü „Design“ unter dem Punkt „Hintergrund“ hast du die Möglichkeit den Hintergrund nach deinem Geschmack anzupassen.

Du kannst entweder ein neues Hintergrundbild von deinem Rechner hochladen, oder ein Bild aus der Mediathek auswählen. Ebenso kannst du das Hintergrundbild komplett entfernen und stattdessen einen einfarbigen Hintergrund nutzen.

Auch hier habe ich ein Video vorbereitet:

F: Ich würde gerne ein anderes Logo nutzen.

A: Das Logo kann über die Theme-Vorschau („Desgin“ -> „Anpassen“) verändert werden. Hier hast du die Möglichkeit eine andere Bilddatei hochzuladen oder eine Datei aus der Mediathek auszuwählen.

Logo hochladen

Beachte bitte, dass die vordefinierte Größe 200 x 50 Pixel beträgt.

F: Wie kann ich ein anderes Kopfzeilen-Bild nutzen?

A: Im Menü „Design“ unter dem Punkt „Kopfzeile“ hast du die Möglichkeit ein anderes Bild einzubinden.

Du kannst entweder ein neues Bild von deinem Rechner hochladen, oder ein Bild aus der Mediathek auswählen. Beachte bitte, dass die vordefinierte Größe 1680 x 700 Pixel beträgt.

Magst du lieber Video gucken?

F: Wie kann ich das Gästebuch-Template nutzen?

A: Erstelle eine neue Seite, schreib eine nette Einleitung für deine Gäste und wähle als Template „Gästebuch“.

Fertig. Kommentare aktivieren nicht vergessen.

F: Welche Größe haben die Post-Thumbnails?

A: Die Artikel-Thumbnails haben eine Größe von 100 x 100 Pixel. Um die Größe der Thumbs musst du dich allerdings nicht kümmern. Sofern du im Artikel ein Bild einstellst, wird es automatisch auf die benötigte Größe zugeschnitten.

F: Welche Möglichkeiten gibt es für Bilder in Beiträgen bzw. Seiten?

A: Es gibt mehrere vordefinierte Klassen für Bilder, die du in einen Beitrag bzw. eine Seite einfügst:

  • nobackground das Bild wird ohne Hintergrundfarbe angezeigt (für transparente Bilder)
  • whitebackground das Bild wird mit weißem Hintergrund angezeigt (für dunkle Bilder)

Du kannst die Klassen wie folgt deinem Bild zuordnen:

Füge in den Artikel bzw. die Seite das Bild wie gewohnt ein. Wieder zurück im visuellen Editor markierst du das Bild und klickst auf den Button „Bild bearbeiten“. Öffne nun den Reiter „Erweiterte Einstellungen“ und ergänze im Eingabefeld „CSS Klasse“ die gewünschte Klasse:

Zusätzliche CSS Klasse zufügen

Achte aber darauf, dass zwischen den Klassen ein Leerzeichen vorhanden ist.

Darüber hinaus gibt es zwei weitere Klassen, die für Bilder gedacht sind, welche breiter sind, als der Inhaltsbereich:

  • fullwidthleft das Bild wird am linken Rand des Beitrags ausgerichtet
  • fullwidthright das Bild wird am rechten Rand des Beitrags ausgerichtet

Mit diesen beiden Klassen werden die Bilder am linken bzw. rechten Rand des Beitrags ausgerichtet und werden am gegenüberliegenden Rand abgeschnitten, sofern die Breite des Bildes mehr als 900 Pixel beträgt. Schau einfach mal nach oben in diesem Beitrag, dann weißt du was ich meine. Netter Effekt, oder?

Diese kannst du wie folgt nutzen:

Füge dein Bild wie gewohnt in den Beitrag bzw. die Seite ein. Achte dabei, dass die Breite größer ist, als der Inhaltsbereich von 900 Pixel.

bild-einfügen-größe

Im visuellen Editor markierst du nun das Bild und klickst auf den Button „Bild bearbeiten“. Öffne den Reiter „Erweiterte Einstellungen“.

Bildeinstellungen bearbeiten

Ändere nun die Breite so ab, dass das Bild am linken oder rechten Rand an der gewünschten Position abgeschnitten wird. Beachte, dass das Bild am gegenüberliegenden Rand bei 900 Pixeln abgeschnitten wird. Plane also die Breite entsprechend ein bzw. teste einfach ein wenig mit der optimalen Breite herum.

Den Wert aus dem Eingabefeld „Höhe“ entfernst du und lässt das Feld leer. So ist sichergestellt, dass die Proportion des Bildes beibehalten wird und das Bild nicht verzerrt dargestellt wird.

Im Feld „CSS Klasse“ trägst du die zusätzliche Klasse ein, in diesem Beispiels „fullwidthleft“. Fertig.

F: Darf ich das Template verändern?

A: Kein Problem. Lass deiner Kreativität freien Lauf. Einzige Voraussetzung: der Link und Hinweis auf den Theme-Autor (mich) im Fußbereich darf nicht entfernt werden. Wäre auch nicht fair, wenn du meine Arbeit als deine ausgeben würdest, oder?

F: Und wenn ich den Autor-Link doch entfernen möchte?

A: Wenn du den Hinweis unbedingt löschen möchtest, halte ich es für fair, wenn du mir eine kleine Spende in Höhe von 10 € für meine Kaffeekasse zukommen lassen würdest. Schreib mir bitte eine Nachricht mittels des Kontaktformulars. Ich werde dir dann die Bankverbindung für die Überweisung mitteilen.

F: Wie kann ich ein Favicon nutzen?

A: Schau dir mal diesen Artikel an.

Changelog

v1.1 – 13.09.2013

  • diverse Layoutanpassungen
  • Dimensionen der Post-Thumbnails verändert
  • Kopfzeilenbild wird bei Auflösungen > 1680 Pixel auf die gesamte Breite skaliert
  • Post-Formate „Video“ und „Bild“ verändert

v1.0 – 30.07.2013

  • Release