Erstellen einer Internetseite vom Anfang bis zum Ende

Anfänger Tutorial:

Jetzt, da Sie Headway installiert und aktiviert haben, finden Sie hier ein Tutorial, das Sie bei der Erstellung Ihrer WordPress-Internetseite mit Headway unterstützen wird. Wir behandeln hier das Erstellen einer Homepage bzw. eines Blogs. Lassen Sie uns also sehen, wie Sie Headway hierfür nutzen können. Folgen Sie den Schritten, die dazu passen, was Sie mit Ihrer Seite machen möchten.

Verschiedene Begriffe in diesem Tutorial verweisen auf weiterführende Informationen, diese Informationen liegen aktuell teilweise nur in englischer Sprache vor, aber auch diese Informationen werden wir nach und nach auf Deutsch für Sie zur Verfügung stellen.
Wenn Fragen auftauchen, die durch diese Anleitung nicht gelöst werden können, nutzen Sie gerne unser Forum für diese Fragen, wir helfen Ihnen gern.

Gehen Sie am besten zunächst einmal das gesamte Tutorial durch. Hilfreich ist dabei sicherlich auch das Headway Glossar und die Anleitung zum Installieren von Headway.

Schritt 1: Überlegen Sie sich wir Ihre Internetseite aussehen soll

Sie können nicht mit dem Bau einer Internetseite beginnen, bevor Sie nicht genau wissen, was Sie erstellen wollen. Obwohl WordPress eigentlich als Blog-System entwickelt wurde, kann es heute viel mehr. Sie können also einen Blog erstellen oder eben eine ganz normale Internetseite in der der Blog nicht im Focus stehen muss.

Listen Sie die verschiedenen Inhalte auf, die Sie anbieten wollen. Diese können z.B. folgende sein:

  • Allgemeine Blog-Beiträge
  • Podcasts
  • Rezensionen
  • Tutorials
  • Produkte
  • Videos
  • Download Inhalte (kostenlos oder free-based)
  • Inhalte für Mitglieder

Je nachdem, was das Ziel Ihrer Internetseite ist, sollten Sie ganz bestimmte Anforderungen für die Besucher Ihrer Internetseite erfüllen (Benutzerrezensionen, gesponserte Anzeigen je nach Kategorie etc.). Machen Sie sich keine Gedanken darüber, was möglich ist – entscheiden Sie zu diesem Zeitpunkt zunächst, was Sie mit Ihrer Internetseite tun möchten und welchen Inhalt sie haben soll.

Schritt 2: Erstellen Sie ein paar Blog-Beiträge und Seiten

Bevor Sie irgendetwas in Headway machen, brauchen Sie etwas Inhalt, mit dem Sie arbeiten können. Und wenn Sie ein paar „Dummy“-Blog-Beiträge einfügen, um zu beginnen, wird es Ihnen sicher helfen, herauszufinden, ob Sie Dinge bereits richtig erstellen können. Zudem sollten Sie beim Erstellen einer Internetseite den Inhalt schon im Hinterkopf haben. Erstellen Sie also im WordPress Admin-Bereich ein paar Blog-Beiträge mit verschiedenen Tags (Schlagwörter) in verschiedenen Kategorien. Erstellen Sie danach weitere Seiten. Sie können im WordPress Codex erfahren, wie Sie Blog-Beiträge und Seiten erstellen und schreiben und in unserer WordPress Quick Tour erfahren Sie, wie Sie Inhalte zu Ihrer Seite hinzufügen. In diesem virtuellen Rundgang werden wir eine Seite mit einer statischen Startseite erstellen. Dies garantiert Ihnen die Flexibilität, alles Erdenkliche in die Startseite Ihrer Internetseite einzupflegen und so ganz einfach die Besucher z.B. zu der Blog Seite zu führen, damit sie die neuesten Post im Standard-Blog-Format sehen können. Erstellen Sie also nun eine sogenannte „Home“ Seite und eine Seite namens „Blog“. Danach erstellen Sie nun jegliche andere Seite, die Sie auf Ihrer Internetseite haben wollen. Zum Beispiel können Sie eine Seite „Über mich“/ „Impressum“ und „Kontakt“ erstellen, welche beispielsweise zu den Standard-Seiten eines Blogs heutzutage dazugehören.

Schließlich klicken Sie Menü Einstellungen auf Lesen und wählen Sie Ihre Startseite aus. Haken Sie „statische Seite“ an und wählen Sie im Drop-Down-Menü die richtige Seite aus.

Schritt 3: Beginnen Sie nun mit dem Layout für Ihre Internetseite

Jetzt beginnt das richtige Bauen Ihrer Internetseite. Wenn Sie Headway aktiviert haben, erscheint das Headway Menü auf der linken Seite in der Kopfzeile des WordPress Admin-Bereichs. Das Menü in der Kopfzeile beinhaltet Untermenüs, die Ihnen helfen, schneller zu Ihrem Ziel zu kommen. Die Illustration zeigt beide Menüs

Im Visual Editor verändern Sie ihr gesamtes Layout und Design der Seite. Denken Sie daran, der meiste Inhalt Ihrer Internetseite wird in WordPress zu bearbeiten sein. Headway ist vorrangig zum Bearbeiten des Layouts Ihrer Seite, zum Anbringen von Styles und manchmal auch zum Einpflegen von Dingen wie Videos und statischen Grafiken gedacht.

Wichtig: Wir empfehlen Ihnen, nicht den Internet Explorer, sondern eine aktuelle Version von Chrome, Firefox oder Safari zu verwenden.

Klicken Sie auf Visual Editor im Headway Menü oder machen Sie einen Rechtsklick auf Visual Editor und wählen Sie die Option für einen neuen Tab. Wenn Sie den Headway Visual Editor in einem neuen Tab verwenden, ist es Ihnen möglich zwischen dem Editor und dem WordPress Admin-Bereich hin und her zu wechseln. (Im Visual Editor gibt es selbstverständlich auch Verlinkungen, die Sie zurück zum WordPress Admin-Bereich leiten.)

Beim ersten Öffnen des Visual Editors wird der Grid Mode geöffnet und Sie werden mit einer Tour begrüßt. Wenn Sie mögen, können Sie die Tour überspringen und sie später ansehen, indem Sie auf Tour im Menü Tools klicken. Es empfiehlt sich jedoch, der Tour beim ersten Besuch zu folgen. Dies ist nicht nötig, wenn Sie bereits mit dem Bau von Layouts begonnen haben. Wir werden die Homepage nun verändern, beginnen Sie also mit der Tour, bis Sie zum Schritt „Layout Selector” gelangen. Gehen Sie über zu Front Page im Layout Selector und klicken Sie dann auf Edit. Fahren Sie mit der Tour fort. Als Teil der Tour werden Sie aufgefordert, den Grid Wizard zu verwenden. Sie können nun entscheiden, einen leeren Grid zu verwenden oder mit einem voreingestellten Grid zu starten und beginnen, Blocks zu zeichnen.

  1. Klicken Sie auf einen leeren Bereich im Grid und ziehen Sie dann diagonal, um eine Box zu erstellen.
  2. Lassen Sie den Mauszeiger los.
  3. Wählen Sie einen Block-Typ (Header, Navigation, Content, Widget Area, etc.) unten auf der Seite aus der angebotenen Auswahl aus. Headway Base bietet aktuell 13 Block Typen. Alle anderen verfügbaren Block Typen, die Sie von Headway Extend heruntergeladen und (als Plugin) installiert haben, erscheinen hier ebenfalls.
  4. Wenn Sie sich umentscheiden und den Block Typ ändern möchten, klicken Sie mit der rechten Maustaste auf den Block und wählen Sie dort Switch Block Type aus.
  5. Klicken und ziehen Sie die Ecken einer Box um die richtige Größe zu erhalten.
  6. Klicken Sie in die Box und ziehen Sie sie, um sie an die richtige Stelle zu bewegen.
Erstellen Sie so viele Boxen – oder Blöcke – wie nötig, um Ihr Layout zu vervollständigen.Wenn Sie mit Ihrer bisherigen Anordnung zunächst zufrieden sind, klicken Sie bitte in der oberen rechten Bildschirmecke auf Save (dieser Punkt ist übrigens blau hinterlegt, wenn Sie Änderungen vorgenommen haben, die Sie noch nicht gespeichert haben) und dann klicken dann auf View Site, um sich Ihr Werk das erste Mal anzuschauen. Das Design sieht zum jetzigen Zeitpunkt noch nicht nach viel aus, aber wir werden bald zu den Styling Einstellungen kommen.Ihre Homepage könnte in etwa so aussehen – eine Homepage mit einem Header-Block, einem Navigations-Block, einem Content-Block, einem Widget-Block und einem Footer-Block.
Schauen Sie sich die Tipps zur Verwendung des Visual Editors für einige Hinweise zur Vereinfachung des Layout Prozesses an, um schneller voranzukommen.

Schritt 4: Einstellung der Navigation Menüs

Headway arbeitet eng mit dem vorgegebenen WordPress Navigations Menü System zusammen. Für einen Überblick, wie man ein WordPress Navigations Menü erstellt und verwendet, schauen Sie sich unsere WordPress Quick Tour an oder das „Custom Navigation Menus“ Video.

Weitere Einstellungsmöglichkeiten für die verschiedenen Blöcke erhalten Sie, wenn Sie den jeweiligen Block wieder mit der rechten Maustaste anklicken und dann dort auf OpenBlock Options klicken. Das Bearbeitungsmenü für den ausgewählten Block öffnet sich dann am unteren Bildschirmrand. Hier finden sich einige Optionen, z.B. können Sie hier einstellen, ob eine Navigation vertikal statt horizontal dargestellt werden soll.

Wenn Sie den Punkt Config ausgewählt haben, können Sie unter Block Alias Ihrer Navigation für die aktuell bearbeitete Seite eine andere Bezeichnung geben, z.B. eine Art Beschreibung für die Position des Blocks, also „Top Navigation“, „Home Navigation“ oder „Footer Navigation“.
Wenn Sie jetzt im WordPress Admin-Bereich unter dem Punkt Design den Unterpunkt Menüs wählen, können Sie dort einen Bezug zwischen dem von Ihnen erstellten Menü und der in Headway vergebenen Navigation-Block Bezeichnung herstellen, um das von Ihnen erstellte Menü in diesem Block darstellen zu lassen. Wenn Sie keine neue Bezeichnung unter Block Alias eingeben wird an dieser Stelle die Block-ID angezeigt, so dass Sie darüber Ihren Navigation Block ebenfalls identifizieren und auswählen können.

Wichtig: Speichern Sie Ihre Änderungen immer zwischendurch.

 

  1. Gehen Sie jetzt zum Unterpunkt Menüs im Design Menü.
  2. Unter dem Reiter „Menüs bearbeiten“ erstellen und benennen Sie ein Menü, wenn noch nicht geschehen und speichern Sie.
  3. Klicken Sie nun auf Position verwalten ordnen Sie Ihr erstelltes Menü dem gewünschten Navigation Block zu und speichern Sie.
  4. Bearbeiten und ergänzen Sie Ihr Menü nun wie gewünscht und speichern Sie Ihre Änderungen.

 

Ein einziges von Ihnen erstelltes Menü kann mit mehreren Navigations Blocks verbunden werden.

 

Schritt 5: Einstellen der Blog Pages

Nun da unser Startseiten-Layout komplett ist, müssen wir z.B. das Layout des Blog-Indexes definieren, wenn Sie dieses Layout neben dem Startseiten-Layout erstellen, dann vererbt sich dieses Layout auch auf alle restlichen Seiten und Beiträge des Blogs (sofern diese nicht bereits anderweitig angepasst wurden)., Wenn Sie das nicht möchten, können Sie z.B. auch für Seiten und Beiträge jeweils ein eigenes Layout erstellen.

Dies geht natürlich im Großen und Ganzen genauso, wie wir es mit der Startseite gemacht haben. Gehen Sie also wieder zum Grid Mode im Visual Editor und wählen Sie oben links auf der Seite wo Currently Editing steht über das Dropdown-Menü den Blog-Index mit einem Mausklick aus. Genauso wie bei der Startseite, beginnen Sie auch hier mit dem Grid Wizard. Sie können nun entweder das Layout der Startseite clonen, ein vorgefertigtes Layout auswählen, oder das Layout des Blog Index ganz nach Ihren eigenen Wünschen ohne Vorgaben erstellen.

Sie sollten beim Layout des Blog-Index sicherstellen, dass Sie mindestens einen Content Block auf dieser Seite haben. Die restlichen Komponenten des Layouts können Sie beliebig hinzufügen – fügen Sie eine Kopfzeile hinzu oder nicht. Oder fügen Sie eine Kopfzeile hinzu, die sich von der Ihrer Homepage unterscheidet. Sie können auch zusätzliche Navigation Blocks für die Kategorie Navigation hinzufügen oder belassen alles so, wie es vorgefertigt ist. Sie können auch eingebettete Blocks oder Custom Code Blocks hinzufügen, je nachdem was Ihrem Inhalt und den Möglichkeiten, die Sie benötigen, entspricht, um zu realisieren, was Sie sich in Schritt 1 überlegt haben.

Lassen Sie den Content Block im Standard Modus, werden Ihnen die letzten 10 Beiträge angezeigt (oder was auch immer Sie in den Einstellungen ► Lesen im WordPress Admin-Bereich eingestellt haben). Der neueste Beitrag wird Ihnen in voller Länge angezeigt, alle weiteren als Auszüge.

Sie können ebenfalls den Modus Custom Query wählen. Damit können SIe im Content Block festlegen, dass nur Artikel aus  bestimmten Kategorien herausgefiltert und angezeigt werden. Bedenken Sie aber wenn Sie dies tun, das Sie das Single Layout verändern wollen und damt den Content Block auf „Default“ stellen müssen, um den richtigen Inhalt für Single Pages und Posts korrekt darzustellen zu lassen.

Schritt 6: Das Layout weiterer Seiten

Wählen Sie, genau wie eben, ein Layout im oben links unter Currently Editing aus dem Dropdown-Menü aus und nehmen Sie Veränderungen im Grid Mode vor. Es ist derselbe Vorgang wie beim Bau der restlichen Seite.

Zusammenfassung:

  1. Erstellen Sie eine Seite in WordPress. Fügen Sie Inhalt ein.
  2. Wenn diese Seite ein anderes Layout haben soll als Ihre vorgefertigte Seite (Vererbt vom FrontPage, Blog Index oder Single Layout, nach Layout-Vererbungsregeln), gehen Sie in den Visual Editor, suchen die aufgelistete Seite in dem Layout Selector und bearbeiten sie.
  3. Sobald Sie alle Ihre Blocks hinzugefügt und alle Block Einstellungen vorgenommen haben, klicken Sie oben rechts wieder auf den Save Button.

Wiederholen Sie diesen Vorgang bei allen Seiten, die verändert werden müssen, bis Sie fertig sind.

Nun haben Sie Ihre Layouts gewählt und es wird Zeit die Optik Ihrer erstellten Layouts im Design Mode zu bearbeiten.

Schritt 7: Verwenden Sie Design Mode

Der Design Mode ist sehr umfangreich. Es gibt buchstäblich mehrere hundert Optionen, wiederkehrende, allgemeine (z.B. alle Navigations Blocks) und nur bestimmte (wie z.B. Navigationsblock mit ID #37).

Sie erreichen den Design Mode aus dem Grid Mode, wenn Sie in der oberen rechten Ecke auf das Pinsel-Symbol klicken, oder wenn Sie aus dem WordPress Admin-Bereich kommen direkt über das Headway-Menü.

Die verfügbaren Optionen unterscheiden sich teilweise geringfügig bei den verschiedenen Blocks, aber generell können Sie die folgenden Optionen bearbeiten:

  • Background
    • Color
    • Image
    • Image repeat
    • Image position
    • Image attachment
  • Font
    • Font family
    • Font size
    • Color
    • Line height
    • Font styling
    • Alignment
    • Capitalization
    • Letter spacing
    • Underline
  • Borders
    • Border color
    • Border style
    • Border width
  • Padding
  • Text shadow (CSS3 progressive enhancement)
    • Horizontal offset
    • Vertical offset
    • Blur
    • Color
  • Box shadow (CSS3 progressive enhancement)
    • Horizontal offset
    • Vertical offset
    • Blur
    • Color
    • Position

Die Einstellungsmöglichkeiten für diese Optionen finden Sie am rechten Rand des Bildschirms. Sie können die einzelnen Elemente allgemein gestalten (wie z.B. „Navigation“, um Styles für alle Navigations Blocks einzustellen) oder spezifisch (wie z.B. die Überschriften in einem speziellen Block).

Sie können ebenso auswählen, welchen Teil eines Elements Sie modifizieren möchten. Beispielsweise können Sie einstellen, dass der Homepage Content Block eine größere Schrift erhält, als der Rest der Seite, indem Sie den Homepage Teil auswählen. Hierfür klicken Sie auf Content subtab unter Blocks; danach klicken Sie im oberen rechten Balken auf Instances Dropdown. Wählen Sie den Homepage Teil aus dem Dropdown, um nur den Block Style genau dieses Layouts zu modifizieren.

Diese Illustration zeigt, wo sich die Instances Dropdown befinden:

Schritt 8: Vervollständigen Sie Ihren Inhalt

Wenn Sie zu diesem Zeitpunkt noch einen Nonsens-Text in Ihren Seiten haben, sollten Sie ihn nun durch konkreten Inhalt ersetzen. Während Sie dies tun, sollten Sie auch die SEO Einstellungen beachten. SEO Einstellungen für Fortgeschrittene werden in Schritt 9 behandelt.

Schauen Sie nun Ihre Website Seite für Seite durch und stellen Sie sicher, dass alles gut aussieht. Gegebenenfalls müssen Sie weitere Layout Veränderungen vornehmen, oder Sie bemerken z.B., dass sie das Design von weiterführenden Links im Content Block oder in den Widget Areas gar nicht geändert haben, obwohl Sie das eigentlich vorhatten. Oder Sie finden etwas anderes am Design oder Layout, das Ihnen oder Ihrem Kunden überhaupt nicht gefällt und das Sie unbedingt ändern möchten.

Das Beste an Headway ist die Einfachheit, mit der Sie Veränderungen vornehmen können, besonders nun, wo Sie mit den Eigenheiten des Visual Editors vertraut sind.

Sobald Ihr Inhalt fertiggestellt ist, sollten Sie abschließende Schönheitsveränderungen vornehmen, oder ggf. spezielle Funktionen einpflegen, was üblicherweise mit Plugins geschieht.

Plugins

Obwohl Headway bemüht ist, mit so vielen Plugins wie möglich kompatibel zu sein, ist es nicht möglich, jeden User bezüglich jedes Plugins zufriedenzustellen. Dies bedeutet, dass wenn Sie ein Problem entdecken und der Plugin-Entwickler gewillt ist, mit dem Headway Team zusammenzuarbeiten, können sie die Headway Programmierer direkt kontaktieren, um eine Lösung zu finden. Die große Mehrheit der Plugins funktioniert von Anfang an unter Headway.

Wenn Sie nicht wissen, wie man zusätzliche Plugins instaliert und verwendet, schauen Sie sich das „Plugins“ Video unter WordPress 101: Site Admin an.

Plugin Integration

Das Einpflegen hängt vom jeweiligen Plugin ab. Manche Plugins sind Widgets, sodass Sie das Widget in eine Widget-geeignete Sidebar ziehen, die Sie mithilfe eines Widget Area Blocks erstellt haben. Wenn Sie ein Plugin haben, das einen Shortcode verwendet, können Sie diesen in einen Custom Code Block oder in eine WordPress Seite oder einen WordPress Beitrag ziehen. Wenn ein PHP „Template Tag“ verwendet wird, kann dieses ebenfalls in einen Custom Code Bock eingefügt werden, oder Sie verwenden die fortgeschrittenen Methode und arbeiten mit PHP Hooks.

Plugin Fehler

Bei einigen Plugins können unter der Verwendung von Headway Probleme auftauchen, oder es ergibt sich, dass das Plugin als Einstieg nicht geeignet ist. Im Forum können Sie andere Community Nutzer nach Hilfestellungen und ihren Erfahrungen mit einem Plugin fragen oder Hilfe bei der Problembehandlung bekommen.

Manchmal finden Sie ein tolles Plugin, das an sich funktioniert, aber den Visual Editor vom Laden abhält. In diesem Fall können Sie entweder das Plugin verwenden und es während der Benutzung des Visual Editors deaktivieren, oder Sie suchen nach einem anderen Plugin, das Ihnen ebenso alle Funktionen bietet, die Sie benötigen

Schritt 9: SEO Konfiguration

Aller Wahrscheinlichkeit nach wollen Sie, dass Ihre Internetseite von vielen Leuten gefunden werden kann. Headway bietet im WordPress Admin Bereich einige Einstellungen, mit der Sie die Position Ihrer Seite bei Suchergebnissen verbessern können.

Hier können Sie die Titel und Beschreibungen mithilfe des Layouts einstellen (auf der Seite „SEO Template“ genannt). Es sind auch Optionen für Fortgeschrittene verfügbar, ebenso wie Einstellungen, die Suchmaschinen vorgeben, Seiten nicht zu indexieren oder Nofollow Links zu aktivieren. Für mehr Informationen zu diesem Thema gehen Sie auf Search Engine Optimization (SEO).

Sie sind fertig

Nun sind Ihre Seiten fertig und können veröffentlicht werden – oder zumindest dem vorgesehenen Publikum zugänglich gemacht werden. Da Sie das Headway Theme verwenden, können Sie Ihre Layouts jederzeit anpassen und verändern und können somit sicherstellen, dass sie effektiv bleiben und ihren Zweck erfüllen.

Headway Themes bietet regelmäßig Updates für Headway, fügen Sie also Ihre Headway Seriennummer in WordPress ein und führen Sie wenn nötig Updates durch. Auf diese Weise profitieren Sie von allen neuen Funktionen und Fehlerbehebungen, um optimal mit Headway arbeiten zu können.

Falls SIe weitere Hilfe bei der Nutzung des Headwaythemes benötigen, schauen SIe sich die weiteren ausführlichen Anleitungen in unserem Kurs an. Sollten Sie danach immer noch Hilfe benötigen, weil SIe an irgendeinem Punkt nicht weiter kommen, nutzen Sie unser Forum.

Dieser Artikel wurde zuletzt aktualisiert für Headway Version 3.6.3.

Zuletzt aktualisiert am 21.03.2014