Alternative zum Chimpify Spalten Element – Chimpify Pro Tipp #1

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 

Screenshot 2020 07 06 at 11.05.36

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:

inhaltselemente aufteilung chimpify

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:

Screenshot 2020 07 05 at 11.53.07

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?

inhaltselemente aufteilung chimpify 2

Abbildung 4: Das Elternelement des Container-Elements ist eine Ebene über ihm. Verschiedene Ebenen werden als unterschiedlich eingerückt dargestellt. In diesem Beispiel sind also alle Inhaltselemente auf einer Ebene. Darüber ist der Container und über dem Container ist die Sektion.


Das Elternelement ist also eine Ebene über dem Container Element. In meinem Beispiel ist das die Sektion. Das kann bei euch aber anders sein. Um bei euch das Elternelement zu finden, achtet auf die Einrückung.

Chimpify Elternelement auswahl prozess

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

Chimpify Container ID bestimmen

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.

Chimpify Codeview

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?

Chimpify vorletzter Step

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

Chimpify CSS Code letzter Schritt  

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:

Screenshot 2020 07 05 at 12.30.34

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.


Jede Woche zwei Artikel über UX

Trage dich in meine persönliche E-Mail Liste ein:

Noch keine Kommentare vorhanden.

Was denkst du?

Jede Woche zwei Artikel über UX

Trage dich in meine persönliche E-Mail Liste ein:

Ich entwickle Internetauftritte für Unternehmen und andere Freelancer! Frage ganz unverbindlich an:

Geschäftsanfrage starten

Beliebteste Beiträge