Wrapper und Wrapper-Optionen

Wrappers and Wrapper Options

Wenn Sie beginnen, mit Headway zu designen, enthält das Blog Index Layout einen Wrapper div, der wiederum alle Ihre Blocks enthält. Der Wrapper bestimmt die Größe des Grids und den Platz, den Sie für Ihre Blocks zur Verfügung haben.

Jeder Wrapper wird durch ein großes weißes Quadrat dargestellt. Indem Sie Wrapper hinzufügen, werden Abschnitte für die Gruppierung der Blocks auf Ihrer Website erstellt. Jeder Wrapper enthält einen Grid und kann seine eigenen Einstellungen besitzen, darunter auch ob es fluid oder fixed ist.

Wrapper werden in Stapeln angeordnet, sodass sie nicht ineinander eingebettet werden können. Dennoch können Wrapper sich überlappen, wenn Ihre Einstellungen im Design Mode so eingestellt sind (Beachten Sie Einsatz von Margins, Padding, und Nudging). Im Grid Mode erscheinen sie jedoch immer einzeln und von einander getrennt, sodass es Ihnen klar erscheint, wo Sie Ihre Blocks platzieren.

 

Wenn Sie mehrere Wrapper verwenden

Die meiste Zeit wird ein einziger Wrapper Ihnen für die Darstellung Ihrer Website dienen können, indem es Blocks gruppiert und indem Sie dort Hintergrundbilder hinzufügen können, die Sie darstellen wollen. (Erinnern Sie sich, dass sowohl das Body Element als auch das Whitewrap div jeweils ein Hintergrundbild haben kann – beachten Sie „Body Classes” in Headway CSS Map um mehr Informationen zu erhalten.)

Da jeder Wrapper fluid oder fixed sein kann, verwenden Sie möglicherweise verschiedene Wrapper, wenn Sie an einer Stelle eine variable Weite benötigen und an einer anderen Stelle eine feste Weite.

Nehmen Sie beispielsweise an, Sie möchten, dass eine Kopfzeile und eine Fußzeile jeweils über die gesamte Breite der Seite gehen, aber der Inhalt in der Mitte der Seite nut ein einem begrenzten Teil erscheint. In diesem Fall sollten Sie drei Wrapper einfügen:

  1. Einen fluid Wrapper für die Kopfzeile
  2. Einen fixed Wrapper mit dem Inhalt Block und eventuell anderen gewünschten Blocks
  3. Einen fluid Wrapper für die Fußzeile

Indem Sie mehrere Wrapper verwenden, erlauben Sie Ihrer Seite die Verwendung verschiedener Visual Styles für die Hauptbereiche Ihrer Website. Wenn Sie beispielsweise den oberen Abschnitt Ihrer Seite unter der Kopfzeile haben möchten, sollten Sie der Kopfzeile einen weißen Hintergrund geben; der untere Abschnitt sollte nun aber einen gefärbten Hintergrund bekommen. Um dies zu erreichen, ist es für Sie die einfachste und schnellste Möglichkeit, wenn Sie für jeden Abschnitt einen eigenen Wrapper verwenden.

Arbeiten mit Wrappern im Grid

Verschiedene Basisfunktionen sind im Grid für Wrapper verfügbar.

Hinzufügen eines Wrappers

Klicken Sie auf das Pluszeichen auf der linken Seite, welches sich im oberen und unteren Teil des Grid Modes befindet, um einen Wrapper hinzuzufügen.

Wenn Sie einen Wrapper hinzufügen, erscheint er am oberen Rand des Grids, wenn Sie das obere Pluszeichen verwenden. Der neue Wrapper erscheint am unteren Ende, wenn Sie das Pluszeichen am unteren Rand verwenden.

Worin liegen die Unterschiede bei den verschiedenen Wrapper Typen?

  • Fluid wrapper mit fixed-width grid: Die Breite des Wrappers ist 100%. Columns und Gutters haben statische Breiten und eine automatische Links- und Rechtsbegrenzung um Elemente zentriert im Wrapper anzuordnen. Dies ermöglicht es Ihnen, ein Hintergrundbild oder eine Farbe einzufügen, die über die gesamte Breite der Website geht, aber so, dass dabei der Inhalt der Seite nicht verschoben wird, sondern sich weiterhin zentriert in der Browserdarstellung befindet.
  • Fluid wrapper mit fluid-width grid: Die Wrapper Breite ist 100%. Columns und Gutters gehen über die gesamte Breite des Wrappers und ändern Ihre Breite, wenn sich die Wrapper Breite ändert. Da Blocks eine ganze Reihe von Columns enthalten und diese fluid sind, beherrschen die Blocks einen Großteil des zur Verfügung stehenden Platzes, wenn sich die Größe des Browsers ändert. Verwenden Sie diesen Wrapper Typ, wenn Sie möchten, dass sich die Größen der Blocks in dem Wrapper verändern, wenn das Browserfenster seine Größe ändert.
  • Fixed wrapper: Die Breite des Wrappers ist die gleiche wie die Breite der Columns und Gutters und es ist zentriert auf der Website aufgrund von festen Rändern links und rechts. Dieser Wrapper wird in der Version 3.5. verwendet. Die meisten WordPress Themes verwenden feste Breiten. Verwenden Sie diesen Wrapper, wenn Sie nicht möchten, dass sich die Website an die verschiedenen Browsertypen der Seitenbesucher anpasst.

Größenanpassung eines Wrappers

Um die Größe eines Wrappers zu verändern, klicken Sie auf eine Ecke und ziehen Sie sie hinauf oder hinunter.

Die Höhe eines Wrappers im Grid ist nicht die eigentliche Höhe des Wrappers – auf ihrer Live Seite passt sich der Wrapper automatisch an seinen Inhalt an. Der Hauptgrund für die Größenveränderung eines Wrappers liegt darin, ihn im Grid Mode vergrößern zu können, um Blocks, die Sie einfügen wollen, anzupassen.

Verändern der Anordnung von Wrappern

  1. Klicken Sie auf die Schaltfläche  rechts neben dem Wrapper, den Sie verschieben möchten.
  2. Während Sie die linke Maustaste gedrückt halten, ziehen Sie den Wrapper hinauf oder hinunter, bis er an der Stelle erscheint, wo Sie ihn im Verhältnis zu den anderen Wrappern haben möchten.
  3. Lassen Sie die Maustaste los.
  4. Klicken Sie auf Save.

Verändern der Wrappergröße

  1. Klicken Sie mit rechts auf den cog button  rechts neben dem Wrapper, den Sie verändern möchten.
  2. Klicken Sie eine der Change Optionen an (siehe Bild unten).
    Wenn nötig, ändern Sie die Column und Gutter Einstellungen (Siehe “Wrapper Options” in diesem Artikel).
  3. Klicken Sie auf Save.

Das Bild zeigt die Optionen an, die zur Veränderung für einen fluid Wrapper mit einem fixed-width Grid zur Verfügung stehen.

Löschen eines Wrappers

  1. Wenn Sie die Blocks, die sich in einem Wrapper befinden, behalten möchten, klicken Sie sie an und ziehen sie in einen anderen Wrapper.
  2. Klicken Sie mit rechts auf den cog button  rechts neben dem Wrapper, den Sie löschen möchten.
  3. Klicken sie auf Delete Wrapper.
  4. Klicken Sie auf OK, um zu bestätigen.
  5. Klicken Sie auf Save.

Beachten Sie: Sie können ebenso das Wrapper Menü öffnen, indem Sie auf eine leere Stelle im Wrapper rechtsklicken.

Wrapper Optionen

Um die Optionen eines Wrappers zu öffnen, klicken Sie auf den cog button  rechts neben dem Wrapper. Nun erscheinen die Optionen in einer Liste.

In den Optionen können Sie auswählen, ob Sie einen vorgefertigten oder einen “independent grid” verwenden möchten. Wenn Sie den „independent grid“ auswählen, werden Ihnen Schieberegler für die Weite der Columns und Gutter angezeigt.

Grid und Margins (Ränder)

Jeder Wrapper kann eine Anzahl von konfigurierten Columns haben. Empfohlene Werte sind 9, 12, 16 und 24 (die voreingestellten Were). Diese Werte können Ihnen helfen Ihr Design vertikal in Drittel oder Viertel einzuteilen, aber arbeiten Sie ruhig mit der Einstellung, die am besten für Sie passt. Klicken und ziehen Sie den Schieberegler, um jeden Wert einzustellen. Der Wrapper muss leer sein, bevor Sie die Column und Gutter Eigenschaften verändern können.

Zu Ihrem Vorteil enthalten Wrapper Optionen auch die oberen und unteren Ränder, sodass Sie die Abstände zwischen den Rändern einstellen und betrachten können, ohne in den Design Mode zu wechseln.

Spiegeln und Konfigurieren

Spiegeln von Wrappern. Wrapper können von einem Layout in ein anderes Layout gespiegelt warden. Das Spiegeln eines Wrappers kopiert seine Grid- und Randeinstellungen, die Styl Einstellungen und alle enthaltenen Blocks in ein neues Layout. Alle Änderungen, die am Wrapper oder an den Blocks im ersten Layout vorgenommen werden, tauchen im zweiten Layout wieder auf.

Ein gespiegelter Wrapper kann neu angeordnet werden, aber in dem Wrapper kann nichts verändert werden. Auch der Wrapper Typ (fluid oder fixed) des zweiten Wrappers kann geändert werden (Siehe auch „Changing a Wrapper’s Fluidity“ weiter oben in diesem Artikel).

Wrapper Pseudonyme. Jeder Wrapper sollte ein Pseudonym bekommen, einen kurzen beschreibenden Namen. Das Pseudonym erscheint an Stellen wie den gespiegelten Blocks anstatt einfach nur einer ID, die von Headway vergeben wurde, als Sie den Wrapper erstellt haben. Mit der ID verbinden Sie möglicherweise nicht viel, also empfiehlt es sich, dem Wrapper ein Pseudonym zu geben.

Custom CSS Class(es). Wenn Sie mit der Verwendung von CSS vertraut sind und Ihre eigenen Classes oder Wrappers verknüpfen möchten, können Sie sie hier ohne Interpunktion durch Leerzeichen abgetrennt eintragen. Verwenden Sie den Live CSS Editor im Design Mode, um Style für Ihre Custom Classes zu definieren.
Dieser Artikel wurde zuletzt für die Headway Version 3.7.3 aktualisiert.
Letzte Aktualisierung am 22.06.2014