Kategorien
Netzwelt

WordPress Design Inspirationen & Tipps

Da goeo.de ein noch relativ neues Projekt ist, und die Ausrichtung der Themen sich wohl mehr oder weniger mit der Zeit herauskristallisieren wird, hier ein paar Inspirationen und Tipps zu WordPress, die ich aktuell auf dem Radar habe. In diesem Beitrag gibt es drei Empfehlungen: 1) 60 Design Inspirationen von Websites die mit WordPress erstellt wurden, 2) Wie man das Artikelbild auf der Startseite bspw. im Twenty Ten Theme unterbringt und 3) wie man mittels CSS3 einen Verlauf (Englisch: Gradiant) erstellen kann.

Übersicht

1. 60 Design Inspirationen für WordPress

2. Artikelbilder in WordPress einbinden (am Beispiel vom Twenty Ten Theme)

3. Farbverlauf mittels CSS

1. 60 Design Inspirationen für WordPress

Dass man mit dem nötigen Know-How in Sachen CSS, HMTL und PHP erstaunliche Websites erstellen kann zeigt die Zusammenstellung von 60 Beispielen mit sehr schön designten Seiten auf Instantshift.com. Mit der richtigen Idee im Kopf und dem dazugehörigen Handwerkszeug (Photoshop & Skills) schafft man es Besucher zu fesseln – zumindest bin ich doch regelrecht begeistert von der Auflistung. Hier ein paar Beispiele von Webseiten mit ausgefallenen Designs – ach, Designer müsste man sein :

k-win.fr/v7/

Das nenne ich minimalistisch und gleichzeitig fesselnd. Keep it simple and smart eben. Jep, auch so etwas lässt sich mit WordPress realisieren – klickt man auf einen Link sieht man den Clou der Seite, all on one page /single content page. Es ist eigentlich nur eine einzige Seite, die via Javascript (glaub ich zumindest – sorry bin kein Pro) realisiert wurde. Absolut gelungen aus User Sicht. Wie Google den ‘hidden’ Text wertet weiß nicht, im Prinzip werden die weiteren Inhalte erst nach dem Anlicken sichbar. Dennoch – eine sehr gelungene Site.

www.svingel.info

Mit dem richtigen Foto kann man natürlich auch gut punkten. Ebenso simple wie die vorherige Seite bietet dieses Portfolio die perfekte Kulisse für einen Fotographen. Sehr gelungen.

www.mulletized.com

Bei dieser Website wird rein mit Typographie gearbeitet und wer die “Elements of Style” kennt und weiß, wie man sie richtig einsetzt, der kommt zu solchen Ergebnissen. Form follows Function und so.

www.le28thiers.fr/

Also wenn ich ein Restaurant oder eine Bar besitzen würde, bzw. wenn ich auf der Suche nach einem solchen wäre und auf diese Seite kommen würde, dann … ja dann wäre ich schon vorab begeistert. Die Seite vereint Ästhetik mit Design und  lässt in Frontend nicht wirklich auf eine gemeine WordPress-Seite schließen. Geht man etwas mehr ins Detail, bsp. auf den Bar-Link oben links, wird einem erst mal wieder bewusst, wie man Flash auch dezent einsetzen kann und die richtige Wirkung erzielen kann. Da sag ich nur – bookmarked.

Gut, die weiteren Seiten sind natürlich auch einen Blick wert, es soll aber erst mal hier genügen und mit dem nächsten Thema “Artikelbilder einbinden” weitergehen.

2. Artikelbilder in WordPress einbinden (am Beispiel vom Twenty Ten Theme)

Wer sich das Standard-Theme von WordPress installiert und ein Artikelbild auswählt, der wartet als Novize vergeblich auf eine Einblendung im Front-End. Dazu muss man erst etwas im Code rumschreiben, und Voilá mit wenigen Zeilen hat man den gewünschten Effekt. Hier die Anleitung, wie man Ariktelbilder in WordPress einfügt:

1. Artikelbild festlegen

2. Bild hochladen und “als Artikelbild nutzen”

bis hier hin alles selbsterklärend

3. Loop.php öffnen und bearbeiten

In diesem Schritt geht es ein wenig ins Detail – man öffnet im Editor (Design>Editor) im WordPress Backend die loop.php Datei. Dann sucht man nach 

<?php the_content( __( ‘Continue reading <span>&rarr;</span>’, ‘twentyten’ ) ); ?>

und davor fügt man

<?php the_post_thumbnail();?>

ein. Damit wird das Artikelbild aufgerufen. Anschließend noch aktualisieren und ggf. etwas CSS hinzufügen:

.attachment-post-thumbnail{width:150px; height:150px; padding:5px 10px 5px 0; float:left;}

Fertig.

Eine ausführliche Anleitung mit Video auf Englisch gibt es hier > Set featured image

Wie man das Artikelbild auch gleichzeitig als Header-Bild verwenden kann, beschreibe in im Artikel Artikelbild als Header in TwentyTen WordPress

3. Farbverlauf mittels CSS

Abschließend noch kurz ein Tool, mit dem Farbverläufe mittels CSS erstellen kann: http://gradients.glrzad.com/ – funktioniert prima. Einziges Manko, aktuell kommen IE Nutzer nicht in den Genuss der CSS Farberverläufe, hier bleibt der Hintergrund / Button in der regulären Farbe. Dazu muss man weiterhin z.B. Background-Images nutzen. Bzw. gibt es wohl noch weitere Möglichkeiten, die ich aber bislang selbst noch nicht getestet habe.

gradients.glrzad.com

Anregungen oder Ergänzungen? Dann einfach einen Kommentar hinterlassen.

Weitere Artikel:
Fancy oder schlicht – Grundfragen zum Blog-Design
WordPress Magazin Nr 3
Blogs mit Redesign 2011

4 Antworten auf „WordPress Design Inspirationen & Tipps“

super Artikel aber kannst du mir sagen warum das float left vlt nicht geht habs genausogemacht wie in deiner anleitung aber der text beginnt erst unter dem bild 🙁

Hi, ist schon eine Weile her mit dem Artikel, aber eventuell gibt’s in deinem Theme bei .attachment-post-thumbnail eine ‘clear:both’ Anweisung die den Float aufhebt… Mein Tipp mit Firebug und Firefox testen, da kannst du das CSS Live anpassen und siehts wo es hakt… MfG

danke für deine schnelle antwort! Hab jetzt rausgefunden das egal was ich bei attachment-post-thumbnail eintrag nichts auf das Bild auswirkt also nicht nicht nur der float tag sondern auch sachen padding zeigen keine wirkung. hab daher einfach ein div um das Bild gelegt und diesem dann ne class zugewissen, so gehts jetzt zum glück

Jep, mit einem DIV geht’s natürlich auch. Evt. ist die Klasse für das Thumbnail anders… ist manchmal etwas verzwickt bei der Theme Anpassung. Wie gesagt, ich kann Firebug wirklich empfehlen, weil man da direkt sieht, was sich wie auswirkt und man kann auch Elementen eigene Styles zuweisen, die man dann im Theme Editor einfügen kann
🙂

Kommentare sind geschlossen.