Beim Erstellen einer responsiven Website ist es wichtig, dass diese über eine ansprechende Vorlage verfügt. Wir verraten Ihnen jetzt, wie Sie bei der Gestaltung des Template-Layouts, Zeit sparen können.

Wenn Sie in Struktur der Vorlage mit der rechten Maustaste auf Vorschau klicken, erscheint ein Kontextmenü, über das Sie alle Eigenschaften der Struktur kopieren und einfügen können.

Das heißt, nachdem Sie die Struktur Ihrer Vorlage für die Anzeige am Desktop fertiggestellt haben, können Sie sie einfach kopieren, zur nächsten Anzeige wechseln und sie dort einfügen. Ausgehend von dieser einheitlichen Basis müssen Sie jetzt nur noch die Elemente anpassen, die sich in der neuen Ansicht ändern.

Nachdem Sie die Struktur Ihrer Vorlage festgelegt haben, können Sie sich dem Header und der Fußzeile widmen. Der Platz, den diese beiden Bereiche einnehmen, verringert sich natürlich nach und nach von der Ansicht Desktop bis zur Ansicht Mobil. Die beste Vorgehensweise ist folgende:

• Öffnen Sie den Bereich Header des Fensters Inhalt des Headers und der Fußzeile, geben Sie für die Ansicht Desktop alle benötigten Inhalte ein (Titel, Logo, Bilder usw.) und legen Sie deren Eigenschaften, Maße und Positionen fest.

• Klicken Sie auf die Responsiv-Leiste, um die nächste Ansicht auszuwählen. Die von Ihnen eingefügten Objekte sind nun wahrscheinlich zu groß und überlagern sich.

• Verbergen Sie die Inhalte, die in dieser Ansicht nicht benötigt werden. Markieren Sie hierzu das Objekt, klicken Sie auf die Schaltfläche Einblenden/Ausblenden und wählen Sie eine der Optionen: In dieser Ansicht verbergen oder In dieser und allen untergeordneten Ansichten verbergen.

• Legen Sie für die verbleibenden Objekte die Position und die Größe fest.

• Wiederholen Sie diesen Vorgang bei allen Ansichten. Als Grundregel gilt: Zeigen Sie immer nur die wichtigsten Inhalte an.

Und hier noch ein Tipp: Wenn Sie ein Objekt versehentlich ausgeblendet haben, klicken Sie einfach erneut auf Einblenden/Ausblenden und wählen Sie die Option Verwaltung der verborgenen Objekte für diese Ansicht. Es öffnet sich ein Fenster mit der Liste aller Objekte, die für die aktuelle Ansicht verborgen wurden. Setzen Sie neben den Namen des betreffenden Objekts einfach das Häkchen, um es wieder einzublenden.