Startseite   /   Blog

Tag Archives: StyleEdit 3


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

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


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /var/www/web1/htdocs/www.gambio.de/web/blog/wp-includes/functions.php on line 3778

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /var/www/web1/htdocs/www.gambio.de/web/blog/wp-includes/functions.php on line 3778