CSS Editor

Hier zeigen wir Dir, wie Du Deinen Webshop mit dem CSS Editor ganz individuell nach Deinem Geschmack anpassen kannst.

Mit der kostenlosen branchbob App “CSS-Editor” und CSS-Kenntnissen, kannst Du das gesamte Layout Deines branchbob Online-Shops, Deinen Wünschen ganz genau anpassen. Wie das geht beschreiben wir Dir hier.

 

So verwendest Du den CSS Editor

  1. Den kostenlosen CSS Editor erreichst Du, nach der Aktivierung in Deinem Shop, unter Apps > CSS Editor
    Der Editor bietet Dir ein Feld, in das Du die Elemente, die Du verändern möchtest, neu formatieren kannst.

Der CSS-Editor von branchbob

  1. Finde in den Entwicklertools vom Browser ein Element, das Du verändern möchtest (z.B. Rechtsklick auf das Element -> Untersuchen (Chrome) bzw. Element untersuchen (Firefox)).

Die Entwicklertools in Deinem Browser

  1. Mit den Entwicklertools erkennst Du die Stellen im Quelltext die Du verändern möchtest. Passe die Eigenschaften des Elements nach Deinen Wünschen an. Passieren kann dabei nichts da Dir die Entwicklertools die Veränderungen nur zeigen aber nicht abspeichern können.

Mit den Entwicklertools erkennst Du die Stellen im Quelltext die Du verändern möchtest.

  1. Kopiere die CSS-Anweisung direkt in den CSS Editor und speichere Deine Änderungen. Wenn Du Deine Shopvorschau noch einmal aufrufst, kannst Du die Änderungen sehen. Eventuell musst Du noch einmal den Browsercache löschen.

Die CSS-Änderungen musst Du nun speichern.

Im “Standard Shop Design” sind folgende Break Points definiert:

Name Fenstergröße
BP 1260 ab 1260px
BP 1001 ab 1001px
BP 1000 bis 1001px
BP 414-1000 ab 414px bis 1001px
BP 768 ab 768px
BP 414 bis 414px

Im “Shop Design – Premiumseller” sind folgende Break Points definiert:

Name Fenstergröße
BP 415 ab 415px
BP 641 ab 641px
BP 769 ab 769px
BP 1024 bis 1024px
BP 1025 ab 1025px
BP 1400 ab 1400px

Hinweis: Beim Speichern werden Deine CSS-Anweisungen dem jeweiligen Shop Design zugeordnet. Somit kannst Du jedes der Shop Designs unabhängig voneinander anpassen und deine Änderungen gehen bei einem Wechsel nicht verloren.

 

Break Points / Media Queries

Achte bei Deinen Änderungen darauf, dass die neuen CSS-Anweisungen auch für unterschiedliche Endgeräte optimiert sind. Durch die Verwendung von Break Points (Media Queries) kann die Darstellung für unterschiedliche Bildschirm- bzw. Fenstergrößen angepasst werden.

Schnell und Sicher

secure ssl encryption