Erste Schritte: Design individualisieren

In diesem Abschnitt beginnen wir damit, das Design der Website zu individualisieren, damit es besser zu Ihrer Marke passt und Sie ein Verständnis für die Anpassungsmöglichkeiten des Systems bekommen.

Es kann einige Minuten dauern, bis die Änderungen auf Ihrer Website angezeigt werden, während der Leistungscache aktualisiert wird.

Gehen Sie zu Meine Website / Einstellungen / Name & URL.

• Passen Sie den Namen Ihrer Website an (halten Sie ihn kurz)
• Passen Sie bei Bedarf die URL an, die Sie unter photodeck.com verwenden. Sie werden später immer in der Lage sein, sich mit Ihrer eigenen Domain zu verbinden.
• Stellen Sie Ihre Währung und die Hauptsprache für Ihre Website ein.
• Denken Sie daran, auf Speichern zu klicken!

Ein Design in PhotoDeck bezieht sich nur auf das Gesamtlayout und den Stil Ihrer Website. Designs sind wie „Skins”, d. h. unabhängig von Ihrem Design sind immer dieselben Funktionen verfügbar. Ihre Website hat 2 Designs, eines für Desktop-Computer, Laptops und Tablets, und das andere, das für Smartphones optimiert ist.

Innerhalb jedes Designs ist es auch möglich, die Art und Weise, wie die Bilder und Galerien angezeigt werden(über die Galeriestile), zu individualisieren, was auf der Startseite angezeigt wird, wenn ein Besucher auf Ihre Website kommt, usw…

Video-Tutorial: Individualisieren des Designs

Das Design-Panel

Die Einstellungen für das Design Ihrer Website stehen auf Meine Website / Design.

Hier können Sie das allgemeine Erscheinungsbild Ihrer Website auswählen und individualisieren, sowohl für die Desktop-/Tablet- als auch für die Smartphone-Version. Was in diesem Bereich gemacht wird, gilt für alle Seiten Ihrer Website.

Hier individualisieren Sie die Items, die das Layout Ihrer Website ausmachen: Logo, Navigationsleiste, Farben, Schriftarten, …

Anwenden- Rückgängig machen

Änderungen, die Sie an Ihrem Design vornehmen, werden nicht automatisch auf Ihre Live-Website übertragen, so dass Sie ohne Risiko neue Optionen ausprobieren können. Wenn Sie mit den von Ihnen vorgenommenen Änderungen nicht zufrieden sind, klicken Sie auf den Button Rückgängig machen, um das in Arbeit befindliche Design auf den Stand Ihrer Website zurückzusetzen.

Klicken Sie auf Anwenden, wenn Sie mit den Änderungen zufrieden sind. Danach ist es nicht mehr möglich, zu einem früheren Design oder einer früheren Version zurückzukehren.

Ändern und Auswählen einer Vorlage

Sie können die Vorlage unter Meine Website / Design / Vorlage ändern ändern.

Alle Funktionen sind für alle Vorlagen verfügbar, und alle Vorlagen sind in hohem Maße anpassbar. Wählen Sie eine Vorlage anhand ihres Layouts sowie der Größe und Form Ihres Logos. Wenn Sie also Bilder so groß wie möglich anzeigen möchten, empfehlen wir Ihnen eine zweispaltige Vorlage (wie Vorlage #1) als Desktop-Vorlage, insbesondere wenn Sie ein großes Logo verwenden.

Sie können Ihre Vorlagen für Desktop und Smartphones unabhängig voneinander ändern.

Wenn Sie die Vorlage wechseln, werden die integrierten Anzeige-Stilen für die Galerien zurückgesetzt (die von Ihnen erstellten Galerie-Stilen bleiben unverändert). Ihr Inhalt bleibt davon unberührt, so dass Sie die Vorlage jederzeit ändern können.

Bevor Sie die Vorlage wechseln, können Sie über das Erweiterte Einstellungen-Bedienfeld ein Backup Ihrer aktuellen Vorlage und Individualisierung erstellen, so dass Sie bei Bedarf einfach zurückkehren können.

Vorlage individualisieren

Wenn Sie die globalen Farben ändern, können Sie auf einfache Weise eine professionell aussehende und einzigartige Farbpalette erstellen, während die Farben der einzelnen Komponenten automatisch berechnet werden:

Die Optionen folgen einer Hierarchie: Was auf globaler Ebene individualisiert wird, gilt für jede einzelne Komponente, es sei denn, diese Komponente definiert ihre eigene Individualisierung. Wenn Sie mit dem Mauszeiger über eine Gruppe von Optionen fahren, sehen Sie, welche Komponenten von diesen Optionen betroffen sind:

Wenn Sie auf das „Filter”-Symbol einer Komponente klicken (z. B. die Symbole der Sozialen Netzwerke), werden alle relevanten Individualisierungsoptionen angezeigt:

Jede Einstellung verfügt über einen „Schalter”, mit dem sich die Individualisierung aktivieren oder deaktivieren lässt:

Individualisierte Farben (links) vs. automatisch aus den Hauptfarben berechnete Farben (rechts)

Galerie Anzeige-Stil

Mit den Anzeige-Stilen für Galerien können Sie die Anzeige der Bilder individualisieren, je nach dem Zweck der Galerie, in der sie sich befinden. Weitere Hilfe finden Sie im Abschnitt Anzeige-Stil für Galerien.

PhotoDeck Websites sind so gestaltet, dass sie sich automatisch an kleine Displays wie Tablets anpassen. Wenn Sie Ihr Design ändern, ist es daher wichtig, dass Sie sicherstellen, dass Ihre Website auch auf Tablets gut aussieht. Wenn Sie kein Tablet haben, verkleinern Sie Ihr Browserfenster einfach schrittweise, bis es ungefähr die halbe Breite eines Standard-Laptop-Displays hat. So bekommen Sie ein gutes Gefühl dafür, wie es sich auf kleinen Tablets verhält.

Benutzerdefiniertes CSS/HTML Design

Um noch einen Schritt weiter zu gehen, können Sie mit PhotoDeck auch den HTML/CSS-Code der Vorlage individualisieren. So können Sie die Vorlage auf eine Weise verändern, die über die Optionen der Benutzeroberfläche nicht möglich ist, oder sogar ein bestimmtes Design umsetzen. Die Nutzung dieser Option erfordert die Hilfe eines qualifizierten unabhängigen Designers. Bitte beachten Sie, dass für die Individualisierung des Codes kein technischer Support zur Verfügung steht.

Gehen Sie zu Meine Website / Design und sehen Sie sich die Basisvorlagen an. Suchen Sie zunächst nach einer Vorlage, deren Layout Ihnen am besten gefällt. Wählen Sie dann die Farbvariante, die Ihren Vorstellungen am nächsten kommt.

Wenn Sie die Vorlage gefunden haben, die Ihren Wünschen am nächsten kommt, klicken Sie auf Anwenden. Dadurch wird die Vorlage auf Ihre Website angewendet.

Voreingestellte Vorlagen sind nur der Ausgangspunkt für Ihre Individualisierung.

So fügen Sie Ihr eigenes Logo hinzu:

1. Bereiten Sie Ihr Logo in der Größe und dem Format vor, in dem es auf Ihrer Website angezeigt werden soll. Wenn es in einer Seitenspalte angezeigt werden soll, ist es am besten, die Breite von 250px nicht zu überschreiten, je nach Vorlage. Wir empfehlen, das Logo als PNG-Datei zu speichern, gegebenenfalls mit Transparenz, oder eine SVG-Grafikdatei zu verwenden, nachdem Sie sie durch einen SVG-Optimierer laufen lassen (z. B. über einen spezialisierten Online-Dienst).
2. Gehen Sie zu Meine Website / Design und öffnen Sie die Logooptionen, indem Sie auf das Filtersymbol über dem Logo klicken und die Logooptionen in der linken Spalte öffnen.
3. Klicken Sie auf die Option Ressource. Laden Sie im Popup-Fenster Ihre Logodatei hoch, oder wählen Sie eine Datei aus, die Sie zuvor in Ihr Bildmaterial & Ressourcen hochgeladen haben.
4. Ihr Logo ist nun im Vorschaufenster zu sehen. Wenn Sie damit zufrieden sind, klicken Sie auf Anwenden, um die Änderungen auf Ihre Website zu übertragen.

Sie können auch die Farben und Schriftarten Ihrer Website schnell anpassen, und zwar unter Meine Website / Design

Mit den Anzeige-Stilen für Galerien können Sie die Art und Weise, wie Galerien auf Ihrer Website angezeigt werden, ganz einfach ändern - von bildschirmfüllenden, automatisch skalierenden Slideshows bis hin zu Mosaikwänden mit Kacheln.

Ein Galerie-Stil gilt für alle Galerien, die diesen Stil verwenden.

Mit Galerie-Stilen können Sie Bilder und Galerien je nach Zweck der jeweiligen Galerie auf unterschiedliche Weise anzeigen.

Mit Galerie-Stilen können Sie zum Beispiel:

• Anzeige der Bild-/Videotitel und Informationen unter der Vorschau oder hinter einem Info-Button;
• Anzeige oder Ausblenden bestimmter Metadaten in den Galerien: Titel, Dateiname, Aufnahmedatum, Autor, CopyrightPROOF/FINAL-Status, etc.
• Ändern Sie die Größe/Qualität/Auflösung der Bilder und Videos, die auf Ihrer Website angezeigt werden;
• Ändern Sie die Größe und Positionierung der Thumbnails ;
• Lassen Sie Galerien auf Thumbnails oder auf ihrem ersten Bild öffnen;
• Galerien als Slideshows anzeigen lassen;
• Aktivieren Sie den Vollbildmodus;
• Bestimmte Komponenten, wie die Suche, ausblenden/entfernen;
• Den teilen-Button in öffentlichen Galerien anzeigen oder entfernen;
• Festlegen, wie viele Thumbnails pro Seite angezeigt werden ;
• …

Um den Anzeige-Stil einer Galerie zu ändern, öffnen Sie diese Galerie unter Meine Bilder & Videos und klicken Sie dann auf den Link, der den aktuellen Anzeige-Stil anzeigt, der sich direkt unter dem Titel der Galerie befindet.

Standard Galeriestile

Jede Vorlage enthält die folgenden Anzeige-Stilen:

Galeriestile individualisieren

Mit dem Vorschaufenster können Sie navigieren und Änderungen sehen, während Sie sie vornehmen

Vergrößerte Bilder/Videos

In diesem Bereich haben Sie die vollständige Kontrolle darüber, wie geöffnete Bilder und Videos in Ihren Galerien erscheinen. Hier können Sie auch das Verhalten von Slideshows für Vollbild-Diashows mit automatischer Skalierung anpassen, z. B. im Stil Portfolio.

In diesem Bereich können Sie die Größe/Qualität/Auflösung der Bilder und Videos einstellen, die auf Ihrer Website angezeigt werden.

Beachten Sie, dass die Bildqualität auf einer Website immer ein Kompromiss ist zwischen:

• angezeigte Größe auf dem Bildschirm
• Qualität
• Ladezeit (deren Bedeutung allzu oft übersehen wird)

Sie können verschiedene Einstellungen in den Anzeige-Stilen der Galerien vornehmen, um die Qualität zu maximieren:

• eine höhere Größe verwenden - dies führt zu längeren Ladezeiten
• Deaktivieren Sie die Vergrößerung in den Einstellungen für die automatische Skalierung
• Reduzieren Sie den zulässigen Ausschnitt
• Stellen Sie außerdem sicher, dass Sie Dateien hochladen, die mindestens 3000px breit sind.

Thumbnails für Bilder/Videos

Dieser Bereich steuert die Thumbnails, die die eigentlichen Bilder und Videos einer Galerie öffnen.

Wählen Sie aus großartigen Voreinstellungen wie dem magischen Wandmosaik oder bearbeiten Sie kleine Details, wie z. B. ob Download-Symbole auf den Thumbnails angezeigt werden sollen.

Galerie-Cover

Dieser Bereich steuert die Thumbnails, die Untergalerien öffnen, wie die Hauptgalerie „Galerien”.

Sie können hier zum Beispiel verschiedene Möglichkeiten ausprobieren, um die Titel der Galerien auf oder unter ihren Thumbnails anzuzeigen.

Eine bemerkenswerte Option ist hier der Parameter Ein Klick auf das Titelbild der Galerie öffnet:. Dieser bestimmt, ob Besucher ein großes Bild / Slideshow oder Thumbnails sehen, wenn sie eine Galerie zum ersten Mal betreten.

Thumbnail-Seiten

Hier finden Sie Optionen, die sowohl für Seiten mit Galerie-Covern als auch für Bild-/Video-Thumbnails gelten.

Komponenten in diesem Anzeige-Stil ausblenden

In diesem Bereich können Sie Teile Ihres Designs in den Galerien ausblenden, die diesen Galerie-Stil verwenden.

Duplizieren eines Galerie-Stils und Erstellen eines eigenen Stils

Sie können einen bestehenden Galerie-Stil aus dem Anpassungsfenster über Erweiterte Einstellungen / Erstellen Sie einen neuen Stil, der auf diesem hier basiert duplizieren.

Auf diese Weise können Sie neue Stile für bestimmte Galerien erstellen, und Ihre eigenen Stile werden beim Wechsel der Vorlage nicht zurückgesetzt.

Die Startseite („Home”) ist das, was Besucher als erstes sehen, wenn sie die URL Ihrer Website aufrufen. Sie kann unter Meine Website / Startseite geändert werden.

Die Startseite kann sein:

• Der Index aller Galerien (Thumbnails). Dies ist die Standardeinstellung. Versteckte Galerien sind ausgeschlossen.
• Eine bestimmte Galerie. Sie können zum Beispiel eine Galerie mit einer Auswahl Ihrer einzigartigsten Fotos und Videos anzeigen (siehe unten, um eine beeindruckende Slideshow auf der Startseite zu erstellen).
  Wenn Sie Ihre Galerien nach Kategorien geordnet haben (z. B. „Portfolio”, „Archiv”, …), können Sie auch die wichtigste Galerie/Kategorie auf der obersten Ebene als Startseite einrichten. Der Index (Thumbnails) der Untergalerien wird dann angezeigt.
• Eine benutzerdefinierte Seite, wenn Sie eine freie Seite auf Ihrer Startseite bevorzugen, zum Beispiel mit einer ganzseitigen Slideshow im Hintergrund (siehe Anleitung unten). Sie können eine andere Startseite für Ihre Website für Smartphones auswählen.

Wenn Sie eine bestimmte Galerie als Startseite festlegen, müssen Sie dafür sorgen, dass die anderen Galerien über Links in Ihrer Navigationsleiste zugänglich sind. Weitere Hilfe finden Sie im Abschnitt über Menüs!

TUTORIAL 1: Einen Hintergrundbild, einen Video oder eine Slideshow auf Ihrer Startseite im Vollbildmodus anzeigen

Slideshow auf der Startseite mit mehreren Bildern und Übernahme des Textes aus den Bildtiteln

1. Erstellen Sie eine neue Benutzerdefinierte Seite unter Meine Website / Seiten nicht im Menü;
2. Lassen Sie den Seiteninhalt leer, und klicken Sie auf den Button Banner / Hintergrund;
3. Wählen Sie die Vorlage Website-Hintergrund, fügen Sie optional den Text hinzu, der über der Slideshow angezeigt werden soll, und klicken Sie auf den Button Erstellen;
4. Wählen Sie die Galerie aus, aus der Sie die Slideshow-Bilder/Videos nehmen möchten. Sie können auch die Bilder, die Sie einfügen möchten, selbst auswählen (die Slideshow kann auf ein einzelnes Bild oder Video beschränkt werden)
5. Passen Sie die Einstellungen unter dem Abschnitt Texte nach Ihrem Geschmack an. Wenn Sie mehrere Bilder anzeigen, können Sie anstelle eines festen Textes (oder zusätzlich zu diesem) auch die Bildtitel verwenden, damit sich der Text mit jedem Bild ändert. Sie können auch die Helligkeit der Slideshow und die Textfarbe zur besseren Lesbarkeit anpassen;
6. Schließen Sie das Banner/Hintergrund-Popup und aktivieren Sie auf dem Tab Seiteneinstellungen der Seite das Häkchen Diese Seite zur Startseite machen.

TUTORIAL 2: Eine automatisch skalierende Slideshow auf Ihrer Startseite anzeigen

1. Legen Sie Ihre Startseite auf eine bestimmte Galerie fest, die die Bilder enthält, die Sie anzeigen möchten (siehe oben). Dies kann eine Ihrer bestehenden Galerien sein oder eine neue Galerie, die zu diesem Zweck erstellt wurde.
2. Stellen Sie sicher, dass diese Galerie den Anzeige-Stil „Portfolio” verwendet. (Sie können auch einen anderen Galerie-Stil verwenden, aber dieser muss so eingestellt sein, dass die Galerien bis zum ersten Bild geöffnet werden und sowohl die automatische Skalierung als auch die Slideshow aktiviert sind.)
3. Passen Sie bei Bedarf den Timer der Slideshow, den Schleifentyp, den Übergangsstil und den maximalen Bildausschnitt an, indem Sie den Anzeige-Stil bearbeiten. Sie können auch die Buttons „Auswahl” und „E-Commerce” ausblenden, falls erforderlich.
4. Optional: Wenn Sie möchten, können Sie die Galerie auch ausblenden, damit sie nicht im Thumbnails-Index der Galerie erscheint.

Die Größe und das Layout der Slideshow innerhalb der Seite richten sich direkt nach Ihrem Design.

Über den Tab Erweiterte Einstellungen des Design-Editors können Sie Ihr Design noch weiter individualisieren, indem Sie die Anzeige-Stils der Galerie anpassen.

Beachten Sie, dass dies eine zeitaufwändige Aufgabe sein kann, die keine direkten Auswirkungen auf Ihr Business hat. Sofern Sie nicht nur eine einfache Portfolio-Website erstellen, empfehlen wir Ihnen, an dieser Stelle mit dem Einrichten Ihrer Website und der Einstellung von E-Commerce- und/oder Proofing-Funktionen fortzufahren.