Du kannst mehrere Aktionsboxen ganz einfach nebeneinander platzieren, indem du ihnen eine bestimmte CSS Klasse hinzufügst. 


Da der JTL-Shop auf bootstrap basiert, kannst du bootstrap Klassen verwenden


Weitere Infos auch hier: https://getbootstrap.com/docs/4.5/layout/overview/


Dies kannst du problemlos im Pluginbackend erledigen. Klicke hierzu auf das "Bearbeiten"-Icon der gewünschten Box und wähle dann den Tab "Einstellungen". Nun kannst du unter "CSS Klasse" die gewünschte Klasse eintragen.


 

Zwei Aktionsboxen nebeneinander platzieren



Um zwei Aktionsboxen nebeneinander zu platzieren fügst du bei beiden Boxen die CSS Klasse col-sm-6  hinzu. 

Achte darauf, dass beide Boxen denselben Selektor und die selbe Position in den Einstellungen haben. Nun sollten beide Boxen in einer Reihe nebeneinander zu sehen sein.



Mehrere Aktionsboxen nebeneinander platzieren

 

Du kannst auch mehrere Aktionsboxen in einer Reihe positionieren, indem du die Zahl in der CSS Klasse veränderst. Hierbei ist wichtig zu wissen, dass die Summe aller Zahlen in den CSS Klassen immer 12 ergeben muss

Deshalb wird wie oben bereits erläutert für zwei nebeneinander positionierte Boxen auch zweimal die Klasse col-sm-6 verwendet. Möchtest du nun beispielsweise drei Boxen nebeneinander positionieren, so müsstest du bei allen drei Boxen die Klasse col-sm-4 eintragen, da 4+4+4 gleich 12 ist. Dieses Schema ist beliebig anwendbar.


Es ist auch möglich die Breite diverser Boxen individuell anzupassen. Ist es zum Beispiel gewünscht drei Boxen nebeneinander zu platzieren, wobei die mittlere Box breiter ist als die anderen sein soll, so könnte man den äußeren zwei Boxen die Klasse col-sm-3 zuweisen und der mittleren Box die Klasse col-sm-6. Wichtig ist hierbei nur wieder, dass die Summe 12 ergibt.



Umbruchpunkte für kleinere Displaygrößen



Durch Verwendung der oben genannten Klassen werden die Boxen bis zu einer Browserbreite von 768px nebeneinander dargestellt. Sollte der Browser kleiner sein, so werden die Boxen wieder untereinander angezeigt. 

Dies sollte für die meisten Seiten eine gute Einstellung sein. Ist allerdings ein anderes Verhalten gewünscht so kann man das sm einfach durch einen der der folgenden Werte ersetzen :

  • xs (extra-small)
  • (sm) (small) 
  • md (medium)
  • lg (large)
  • xl  (extra-large)


Falls weitere Anpassungen gewünscht sind hilft hier auch die Bootstrap Dokumentation zum Grid System weiter.