Responsive Webdesign Übersicht

Was ist Responsive Webdesign in Shopify?

Shopifys responsives Webdesign Passt sich Ihr Shop-Layout automatisch an jede Bildschirmgröße an – von Desktops über Tablets bis hin zu Smartphones. Es geht nicht nur darum, Text oder Bilder zu skalieren, sondern flexible, benutzerfreundliche Erlebnisse zu schaffen, die Engagement und Conversion fördern.

Egal, ob Sie Mobile-First-Layouts anstreben, Responsive Ansichtenoder eine bessere Benutzerfreundlichkeit auf allen Geräten. In diesem Handbuch erfahren Sie, wie Sie eine Seite mithilfe von responsive gestalten. GemPages.

Wie unterstützt GemPages Responsive Design?

GemPages bietet Tools, mit denen Benutzer ihre Seiten für Mobilgeräte und Tablets optimieren können, z. B. responsive Einstellungen und Elementsichtbarkeit. Auf diese Weise können Sie Seiten erstellen, die speziell für mobile Benutzer konzipiert sind, und so ein positives Erlebnis für Kunden gewährleisten, die Ihren Shop auf ihren Geräten besuchen.

GemPages Version 7

In Version 7 von GemPages wurde das responsive Webdesign um benutzerfreundliche und einfach zu bedienende Tools erweitert, mit denen Sie Seiten für verschiedene Bildschirmgrößen erstellen und optimieren können. Der neue Editor bietet flexible Einstellungen für Elemente, sodass Sie Designs nahtlos für die Ansicht auf Desktops, Tablets und Mobilgeräten anpassen können.

Bei der Arbeit mit responsiven Layouts in GemPages Version 7Wir empfehlen Ihnen, Ihre Seite in [Name der Programmiersprache] zu gestalten. Desktop-Ansicht zuerstund anschließend Layoutanpassungen für Tablets und Mobilgeräte vornehmen.

Erstellen Sie ein responsives Layout mit dem Zeilenelement

Um ein Layout für eine Seite zu erstellen, müssen Sie das Zeilenelement. Es spielt eine wichtige Rolle in GemPages, indem es eine Grundlage für Ihr Seitendesign bietet. Seine Hauptfunktion besteht darin, Elemente zu enthalten und sich reaktionsfähig an verschiedene Bildschirmgrößen auf unterschiedlichen Geräten anzupassen. Befolgen Sie die nachstehenden Schritte, um Ihrer Seite eine Zeile hinzuzufügen und ein reaktionsfähiges Layout zu erstellen.

Schritt 1: Im GemPages Dashboard, klicken Sie auf einer Ihrer Seiten auf die Schaltfläche „Bearbeiten“ und öffnen Sie den Editor.

Schritt 2: Navigieren Sie zur linken Seitenleiste und suchen Sie dort im Abschnitt „Layout“ nach der Zeile. Sie können das Element dann per Drag & Drop an die gewünschte Stelle ziehen.

Schritt 3: Navigieren Sie zur linken Seitenleiste und wählen Sie die Registerkarte „Einstellungen“. Um das Layout für Tablet oder Handy anzupassen, klicken Sie auf das Desktop-Symbol und wählen Sie das entsprechende Symbol aus.

Passen Sie die Einstellungen für responsive Elemente an

GemPages bietet eine Vielzahl responsiver Elemente, mit denen Sie benutzerdefinierte Seiten und Abschnitte erstellen können. Zu diesen Elementen gehören Überschriften, Bilder, Text und mehr. Achten Sie beim Entwerfen Ihrer Seiten darauf, diese responsiven Elemente zu verwenden, um sicherzustellen, dass Ihre Inhalte auf jedem Gerät gut aussehen.

Sie können zwischen Geräten wechseln, indem Sie auf das Desktop-Symbol neben den Einstellungen klicken. Sie können die Reaktionseinstellungen jedoch nur für die Komponente ändern, die über dieses Symbol verfügt.

Elemente nach Gerät ein- oder ausblenden

Um ein Element auf allen drei Gerätetypen anzuzeigen oder auszublenden, gehen Sie zur Registerkarte „Erweitert“ und verwenden Sie den Schalter im Abschnitt „Sichtbarkeit“. Denken Sie daran, dass Sie mindestens einen Bildschirmtyp aktiviert haben müssen.

Seien Sie bei der Verwendung dieser Funktion vorsichtig, da alle versteckten Elemente weiterhin im Hintergrund geladen werden und sich dies möglicherweise auf die Ladegeschwindigkeit Ihrer Seite auswirkt.

Zeigen Sie Ihr Design auf allen Geräten in der Vorschau an

Wenn Sie mit dem Erstellen Ihrer Seiten fertig sind, ist es wichtig, Ihr endgültiges Design auf verschiedenen Geräten zu überprüfen. In der oberen Leiste Ihres Editors können Sie ein Gerät auswählen, um dessen Benutzeroberfläche anzuzeigen, darunter Desktop, Tablet und Mobilgerät. Auf diese Weise können Sie Probleme mit dem Layout oder Inhalt erkennen, die sich möglicherweise auf das Benutzererlebnis auswirken. Sie können den Editor auch erweitern, um das Bild in der tatsächlichen Bildschirmgröße anzuzeigen.

GemPages Version 6

Aufbauend auf den in Version 7 festgelegten Funktionen bietet GemPages Version 6 auch leistungsstarke Funktionen für responsives Webdesign. Obwohl sich die Tools möglicherweise geringfügig unterscheiden, können Sie dennoch optimierte Webseiten für jedes Gerät erstellen. Es wird empfohlen, zuerst in der Desktop-Ansicht zu bearbeiten und dann für Mobilgeräte anzupassen, um ein nahtloses Erlebnis auf allen Geräten zu gewährleisten.

Wenn Sie zu anderen Ansichten wechseln, wird Ihnen außerdem eine Popup-Benachrichtigung angezeigt, die Sie daran erinnert, den Entwurf zunächst in der Desktop-Ansicht vorzunehmen und die Seite später mithilfe anderer Ansichten zu optimieren. 

Aktivieren Sie Responsive Webdesign

Nur Änderungen an der Desktop-Ansicht werden auf die Benutzeroberflächen aller vier Geräte angewendet. Daher empfehlen wir, dass Sie mit dem Designen zunächst mit der Desktop-Ansicht beginnen und dann bei Bedarf Anpassungen an anderen Ansichten vornehmen.

Wenn Sie zu anderen Ansichten wechseln, wird Ihnen außerdem eine Popup-Benachrichtigung angezeigt, die Sie daran erinnert, zuerst mit der Desktop-Ansicht zu entwerfen und die Seite später mit anderen Ansichten zu optimieren.

Schritt 1: Gehen Sie zur GemPages Dashboard und tragen Sie über die Schaltfläche „Bearbeiten“ eine Ihrer Seiten ein.

Schritt 2: Im Herausgebergibt es zwei Methoden, um mit der Prüfung Ihres Responsive Designs zu beginnen:

Methode 1: Wählen Sie in der oberen Leiste ein Gerätesymbol aus.

Methode 2: Klicken Sie auf das Element, das Sie bearbeiten möchten, und suchen Sie oben rechts nach dem Desktop-Symbol. Klicken Sie auf das Symbol und wählen Sie das Gerät aus, zu dem Sie wechseln möchten.

Nehmen Sie so viele Anpassungen vor, wie Sie für richtig halten. Nachfolgend finden Sie einige Tipps.

Schritt 3: Klicken Sie auf "Speichern" und "Veröffentlichen" Sobald Sie fertig sind, aktualisieren Sie die Änderungen an Ihrem Front-Store.

Verwenden des Zeilenelements zum Erstellen von Abschnitten

Als Basiselement Reihe wird dank seiner responsiven Natur oft zum Erstellen von Abschnitten verwendet. Es kann sich und die verschachtelten Elemente automatisch an verschiedene Geräte anpassen.

Befolgen Sie die folgenden Schritte, um einen Abschnitt mit dem Zeilenelement zu erstellen.

Schritt 1: Im GemPages Dashboard, klicken Sie auf einer Ihrer Seiten auf die Schaltfläche „Bearbeiten“ und öffnen Sie den Editor.

Schritt 2: Suchen Sie nach dem Zeilenelement und ziehen Sie es per Drag & Drop auf Ihre Seite

Schritt 3: Überprüfen Sie die Registerkarte „Einstellungen“, die in der linken Seitenleiste angezeigt wird. Wählen Sie das gewünschte Layout für die Zeile in der Desktopansicht aus.

Sie können das Layout für alle vier Ansichten manuell anpassen, indem Sie auf „Weitere Einstellungen“ und ziehen Sie den gelben Schieberegler für die entsprechende Ansicht.

Schritt 4: Ziehen Sie andere Elemente per Drag & Drop in die Zeile und konfigurieren Sie sie mithilfe der Registerkarten „Einstellungen“ und „Design“.

Schritt 5: Klicken Sie auf "Speichern" und "Veröffentlichen" Sobald Sie fertig sind, bringen Sie Ihre Änderungen in den Live-Store.

Passen Sie den Rand und die Polsterung an

Der Rand ist der Raum zwischen den Grenzen eines Elements und anderen.

Als Polsterung bezeichnet man den Raum innerhalb des Elements.

Mit diesen beiden Parametern können Sie jedes Ihrer Elemente geschickt an der genauen Stelle positionieren. Die Einstellungen für Ränder und Abstände finden Sie auf der Registerkarte „Design“ jedes Elements im Abschnitt „Abstände“.

Elemente ein- oder ausblenden

Die ausgeblendeten Elemente werden weiterhin im Hintergrund geladen. Wir raten daher, diese Funktion nicht zu häufig zu verwenden. Im Reiter „Design“ jedes Elements finden Sie den Bereich „Sichtbarkeit“. Hier können Sie das Element auf allen vier Gerätetypen ein- und ausblenden.

Responsive Webdesign ist entscheidend, um das Layout Ihres Onlineshops auf möglichst vielen Geräten zu optimieren und so ein positives Kundenerlebnis zu gewährleisten. Das Beste daran: Mit GemPages erreichen Sie all dies ganz einfach und ohne zusätzlichen Programmieraufwand.

Häufig gestellte Fragen

1. Was ist ein responsives Layout in Shopify?

Ein responsives Layout stellt sicher, dass Ihre Shopify-Seiten auf allen Bildschirmgrößen gut aussehen, von großen Desktops bis hin zu kleineren Tablets und Telefonen.

2. Wie macht man eine Seite auf Shopify reaktionsfähig?

Verwenden Sie einen Seitenersteller wie GemPages, um:

• Strukturieren Sie Inhalte mithilfe von Zeilen.
• Passen Sie Layouts nach Geräteansicht an
• Passen Sie Ränder, Abstände und Sichtbarkeit je nach Bildschirmgröße an

3. Wie lade ich ein responsives Layout für Shopify hoch?

Sie laden es nicht hoch, sondern erstellen es direkt in Ihrem Shopify Page Builder. In GemPages geschieht dies visuell per Drag-and-Drop und mit responsiven Einstellungen für jedes Element.

4. Unterstützt GemPages Tablet-Webdesign?

Ja! Sie können Ihr Design sowohl in Version 6 als auch in Version 7 separat für die Tablet-Ansicht vollständig anpassen.

5. Kann ich das Layout basierend auf den Desktop-Abmessungen steuern?

Absolut. Sie können Ihr Design in Desktop-Größe gestalten und es dann für Tablets und Mobilgeräte anpassen, um ein wirklich responsives Erlebnis zu gewährleisten.

6. Wenn ich meine Seite in der mobilen Ansicht bearbeite, hat das Auswirkungen auf die Desktop-Version?