Zeilenelement

Informationen zum Zeilenelement

Das Zeilenelement ist eine der wichtigsten Komponenten beim Erstellen einer Seite.

Normalerweise legen Sie mit dem Zeilenelement die Grundlage für Ihr Layout. Sie können mehrere Zeilen frei anordnen, um Ihre Seite nach Wunsch zu strukturieren.

Für erweiterte Rasterlayouts, die dazu beitragen, dass Ihre Inhalte auf verschiedenen Bildschirmgrößen organisiert und ansprechend sind, können Sie verschachteln bis zu 12 Spalten innerhalb einer einzelnen Zeile. 

Sobald Ihr Framework festgelegt ist, können Sie Elemente wie Text, Bilder, Videos und Schaltflächen einfach per Drag & Drop in die Zeile ziehen. 

Wie füge ich GemPages V7 ein Zeilenelement hinzu?

Schritt 1: Im GemPages Dashboard, Greife auf ... zu Seiten Abschnitt, öffnen Sie eine vorhandene Seite oder erstellen Sie eine neue. Sie werden zum GemPages-Editor weitergeleitet.

Schritt 2: Suchen Sie in der linken Seitenleiste nach dem Zeilenelement. Wählen Sie ein Zeilenlayout aus und ziehen Sie es per Drag & Drop in den Entwurfsbereich.

Schritt 3:: Klicken Sie auf das Element, um dessen Einstellungsfenster in der linken Seitenleiste zu öffnen, das in Einstellungen , Erweitert Tabs

Konfigurieren der Registerkarte „Einstellungen“

Layout

Unter dem Layout Definieren Sie im Abschnitt, wie viele Spalten in einer einzelnen Zeile angezeigt werden.

Sie können wählen aus sechs voreingestellte Layouts (1–6 Spalten) und jede Voreinstellung unterteilt die Zeile automatisch in gleich große Abschnitte.

Diese Spalten fungieren als Container, in denen Sie verschiedene Elemente wie Bilder, Textblöcke oder Schaltflächen hinzufügen können, um Ihren Inhalt zu strukturieren.

Spaltenbreite

Steuern Sie, wie viel Platz jede Spalte innerhalb der Zeile einnimmt. Sie können dies auf zwei Arten festlegen:

• Wechselverhältnis: Alle Spalten sind gleichmäßig verteilt. Ziehen Sie den Schieberegler, um das Breitenverhältnis zwischen ihnen anzupassen.
• An Inhalt anpassen: Die Spaltenbreite passt sich automatisch der Größe ihres Inhalts an.

Diese Flexibilität hilft Ihnen beim Entwerfen von Layouts, die sich an unterschiedliche Inhaltslängen anpassen und die Ausgewogenheit auf der gesamten Seite wahren.

Spaltenverwaltung

In diesem Abschnitt können Sie die Anzahl und Reihenfolge der Spalten in Ihrer Zeile verwalten. Bewegen Sie den Mauszeiger über die einzelnen Spalten in der Liste, um:

• Neu anordnen: Ändern Sie die Position der Spalte.
• Kopieren: Duplizieren Sie die Spalte und ihren Inhalt.
• Löschen: Entfernen Sie die ausgewählte Spalte.

Dieser Abschnitt erleichtert die Neuorganisation oder Replikation von Inhaltsblöcken, ohne von vorne beginnen zu müssen.

Spaltenabstand

Verstelle die Abstand zwischen den Spalten um zu steuern, wie kompakt oder weitläufig Ihr Layout aussieht. Sie können entweder:

• Geben Sie einen genauen numerischen Wert ein, oder
• Ziehen Sie die blauer Schieberegler um den Abstand optisch zu verändern.

Durch den richtigen Abstand wird die Lesbarkeit verbessert und die visuelle Hierarchie zwischen den Spalten gewahrt.

Größe

Legen Sie die Gesamtgröße und die interne Polsterung des Zeilenelements fest.

• Breite: Definiert, wie breit die Zeile über Ihre Seite reicht.
• Größe: Legt den vertikalen Abstand der Zeile fest.
• Polsterung: Steuert den inneren Abstand zwischen dem Rand der Zeile und ihrem Inhalt.

Verwenden Sie diese Einstellungen, um in Ihrem gesamten Layout eine konsistente Struktur und Ausgewogenheit beizubehalten.

Tipp: Spaltenhöhe bei geteilten Layouts anpassen

Bei Verwendung einer Zeile mit mehreren Spalten kann es vorkommen, dass die Spalten aufgrund unterschiedlicher Inhaltslängen unterschiedliche Höhen aufweisen.

Um alle Spalten innerhalb der Zeile mit gleicher Höhe anzuzeigen:

• Wählen Sie das Zeilenelement aus.
• Gehen Sie zur Einstellungen Registerkarte → Größe .
• Setze die Höhe Option zu Vollständiger.

Dadurch kann sich der linke Inhaltsbereich ausdehnen und an die Höhe des angrenzenden Bildes, Videos oder Hero-Banners anpassen, wodurch ein ausgewogeneres und visuell einheitlicheres Layout auf allen Geräten entsteht.

Hintergrund

Fügen Sie Ihrer Zeile einen Hintergrund hinzu, um visuelle Tiefe zu erzeugen oder bestimmte Abschnitte hervorzuheben. GemPages bietet drei Hintergrundtypen:

• Farbe: Wählen Sie mithilfe eines HEX-Codes, der Farbauswahl oder der Musterauswahl eine Vollton-/Farbverlaufshintergrundfarbe aus.

• Bild: Laden Sie ein neues Bild hoch oder wählen Sie eines aus Ihrer Medienbibliothek aus.

• Video: Verwenden Sie ein gehostetes Video von YouTube oder Shopify, um dynamische Hintergründe zu erstellen.

Shape

In diesem Abschnitt können Sie das Gesamtbild Ihrer Zeile optimieren, indem Sie die Grenze, Eckenradius und Schatteneffekt:

• Grenze: Fügen Sie den Rahmen um die Zeile hinzu oder ändern Sie ihn. Sie können seinen Dicke, Stil (durchgezogen, gestrichelt oder gepunktet) und Farbe passend zu Ihrem Markenstil.
• CORNER: Verstelle die Eckenradius , um die Kanten des Karussells abgerundet oder scharf zu gestalten. Größere Werte erzeugen beispielsweise ein weicheres, moderneres Aussehen.
• Shadow: Bewerben a Schlagschatten um Ihrem Karussell Tiefe und eine optische Trennung vom Seitenhintergrund zu verleihen. Sie können den Schatten Offset, verwischen und Farbe für subtile oder dramatische Effekte.

Spalte ausrichten

Passen Sie die vertikale Ausrichtung aller Spalten innerhalb der Zeile an. Wählen Sie aus:

• Oben ausrichten: Richten Sie den gesamten Inhalt am oberen Rand der Zeile aus.
• Vertikale Mitte: Zentrieren Sie den gesamten Inhalt vertikal.
• Unten ausrichten: Richten Sie den gesamten Inhalt unten aus.
• Vertikalen Abstand verteilen: Verteilen Sie den Abstand zwischen den Spalten gleichmäßig.

Verwenden Sie diese Einstellung, um sicherzustellen, dass Ihre Inhalte auf allen Geräten ausgewogen und optisch konsistent bleiben.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zur Registerkarte „Erweitert“ und folgen Sie den Anweisungen in Dieser Artikel.

Bewährte Methoden für das Zeilenelement

Spalten effektiv nutzen

Das Zeilenelement eignet sich ideal zum Erstellen mehrspaltiger Layouts. Sie können auch zusätzliche Zeilen in Spalten verschachteln, um komplexere Rasterdesigns zu erstellen.

Inhaltsfelder gestalten

Zeilen sind besonders effektiv, um Testimonial-Abschnitte oder ähnliche Inhaltsbereiche zu erstellen. Sie können das Zeilenelement verwenden, um Inhaltsfelder zu erstellen, indem Sie Hintergründe und Polster hinzufügen. Für Inhalte in voller Breite sollten Sie Hintergrundbilder wie die in Hero Banners verwenden. 

Sorgen Sie für einen gleichmäßigen Abstand

Ordnen Sie Ihre Inhalte innerhalb einer Zeile mit einer maximalen Breite von 1200 Pixeln an, um eine einheitliche Darstellung auf allen Bildschirmgrößen zu gewährleisten, von kleinen Geräten bis hin zu großen Monitoren.

Verbessern Sie die Reaktionsfähigkeit

Nutzen Sie die Flexibilität, Spaltenpositionen, -reihenfolge und -breiten an unterschiedliche Bildschirmgrößen anzupassen. So stellen Sie sicher, dass sich Ihr Design nahtlos anpasst und auf allen Geräten optisch ansprechend bleibt.

Schritt-für-Schritt-Anleitungen zum Anpassen Ihres Designs an verschiedene Geräte mithilfe von GemPages finden Sie in den ausführlichen Richtlinien in Dieser Artikel.

Häufig gestellte Fragen

1. Wie kann ich eine Hintergrundfarbe für eine Spalte festlegen?

Derzeit ist diese Funktion nicht verfügbar. Um dies zu umgehen, können Sie benutzerdefiniertes CSS hinzufügen. Klicken Sie auf das Element, gehen Sie zur Registerkarte „Erweitert“ und geben Sie Ihren CSS-Code in das Feld „CSS-Klasse“ ein. Oder Sie können sich für weitere Unterstützung an unser GemPages-Supportteam wenden.

2. Wie erstelle ich eine 5-spaltige Zeile?

Sie können eine 5-spaltige Zeile erstellen, indem Sie in den Zeileneinstellungen das 5-spaltige Layout auswählen. Alternativ können Sie die Karussell-Element für einen ähnlichen Effekt.

3. Wie lösche ich eine Spalte aus einer Zeile?

Um eine Spalte in einem Zeilenelement zu löschen, führen Sie die folgenden Schritte aus:

• Wählen Sie die Zeile mit der Spalte aus, die Sie löschen möchten.
• Suchen Sie in der linken Seitenleiste nach dem Spaltenabschnitt.
• Klicken Sie auf das Papierkorbsymbol neben der Spalte, die Sie entfernen möchten.

4. Wie dupliziere ich eine Zeile?

Sie können eine Zeile duplizieren, indem Sie mit der rechten Maustaste auf die Zeile klicken und Duplikatoder mithilfe von Tastaturkürzeln:

• Unter Windows: Drücken Sie Ctrl + C kopieren und Strg + V einfügen.
• Unter macOS: Drücken Sie Cmd + C. kopieren und Cmd + V. einfügen.

5. Wie fügt man 8 Spalten in einer Reihe hinzu?

Derzeit umfasst die maximale Spaltenanzahl beträgt 6 pro Zeile in GemPages V7 (wie in der Einstellungen Tafel > Layout). Wenn Sie mehr als 6 benötigen, können Sie dies erreichen, indem Sie ein weiteres Zeilenelement in eine der vorhandenen Spalten einbetten.

6. Kann ich jeder Spalte innerhalb einer Zeile einen Rahmen oder Innenabstand hinzufügen?

Aktuell sind keine Steuerelemente für individuelle Spaltenränder oder -abstände verfügbar. Die Rahmengestaltung ist nur auf Spaltenebene möglich. Zeilenebene (unter dem Shape Abschnitt), und Polsterung kann an der Zeilenebene .

Falls Sie eine spaltenspezifische Formatierung benötigen, wenden Sie sich bitte an unser GemPages-Supportteam, um weitere Unterstützung zu erhalten.

7. Wie füge ich einer Seite weitere Zeilen hinzu?

Um weitere Zeilen hinzuzufügen, öffnen Sie den GemPages-Editor und ziehen Sie das Zeilenelement aus der linken Seitenleiste in den Designbereich.

Bitte beachten Sie, dass die Anzahl der Zeilen, die Sie hinzufügen können, durch Abschnittsbeschränkungen beeinflusst sein kann. Weitere Informationen finden Sie in diesem Artikel: Shopify-Abschnittslimit.