Tipps zur Verwendung des Visual Editor

Der Visual Editor bietet Ihnen bei der Gestaltung Ihrer Website eine große Flexibilität. Während Sie arbeiten, sollten Sie folgende Schritte befolgen.

Das richtige Ausrichten der Blocks

Der Grid Mode ist ein Layout Modus, er eignet sich daher nicht für die perfekte-pixel Anordnung aller Ihrer Elemente. Der Grid Mode bietet Ihnen ein einfaches Interface, das Ihnen erlaubt, verschiedene Teile Ihrer Website in eine Zeichenfläche zu platzieren. Wenn man diese Informationen in eine Website übersetzt, fügt Headway diese Blocks zusammen. Headway versucht, Ihre Blocks in logischen Spalten und Reihen/Zeilen anzuordnen.

Manchmal kommt es dazu, dass die Anordnung verschiedener Blocks zu unerwarteten Ergebnissen führt. Also beachten Sie:

  • Wenn Sie drei Spalten in Ihrem Layout haben möchten, versuchen Sie, dass alle diese Spalten auf derselben Linie beginnen. Dies ist das logischste Prinzip, aber wenn Sie diesem Leitfaden nicht folgen wollen, kann es passieren, dass eine Ihrer Spalten aus dem Rahmen fällt.
  • Wenn Sie mehrere Spalten in Ihrem Layout haben möchten, bei dem eine oder mehrere Spalten für mehrere übereinander gelagerte Blocks vorgesehen sind, schrecken Sie nicht davor zurück, eine große Menge an Platz zwischen den Blocks, die übereinander gelagert werden sollen, zu lassen. Im Browser finden sich die Blocks zusammen. Das Platz lassen zwischen zwei vertikalen Blocks ist für Headway ein Zeichen, dass Sie eine neue Zeile beginnen möchten – und ihr zweiter Block auf der linken Seite wird unter alles, wie unten in der Illustration gezeigt, geschoben. (In diesem Fall verwenden Sie Platzhalter oder Puffer, um Blocks absichtlich voneinander zu trennen. Beachten Sie Einsatz von Margins, Padding, und Nudging.)
  • Wenn Sie Blocks auf eine bestimmte Weise anordnen möchten, sollten Sie versuchen Multiple Wrappers zu verwenden, als es Headway zu überlassen zu interpretieren, wie Sie Ihre Blocks anordnen möchten. Beachten Sie Wrappers and Wrapper Options, um mehr Informationen über das Hinzufügen und Konfigurieren von Wrappern zu erhalten.

Geben Sie jedem Block ein Pseudonym (Alias)

Ein Pseudonym ist wie ein Name für den Block. Wenn Sie dem Block kein Pseudonym geben, wird er immer, sowohl im Visual Editor als auch in WordPress, mit seiner ID bezeichnet und das kann zu Verwirrung führen.

Öffnen Sie die Blockoptionen und klicken Sie auf den Config Tab, um ein Pseudonym zu erstellen.

Verstehen Sie die Blocktypen und verwenden Sie diese strategisch

Machen Sie sich damit vertraut, was jeder Block für Sie bedeutet, sodass Sie ihn an der richtigen Stelle mit der richtigen Funktion verwenden können. Erstellen Sie ein Layout für Ihre Seite, sobald Sie entschieden haben, welcher Blocktyp für jede Komponente Ihrer Seite am besten ist. Auf diese Weise vermeiden Sie eine spätere Erkenntnis, einen falschen Blocktyp verwendet zu haben und erneut ein Layout zu erstellen.

Beispiel: Headway bietet Text Blocks und WordPress bietet Texts Widgets. Welches ist für Sie der Richtige? Wenn Sie wollen, dass Ihr Text über eine lange Zeit an der gleichen Stelle steht und auch an verschiedenen Stellen auf Ihrer Seite auftaucht, verwenden Sie Headway Blocks. Wollen Sie aber regelmäßig Ihren Text ändern, dann ist es besser einen Widget Area Block mit dem WordPress Text Widget zu verwenden, da es schneller geht, den Text in WordPress zu aktualisieren.

Arbeiten Sie sich vom Allgemeinen bis ins Detail voran

Layout Vererbung und Cascading Style Sheets (CSS) funktionieren auf dieselbe Weise. Je höher Sie Layouts und Styles in der Hierarchie erstellen, desto weniger Veränderungen müssen Sie weiter unten vornehmen.

Beginnen Sie im Grid Mode mit dem Block Index Layout, um Ihre Seite zu designen. Dank der Layout Vererbung übernehmen alle weiteren Layouts dieselben Einstellungen. Arbeiten Sie sich die Hierarchie hinunter, um zielgerichtete Veränderungen in anderen Layouts vorzunehmen.

Beachten Sie: Wenn Ihre Startseite sich gänzlich vom Layout der anderen Seiten unterscheidet und hier keine Blog Beiträge angezeigt werde sollen, empfiehlt es sich, eine statische Startseite zu verwenden. Auf diese Weise brauchen Sie sich keine Sorgen über die Veränderung jeder Tochterseite des Block Index Layouts zu machen.

Klicken Sie im Design Mode unter Optionen auf den Defaults Tab und wählen Sie die generellen Text Eigenschaften für Ihre Seite aus. Um Styles für den Korpus, den Wrapper div oder für die Blocktypen hinzuzufügen, klicken Sie auf den Editor Tab und wählen das Element oder den Blocktyp aus. Wählen Sie ein Tochterelement, um seine Styles einzustellen.

Von hier an wählen Sie unter Optionen oder in der Übersicht verschiedene spezifische Block Styles aus (oder sogar spezifische Blocks in spezifischen Layouts). Beachten Sie die Ausrichtung der Elemente für das Styling: Ebenen der Anpassung, um mehr Informationen über die zielgerichteten Layouts oder Beispiele für Style Veränderungen zu bekommen.

Verwenden von Layout Templates

Mit einem Layout Template verwenden Sie ein spezielles Layout an verschiedenen Stellen Ihrer Seite wieder und die Änderungen, die Sie in dem Template vornehmen, werden an alle Layouts, die damit verknüpft sind, weitergegeben. Layout Templates können mit individuellen Beiträgen in WordPress auf dem Post Editor Screen verknüpft sein.

Beispiel: Nehmen wir an, Sie haben die Seiten “Über”, “Kontakt” und “Newsletter” auf Ihrer Website.

Diese ererben ihre Layouts vom Page Layout, dieses wiederum ererbt sein Layout vom Single Layout. Nun wollen Sie, dass diese drei Seiten gleich aussehen, aber unterschiedlich als der Rest der Seite. Das Erstellen eines Layout Templates und das Verknüpfen mit diesen drei Seiten erspart Ihnen eine Menge Zeit. Wenn Sie Änderungen an dem Layout Template vornehmen, werden alle drei Seiten automatisch aktualisiert.

Beachten Sie Verwenden von Layoutvorlagen, um Anleitungen zum Erstellen und Verknüpfen von Layout Templates zu erhalten.

Seien Sie vorsichtig, wenn Sie neue Styling Methoden nutzen

Da CSS Spezifikationen sich über die Zeit verändern und robuster werden, müssen Browser auf dem neuesten Stand gehalten werden. Ältere Browserversionen können manche Styles nicht erkennen, wie beispielsweise abgerundete Kanten und Schattierungen. Achten Sie also auf die Browser, die Besucher verwenden, um Ihre Seite anzusehen, und auch wenn dies eine Beschränkung ist, lassen Sie nicht die neuesten Styles die Lesbarkeit und Funktionalität Ihrer Seite steuern.

Dieser Artikel wurde zuletzt für die Headway Version 3.7.2 aktualisiert.

Letzte Aktualisierung am 21.06.2014