Shop-Design & Layouts anpassen
Verleihen Sie Ihrem Shop eine persönliche Note. Wählen Sie aus professionellen Themes und konfigurieren Sie die Startseite, Markenfarben sowie Kopf- und Fußzeilen im visuellen Live-Editor.
Die Design-Säulen Ihres Pixalo-Shops
Theme-Auswahl (Globale Design-Vorlage)
Bevor Sie in das Feintuning gehen, legen Sie in den Allgemeinen Einstellungen das Grunddesign Ihres Shops fest. Scrollen Sie im Reiter Allgemein nach unten zum Bereich Theme Auswahl:
Auswählbare Themes:
- Pixalo Modern Theme: Ein zeitgemäßes, luftiges Design mit organischen SVG-Wellenformen, großen Bild-Heros und einer dynamischen Produktpräsentation.
- Pixalo Base: Ein klassisch-strukturiertes, minimalistisches Design, das den Fokus voll und ganz auf Ihre Fotos lenkt.
- Klicken Sie auf Ihr Wunsch-Theme und anschließend unten rechts auf Einstellungen speichern. Der Shop lädt sich kurz neu, um die Stile direkt anzuwenden.
Visueller Editor (Design & Layout)
Klicken Sie in der Hauptnavigation auf den Punkt Design. Hier verwalten Sie die verschiedenen Layout-Bausteine Ihres Shops, unterteilt in vier intuitive Reiter:
1. Startseite (Modularer Page Builder)
Die Startseite Ihres Shops ist modular aufgebaut. Im Page Builder verwalten Sie die sogenannten Seitenabschnitte (Page Sections):
- Abschnitt hinzufügen: Fügen Sie neue Raster (z. B. Hero-Banner, Preiskarten, Gallerievorschauen oder Textabschnitte) hinzu.
- Reihenfolge anpassen (Drag & Drop): Verschieben Sie Abschnitte nach oben oder unten, um den Aufbau der Verkaufs-Landingpage zu steuern.
- Inhalte editieren: Jeder Abschnitt hat eigene Felder (Überschrift, Untertitel, Hintergrundbild, Button-Links), die Sie direkt im Web-Interface befüllen.
Detaillierte Abschnitts-Eigenschaften (Beispiel: Startseiten-Banner / Hero Banner)
Sobald Sie einen Sektionseintrag im linken Bereich der Abschnitte auswählen (im Bild markiert als Startseiten-Banner / Online-Fotogalerie), öffnet sich im Hauptbereich das detaillierte Bearbeitungsmenü für dieses Element:
Aufbau und Einstellungsoptionen:
- Titel-Eingabe: Ändern Sie den Haupttext live (z. B.
Online-Fotogalerie). - Desktop Größe: Passen Sie die Schriftgröße stufenlos per Schieberegler an (z. B.
70px). - Mobil Größe: Bestimmen Sie die optimierte Schriftgröße für Smartphones (z. B.
41px). - Zeilenhöhe: Ändern Sie den vertikalen Abstand bei mehrzeiligem Text (z. B.
1.1). - Font & Stärke: Wählen Sie die Schriftart (z. B.
Playfair Display) und das Gewicht (z. B.400 - Regular). - Textstil: Formatierungs-Schaltflächen für kursiv (I), unterstrichen (U) und durchgestrichen (S).
- Untertitel-Eingabe: Ein zweiter Textblock für erklärende Sätze oder Handlungsaufforderungen.
- Unabhängiges Sizing: Eigene Größen-Schieberegler für Desktop (z. B.
18px) und Mobilgeräte (z. B.14px). - Zeilenhöhe & Typografie: Nutzen Sie eigene Schriftfamilien (z. B.
Inter) und Stärken für den Untertitel.
2. Farben & Text (CI Anpassung)
Stimmen Sie den Shop farblich auf Ihr Studio-Branding ab. Im Farben-Tab steuern Sie die Hauptfarbpalette:
- Primärfarbe: Steuert die Akzentfarbe für primäre Interaktions-Buttons, aktive Links und farbliche Hervorhebungen.
- Sekundärfarbe & Kontraste: Dient zur farblichen Abgrenzung von Hintergrundrastern und sekundären Funktionsflächen.
- Hintergrundfarben: Passen Sie den Basishintergrund (Hell vs. leicht abgedunkelte Kontraste) an.
3. Header (Shop-Kopfzeile)
Im Header-Tab konfigurieren Sie das obere Navigationsband Ihres Shops:
- Logo-Skalierung: Stellen Sie die maximale Breite Ihres Logos im Header stufenlos ein.
- Sticky Header: Legen Sie fest, ob das Navigationsband beim Scrollen permanent am oberen Bildschirmrand fixiert bleibt.
- Header-Menü Verknüpfung: Hier verknüpfen Sie das zuvor unter "Seiten & Menüs" konfigurierte Header-Menü.
4. Footer (Shop-Fußzeile)
Im Footer-Tab steuern Sie den Abschlussbereich Ihres Online-Shops:
- Copyright & Fußnoten-Text: Fügen Sie Urheberrechtshinweise und Kurzbeschreibungen Ihres Studios ein.
- Soziale Links: Binden Sie Ihre Profile von Instagram, Facebook oder Pinterest als Icon-Links ein.
- Footer-Menü: Verlinken Sie Ihre unter "Rechtliches" ausgearbeiteten AGBs, das Impressum und die Datenschutzerklärung.
Echtzeit-Vorschau
Alle Anpassungen, die Sie im visuellen Editor unter den vier Tabs vornehmen, werden nach dem Speichern sofort in Echtzeit auf Ihren Live-Shop übertragen. Testen Sie das Ergebnis am besten auf Ihrem Smartphone parallel!
Shop-Einrichtung abgeschlossen!
Glückwunsch! Sie haben nun alle wichtigen Einstellungen, Produkte, Inhaltsseiten und Design-Layouts eingerichtet. Ihr Online-Shop ist voll einsatzbereit.
Zurück zur Dokumentations-Übersicht