Tag Archives: Design


Mit dem Gambio StyleEdit 3 ein indvividuelles Shopdesign erstellen - Teil 3: Der Header

StyleEdit 3-Tutorials (Teil 4): Anpassen des Footers

Von ganz oben nach ganz unten: Nachdem wir vor kurzem viel über den Header gelernt haben, möchte ich heute einmal einen Blick mit euch auf den Footer werfen. Ein ansprechend gestalteter Footer, der in allen Ansichten des Shops gut dargestellt wird, gehört zu einer guten Shopgestaltung einfach dazu.

Häufig verkommt dieser allerdings zu einer Ansammlung von Links oder wird mit zu vielen Bildern überladen. Um diese – und noch andere häufige Fehler bei der Gestaltung des Footers – möchte ich mich mit diesem Tutorial kümmern

Continue reading

Mit dem Gambio StyleEdit 3 ein indvividuelles Shopdesign erstellen - Teil 3: Der Header

StyleEdit 3-Tutorials (Teil 3): Anpassen des Headers

Der Header ist das Aushängeschild eines Onlineshops. Ist dieser wenig ansprechend gestaltet oder mit Informationen überfrachtet, so ist ein potenzieller Kunde schnell wieder weg. Um einen professionellen Eindruck zu hinterlassen, ist ein durchdachter Header Pflicht.

Da wir im letzten Tutorial die wichtigsten Begriffe und Seitenelemente kennen gelernt haben, möchte ich heute zeigen, was man im StyleEdit 3 alles mit dem Header anstellen kann.

Ich möchte zudem auch die häufigsten Fehler aufzeigen und Lösungen anbieten, wie sich diese Probleme vermeiden lassen, damit die Darstellung des Headers nie kaputt aussieht. Außerdem möchte ich euch ein paar Tipps und Tricks zeigen, um den Header möglichst so zu gestalten, wie ihr ihn euch vorstellt.

Ich werde meine Beispiele möglichst so beschreiben, dass sie für alle drei Basisstyles im StyleEdit 3 durchführbar sind. Sollte es style-abhängige Einstellungen geben, werde ich bei diesen darauf hinweisen.

Continue reading

E-Commerce Rückblick: Blogmarks 10/18

Gambio Blogmarks 10/18 – Unsere Woche im E-Commerce

So, nachdem über Ostern und danach hier etwas tote Hose war, wollen wir jetzt wieder voll mit unserem Wochenrückblick durchstarten. Diese Woche haben wir folgende Beoträge für euch gesammelt:

Continue reading

Das Design der Gambio-Testshops in den eigenen Shop übertragen

Gambio Tutorials: Änderungen bei der Einbindung der Demoshop-Templates

Hallo zusammen! Auch bei der Entwicklung der Demoshop-Templates macht der Fortschritt nicht halt und so möchte ich heute einmal darüber berichten, was sich mit den Design-Paketen für die Versionen GX3 v3.8.x und GX3 v3.9.x geändert hat. Es handelt sich bei diesem Artikel also um eine kleine Ergänzung unseres Blogposts zum Einbinden der Templates im eigenen Shop.

Continue reading

Im Gambio-Shop eigene responsive Contents erstellen

Gambio-Tutorials: Eigene Contents mit responsiver Darstellung erstellen

Eigene Texte sind ein ausgezeichnetes Mittel, um einen Shop lebendiger wirken zu lassen und den möglichen Kunden direkt anzusprechen und zum Kauf zu animieren.

Aufgelockert wird ein langer Text optimalerweise mit einigen Bildern, die passend im Text untergebracht werden. Hier ergibt sich dann allerdings oft das Problem, dass diese Bilder zu unschönen Darstellungen auf unterschiedlich großen Displays der Nutzer führen.

Ein probates Mittel, um diesem Problem entgegenzuwirken, ist das Grid-System von Bootstrap welches ich auch hier schon einmal beschrieben habe.

Mit diesem kleinen Tutorial möchte ich dieses Mal zeigen, wie sich Inhalte mit dem Gridsystem für unterschiedliche Endgeräte optimiert darstellen lassen.

Extra CSS oder Einstellungen über den StyleEdit 3 sind diesmal nicht notwendig. Alles was wir heute brauchen, ist der Content Manager und das grundlegende Verständnis, wie das Gridsystem funktioniert.

Continue reading

E-Commerce Rückblick: Blogmarks 01/18

Gambio Blogmarks 01/18 – Unsere Woche im E-Commerce

Nachdem wir in den letzten beiden Wochen auf unsere beliebtesten Tweets des Jahres 2017 zurückgeblickt haben (Platz 12-7 & Platz 6-1), ist jetzt mal wieder Zeit für Aktuelles. Diese Woche:

Continue reading

Mit dem Gambio StyleEdit 3 ein indvividuelles Shopdesign erstellen - Teil 2: Das CSS

StyleEdit 3-Tutorials (Teil 2): Variablen, SCSS-Funktionen und Mixins

Nachdem wir im letzten Artikel zum Thema StyleEdit 3 die wichtigsten Begriffe geklärt haben, wird es heute ein wenig technischer. Da sich dieser Artikel auf den vorherigen bezieht, empfehle ich, diesen vorab zu lesen.

Wie bereits im letzten Artikel angesprochen verwenden wir im Honeygrid-Template die Technologie – oder besser das Gerüst – “Bootstrap” und haben so die Möglichkeit auf sogenannte CSS-Präprozessoren zurückzugreifen, welche die gestalterischen Aufgaben erheblich erleichtern können. Ein Präprozessor kann Aufgaben erledigen, bevor es um die eigentliche Arbeit geht.

In unserem Fall bedeutet das, dass der Präprozessor schon etwas “Mathe machen” und Styles aus Einzelteilen zu einem Gesamten zusammensetzen kann, bevor wir diesen das erste Mal ausliefern. Er kann auch, wenn irgendwo tief in den Styles z.B. steht “benutze hier die Hintergrundfarbe” oder “verwende die Breite des Hauptinhalts”, diese an der entsprechenden Stellen auslesen und dann passend einsetzen.

Um wiederkehrende Werte für Farben, Höhen, Breiten und Abstände nicht jedes Mal neu schreiben zu müssen und den Aufwand zu minimieren, sollte sich an diesen Werten einmal etwas ändern, verwenden wir zahlreiche Variablen, in denen die benötigten Werte hinterlegt sind. Diese Variablen werden anschließend erst beim Erstellen des final ausgelieferten CSS in die richtigen Werte übersetzt.

Continue reading

Mit dem Gambio StyleEdit 3 ein indvividuelles Shopdesign erstellen

StyleEdit 3-Tutorials (Teil 1): Die Basics

Das Honeygrid-Template ist das aktuelle Frontend-Template für den Gambio Shop und kann mit zahlreichen neuen Features und Verbesserungen aufwarten. Diese neuen Features, welche dem Shopsystem responsive Darstellung, Livefilter, und vieles mehr auf die Featureliste gebracht haben, haben es allerdings auch erforderlich gemacht ein neues Werkzeug zur individuellen Gestaltung des Templates zur Verfügung zu stellen: das neue StyleEdit 3.

Das StyleEdit 3 ist der Nachfolger unseres schon aus GX2-Zeiten bekannten StyleEdit und ist ein umfassendes Werkzeug, mit dem ihr euren Honeygrid-Shop den passenden Feinschliff geben könnt. Geblieben ist dabei aber nur der Name StyleEdit und der Zweck des Tools, die praktische Bedienung und die Vorgehensweise bei der Gestaltung haben sich deutlich verändert.

Da hierzu immer wieder Fragen nach einer Anleitung aufkommen, habe ich mich dazu entschlossen, hier eine kleine Serie zu veröffentlichen, die euch die Funktionsweisen des StyleEdits näher bringen soll, so dass möglichst jeder von euch dazu in der Lage ist, optisch das Beste aus seinem Shops heraus zu holen.

Das Ganze wird nicht als einfache Anleitung geschrieben sein, in der einfach nur die Funktionen aufgelistet und erklärt werden, sondern soll anhand von Fallbeispielen erfolgen.

Continue reading

E-Commerce Rückblick: Blogmarks 17/17

Gambio Blogmarks 17/17 – Unsere Woche im E-Commerce

Kaum zu glauben, dass 2017 schon wieder zu mehr als der Hälfte vorbei ist. Die Zeit rennt aber wirklich im Moment… Damit wenigstens ein paar Momente hängenbleiben, haben wir wieder fünf der interessantesten Artikel aus der letzten Woche für die Blogmarks gesammelt:

Continue reading

E-Commerce Rückblick: Blogmarks 16/17

Gambio Blogmarks 16/17 – Unsere Woche im E-Commerce

So, die Elternzeit ist vorbei, es ist mal wieder Zeit für einen Wochenrückblick in den Blogmarks. Denn natürlich stand die E-Commerce-Welt in den letzten Wochen nicht einfach still. Wir haben also mal wieder unsere fünf Wochenhighlights herausgesucht:

Continue reading