Verwenden Sie Row, um Ihr gewünschtes Layout zu erstellen

Um ein tieferes Verständnis des Row-Elements und seiner Funktionen zu erhalten, schauen Sie sich unsere Zeilenelement-Artikel.

Hier sind einige wichtige Layoutbeispiele mit Zeilen- und Schritt-für-Schritt-Anleitungen.

Design Hero Banner

Ein Hero-Banner ist ein auffälliges Banner oben auf Ihrer Seite, normalerweise mit einem Hintergrundbild, einer Überschrift und einem Call-to-Action-Button. 

Sie können zwar ein vorgefertigtes Hero-Banner-Element Dafür bietet Ihnen das Row-Element mehr Kontrolle und Flexibilität.

Schritte zum Erstellen:

Schritt 1: Ziehen und ablegen a 2-spaltige Zeile. Dadurch wird das Basislayout für Ihr Hero-Banner erstellt.

Schritt 2: Passen Sie Ihr Heldenbanner im Einstellungen Tab.

Scrollen Sie nach unten Hintergrund und klicken Sie auf das Kästchen neben Bild um einen Bildhintergrund für den Abschnitt festzulegen.

Sie können die Galerie durchsuchen, um ein verfügbares Bild auszuwählen oder ein neues hochzuladen.

Schritt 3: Ziehen Sie einen Textblock, eine Überschrift oder ein anderes Element, beispielsweise ein Schaltflächenelement, per Drag & Drop in Ihr Layout.

Passen Sie jedes Element über die Einstellungen als auch Erweiterte Registerkarten für Anpassungen.

Schritt 4: Zu Passen Sie die Hintergrundgröße an, Klicken Sie auf den Abschnitt, um seine Konfiguration zu öffnen.

Navigieren Sie zu der Erweitert Registerkarte, um Ränder und Polsterung unter dem Abstand Abschnitt für eine ideale Passform.

Schritt 5: Wechseln Sie zur mobilen Ansicht und passen Sie das Layout für eine bessere Reaktionsfähigkeit an.

Abschnitt „Design-Produktaufschlüsselung“

Das geschichtete Produktaufschlüsselungslayout eignet sich perfekt dazu, Produktfunktionen oder -spezifikationen auf strukturierte und optisch ansprechende Weise hervorzuheben.

Schritte zum Erstellen:

Schritt 1: Ziehen und ablegen a 2-spaltige Zeile. Dies bildet die Grundlage für Ihr Produktaufschlüsselungslayout.

Schritt 2: Ziehen Sie einen Bildelement zur linken Spalte und laden Sie das gewünschte Bild hoch.

Schritt 3:: Um den Aufschlüsselungsinhalt mit Symbolen und Textblöcken ähnlich dem Beispiel zu erstellen, ziehen Sie ein weiteres Zeilenelement per Drag & Drop in die rechte Spalte.

Schritt 4: Fügen Sie der Spalte Ihre bevorzugten Elemente hinzu, z. B. ein Symbol, Textblöcke, eine Überschrift, eine Artikelliste und ein Schaltflächenelement.

Anschließend können Sie sie nach Ihren Wünschen anpassen im Einstellungen Tab.

Schritt 5: Wechseln Sie zur mobilen Ansicht und passen Sie das Layout für eine bessere Reaktionsfähigkeit an.

Design-Produktdetails

Für einen detaillierten Produktabschnitt können Sie ein benutzerdefiniertes Layout erstellen, das Produktbilder, Beschreibungen und Kaufoptionen organisiert.

Schritte zum Erstellen:

Schritt 1: Ziehen Sie eine 2-spaltige Zeile an Ihren Redakteur.

Schritt 2: Platzieren Sie eine Image in der linken Spalte. Hinzufügen Schriften, Textblöcke, Tastenusw. in der rechten Spalte.

Schritt 3: Ersetzen Sie Platzhaltertext, laden Sie ein Bild hoch und passen Sie die hinzugefügten Elemente nach Ihren Wünschen an. Fügen Sie außerdem einen Link zu Ihren CTA-Buttons hinzu:

Gestalten Sie eine Testimonial-Box in einem Karussell

So entwerfen Sie a Testimonial-Box innerhalb eines Karussells, folge diesen Schritten:

Schritt 1: Ziehen Sie die Karussell-Element auf Ihre Seite.

Schritt 2: Fügen Sie innerhalb des Karussells ein 2-spaltige Zeile. Passen Sie die Spaltengrößen nach Ihren Wünschen an. Fügen Sie dann Bilder in die linke Spalte und Text in die rechte Spalte ein.

Schritt 3: Passen Sie das Erscheinungsbild jedes Elements Ihrem Stil an.

Schritt 4: Verwenden Sie die Kopieren / Einfügen Funktion zum Replizieren von Folien und anschließendes Aktualisieren jeder Folie mit neuen Inhalten.

Weitere Designtipps und ausführliche Tutorials zum Erstellen optimierter Layouts finden Sie in unserem GemPages-Akademie.