Damit gestalten Sie zum Beispiel
- Buttons mit erweiterten Funktionen
- Navigationselemente wie Menüs, Tabs und Kästen mit zuerst verborgenen und dann auf Klick freigegebenen Texten
- wunderschöne “Karten”-Elemente mit optisch absetzbaren Kopf- und Fußbereichen
Normalerweise müsste ein Shopbetreiber wie ein Webdesigner arbeiten und für alles dies mühsam feinsäuberlich HTML- und CSS-Code programmieren. Nicht so mit Bootstrap.
Das in Smartstore bereits integrierte Bootstrap 4 ist eine professionell gestaltete, sofort einsatzbereite, voll responsive HTML- und CSS-Bibliothek. Sie ist in jedem HTML-Editor der Shopsoftware ohne weiteres verfügbar.
Wo kann man Bootstrap-Elemente einsetzen?
- in Smartstore Widgets
- in Smartstore Artikel-Langtexten
- in Pagebuilder-Text- und HTML-Blöcken
- auf Smartstore-Seiten
Kurz, überall da, wo ein Shopadmin einen längeren, formatierten Text in einem HTML-Editor eingeben kann.
Der Technikaufwand ist minimal. Sie müssen lediglich einen vorgefertigten HTML-Block in der HTML-Code-Ansicht mit Ihren Inhalten ergänzen. Das ist schnell zu lernen und das erzielte Ergebnis überzeugt Sie und Ihre Kunden!
Somit können Sie mit minimalem Aufwand mindestens 1.000 Prozent mehr Kunden begeistern! Wir stellen Ihnen im folgenden nur einige der Bootstrap-Fertigelemente vor, mit denen Sie ganz einfach einen Standard-Smartstore-Onlineshop zur individuellen Verkaufsmaschine erweitern!
Sogar an Javascript und Animationen wurde gedacht. Das bringt Ihre Elemente zum Leben und Strahlen.
Beispiel: Inhalte auf Knopfdruck zeigen
Beispiel: Nav Pills
Das hier vorgestellte Beispiel enthält drei Nav Pills. Ein Klick auf “Bonus” zeigt verborgene Inhalte an.
Beispiel: Jumbotron
Kauf mich!
Dies ist eine Vorlage für eine einfache Marketing-Message in Ihrem Smartstore-Shop. Sie sehen hier eine große Jumbotron-Textbox. Sie enthält diesen Fließtext und einen ...
Beispiel: Bootstrap Card
Standard-Card
Dies ist eine einfache Hero-Unit, um Shopbesucher auf besondere Inhalte oder Informationen hinzuweisen.
Diese Card verwendet Utility-Klassen für Typografie und Abstände, um den Content innerhalb des größeren Containers zu verteilen.
So fangen Sie an
Den Bootstrap-Code für erste Versuche können Sie einfach aus dem HTML-Quelltext dieser Seite entnehmen. Weitere Code-Beispiele finden Sie in der Bootstrap-Dokumentation (siehe unten).
Starten Sie zuerst mit ein paar Komponenten und bauen Sie E-Commerce-Projekte für Smartphones, Tablets, Desktops aus einem Guß! Sie können auch Webseiten, Marktplätze und Produktkataloge mit diesem genialen System entwickeln.
Responsives Design mit Bootstrap
HTML-Inhalte können in Smartstore über einen HTML-Editor erfasst werden, wie etwa in der ausführlichen Produktbeschreibung, in Widgets oder HTML-Seiten, im Content Slider, dem Mega Menu usw. Diese Inhalte sollen auf allen Geräten gut aussehen. Nichts leichter als das mit Bootstrap. Für die responsive Darstellung dieser Inhalte gilt es, ein paar Dinge im Hinterkopf zu behalten.
Responsive Bilder
Nachdem ein Bild über den HTML-Editor eingefügt wurde, muss man einmal in den HTML-Quellcode gehen, den man bequem über einen Button
im HTML-Editor erreichen kann. Das style-Attribut des img-Elements sollte entfernt werden und das Bild sollte mit der
Klasse img-fluid ausgestattet werden.
<img class="img-fluid" scr="#" ...="">
Layout: Elemente anordnen
Layout bedeutet hier die Anordnung verschiedener Elemente auf einer Webseite oder einem Bereich. Vielleicht möchten Sie Bilder in
mehreren Spalten anzeigen, dies aber nur auf dem Desktop?
Da Smartstore mit Bootstrap 4 erstellt wurde, kann man die Klassen, welche
von Bootstrap zur Verfügung gestellt werden, für diese Zwecke nutzen.
Responsive Tabellen
Wenn man eine tabellarische Auflistung darstellen möchte, kommt man um die Nutzung eines HTML-table-Tags nicht herum. Um
diese Tabelle responsiv – also unabhängig von der Bildschirmgröße – zu gestalten, genügt das Zufügen von CSS-Klassen wie in folgendem
Beispiel:
<table class="table table-responsive"> … </table>