Profi-Tipps für individuelles Design
Smarda ist so konzipiert, dass auch Anfänger ihren Shop oder ihre Website mit nur einem Klick voll-funktionsfähig startbereit erhalten. Mit Smarda arbeiten aber Profis aus der Design- und Marketing-Szene, die den robusten und rechtssicheren Systemaufbau als professionelle Basis benötigen. Dabei steht meist individuelles Design und Styling für anspruchsvolle Kundenprojekte im Vordergrund. Hier möchten wir allen Design-Profis den schnellen Zugang zu den mächtigen und gleichzeitig sehr einfachen, individuellen Gestaltungsmöglichkeiten zeigen.
6 globale Einstellungen für dein Konzept
Wenn du nicht auf die Premium Design-Vorlagen zurückgreifen möchtest, sondern ein komplett individuelles Design für dein Online-Projekt geplant hast, sind die folgenden Schritte sehr hilfreich, um deinen Stil schnell und effizient für alle Elemente global festzulegen:
Wähle die neutrale Vorlage "Blank"
Wenn du eine klare, individuelle Vorstellung von deinem Design-Konzept hast, die von allen Premium-Vorlagen weitgehend abweicht, empfiehlt es sich, die neutral und schlank gestaltete Design-Vorlage "Blank" zu wählen.
Es sind in dieser Vorlage nur wenige Seiten mit sehr reduzierten, klassisch gehaltenen Stilen und minimalen Platzhalter-Inhalten ausgestaltet. Du musst also kaum Demo-Inhalte oder markante Stilelemente neutralisieren.
Schriften ändern und sparsam einsetzen
Als Nächstes definiere die passenden Schriften des Corporate Designs. Dafür ändere im Design-Editor die in der Vorlage verwendeten Schriften. Du kannst natürlich auch eigene Schriftfamilien raufladen, damit sie dir für den Einsatz bei allen Elementen zur Verfügung stehen.
Wichtig: Halte die Anzahl der verwendeten Schriften klein. Das sorgt nicht nur für ein auch für ein effizientes Ladeverhalten deiner Seiten.
Bestehende Farben überarbeiten
Bei der Bearbeitung deiner Farbpalette verwende zuerst die in der Vorlage eingesetzten Farben für bestimmte Bereiche und Anwendungen, wie zB. "Firmenfarbe" (= markante Farbe des Corporate Designs), "Fehlermeldung", "Hintergrund" usw., bevor du neue, andere Farben hinzufügst.
Die bestehenden Farben sind bei jeder Vorlage bereits entsprechend zugeordnet. Wenn du diese vorhandenen Farben änderst, wirkt sich das also sofort auf alle Design-Elemente deines Projekts aus.
Globale Einstellungen anpassen
Als Nächstes sind die Globalen Einstellungen essenziell, um den Stil aller genutzten Design-Elementen (Slider, Banner, Galerien, Texte uvm.) mit wenig Handgriffen zentral zu definieren.
Unter "Shop" kannst du die Hintergrundfarbe für den Shop und das Schriftstyling für alle Lauftexte definieren. Das gilt auch generell für Dachzeile, Titel und Untertitel für alle Elemente.
Weiters sind Pfeile, Punkte und Pause-Buttons, die in Slidern, Galerien und Karussellen vorkommen, genauso zentral gestaltet wie Aufzählungen, Hyperlinks, Tabellen und Kontrastschalter für Banner- und Slidertexte.
Vertikale Abstände definieren
Die vertikalen Abstände zwischen den Sektionen sind ein zentrales Gestaltungselement für alle Seiten deines Projektes. Dafür sind in den Vorlagen Abstände vorbereitet. Du kannst diese anpassen und neue anlegen.
Durch diese Anpassung bestimmst du zentral den "Weißraum" zwischen den Elementen. Außerdem kannst du einen Standard-Abstand festlegen, der immer dann zum Einsatz kommt, wenn du eine neue Sektion auf deiner Seite anlegst.
Diese zentrale Einstellung ist entsprechend mächtig, aber du kannst auf den einzelnen Seiten beliebige individuelle Abstände festlegen und vorbereitete Abstände überschreiben.
Neben dem Abstandselement kannst du natürlich bei jedem Element Außen- und Innenabstände (Margin/Padding) und bei jeder Sektion einstellen.
Systembutton für alle Buttonstile
Der Systembutton ist die "Mastervorlage für alle Buttons, die für die Bedienung aller Shop-Elemente und Formulare vorbereitet sind. Alle Stil-Eigenschaften des Systembuttons werden automatisch auf alle anderen Buttons weiterverrerbt. Jede Änderung am Systembutton hat also weitreichende Auswirkung auf den Look deiner Buttons.
Du kannst aber die Stile aller anderen Funktions-Buttons (zB. Warenkorb, Kasse, Wunschliste, Formular senden usw.), die den Stil des Systembuttons erben, individuell anpassen.
Darüber hinaus kannst du unabhängig vom Stil des Systembuttons beliebig viele eigene Button-Stile anlegen, damit du das Buttonstyling auf jeder Seite nach deinen Vorstellungen individualisieren kannst.
Gestaltung der Basis-Stile:
Die oben genannten ersten Schritte benötigen vielleicht nur wenige Minuten und wirken sich sofort auf das gesamte Look & Feel von Shops oder Websites aus. Daneben gibt es noch einige weitere Eingriffe wie zB. generelle Ecken-Abrundungen von Bildern und Bannerflächen, sowie Definitionen für Iconset, Header und Footer.
Dies ist der Zeitpunkt, an dem du dich der Stil-Anpassung sämtlicher Stil-Elemente zuwenden kannst, die du für das Layout deiner Inhalte benötigst: Slider, Banner, Menüs, Bild-Text-Elemente, Galerien, Formulare, Pop-ups uvm.
Dabei solltest du dir immer im Klaren sein, ob du bei einem Element im Design-Editor den "Basis-Stil" des Elements bearbeitest oder eine Stilüberschreibung eines bestimmten Elements direkt an der Stelle auf der Seite machen willst, die ein Element mit diesem Basis-Stil nutzt. Solange du Basis-Stile bearbeitest, wirken sich diese immer global auf alle Elemente aus, die diesen Basis-Stil benutzen. Wenn du allerdings nur eine lokale Stilüberschreibung vornimmst, wirkt sich diese nur auf das konkrete Element an dieser Stelle aus.
Für alle weiteren Schritte empfehlen wir die Informationen und Antworten auf deine Fragen aus unserem Help Center zu beziehen oder schreibe unseren Profi-Support an: support@smarda.com