Alternative zum Chimpify Spalten Element – Chimpify Pro Tipp #1

In vielen Fällen gibt es eine wesentlich bessere Alternative zum Chimpify Spalten Element. Die fehlende Flexibilität bei Veränderung der Bildschirmbreiten können oftmals ein Problem darstellen. Doch es gibt eine extrem einfache Lösung für das Problem. Sie heißt: Grid-Layout und wird erreicht durch 3 Zeilen CSS Code. Ich leite euch Schritt für Schritt an. 

Too long, didn't read:

#Deine-Container-ID {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 50px;
} 

Das Grundlegende Problem

Die Chimpify Spalten haben ein Problem mit der Responsivness. Wenn eine Website Responsive ist, dann passt sich das Layout immer der gegebenen Bildschirmbreite an. Dies ist aber bei den Spalten in Chimpify nicht optimal denn:

Das Problem tritt bei semi schmalen Bildschirmen auf

Das Layout in Chimpify bricht bei 3 Displaybreiten um: 

• Smartphone: 0 - 470px
  
• Tablet: 660 px - 991px
• Desktop: 991px - unendlich 

Und genau bei dem Übergang Tablet zu Desktop kann ein Problem auftreten 

Abbildung 1: Hier ist das Display zu schmal für 4 Spalten nebeneinander. Die Display Breite liegt bei 1250px. Normalerweise müsste das Layout hier schon lange umgebrochen sein, ist es aber nicht.

Wann hat man dieses Problem nicht?

Bei 2-spaltigen Layouts hast du damit kein Problem. Jedoch schon ab 3-spaltigen  Elementen kann es zu Problemen kommen. Spätestens ab 4-spaltigen Layouts tritt das Problem auf.

Fehlende Flexibilität ist problematisch

Du musst dich auf eine Spaltenanzahl festlegen. Das ist nicht optimal, denn bei breiteren Displays könnten womöglich weitere Spalten aufgefüllt werden. 

Das ist ein Beispiel einer meiner Klienten. Hier rücken die Inhaltselemente nach wenn genügend Platz vorhanden ist. Hier wurde der heute thematisierte Trick angewandt. Das ist mit den normalen Spalten Elementen nicht möglich. 

Lösung: 3 Zeilen Code

Vielleicht hast du vor dem Wort „Code“ eine Phobie. Trotzdem rate ich dir nun weiterzulesen. Es nämlich sehr einfach!

Schritt 1: Vorbereitung – Erstelle deine Elemente

Hier ist noch alles wie gehabt. Du erstellst einfach die Content Elemente, die du nebeneinander darstellen möchtest. Diese Elemente müssen nochmal in einen Container gesteckt werden. Das sieht dann so aus:

Abbildung 2: Ausschnitt der relevanten Elemente in Chimpify. Diese Baumstruktur ist im Designer verfügbar.

Noch sind alle Elemente untereinander. Dementsprechend sollte es im Designer so ähnlich aussehen:

Abbildung 3: Ich habe den Inhaltselementen einen blauen Hintergrund und einen Innenabstand gegeben, damit du es besser erkennen kannst. Dies wurde ganz normal im Designer gemacht.

Schritt 2: ID des Container Element bestimmen 

Als erstes müsst ihr das Elternelement des Container bestimmen. 

Was ist das Elternelement?

Abbildung 5: Wähle das Elternelement aus, sodass es weiß hinterlegt ist. Klicke danach auf das Zahnrad.

Abbildung 6: Klicke danach auf „HTML bearbeiten“. Aber keine Sorge, du musst kein HTML bearbeiten sondern lediglich etwas ablesen!

Nun erfolgt wahrscheinlich der schwierigste Schritt: ihr müsst die ID des Containers ablesen.  In meinem Fall ist das „div-1“. Bei dir ist das aber wahrscheinlich anders.

Abbildung 7: Ich habe zur Visualisierung die Inhaltselemente weiß und schwarz eingefärbt. Wie du siehst, ist der Container mit der gesuchten ID direkt vor allen Inhaltselementen.

Wenn du die ID abgelesen und notiert/kopiert hast, gehe auf „Abbrechen“ oben rechts im Eck.

Schritt 3: Code einfügen

Das schwierigste ist geschafft nun müsst ihr folgenden Code einfügen:

#Deine-Container-ID {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 50px;
} 

Kopiere diesen Code!

Statt „Deine-Container-ID“ musst du deine notierte ID einsetzen. Die Raute muss aber bleiben!

Wo muss ich den Code einfügen?

Abbildung: 8: Wähle die ganze Seite aus, klicke anschließend auf das Zahnrad und klicke auf den Button „CSS“.

 

Abbildung 9: Füge hier nun den kopierten Code ein. Achte auf die ID. Du musst deine abgelesene ID einsetzen.

So sieht das Endergebnis aus:

Abbildung 10: Wenn du den Abstand zwischen den Inhaltselementen erhöhen möchtest, musst du den gap Wert verändern. Hier ist er gerade bei 50px. 

Du kannst weiterhin alles andere im Designer verändert. Du möchtest den Hintergrund der Inhaltselemente ändern? Klicke wie gewohnt auf ein Element und verändere den Hintergrund. Text und andere Dinge funktionieren genauso wie gewohnt.