17. Februar 2014

Individuelle Gestaltung von Design und Layout Headway Themes – Das Drag and Drop Framework

   4 Kommentare

Ein Beitrag von Richard Schwerthalter

Share on Facebook13Tweet about this on Twitter2Share on Google+2Share on LinkedIn0Email this to someone

Hochwertige Premium Themes glänzen oft mit zahlreichen Funktionen und Möglichkeiten, die nicht jeder braucht. In der Gestaltung des Designs und der Anordnung der einzelnen Blöcke ist der Nutzer aber oft eingeschränkt und kann lediglich aus wenigen Alternativen wählen. Mit einem Drag and Drop Framework bietet sich euch eine fast grenzenlose Gestaltung der Frontend-Oberfläche. Mit den Headway Themes stellen wir euch heute ein solches vor.

headway themes

Headway Themes – Bildquelle

Die Headway Themes

Die Veröffentlichung der ersten Version der Headway Themes erfolgte 2009 und seitdem hat sich der Drag and Drop Website Builder stark weiterentwickelt. Das Unternehmen besteht derzeit aus acht Mitarbeitern, sitzend in den USA, Frankreich und Südafrika. Die aktuelle Version des Frameworks ist 3.6.

Die ersten Schritte

Nach der Installation von Headway habt ihr innerhalb eures WordPress Dashboards folgende Auswahlmöglichkeiten:

1. Optionen

Hier wählt ihr allgemeine Einstellungen eures Themes sowie Optionen bezüglich SEO, des Visual Editors oder Caching und Compression eurer Website.

2. Visual Editor

Euer Baukastensystem, das im nachfolgenden Abschnitt genauer dargestellt wird.

3. Tools

Dieses Menü liefert euch umfangreiche Systeminformationen sowie die Möglichkeit zur Reparatur und Zurücksetzung eures Visual Editors.

Außerdem gelangt ihr von hier zur offiziellen Dokumentation von Headway sowie zum Support Forum.

headway themes dashboard

Abb.1 – Menüübersicht von Headway

Der Visual Editor – Das Herzstück des Themes

Das Herzstück der Headway Themes ist der Visual Editor, in denen ihr das Layout und Design eurer Website individuell konstruieren und gestalten könnt. Dabei liegt eine klare Trennung vor, die euch immer nur eine Bearbeitung im Grid Menü (Layout) oder im Design Menü ermöglicht.

Bau dir deine eigene Oberfläche

Angefangen wird mit der Auswahl des Seitentemplates, bei der ihr bereits zwischen fünf verschiedenen vorgefertigten Schemen wählen könnt, ein bereits erstelltes importieren oder mit einem komplett leeren Modell beginnen könnt. Die Template-Schablonen unterscheiden sich dabei lediglich in der Anzahl und Anordnung der Sidebar.

headway themes seitentemplates

Abb.2 – Auswahl des Seitentemplates

Anschließend habt ihr die Möglichkeit einzelne Blöcke, wie Header, Footer, Inhaltsbereiche, Widget- Bereiche oder Navigationsmenüs zu erstellen und beliebig zu verschieben, vergrößern oder verkleinern. Die Drag and Drop Funktionalität erlaubt euch eine ganz individuelle Gestaltung des Layouts.

headway themes drag and drop

Abb.3 – Drag and Drop Funktionalität

Für die Erstellung eines neuen Blocks zieht ihr einfach einen Rahmen an die gewünschte Stelle auf der Template-Oberfläche. Anschließend müsst ihr den Typus des Blocks bestimmen. Dabei könnt ihr aus 13 verschiedenen Arten wählen:

  • Header, mit Auswahlmöglichkeit eines Logos, Banners oder Seitentitels
  • Footer, der die Darstellung des Copyright und weiteren Links ermöglicht
  • Navigationsmenü
  • Breadcrumbs, zur Darstellung der aktuellen hierarchischen Position auf der Seite
  • Inhaltsblock, der den jeweiligen Text eurer Seite anzeigt
  • Bild
  • Embed-Block (z.B. Youtube oder Vimeo Videos)
  • Individueller Code (HTML, PHP oder Shortcodes)
  • Widget-Bereich
  • Slider
  • Bereich für Social Icons
  • Auflistung von Autoren, Kategorien, Seiten und weiterem
  • Text-Bereich, der über einen Editor innerhalb des Visual Editors bearbeitet werden kann

Überschneiden sich zwei eurer Blöcke, wie in Abbildung 3 zu sehen, leuchten diese rot auf und ihr bekommt den Hinweis, diese zu trennen, bevor ihr eure Änderungen speichert. Die einzelnen Blocktypen besitzen jeweils noch eine Nummer (#1, #2, #3, …), da jeder Typ mehrfach vorhanden sein kann und ihr eure einzelnen Seiten (Startseite, Detailseite, Artikelseite) individuell zusammenbauen könnt. Bei der späteren Konfiguration von z.B. euren Widgets identifiziert ihr mit Hilfe der Nummer den richtigen Block.

Im linken oberen Bereich des Visual Editors wählt ihr die Seite aus, für die ihr das Layout erstellen bzw. bearbeiten wollt. Dazu zählen die Blog Übersicht, statische Seiten, Beitragsseiten, Archive oder das Layout der 404-Seite. Änderungen an einem Seitentyp (Posts, Pages, Archive) betreffen immer alle untergeordneten Detailseiten. Möchtet ihr für eine oder mehrere bestimmte Seiten ein anderes Layout wählen, ist dies auch möglich.

headway themes seitentyp

Abb.4 – Auswahl des Seitentyps

Eine umfangreiche Anleitung zum Grid-Editor findet ihr hier.

Anpassung des Designs

Durch Klicken des Pinsel-Symbols in der oberen Leiste gelangt ihr in den Design-Bereich eures Editors. Hier könnt ihr jegliche Änderungen an Hintergründen, Schriften sowie Effekten für eure einzelnen Elemente vornehmen.

headway themes design editor

Abb. 5 – Übersicht des Design Modes

Den Großteil der Änderungen nehmt ihr dabei im rechten Bildschirmbereich vor. Der Editor trennt dabei zwischen globalen Einstellungen (Textelemente, Links, Blöcke und Titel-Elemente), strukturellen Einstellungen (Body-Bereich und Wrapper-Bereich) und Änderungen für spezielle Blöcke, wie dem Footer. Dabei könnt ihr so ziemlich alles verändern von Schriftart, -farbe und -größe über Rahmen, Schattierungen und sehr vielen weiteren Effekten.

headway themes gestaltungsmöglichkeiten visual editor

Abb. 6 – Zahlreiche Anpassungsmöglichkeiten der einzelnen Elemente

Erwähnenswert ist noch, dass ihr einzelne Elemente, wie z.B. innerhalb der Navigation, für verschiedene Instanzen verändern könnt. Möglich ist dabei die Unterscheidung zwischen den Zuständen: Angewählt, Mouse-Over, Während dem Klick und Innerhalb eines sich öffnenden Drop-Down Menüs.

headway themes instanzen einstellungen

Abb.7 – Anpassung verschiedener Instanzen der Elemente

Außerdem habt ihr für jede Seite die Möglichkeit einen Live CSS Editor zu öffnen und dort individuelle Änderungen vorzunehmen. Empfehlenswert ist dies aber nur bei ausreichenden Kenntnissen.

Welche Features bietet Headway?

  • Drag and Drop Funktionalität des Frontends
  • Erweiterte SEO-Features
  • Flexible Erweiterbarkeit mit Skins, Templates und Addons
  • Klare Trennung von Design und Layout
  • Responsive Design Funktionalität mit Headway’s Responsive Grid

Um die möglichen Funktionalitäten erfolgreich und umfassend nutzen zu können, empfehlen wir euch außerdem einen Blick in das Video-Tutorial von Headway zu werfen.

Beispiele aus der Praxis

Folgende drei Beispielseiten zeigen unterschiedliche Anwendungsgebiete, die mit Hilfe der Headway Themes erfolgreich umgesetzt wurden:

Then There Were None

headway themes beispiel Then There Were None

http://thentherewerenone.com/

 Edmonton Mazda Dealer

headway themes beispiel edmonton mazda dealer

http://edmontonmazdadealer.com/

Wide Vision Technologies

headway themes beispiel wide vision technologie

http://www.widevisiontechnologies.com/

Was kostet mich Headway?

Folgende Preismodelle bietet euch Headway:

  • Personal

    • 59$
    • Lizenz und Updates für 1 Seite
  • Business

    • 99$
    • Lizenz und Updates für 3 Seiten
    • Ein offizielles Template inklusive
  • Developer

    • 199$
    • Lizenz und Updates für beliebig viele Seiten
    • Beinhaltet alle verschiedenen Headway Templates

Fazit

Um seine Website möglichst individuell und außergewöhnlich aufzubauen und zu gestalten, bietet sich ein Drag and Drop Builder hervorragend an. Der Visual Editor der Headway Themes überzeugt mich vor allem mit seiner Vielzahl an Konfigurationsmöglichkeiten. Gerade im Design-Bereich gibt es kaum etwas, das sich nicht verändern lässt. Baut man sich sein Layout von Grund auf selbständig auf, ist dies schon mit etwas Zeitaufwand verbunden. Mit Hilfe vorgefertigter Templates und inhaltlichen Block-Elementen könnt ihr aber eine Menge Zeit sparen. Besonders gelungen finde ich auch die Möglichkeit zur Anpassung jeder einzelnen Unterseite der Website. Im Fall von bestimmten Landingpages oder Posts, die hervorgehoben werden sollen, ist das eine super Sache. Möchtet ihr mit wenig Arbeit ein fertiges Premium Theme haben, seid ihr hier an der falschen Adresse. Wollt ihr eure Website aber mit ein bisschen Geduld und Fleißarbeit nach eigenem Belieben kreieren, empfehle ich euch die Headway Themes.

Was haltet ihr davon?

Kämen die Headway Themes für euch in Frage?

Habt ihr bereits Erfahrungen sammeln können?

Share on Facebook13Tweet about this on Twitter2Share on Google+2Share on LinkedIn0Email this to someone
Richard Schwerthalter

Richard Schwerthalter

Ich arbeite gerne an neuen Projekten, insbesondere der Erstellung und Optimierung von Websites. Mit WordPress arbeite ich schon längere Zeit und habe bereits einige Erfahrungen sammeln können.
Richard Schwerthalter

Letzte Artikel von Richard Schwerthalter (Alle anzeigen)

Du willst up-to-date bleiben?

Trage dich jetzt in unseren kostenlosen Newsletter ein, um stets die aktuellsten Neuigkeiten rund um Wordpress zu erhalten.

Wir geben deine Daten nicht weiter! Wir hassen Spam genauso wie du!

4 Kommentare

Reaktionen auf diesen Beitrag

  • Kling auf jedenfalls Interessant!
    Ob es für komplizierte Seitenstrukturen auch nutzbar ist? Muss ich mal testen…

  • Das Theme kann man jedem empfehlen, der kein Design von der Stange kaufen möchte. Es lässt keine Wünsche offen mit dem was ihr damit machen könnt. In Kürze startet unser Kurs unter http://www.headway-support-deutsch.de, der euch die Arbeit mit dem Headwaytheme Schritt für Schritt erklärt und komplett in deutscher Sprache!

    Wer von Euch vor hat das Theme zu kaufen und 20% Rabatt auf den Kaufpreis sparen möchte, der kann sich gerne auf unserer Seite in die Early-Bird-Liste eintragen und erhält dann einen Coupon mit Bestelllink zugesandt 😉

    Viel Spaß mit Headway und Kompliment für den guten Artikel

    wünscht Euch

    Carsten Dohmann
    Headway Support Deutsch

  • Richard Schwerthalter

    Hallo Carsten, vielen Dank!
    Viel Erfolg mit eurem Kurs, das hört sich sehr vielversprechend an.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.