Layout Resizer

Zusammenfassung

Mit dem Layout Resizer können Sie sehen, wie Ihre Ausgabe auf verschiedenen Bildschirmgrößen aussehen könnte, und mit benutzerdefinierten Größen experimentieren. Wenn Sie auf die Steuerelemente des Schiebereglers zur Größenänderung klicken oder einen Haltepunkt eingeben, um die Einstellung für die Breite zu ändern, reagiert der Inhalt im XML-Editor dynamisch.

Wenn Sie verschiedene Formate für verschiedene Medien oder Bildschirme anzeigen möchten, z. B. für Tablet oder Smartphone, ist der Layout-Resizer eine bequeme Möglichkeit, diese Formateinstellungen zu sehen, ohne eine Ausgabe generieren zu müssen. Im XML-Editor können Sie den Layout Resizer auch verwenden, um ein neues Media Query im Stylesheet zu erstellen, die auf der Position des Layout Resizers basiert.

Beschreibung

  1. Topic oder Snippet öffnen

  2. In der unteren Leiste das Symbol anklicken

    Der Schieberegler wird oben im Topic eingeblendet. Sie können die Anzeige jederzeit wieder ausschalten.

    Zum Vergrößern / Verkleinern auf das Bild klicken

  1. Topic oder Snippet öffnen

  2. Layout Resizer einblenden

  3. Mauszeiger auf dem Schieberegler bewegen (für die Layout-Änderung) Beachten Sie Folgendes:

    • Sobald Sie auf den Schieberegler klicken, markiert ein blauer Marker die temporäre Position, die im Editor verwendet wird. Zusätzlich wird rechts neben dem Schieberegler ein Textfeld angezeigt, in dem die Position des blauen Markers und die Maßeinheit angezeigt wird.

    • Bewegen Sie den blauen Marker entlang des Schiebereglers oder klicken Sie auf eine beliebige Stelle, die Sie als verkleinertes Layout für Ihren Inhalt sehen möchten. Alternativ können Sie eine temporäre Position auch direkt in das Textfeld eingeben.

    • Kleine graue Rechtecke stellen Media Query Breakpoints dar. Erweitern Sie bei Bedarf den XML-Editor, um sie zu sehen. Standardmäßig enthält Flare einen Breakpoint für Tablets bei 1279 Pixel und einen Breakpoint für mobile Geräte bei 767 Pixel. Wenn Sie auf den grauen Marker eines Media Query-Rechteckes klicken, rastet die Anzeige an der richtigen Stelle ein. Der Editor rendert den Inhalt basierend auf der ausgewählten Media Query.

  4. Anzeige zurücksetzen: Schaltfläche mit den drei vertikalen Punkten rechts neben dem Schieberegler klicken > Eintrag Reset Slider

  1. Topic oder Snippet öffnen

  2. Cursor an eine neue Position auf dem Schieberegler bewegen und klicken

  3. Schaltfläche mit den drei vertikalen Punkten rechts neben dem Schieberegler klicken und aus der Dropdown-Liste Add new Media Query wählen

    —> Der Dialog New Medium / Media Query öffnet sich mit einem logischen Ausdruck, der auf der Position des Cursors für die maximale Breite aus dem Layout-Resizer basiert. Sie können ein anderes Stylesheet auswählen, in dem das Media Querie gespeichert werden soll.

  4. Schaltfläche OK klicken

    —> Beachten Sie, dass ein neues graues Rechteck auf dem Schieberegler angezeigt wird, das Ihre gespeicherte Medienabfrage und den Breakpoint anzeigt. Außerdem öffnet sich der Stylesheet-Editor.

    Alternativ können Sie wie bisher neue Media Queries im Stylesheet-Editor anlegen und bearbeiten.

Autor: Birgit Becker / Letzte Änderung: 28.2.2025