Design Builder

Übersicht

Mit dem Metro Publisher Design Builder können Sie von einer Vielzahl an Grunddesigns auswählen und damit das Erscheinungsbild Ihrer Website an die Identität Ihrer Zeitschrift anpassen.

Auf dem Grunddesign aufbauend, können Sie die Bearbeitungstools nutzen, um Logos hochzuladen, Schriftarten festzulegen, die Farbpallette zu definieren und die verschiedensten Designelemente und Verhaltensweisen auf mobilen Geräten zu konfigurieren.

• Grunddesign auswählen
• Design-Optionen
• Veröffentlichung, Vorschau und Änderunen

 

 

---

Grunddesign auswählen

Beim ersten Laden des Design Builders haben Sie die Option entweder ein neues Grunddesign auszusuchen oder Ihr aktuelles Design zu bearbeiten.

1. Grunddesign auswählen: Suchen Sie ein neues Grunddesign aus unserer Vorlagenvielfalt als Basis Ihrer Website aus.
2. Design bearbeiten: Wählen Sie diese Option, um ein existierendes Grunddesign mit bereits gespeicherten Anpassungen zu bearbeiten.

---

Design-Optionen

Sobald Sie ein Grunddesign ausgesucht haben, können Sie Ihr Design anpassen, indem Sie die verschiedenen visuellen Elemente und mobile Verhaltensweisen konfigurieren.

 

 

1. Logo und Farben

Desktop-Logo

• Desktop-Logo: Das Desktop-Logo ist das Logo, das in Ihrer Website Kopfzeile angezeigt wird, wenn Ihre Site auf Desktop und Laptop Computern in voller Bildschirmgröße aufgerufen wird.

Weitere Logos

• Responsives Logo: Das responsive Logo ist nicht zwingend erforderlich. Da responsives Design Ihr Desktop-Logo auf kleineren Bildschirmen herunterskaliert, dient diese Option dazu, eine andere Version Ihres Logos hochzuladen, die eventuelle auf kleineren Bildschirmen besser aussieht. Ist Ihr Logo z. Bsp. recht horizontal, könnten Sie ein weniger horizontales für mobile Geräte hochladen, dass auf den kleineren Bildschirmen besser lesbar ist.
• Favicon: Ein Favicon ist eine 16x16 px Grafik , die sowohl in den Browser-Reitern, also auch in den Suchergebnissen einiger Suchmaschinen angezeigt wird. Die besten Dateiformate hierfür sind PNG, GIF, or JPG. Mehr über Favicons können Sie hier nachlesen.
• Standardsymbol für Soziale Medien: Fügen Sie eine quadratische Version Ihres logos hinzu, die auf Facebook und anderen sozialen Medien genutzt werden wird. Dieses wird immer dann auf sozialen Medien genutzt, wenn Benutzer Inhalte teilen, die keine eigenen Bilder haben. Ohne dieses Logo zeigen soziale Medien in solchen Fällen ein willkürliches Bild von Ihrer Website an.
• AMP-Logo: Das Accelerated Mobile Pages (AMP) Projekt ist eine open-source Initiative von Google mit dem Ziel, das Web schneller zu machen, indem sie eine alternative Verteilung Ihrer Website-Seiten auf Googles eigenem Netzwerk anbieten. Falls Sie AMP aktivieren möchten, informieren Sie sich bitte über die Grafikanforderungen.
• Große/Kleine PWA-Logos: Progressive Web Apps (PWA) bieten eine App-ähnliche Benutzeroberfläche für Leser auf mobilen Geräten. Bitte laden Sie zwei quadratische Varianten Ihres Logos hoch, falls Sie PWA aktivieren möchten: eines mit 192x192 Pixel und eines mit 512x512 Pixel.

Markenfarben

• Überschriften: Definiert Titelfarben (Inhalte, Veranstaltungen, Standorte), auch innerhalb Sprockets und auf Veranstaltungs- und Standortsuchen.
• Links und Buttons (Schaltflächen): Definiert Text-Links auf Inhalten, Schaltflächen und Sprocket Titelfarben.
• Reiter und Kartenpins: Definiert Kartenpins und Reiter in Suchergebnissen.

2. Schriftarten

• Text: Definiert Haupttext (Textkörper) und beschreibende Texte auf der gesamten Site.
• Überschriften: Definiert Titel auf Inhalten, Sprockets und Abschnittsseiten.
• Navigation: Definiert Menü- und Untermenütexte.
• Typekit Fonts: Sofern Sie Typekit-Fonts nutzen wollen, können Sie diese hier hochladen.

3. Navigationsleiste

• Großgeschriebene Navigation: Zeigt den Menütext in Großbuchstaben an.
• Zentrierte Navigation: Zentriert die Navigationstexte.
• Angeheftete Navigation: Navigation "haftet" oben im Browserfenster während Benutzer scrollen.
• Hintergrundfarbe: Definiert Hintergrundfarbe der Navigation.
• Textfarbe: Definiert den Text innerhalb der Navigation, also die Menüpunkte.
• Angewählte Menüpunkte / Mouseover: Textfarbe wenn Nutzer mit der Maus über einen Menüpunkt fahren oder sich auf einer spezifischen Abschnittsseite befinden.
• Obere Umrandung: Fügt eine Umrandung über der Navigationsleiste in der gewünschten Pixelbreite ein. Lassen Sie dieses Feld leer, wenn Sie keinen oberen Rand wünschen.
• Umrandungsfarbe (oben): Definiert die Farbe des oberen Rands.
• Untere Umrandung: Fügt eine Umrandung unter der Navigationsleiste in der gewünschten Pixelbreite ein. Lassen Sie dieses Feld leer, wenn Sie keinen unteren Rand wünschen.
• Umrandungsfarbe (unten): Definiert die Farbe des unteren Rands.

4. Kopf- und Fußzeile

• Volle Breite, Volles Fenster: Streckt die Kopfzeile über die Gesamtbreite des Browserfensters.
• Soziale Medien Symbole in Fußzeile: Verschiebt die soziale Medien Symbole in die Fußzeile für eine ordentlichere Kopfzeile.
• Weiße Soziale Medien Symbole: Soziale Medien Symbole sind standardmäßig schwarz. Nutzen sie diese Option um sie auf weiß umzustellen. Dies bietet bei dunklen kopf- und/oder Fußzeilen mehr Kontrast.
• Logo Zentrieren: Platziert Logo zentriert in der Kopfzeile.
• Logohöhe: Mit dem Schieberegler wird die Logogröße angepasst.
• Hintergrundfarbe Kopfzeile: Wird auf dem Hintergrund der Kopfzeile angewandt.
• Textfarbe Kopfzeile: Wird auf Text-Links in der Kopfzeile angewandt.
• Hintergrundfarbe Fußzeile: Wird auf dem Hintergrund der Fußzeile angewandt.
• Textfarbe Fußzeile: Wird auf dem Text der Fußzeile angewandt.

5. Verzierungen

• "Breadcrumbs" ausblenden: Adds breadcrumb navigation to top of page.
• Highlight Section in Sprockets: Adds highlighted color to sections when displaying those in sprockets.
• Bigger Text in Lead Paragraph: Makes text in first paragraph of content larger than body text.
• Initial Drop Cap in Lead Paragraph: Adds a drop cap to first word in lead paragraph for content.
• Button Style: Choose corner style for buttons.

Add Background Image

• Background Placement: Displays image in background on all pages throughout the website. Fixed positions the image at top of browser window. Scrolling moves the images as the user scrolls.

6. Optionen für mobile Geräte

• Center Logo: Centers the logo on small screen sizes.
• Fold Search into Navigation: Adds search bar to bottom of mobile navigation.
• Hide Header Links: Hides text links in header on small screens.
• Back to Top: Adds option for user to jump back to top on small screens.

---

Publish, Preview, or Change Your Design

At the bottom of the design tools palette are several important options.  

• Publish: Publishes your changes to the live site.
• Live Preview: Preview your unpublished changes. This option displays the current state of your design since the last time you published with real content from your database.
• Change Theme: Select a new base theme.
• Revert to Live: Reverts the current design to the last published version.
• Load: Paste in the design that you copied from another Metro Publisher website.
• Copy: Copies the current design. This feature allows you to copy your design to another Metro Publisher website. 

On the upper part of the page you have additional preview options:

• Sample Pages: Preview your design elements on sample page layouts. These page layouts are just samples, you can preview the real pages by using the "Live Preview" option above.
• Mobile Views: Click the icons to see how your design looks on three common device types(screen sizes) – desktop, tablets, and phones.