Die Einstellungen unter Design und Layout im Konfigurationsfenster enthalten Optionen zum Ändern des Standardaussehens der App. Sie können zum Beispiel zwischen einem hellen und einem dunklen Modus wählen, die Einstellungen der Organisation für "Festgelegtes Design" (gegebenenfalls Farben und Logo) anwenden oder ein benutzerdefiniertes CSS verwenden, damit die App dem Branding entspricht.
Vorsicht:
Instant Apps-Aktualisierungen für die Quellvorlage können sich auf das benutzerdefinierte CSS einer App auswirken. Testen Sie daher Ihre App mit jeder neuen Produktversion.
Die meisten Apps enthalten zudem verschiedene voreingestellte Designs zum Stylen der App durch Ändern der Hintergrund- und Textfarbe für App-Elemente, beispielsweise Kopfzeile, Fenster und Schaltflächen. Sie können das Design anpassen, indem Sie ein eigenes Farbschema definieren und eine der verfügbaren Schriftarten auswählen. Wenn Sie benutzerdefinierte Farben auswählen, wird das Kontrastverhältnis für die Schrift- und Hintergrundfarbe hinsichtlich der Erfüllung der Barrierefreiheitsstandards validiert, die ein Kontrastverhältnis von mindestens 4,5 erfordern, um sicherzustellen, dass der Text lesbar ist. Wenn das Kontrastverhältnis unzureichend ist, wird eine Warnmeldung angezeigt. Sie können auch ein Bild hochladen, um mit einem optionalen Hyperlink ein benutzerdefiniertes Logo in die Kopfzeile einzubinden. (Es werden nur HTTPS-URLs unterstützt.) Beispiele zu diesen Optionen finden Sie in unserem Blogbeitrag zum Konfigurieren von Designs.
Verwenden Sie gegebenenfalls die Einstellung Positions-Manager, um durch Verschieben und Neuanordnen der Kartenwerkzeuge eine intuitive Bedienoberfläche für die App zu erstellen. Verwenden Sie die Schaltfläche neben dem Namen eines Werkzeugs, um es in eine andere Ecke zu ziehen, oder um die Reihenfolge der in einer Ecke gruppierten Schaltflächen zu ändern. Die Positionen der Werkzeuge werden in der App-Vorschau aktualisiert, sodass sie mit den Positionen übereinstimmen, die Sie im Raster auswählen.
In der folgenden Tabelle werden die entsprechenden Einstellungen der verschiedenen Vorlagen verglichen:
| Option | 3D Viewer | Atlas | Anlagen-Viewer | Standard | Kategorien-Galerie | Diagramm-Viewer | Countdown | Ausstellen | Bilddaten-Viewer | Nebenkarten | Interaktive Legende | Manager | Medien-Karte | In der Nähe | Portfolio | Öffentliche Benachrichtigung | Reporter | Seitenleiste | Schieberegler | Zonensuche |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Benutzerdefiniertes CSS |  | | | | | | | | | | | | | | | |||||
Benutzerdefiniertes Logo | | | | | | | | | | | | | | | | | | | ||
Benutzerdefiniertes Design | | | | | | | | | | | | | | | | | | | | |
Positions-Manager | | | | | | | | | | | | | | | | | | |||
Voreingestelltes Design | | | | | | | | | | | | | | | | | | | | |
Festgelegtes Design | | | | | | | | | | | | | | | | | | | |
Eine alphabetisch geordnete Tabelle, in der alle konfigurierbaren Funktionen verglichen werden, finden Sie in derÜbersicht der App-Werkzeuge (PDF). (Beta-Vorlagen sind ausgeschlossen, bis sie die Beta-Phase verlassen haben und in Produktions-Apps verwendet werden können.)