Preise
Marketplace
Community
Help Center
Login  
Los geht's  

Allgemein

Los geht's mit der Erstellung deiner App. Lerne, wie du Regeln aufstellst, Vorlagen konfigurierst, den Designer benutzt und vieles mehr.

UI anpassen

Wenn du deine App mit Zappter erstellst, ist das UI sauber, schlank, professionell und unverwechselbar. Aber wenn du ein eigenes Design brauchst, das deine Markensprache spricht oder komplett einzigartig unter anderen sein willst, hat Zappter ein Werkzeug, um diese Aufgabe zu erledigen, den Designer.
Design Editor
Admin > Anpassen > Inhalt. Klicke, um die App zu bearbeiten. Sobald du drin bist, wähle das Design-Symbol.
Der Designer öffnet den Inhalt, der mit Zappter Standard-UI-Elementen bestückt ist, ohne jegliche Designanpassungen.
  • Schichten & Explorer: Repräsentiert jedes UI-Element der App. Die UI-Elemente Background, Header, Space und Bottom Bar sind allgemein und obligatorisch. Andere sind diejenigen, die du nach deinen Bedürfnissen auf deinen Inhalt gelegt hast, wie z.B. E-Commerce, Kategorie, etc.
  • Stileigenschaften: Hier stellst du das Styling (CSS) des im Layers & Explorer ausgewählten UI-Elements ein
Schichten & Explorer
Dies repräsentiert jedes UI-Element des Bildschirms. Es repräsentiert zwei Arten von Elementen, 1) Gemeinsame Elemente 2) Elemente aus deinem aktuellen Design.

  • Gemeinsame Elemente: Background, Header, Space, Bottom bar, da diese für jedes Design verfügbar sind (obligatorisch)
  • Andere Elemente: UIs wie dein E-Commerce, Buchungen, Texte oder alles, was du auf deinen Content gelegt hast, um deine Anforderungen zu erfüllen.
UI-Elemente werden hervorgehoben, wenn du mit der Maus über sie fährst. Nachfolgend findest du die oben beschriebenen UI-Elemente:
Hintergrund & Kopfzeile:

Space & Bottom Bar:

Du kannst die Farben und Schriftarten oder jedes andere Attribut jedes Elements in den Stileigenschaften ändern. Vermeide es jedoch, die Stileigenschaften zu verwenden, um die Farben und Schriftarten der üblichen UI-Elemente zu ändern und folge den entsprechenden Optionen, die im Abschnitt Kopfzeile, Hintergrund und untere Leiste besprochen wurden . Es hilft, sie jederzeit dynamisch zu ändern, ohne ein Redesign oder eine UI-Anpassung vornehmen zu müssen.
Die anderen vier UI-Elemente, die unten markiert sind, sind Featured Products, Organic Limes, Passion Fruits, und - - diese sind von den Nutzern erstellte Inhalte, die den Bedürfnissen entsprechen.
Schritte zum Anpassen eines UI-Elements
Unten, ein Standard UI eines 'article' UI-Elements, hervorgehoben in Layers & Explorer für ein besseres Verständnis der vier entscheidenden Schritte bei der Anpassung:

1. setze auf die Vererbung für das UI-Element. Bio-Limetten in diesem Beispiel.
  • Favorit: Macht ein UI-Element zum Favoriten
  • Vererbung: Wenn du ein UI-Element anpasst, z.B. Artikel, möchtest du sicherstellen, dass alle zukünftigen Artikel-UIs wie das von dir angepasste aussehen. Dies wird erreicht, indem du es mit "Vererbung" an markierst (wenn der kleine pyramidenartige Button gelb ist, bedeutet das "Vererbung" an. Wenn er grau ist, hast du die Vererbung nicht aktiviert)
  • Zurücksetzen / Wiederherstellen: Wenn du ein UI-Element anpasst, kann es Situationen geben, in denen du alles von einem frischen Standard-UI neu starten musst. Dies wird für diesen Zweck verwendet
  • Öffnen Button: Für einige UI-Elemente, wie z.B. Kategorien, gibt es diese Option, da Kategorie-UIs andere Elemente enthalten können
  • Expandieren-Button: Erweitert das UI-Element, um jedes der darin enthaltenen Objekte sichtbar zu machen
2. Erweitere das übergeordnete UI-Element mit dem 'Expand'-Button und du siehst alle untergeordneten UI-Elemente, die dieses einzelne UI-Element bilden, in diesem Beispiel den Artikel.
3. Ändere die Stileigenschaften eines Elements, indem du es markierst und den Stil auf der rechten Seite einstellst. Im folgenden Beispiel ist 'picture' ein untergeordnetes UI-Element des übergeordneten Elements, Organic Limes.
Um die Objekte anzupassen, lies den Abschnitt, UI Style Properties, der mehr über die Styling-Eigenschaften erklärt.
Beispiel: Im Folgenden wird eine einfache Stiländerung angewendet, um das Standard-UI des Artikels in ein individuelles Design zu ändern:
  • Artikelbreite 100% auto
  • Umrandung 0 bis 50%
  • Schatten Unschärfe 10 hinzugefügt 50% schwarze Farbe
  • Fotobreite 60%
  • Foto Rand von links 20%
  • Button Container 100%
  • Button Container Rand von unten 10px
4. Wenn du mit der Anpassung des Stils fertig bist, speichere die Änderungen. Von nun an wird jedes Mal, wenn du ein UI-Element (in unserem Beispiel ein Artikel) zu deinem Inhalt hinzufügst, dieses aufgrund der Vererbung ein angepasstes UI haben; dies soll die Konsistenz in der gesamten App sicherstellen.
UI Style Eigenschaften
In diesem Abschnitt geht es um die Verwendung des Zappter Designers, um CSS-Style-Attribute zu setzen. Wenn du mit CSS-Styling vertraut bist, kannst du diesen Abschnitt überspringen.
Um das Verständnis zu vereinfachen, werden erst ein paar Eigenschaften auf einmal besprochen, und dann die nächsten.
  • Das Layout - Versteckt, Block, Inline: Als Standardwerte beibehalten
  • Ausrichten: Ausrichtung des ausgewählten Objekts innerhalb seines übergeordneten Containers
  • Sichtbarkeit: Sichtbarkeit
  • Grösse: Die Breite und die Höhe des ausgewählten Objekts innerhalb seines übergeordneten Containers. Der Standardwert ist z.B. 50px für das Bild der Kategorie. Unten wird die Breite auf 46% gesetzt, um fast die Hälfte der Breite des Parent zu nehmen
  • Aber wenn du 2 Objekte in der gleichen Reihe auf mehr als 50% machst, wird es eines der Objekte nach unten schieben. Das liegt daran, dass andere Objekte innerhalb des Containers auch Platz wegnehmen
  • Vergewissere dich, dass du die Breite der anderen Objekte so änderst, dass sie alle zusammen innerhalb von 100% der Breite des Parentes kommen
  • Farben: Vermeide es, Farben mit dieser Option einzustellen, da Zappter eine Funktion bietet, mit der du die Farben dynamisch einstellen kannst. Siehe den Abschnitt 'Farben & Schriftarten' für weitere Details
  • Hintergrundbild: Lege ein Hintergrundbild für ein Objekt fest, falls das zutreffend ist. Bitte beachte und ändere die untenstehende Einstellung:
  • Position: Position des Objekts im Verhältnis zu seinem übergeordneten Container
  • Typografie: Du kannst die Schriftarten mit Zappter dynamisch ändern, mehr dazu findest du im Abschnitt Farben & Schriftarten. Wenn du hier eine Schriftart zuweist, wird sie nicht wirksam, wenn du sie dynamisch änderst, wie im Abschnitt erklärt
Allerdings kannst du hier noch die Schriftgröße und das andere Styling einstellen.
  • Padding: Dies ist der Abstand zwischen dem Inhalt eines Objekts und seinem Rand
  • Margin (Rand): Dies ist der Raum außerhalb des Objekts oder der Raum zwischen den Objekten
  • Border Radius: Dies ist der Radius der Ecken des Objekts. Im Artikelbeispiel wurde der Randradius des Bildes an allen Seiten auf 50% gesetzt, damit das Bild rund aussieht
Reduziere ihn auf 0 (Null), um scharfe Kanten zu haben, die nach Box aussehen.
  • Umrandung: Fügt dem Objekt einen Rahmen hinzu
  • Schatten: Verleiht dem ausgewählten Objekt einen Schatteneffekt:

Obere Leiste, Hintergrund, Untere Leiste

Anpassen der oberen Leiste
Admin > Design > App Obere Leiste:
Tabs unter Einstellungen

  • Warenkorb: Anpassen des Warenkorbs
  • Menü: Anpassen des Menüs

Tabs unter Design

  • Logo: Logo anzeigen/ausblenden
Anpassen des Hintergrunds
Admin > Design > Farben:
  • Popups: Anpassen der App-Popups
Anpassen der unteren Leiste
Admin > Design > Untere Leiste:
Tabsunter Einstellungen

  • Allgemein: Leiste anzeigen/ausblenden
  • Login: Text und Verhalten des Anmeldebildschirms anpassen
  • Registrieren: Aktiviere/Deaktiviere die Selbstregistrierung für Benutzer
  • Passwort vergessen: Passe das Hintergrundbild auf dem Passwort vergessen-Bildschirm an
  • Profil: Anpassen des Profilbildschirms
  • Home-Button: Anpassen des Home-Buttons
  • Bestellungen: Anpassen des Bestellsymbols in der unteren Leiste
  • Zahlungen: Aktiviere die Verwaltung von Kreditkarten mit dem Profil
  • QR-Codes: Aktiviere/Deaktiviere und passe die QR-Code-Option in der unteren Leiste an
  • Chat: Aktiviere/deaktiviere und passe das Chat-Verhalten an
  • Profil-QR-Code: Profil-QR-Codes aktivieren/deaktivieren

Tabs unter Design

  • Farben: Lege die Farbe der unteren Leiste fest, sowie die Farbe für das Standard-Icon und das aktive Icon
  • Popups: Lege die Farben der Popups fest und gib an, ob sie modal sind

Schriftarten & Farben

Wenn du die Benutzeroberfläche anpasst, stellst du normalerweise nur die Schriftgröße ein. Und dann wählst du die Schriftart und ihre Größe in dieser Option aus. Das sorgt für die Einfachheit und die Freiheit, die du hast, wenn du dich entscheidest, deine Schriftart und -farbe zu ändern, ohne dich durch die gesamte Anpassung zu arbeiten.
Admin > Design > Schriftart:
  • Scanne durch die Liste der verfügbaren Schriftarten und aktiviere sie. Der Simulator auf der rechten Seite reflektiert sofort deine Änderungen
Neue Schriftarten hinzufügen
1. Klicke auf die Schaltfläche '+ Neuer Font'.
2. entweder du lädst eine gespeicherte Web-Schrift hoch oder du konvertierst die konventionelle Schriftart in eine Web-Schriftart mit dieser Option:
Web-Font hochladen:
  • Neu hinzugefügte Web-Schriftart:
Konvertiere eine reguläre Schriftart:
Haftungsausschluss: 'Transfonter.org' ist eine externe Quelle. Das untenstehende Interface und die erklärten Schritte sind möglicherweise nicht identisch.
  • Benutze den Button 'Add Fonts', um deine reguläre Font-Datei hinzuzufügen.
  • Benutze den 'Convert'-Button, um sie in eine Web-Font zu konvertieren, dabei wird auch die Zip-Datei der Schrift heruntergeladen
  • Verwende die Option 'Upload Web-Font', um die gespeicherte Schriftdatei hochzuladen