Hub-Vorlage an eigenes Branding und Design anpassen

Die Hub-Vorlage OneMap bietet einen schnellen Einstieg und soll Ihnen bei einer optimalen Organisation Ihrer Daten helfen. Die Vorlage, die Sie hier anzeigen können, bildet die Grundlage für Ihr Hub-Design. Anschließend können Sie sie an Ihre Organisation anpassen, indem Sie Ihren eigenen Style und Ihre eigenen Bilder hinzufügen. Auf ArcGIS Hub können Sie über Ihre ArcGIS Online-Apps zugreifen.

Hinweis:

In diesem Lernprogramm ist der Begriff "OneMap" ein Platzhalter für das Community-GIS-Branding. Beispiele sind "Ireland GeoHive", "NC OneMap", "IndianaMap", "HIFLD Open Data" und "UAE 1Map".

Hub-Initiative erstellen

Zunächst erstellen Sie eine Hub-Initiative auf Basis der Hub-Vorlage OneMap.

  1. Melden Sie sich bei Ihrem ArcGIS-Organisationskonto an.
    Hinweis:

    Wenn Sie über kein Organisationskonto verfügen, informieren Sie sich über die Optionen für den Zugriff auf die Software.

  2. Klicken Sie im Menüband neben Ihrem Benutzernamen auf die Schaltfläche "Apps", um die Liste der Apps zu sehen, die Ihnen zur Verfügung stehen.
  3. Klicken Sie auf die Schaltfläche Hub.

    Schaltfläche "Hub" in der App-Liste

    Die Seite Hub-Überblick wird angezeigt. Hier können Sie Initiativen, Inhalte und die Mitglieder der Community sehen. Sie erstellen eine Initiative, die Sie anpassen können.

  4. Klicken Sie auf dem Menüband auf Neu und dann auf Initiative.

    Option "Neue Initiative"

    Auf Ihrem Bildschirm werden einige Optionen angezeigt, mit denen Sie Ihrer Initiative einen Namen geben oder Vorlagen durchsuchen können. Sie wählen eine Vorlage aus, die Sie verwenden möchten.

    Hinweis:

    Initiativen sind ein Feature von ArcGIS Hub Premium. Wenn Initiative nicht als Option angezeigt wird, informieren Sie sich bei Ihrem Administrator über Ihre Lizenzstufe für ArcGIS Hub sowie Ihre Berechtigungen.

  5. Klicken Sie auf Vorlagen durchsuchen.

    Schaltfläche "Vorlagen durchsuchen"

    Sie filtern die Suche nach verfügbaren Vorlagen, um die Ergebnisse einzugrenzen.

  6. Aktivieren Sie unter Veröffentlicht von das Kontrollkästchen für Esri.

    Filtern Sie in den Vorlagen diejenigen heraus, die von Esri veröffentlicht wurden.

  7. Geben Sie unter Vorlagen den Text onemap in das Suchfeld ein, und drücken Sie die Eingabetaste.

    Die Initiative OneMap wird angezeigt.

    Initiative "OneMap"

  8. Klicken Sie auf Vorlage aktivieren.

    Als Nächstes müssen Sie Ihrer Initiative einen Namen geben. Überlegen Sie, wie nach dieser Site gesucht werden würde, und wählen Sie einen Namen, der Ihre Organisation widerspiegelt.

  9. Geben Sie unter Geben Sie einen Namen für Ihre Initiative ein einen Namen ein, und klicken Sie auf Los.

    Die Aktivierung der Initiative dauert etwa eine Minute. In dieser Zeit wird eine Site mit einer Startseite und mehreren anderen Seiten konfiguriert, die auf Portalen zur gemeinsamen Nutzung von Daten weltweit am meisten genutzt werden.

    Diese Seiten bieten Folgendes:

    • Home: Eine effektive Landing Page, die Besuchern hilft, sich schnell einen Überblick über Ihren Zuständigkeitsbereich zu verschaffen.
    • About: Hier können Sie die Vision, Ziele und Vorgaben Ihrer Organisation erläutern. Sie können hier auch angeben, wie Sie kontaktiert werden können.
    • Contributors: Geben Sie hier die Ministerien, Agenturen oder anderen Organisationen an, die mit Daten zu Ihrer Site beigetragen haben. Sie können diese Seite so konfigurieren, dass die verfügbaren Daten nach Mitwirkenden gefiltert werden können und dass auf deren Seiten verlinkt wird.
    • Open Data: Besucher Ihrer Site können alle von Ihnen kuratierten Daten im Hub durchsuchen.
    • Foundation Data: Beschreiben Sie den Zweck Ihrer Daten. Betten Sie Ihre Daten in einen Kontext ein, indem Sie sorgfältig überlegen, wo sie im Entscheidungsprozess eine Rolle spielen könnten und indem Sie entsprechende Themen oder Kategorien zuweisen. Unter Grundlegende Anleitungen für Administratoren von "OneMap" finden Sie Tipps, die mit weltweiten Beispielen veranschaulicht werden. Sie können die Seite "Foundation Data" auch mehrmals kopieren, um jedes für Ihre Organisation relevante Datenthema darzustellen.
    • Learn: Erklären Sie anderen, wie sie die von Ihnen bereitgestellten Daten am besten nutzen. Gibt es dabei etwas Besonderes zu beachten? Hier können Sie auch die technischen GIS-Anleitungen verlinken.
    • Featured Topics: Hier können Sie Daten nach Thema teilen. Die Themen, die für Ihr Unternehmen relevant sind, können sich von den Themen der Grundlagendaten unterscheiden. Zum Beispiel kann das Thema "Klimawandel" sowohl umwelt- als auch infrastrukturbezogene Datenthemen enthalten.

    Während Ihre OneMap-Site konfiguriert wird, können Sie sich schon einmal überlegen, wie Sie sie individuell anpassen können. Es empfiehlt sich, als Erstes ein Bild einzufügen, das Ihre Organisation repräsentiert.

Banner für Startseite suchen

Nach dem Erstellen der Hub-Initiative können Sie das Banner der Startseite ändern, sodass es zu Ihrer Organisation und dem beabsichtigten Zweck des Hubs passt. Sie können auf der von Ihnen bevorzugten Bilder-Website nach einem Bild suchen, das Sie kostenlos herunterladen und für Ihre Hub-Initiative verwenden können.

  1. Schließen Sie das Fenster Starten.
  2. Öffnen Sie eine Registerkarte im Webbrowser, und navigieren Sie zu Ihrer bevorzugten Bilder-Website, z. B. Unsplash.
  3. Geben Sie im Suchfeld einen Suchbegriff ein (z. B. mapping), und drücken Sie die Eingabetaste.
  4. Klicken Sie auf ein Bild, das Ihnen gefällt, um es zu vergrößern.
  5. Laden Sie das Bild mithilfe der Optionen auf der Website an einen Speicherort auf Ihrem Computer.

    Hinweis:

    Sie können ein Bild von einer Website oder ein bereits vorhandenes Bild verwenden. Vergewissern Sie sich auf jeden Fall, dass Sie die Berechtigung zur Verwendung des Bildes besitzen. Im Lernprogramm wird das Aquarell der Weltkarte verwendet.

    Das in diesem Lernprogramm verwendete Hub-Banner; Ihr Bild unterscheidet sich von diesem Bild.

  6. Kehren Sie nach dem Herunterladen zu dem Bild auf der Browser-Registerkarte zurück.

    Bevor Sie das Bild verlassen, erfassen Sie einige Farben aus dem Bild. Damit können Sie Ihre Site an Ihr Branding anpassen. Vielleicht hat Ihre Organisation bereits Farben, die sie verwenden möchte. Unabhängig davon, welche Farben Sie wählen, benötigen Sie den Hexadezimalcode oder HEX-Code der Farbe, um die Site entsprechend anzupassen. Ein Hexadezimalcode ist eine Möglichkeit, eine bestimmte Farbe zu identifizieren.

    In diesem Beispiel verwenden Sie ein Chrome-Plug-in namens ColorZilla, um Farben aus dem gewählten Bild auszuwählen und die entsprechenden Hexadezimalcodes zu suchen.

  7. Öffnen Sie eine Registerkarte im Google Chrome-Webbrowser, und suchen Sie nach Colorzilla.
  8. Klicken Sie auf das erste Ergebnis und dann auf ColorZilla für Chrome und Firefox. Klicken Sie auf ColorZilla installieren, Hinzufügen und dann auf Erweiterung hinzufügen.
  9. Klicken Sie neben der Adressleiste auf die Schaltfläche Erweiterungen, und klicken Sie auf ColorZilla.

    Wählen Sie "ColorZilla" aus.

    Sie können nun eine Option aus dem ColorZilla-Menü auswählen, um den Hexadezimalcode von Farben aus Inhalten auf der aktuellen Chrome-Seite oder aus Inhalten außerhalb des Chrome-Browsers zu ermitteln.

  10. Wählen Sie Farbe außerhalb Browsers wählen aus. Zeigen Sie auf das Bild, und klicken Sie, sodass der Hexadezimalcode angezeigt wird.

    Klicken Sie im gewählten Bild auf mehrere Bereiche, um verschiedene Farben und deren Hexadezimalcodes zu erfassen. Beachten Sie, dass Hexadezimalcodes mit # beginnen. Im Lernprogramm werden drei Hexadezimalcodes verwendet: #7CA8AF, #014165 und #7A8082.

  11. Kehren Sie zur Hub-Site zurück.

    Beim Aufrufen der Site befindet sie sich im Bearbeitungsmodus.

    Hub-Site im Bearbeitungsmodus

    Sie wissen, dass Sie sich im Bearbeitungsmodus befinden, wenn die Menüoptionen zum Anpassen des Hubs an der Seite zu sehen sind.

    Hinweis:

    Wenn Sie sich nicht im Bearbeitungsmodus befinden, klicken Sie auf die Schaltfläche "Bearbeiten" ganz links auf der Seite, um mit der Bearbeitung zu beginnen.

  12. Zeigen Sie auf das Bild oben auf der Startseite, damit ein Menü angezeigt wird Klicken Sie im Menü auf die Schaltfläche "Bearbeiten", um das Bild zu bearbeiten.

    Schaltfläche "Bearbeiten" für das Bild

  13. Klicken Sie im Fenster Layout-Zeile unter Aussehen für Hintergrundbild auf Hochladen, und wählen Sie das heruntergeladene Bild aus.

    Hintergrundbild hochladen

    Das Bild wird auf der Startseite aktualisiert.

    Hero-Bild aktualisiert

  14. Zeigen Sie auf den Text Unsere OneMap, und klicken Sie auf die Schaltfläche "Bearbeiten".

    Bannertext bearbeiten

  15. Ändern Sie den Text so, dass er den Namen Ihrer Organisation wiedergibt, und entfernen Sie gleichzeitig den allgemeinen OneMap-Text.

    Sie haben das Bild und den Text aktualisiert, den die Besucher Ihrer Site als Erstes sehen werden.

Das Hub-Design ändern

Als Nächstes aktualisieren Sie das Design der Seite. Das Design bezieht sich auf die Farben für Elemente, Text und Schaltflächen auf der gesamten Site.

  1. Klicken Sie auf der Startseite der Hub-Site in der Seitenleiste auf den Zurück-Pfeil, bis Sie Anpassen sehen.

    Fenster "Anpassen"

  2. Klicken Sie unter Anpassen auf Design.

    Option "Design"

    Um das Design für den Hub anzupassen, geben Sie die verschiedenen Farben ein, die Sie aus dem Bild der Startseite erfasst haben.

  3. Legen Sie im Fenster Design die ausgewählten Farben fest, oder verwenden Sie die folgenden Parameter:
    • Geben Sie für Hintergrundfarbe für globale Navigation den Code #7ca8af ein, oder kopieren und fügen Sie ihn ein.
    • Geben Sie für Hintergrundfarbe für globale Navigation den Code #7a8082 ein.
    • Geben Sie für Hintergrundfarbe der Kopfzeile den Code #014165 ein.
    • Geben Sie für Link-Farbe des Textes den Code #014165 ein.

    Designfarben geändert

  4. Klicken Sie auf dem Menüband auf Speichern.

    Schaltfläche "Speichern"

  5. Klicken Sie im Fenster Design auf den Zurück-Pfeil Anpassen.

    Zurück-Pfeil "Anpassen"

  6. Klicken Sie im Fenster Anpassen auf Kopfzeile.

    Option "Kopfzeile"

    Eine Kopfzeile wird oben auf der Site (unter der globalen Navigationsleiste) und auf allen Seiten und Ansichten, die der Site angefügt sind, angezeigt. Die Kopfzeile enthält Titel, Logo und Menü-Links der Site.

    Im Abschnitt Kopfzeile können Sie das Logo oben auf der Seite aktualisieren, indem Sie eine Bild-URL kopieren und einfügen oder ein Bild hochladen, das Sie bereits haben. Die Größe der hochgeladenen Bilder muss unter 3 MB liegen.

  7. Wenn Sie eine Bild-URL oder eine Datei haben, die Sie für die Kopfzeile hochladen können, fügen Sie sie jetzt hinzu.

    Alternativ können Sie das in der Vorlage bereitgestellte Logo beibehalten.

    Jetzt spiegelt die Hub-Site das allgemeine Design Ihrer Organisation wider.

Sie haben eine Hub-Site auf Grundlage der OneMap-Vorlage erstellt, das Design geändert und ein Bild für die Startseite hinzugefügt, das zum Style und Branding der Organisation passt. Als Nächstes fügen Sie der Hub-Seite Inhalte hinzu.


Website durch Hinzufügen von Inhalten optimieren

Jetzt können Sie Ihre Hub-Site durch Hinzufügen von Inhalten optimieren. Der Hub dient der Zusammenarbeit, und er wird durch seine Inhalte so wertvoll für Ihre Partner und die GIS-Community.

Inhalte zu einem Hub-Abschnitt hinzufügen

Als Nächstes ändern Sie den Hub-Abschnitt Making an impact. Hier können Sie Erfolgsgeschichten veröffentlichen, die den Wert Ihrer Aktivitäten zeigen. Sie können z. B. Kacheln mit Links zu relevanten Storys, Apps oder interessanten Initiativen von Ihnen und Ihren Partnern hinzufügen.

  1. Führen Sie auf der Seite einen Bildlauf nach unten zum Abschnitt Making an impact durch.

    Abschnitt "Making an impact"

  2. Zeigen Sie auf den Bereich mit mehreren Apps, und klicken Sie auf "Bearbeiten".

    Schaltfläche "Bearbeiten"

    Das Fenster Layout-Galerie wird angezeigt.

    In dem Fenster haben Sie zwei Möglichkeiten, die Elemente auszuwählen, die Sie teilen möchten: Dynamisch (Referenz auf Inhalte aus einer Gruppe) oder Manuell. In beiden Fällen stammt der angezeigte Inhalt aus Ihrer ArcGIS Online-Organisation. Sie können andere Apps innerhalb Ihrer Organisation registrieren oder auf die von Ihnen erstellten Apps verweisen. Stellen Sie sicher, dass die Elemente korrekt geteilt werden, damit Ihre Zielgruppe sie sehen kann.

  3. Klicken Sie auf Manuell.

    Die Galerie der OneMap-Vorlage enthält sieben Apps. Sie fügen einige weitere hinzu.

  4. Klicken Sie im Fenster Inhalt auf Inhalt auswählen.

    Das Fenster Inhalt hinzufügen wird angezeigt. Sie können nach Quellspeicherorten und Inhaltstypen filtern.

    Fenster "Inhalt hinzufügen"

    Hinweis:

    Die Apps in Ihrem Fenster unterscheiden sich möglicherweise von der hier gezeigten Abbildung.

  5. Fügen Sie einige Elemente von Ihrer Organisation hinzu.

    Die Elemente werden der Galerie unterhalb der vorhandenen Elemente hinzugefügt. Sie können die Elemente im Bereich "Galerie" mit den Schaltflächen Inhalt entfernen und Inhalt sortieren löschen und neu anordnen.

    Elemente im Abschnitt "Making an impact"; neue Elemente würden unterhalb der letzten App "Air Quality Aware" hinzugefügt.

Partner mithilfe einer benutzerdefinierten Komponente hervorheben

Mit einfachen Kenntnissen in der Front-End-Entwicklung können Sie benutzerdefinierte Komponenten für Ihre OneMap-Site erstellen. Unten auf der Startseite befindet sich eine benutzerdefinierte Komponente mit Ihren Partnern. Zu Partnern können Datenanbieter, Datennutzer, Geldgeber und Champions gehören. Die Nennung Ihrer Partner ist eine gute Möglichkeit, ihre wichtige Rolle anzuerkennen und die Vorteile ihrer Teilnahme zu verstärken.

  1. Führen Sie auf der Seite einen Bildlauf durch, und suchen Sie nach dem Abschnitt Our Partners.

    Abschnitt "Our Partners"

    Die OneMap-Vorlage enthält Beispiele für Partnerlogos, die noch nicht mit Websites verknüpft sind. Als Nächstes erfahren Sie, wie Sie die Logos ändern und die Links festlegen.

  2. Um den HTML-Code anzuzeigen, klicken Sie auf die Zeile mit den Apps.
  3. Klicken Sie auf </>In HTML bearbeiten.

    Option "In HTML bearbeiten"

    Das Fenster HTML wird geöffnet. Durch den HTML-Code oben wird der Style festgelegt. Beachten Sie zum Beispiel im <style>-Tag, dass das Scrollen aktiviert ist.

    Style-Tag

    Unter <div class=”scrollmenu”> sehen Sie eine Liste mit Elementen. Dies sind die Elemente, die unter Our Partners zu sehen sind.

    Elemente in Galerie

    Zu beachten hier ist href=”#” und der Text img src =.

    In HTML steht "href" für einen Link. Sie ersetzen das "#" nach "href" durch den Link zur Website eines Partners.

    "img src" verweist auf eine URL eines Bildes, das zeigt, wer der Partner ist. Dies kann ein Bild ihres Logos oder ein von Ihnen erstelltes Bild sein. Wenn Sie gehostete Bilder haben, können diese hier referenziert werden. Wenn Sie keine Möglichkeit haben, Bilder zu hosten, können Sie sie auf ArcGIS Online hochladen.

    Hinweis:

    Wenn Sie keine Bilder haben, können Sie jedes Bild aus dem Internet verwenden, für das Sie eine Berechtigung haben. Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie Bildadresse kopieren, um die URL des Bildes zu übernehmen, oder wählen Sie Bild speichern unter, um das Bild herunterzuladen.

  4. Ersetzen Sie optional ein oder mehrere # durch eigene Partnerlinks, und aktualisieren Sie "img src" mit Ihren Partnerbildern oder -logos.

    Der Link zum ersten bereitgestellten Bild wird im Lernprogramm aktualisiert.

  5. Ersetzen Sie das erste # in Zeile 24 durch www.esri.com.

    Damit wird der Link für das erste Logo auf die Esri Startseite festgelegt.

    Link für das erste Logo auf die Esri Startseite festlegen
  6. Klicken Sie auf Übernehmen, um die Änderungen in der Galerie Our Partners zu speichern. Klicken Sie auf dem Menüband auf Speichern.

Sie haben erfolgreich einige Partner auf Ihrer Hub-Site hervorgehoben.

Eine Seite in der Hub-Vorlage aktualisieren

Nachdem Sie nun die Startseite aktualisiert haben, können Sie die anderen Seiten innerhalb der OneMap-Vorlage anpassen. Diese Vorlage verfügt über mehrere Seiten, die Sie mit Out-of-the-Box-, No-Code- oder Low-Code-Funktionen anpassen können. Sie können verschiedene Themen oder Designs der Site auf mehr als einer Seite darstellen. Sie erstellen eine Kopie der Seite OneMap Foundation Data.

  1. Klicken Sie im Fenster Anpassen auf die Schaltfläche für die Seitenzahl (6 Seiten bei diesem Hub).

    Seitenzahl

  2. Klicken Sie auf die Seite OneMap Foundation Data, um sie zu öffnen.

    Seite "OneMap Foundation Data"

    Eine Seite mit dem Titel "Transportation Data" wird geöffnet.

  3. Klicken Sie auf dem Menüband auf die Schaltfläche "Optionen" und wählen Sie Layout klonen. Wenn Sie gefragt werden, ob Sie die Site veröffentlichen möchten, klicken Sie auf Veröffentlichen.

    Schaltfläche "Layout klonen"

    Wenn der Klonvorgang abgeschlossen ist, wird die Seite mit allen Änderungen kopiert, die Sie bis dahin vorgenommen haben. Ihre geklonte Seite wird auf Basis der vorherigen Seite mit _1 kopiert (bzw. einer höheren Zahl, wenn sie mehr als einmal kopiert wurde).

  4. Klicken Sie auf dem Menüband auf Seiten.

    Option "Seiten"

    Die geklonte Seite wird zusammen mit den anderen Seiten aufgelistet.

    Geklonte Seite

    Nachdem Sie die Seite OneMap Foundation Data geklont haben, geben Sie ihr einen eindeutigen Namen und eine aussagekräftige URL.

  5. Klicken Sie auf die geklonte Seite, um sie zu öffnen, und klicken Sie auf Seiteninformationen.

    Option "Seiteninformationen"

  6. Geben Sie für Seiteninformationen einen eindeutigen Namen ein. In diesem Beispiel wird der Name Transportation data verwendet.

    Name für die neue Seite

    Als Nächstes bearbeiten Sie die URL der Seite, sodass sie dem aktualisierten Seitennamen entspricht.

  7. Klicken Sie auf URL-Einstellungen bearbeiten, und geben Sie den Namen Ihrer Seite ein.

    Text für den Seitenplatzhalter

    Der Seitenplatzhalter ist der Text, der am Ende der Seiten-URL zu sehen ist, daher ist es wichtig, ihn nach dem Ändern des Seitennamens ebenfalls zu ändern.

  8. Klicken Sie im Fenster "Seiten-URL bearbeiten" auf Speichern. Klicken Sie auf dem Menüband auf Speichern, um die Seite zu speichern.
    Tipp:

    Klicken Sie auf den Pfeil nach unten neben Speichern, um die Optionen für die Vorschau oder die Veröffentlichung der Site anzuzeigen.

    Jede Komponente, einschließlich des Titels und des Hero-Bildes (das große Bild oben auf einer Website) der Seite OneMap Foundation Data, kann auf die gleiche Weise wie die Hauptseite geändert werden. Überlegen Sie, welche Elemente Sie auf der Seite OneMap Foundation Data ändern könnten, um sowohl Ihre Organisation als auch das Datenthema darzustellen. Sie können z. B. eine Statistik für die Daten auf der Seite aktualisieren. Oder Sie können die Galerie mit relevanten Anwendungen oder anderen Sites aktualisieren, die einen Bezug zu Ihrem Thema herstellen.

Sie haben die OneMap-Vorlage an Ihr eigenes Branding und Design angepasst. Sie haben das Bild auf der Startseite geändert, das Design des Hubs angepasst und die Seite geklont. Mit diesen Kenntnissen können Sie nun die übrigen Hub-Seiten an den Style Ihres Unternehmens und Ihrer Partner anpassen.