Breakdance & Oxygen Builder – Trapez Grip

Webdesign

Komplette Anleitung: Trapezförmiges Grid-Layout in WordPress mit Breakdance Builder erstellen

In dieser Anleitung zeige ich dir Schritt für Schritt, wie du das Design eines trapezförmigen Grid-Layouts in WordPress mit dem Breakdance Builder nachbauen kannst. Dazu verwende ich benutzerdefiniertes CSS und erkläre, wie du die Trapezformen korrekt darstellst, damit die Kanten in mehreren Zeilen harmonisch fortgeführt werden.

Schritt 1: Erstellen des Grids im Breakdance Builder

  1. Ein Grid-Element hinzufügen:

    • Öffne den Breakdance Builder auf deiner WordPress-Seite und füge ein Grid-Element hinzu.
    • Wähle zwei Spalten aus. In diesen beiden Spalten platzieren wir jeweils ein Bild und Text.

  2. Klassen für das Grid und die Spalten zuweisen:

    • Gib dem gesamten Grid die Klasse motor-grid.
    • Weise den beiden Spalten eigene Klassen zu:
      • Die erste Spalte, in der sich das Bild rechts befindet, bekommt die Klasse motor-item.
      • Die zweite Spalte, in der sich das Bild links befindet, bekommt die Klasse motor-item-second.

  3. Bilder und Text einfügen:

    • Füge in beide Spalten je ein Bild und darunter einen Text (Überschrift und Beschreibung) ein. Achte darauf, dass die Bilder 100% der Breite der jeweiligen Spalten einnehmen.

Schritt 2: CSS für die Trapezform und das Responsive Design einfügen

Um das Design der Trapezformen korrekt zu erstellen und sicherzustellen, dass die Kanten in verschiedenen Zeilen harmonisch fortgesetzt werden, fügen wir benutzerdefiniertes CSS hinzu. Zudem sorgen wir dafür, dass das Layout auf kleineren Geräten automatisch einspaltig und rechteckig wird.

CSS-Code für das trapezförmige Grid-Layout:

  1. Öffne im Breakdance Builder das Menü für Benutzerdefiniertes CSS.
  2. Füge folgenden CSS-Code ein:
 
/* Standard Grid Layout für größere Geräte */
.motor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Zwei Spalten */
  gap: 20px; /* Abstand zwischen den Spalten */
}

/* Erste Zeile - Bild rechts, Trapezform links */
.motor-item {
  position: relative;
  background-color: #f5f5f5;
  padding: 20px;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); /* Trapezform mit Kante links unten */
  transition: transform 0.3s ease; /* Animation beim Hover */
}

.motor-item img {
  width: 100%;
  height: auto;
}

/* Zweite Zeile - Bild links, Trapezform rechts */
.motor-item-second {
  position: relative;
  background-color: #f5f5f5;
  padding: 20px;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); /* Trapezform mit Kante rechts unten */
  transition: transform 0.3s ease; /* Animation beim Hover */
}

.motor-item-second img {
  width: 100%;
  height: auto;
}

/* Media Query für Geräte unter 768px */
@media (max-width: 768px) {
  .motor-grid {
    grid-template-columns: 1fr; /* Einspaltiges Layout */
  }

  .motor-item,
  .motor-item-second {
    clip-path: none; /* Trapezform entfernen */
    padding: 0; /* Padding entfernen */
  }

  .motor-item img,
  .motor-item-second img {
    width: 100%; /* Volle Breite */
    height: auto; /* Automatische Höhe */
  }
}

Erklärung des CSS-Codes:

  • Standard Layout (für größere Bildschirme):

    • Das Grid hat zwei Spalten (grid-template-columns: repeat(2, 1fr);), und jede Box hat eine Trapezform, die über die clip-path-Eigenschaft erstellt wird.
    • Die Boxen in der ersten Zeile haben ihre Kante auf der linken Seite (motor-item), während die Boxen in der zweiten Zeile die Kante auf der rechten Seite haben (motor-item-second). So wird die Kante visuell fortgesetzt.

  • Responsive Design (für Bildschirme unter 768px):

    • Auf kleineren Geräten wird das Layout einspaltig (grid-template-columns: 1fr).
    • Die Trapezformen werden entfernt (clip-path: none), sodass die Bilder rechteckig werden und 100% der Breite des Containers einnehmen.

Schritt 3: Responsive Vorschau und Feinschliffe

  1. Responsive Design überprüfen:

    • Verwende die Vorschau im Breakdance Builder, um sicherzustellen, dass das Layout auf Desktop- und Mobilgeräten gut aussieht.
    • Teste insbesondere die Version für kleinere Bildschirme (unter 768px), um sicherzustellen, dass das einspaltige Layout korrekt funktioniert und die Bilder rechteckig dargestellt werden.

  2. Weitere Anpassungen:

    • Wenn nötig, kannst du die Trapezform mit den Werten im clip-path-Polygon anpassen. Ändere die Prozentwerte, um den gewünschten Effekt zu erzielen.

Schritt 4: Clip-Path für andere Formen erstellen

Falls du die Trapezform weiter anpassen möchtest oder andere Formen ausprobieren willst, gibt es Online-Tools, mit denen du den clip-path-Code visuell gestalten kannst.

Empfohlene Online-Clip-Path-Generatoren:

  1. Clippy (bennettfeely.com/clippy)

    • Ein einfach zu bedienendes Tool, mit dem du Polygone und andere Formen visuell erstellen kannst. Der entsprechende clip-path-Code wird automatisch generiert, den du in deinem CSS verwenden kannst.

  2. CSS-Clip-Path Generator (cssportal.com/clip-path-generator)

    • Ein weiterer hilfreicher Generator, bei dem du Punkte auf einem Raster verschieben kannst, um die Form genau nach deinen Vorstellungen zu gestalten.

Zusammenfassung

Mit dieser Anleitung kannst du in wenigen Schritten ein trapezförmiges Grid-Layout in WordPress mit dem Breakdance Builder erstellen:

  • Grid erstellen und Klassen (motor-item und motor-item-second) zuweisen.
  • Bilder und Text einfügen und sicherstellen, dass die Layoutstruktur stimmt.
  • Benutzerdefiniertes CSS hinzufügen, um die Trapezform zu gestalten und das Design für mobile Geräte anzupassen.
  • Optional kannst du Online-Tools wie Clippy verwenden, um den clip-path-Code nach deinen Wünschen zu verändern.

Das Design ist nun responsiv und für alle Bildschirmgrößen optimiert!