Erstellen eines responsiven 3-Spalten-Layouts

Übersicht

Dieses Tutorial zeigt, wie man die Avonni Konfigurieren Sie abschließend die Komponente verwendet, um ein Layout mit drei Spalten zu erstellen, die auf großen Bildschirmen nebeneinander angezeigt werden, sich aber auf kleineren Bildschirmen (wie Mobilgeräten) automatisch vertikal stapeln.

Ziel: Ein 3-Spalten-Layout auf Desktop/Tablet erreichen, das auf Telefonen zu einem Ein-Spalten-Layout wird.

Schritte

Schritt 1: Füge die Columns-Komponente hinzu:

• Ziehen Sie die Konfigurieren Sie abschließend die Komponente aus der Komponentenbibliothek auf Ihre Leinwand. Diese Komponente fungiert als Container für Ihre einzelnen Spalten.

Schritt 2: Füge drei Spalten-Elemente hinzu:

• Wählen Sie die Konfigurieren Sie abschließend die Komponente, die Sie gerade hinzugefügt haben.

• Suchen Sie den Bereich zur Verwaltung der Spalten im Eigenschaften-Panel (rechte Seite).

• Klicken Sie auf die "+"-Schaltfläche dreimal um drei einzelne Spalten-Container innerhalb der Haupt-Columns-Komponente zu erstellen.

Schritt 3: Konfigurieren Sie die responsiven Größen für jede Spalte:

• Konzept: Die meisten Layoutsysteme verwenden ein Raster (oft 12 Einheiten breit). Sie geben jeder Spalte an, wie viele Einheiten sie auf verschiedenen Bildschirmgrößen einnehmen soll. Jede Spalte muss die volle Breite (12 Einheiten) einnehmen, um auf kleinen Bildschirmen gestapelt zu werden. Um auf großen Bildschirmen nebeneinander zu stehen, benötigt jede weniger (z. B. 4 Einheiten für ein Drei-Spalten-Layout).

• Wählen Sie Spalte 1: Klicken Sie auf das erste Spaltenelement innerhalb der Eigenschaften der Columns-Komponente.

  • Setzen Größe (großer Container) (oder ähnliche Eigenschaft für große Bildschirme) auf 4.

  • Setzen Größe (mittlerer Container) (oder ähnlich für mittlere Bildschirme) auf 4.

  • Setzen Größe (kleiner Container) (oder ähnlich für kleine Bildschirme) auf 12.

• Wählen Sie Spalte 2: Klicken Sie auf das zweite Spaltenelement.

  • Setzen Größe (großer Container) auf 4.

  • Setzen Größe (mittlerer Container) auf 4.

  • Setzen Größe (kleiner Container) auf 12.

• Wählen Sie Spalte 3: Klicken Sie auf das dritte Spaltenelement.

  • Setzen Größe (großer Container) auf 4.

  • Setzen Größe (mittlerer Container) auf 4.

  • Setzen Größe (kleiner Container) auf 12.

Schritt 4: Konfigurieren Sie die übergeordneten Einstellungen der Columns-Komponente (optional):

• Wählen Sie erneut die Haupt- Konfigurieren Sie abschließend die Komponente.

• Horizontale Ausrichtung: Dies steuert, wie die Gruppe von Spalten innerhalb des verfügbaren Raums ausgerichtet wird (z. B. Links, Zentriert, Rechts). Wählen Sie Links wenn Sie möchten, dass sie links ausgerichtet sind.

• Vertikale Ausrichtung: Dies steuert, wie der Inhalt innerhalb der Spalten vertikal ausgerichtet wird, falls die Spalten unterschiedliche Höhen haben (z. B. Oben, Zentriert, Unten). Wählen Sie Oben für die Standardausrichtung.

• Zeilenumbruch zulassen: Stellen Sie sicher, dass diese Option (falls vorhanden) aktiviert ist. Dadurch können Spalten in die nächste Zeile gelangen, wenn sie nicht horizontal passen. Sie ist normalerweise standardmäßig aktiviert.

Schritt 5: Inhalte hinzufügen und Vorschau:

• Ziehen Sie andere Avonni-Komponenten (Text, Bilder, Schaltflächen usw.) in jede der drei Spalten, die Sie erstellt haben.

• Verwenden Sie die Vorschau Schaltfläche. Ändern Sie die Größe Ihres Browserfensters, um zu sehen, wie sich die Spalten auf kleineren Bildschirmen automatisch vertikal stapeln und auf größeren Bildschirmen nebeneinander angezeigt werden.