Démarrage : Personnalisation du thème

Dans ce chapitre, nous allons commencer à personnaliser le thème de votre site, de sorte qu’il corresponde à votre identité visuelle, et que vous vous familiarisiez avec les possibilités de personnalisation du système.

Tout changement peut mettre plusieurs minutes à être visible sur votre site, le temps que le cache de performance soit mis à jour.

Avant de personnaliser le thème, assurons-nous que les paramètres de base de votre site sont en place. Allez sur Mon site / Installation / Nom & URL.

• Ajustez le nom de votre site (le nom doit rester court !)
• Si besoin, ajustez l’URL de votre site sous photodeck.com. Vous pourrez toujours connecter votre propre domaine plus tard.
• Ajustez votre devise et la langue principale de votre site
• Souvenez vous de cliquer sur Enregistrer!

Un thème PhotoDeck ne concerne que le style et la disposition générale de votre site. Les thèmes sont comme des « peaux », les mêmes fonctionnalités sont disponibles pour tous les thèmes.

Il est également possible de personnaliser grandement la manière dont les images et galeries sont affichées (via les Styles d’affichage des galeries), ce qui est montré en page d’accueil quand un visiteur arrive sur votre site, etc…

Tutoriel vidéo: Personnalisation du thème

Le panneau Design

Les paramètres de design de votre site web sont à Mon site / Design.

C’est ici que vous choisissez et personnalisez la « peau » de votre site. Ce qui est fait sur sur panneau s’applique à toutes les pages de votre site.

C’est également ici que vous personnalisez les composants qui forment la mise en page de votre site : logo, menu de navigation, couleurs, polices de caractères…

Appliquer - Abandonner

Les changements que vous effectuez sur le thème ne sont pas automatiquement appliqués sur votre site « live », vous pouvez donc essayer des options sans risque. Si vous souhaitez annuler les changements, le bouton Abandonner remplacera le thème en cours par ce qui est sur votre site.

Cliquez sur Appliquer lorsque vous êtes satisfait des changements apportés. Vous ne pourrez ensuite plus annuler.

Changement et sélection d’un thème

Vous pouvez changer de thème sous Mon site / Design / Changer de thème.

Toutes les fonctionnalités sont disponibles pour tous les thèmes, et tous les thèmes sont hautement personnalisables. Choisissez un thème en fonction de sa mise en page et de la taille et de la forme de votre logo. Les images utiliseront l’espace laissé libre par le logo et le menu, donc si vous souhaitez afficher des images aussi grandes que possible, nous vous recommandons un thème à deux colonnes (comme le thème #1) comme thème ordinateur, surtout si vous utilisez un logo de grande taille.

Lorsque vous changez de thème, les styles d’affichage de la galerie sont réinitialisés (les styles d’affichage de la galerie que vous avez pu créer restent inchangés). Votre contenu n’est pas modifié, vous pouvez donc changer de thème à tout moment.

Avant de changer de thème, vous pouvez faire une sauvegarde de votre thème actuel et de vos personnalisations via le panneau Avancé, ce qui vous permettra de revenir facilement en arrière si nécessaire.

Personnalisation du thème

Changer les couleurs globales permet de facilement créer une palette professionnel et unique, lorsque les couleurs individuelles des composants sont calculées automatiquement :

Les options sont appliquées de forme hiérarchique : ce qui est personnalisé au niveau global, par exemple, s’appliquera à un élément individuel, sauf si celui-ci a sa propre personnalisation. Passer la souris sur un groupe d’option montre les composants concernés par ces options 

De même, un clic sur l’icône « filtre » d’un composant de votre thème (par exemple les icônes de vos réseaux sociaux) mettra en avant toutes les options de personnalisation pertinentes 

Chaque option a un « interrupteur » qui permet d’activer ou de désactiver sa personnalisation :

Styles d’affichage des galeries

Les Styles d’affichage des galeries vous permettent de personnaliser la manière dont les images sont affichées, selon l’objectif / le rôle principal de la galerie dans laquelle elles se trouvent. Voyez la section sur les Styles d’affichage des galeries pour plus de détails !

Les sites PhotoDeck sont conçus pour s’adapter automatiquement aux petits écrans des tablettes. Lorsque vous changez votre thème, il est donc important de vous assurer que votre site continue à être professionnel sur tablettes. Si vous n’avez pas de tablette, réduisez progressivement la taille de la fenêtre de votre navigateur jusqu’à ce qu’elle fasse environ la moitié de la taille d’un écran d’ordinateur portable.

Design CSS/HTML personnalisé

Pour aller plus loin, PhotoDeck vous permet également de personnaliser le code HTML/CSS du thème. Cela vous permet de modfiier le thème d’une manière qui n’est pas possible via les options proposées dans l’interface, ou même de mettre en œuvre un design spécifique. L’utilisation de cette option nécessite l’aide d’un designer indépendant qualifié. Veuillez noter que le support technique n’est pas disponible pour le codage personnalisé.

Rendez-vous sur Mon site / Design et explorez les thèmes de base. Cherchez d’abord un thème dont la mise en page vous plaît. Ensuite, choisissez la variante de couleur la plus proche de ce que vous souhaitez.

Lorsque vous avez trouvé le thème de base le plus proche de ce que vous souhaitez, cliquez sur Appliquer. Ceci appliquera le thème choisi à votre site « live ».

Les thèmes de base ne sont que des points de départ pour votre personnalisation.

Pour ajouter votre propre logo :

1. Préparez votre logo dans la taille à laquelle il sera affiché sur votre site. S’il est destiné à être affiché dans une colonne sur le côté, il est préférable de ne pas dépasser 250 pixels de largeur, selon le thème. Nous vous recommandons d’enregistrer votre logo au format PNG, sur fond transparent si nécessaire, ou d’utiliser un fichier graphique SVG en le passant au préalable dans un optimiseur de SVG (par ex via un service en ligne spécialisé).
2. Allez sur Mon site / Design et ouvrez les options du logo en cliquant sur l’icône filtre sur le logo et sélectionnant les options du logo dans la colonne de gauche.
3. Cliquez sur l’option Image, et dans la popup, importez votre logo ou sélectionnez un fichier déjà importé dans vos Visuels & ressources.
4. Votre logo est maintenant disponible dans la fenêtre de prévue. Lorsque vous êtes satisfait, cliquez sur Appliquer pour appliquer les changements à votre site Live.

Vous pouvez également ajuster rapidement les couleurs et polices utilisées sur votre site, toujours sous Mon site / Design

Les styles des galeries vous permettent d’afficher les images et les galeries d’une manière différente, en fonction de l’objectif de chaque galerie.

Un style de galerie s’applique à toutes les galeries utilisant ce style.

Les styles d’affichage des galeries permettent de modifier facilement l’affichage des galeries et des images/vidéos/documents individuels sur votre site web. Ils vous permettent par exemple de :

• Choisir d’afficher ou de supprimer / cacher le titre de l’image / de la vidéo et les informations sous l’aperçu, ou derrière un bouton Info ;
• Afficher ou masquer certaines informations de métadonnées dans les galeries : titre, nom du fichier, date de prise de vue, auteur, copyright, état PROOF/FINAL, etc…
• Modifier la taille / qualité / résolution des images et vidéos affichées sur votre site web ;
• Modifier la taille et le positionnement des vignettes ;
• Permettre l’ouverture des galeries sur les vignettes ou sur leur première image ;
• Permettre l’affichage des galeries sous forme de diaporama ;
• Cacher / supprimer certains composants, comme la Recherche ;
• Afficher ou supprimer le bouton de partage dans les galeries publiques ;
• Définir le nombre de vignettes affichées par page ;
• …

Pour changer le style d’affichage utilisé par une galerie, ouvrez cette galerie sous Mes images & vidéos, puis cliquez sur le lien affichant le style d’affichage en cours d’utilisation, situé juste en dessous du titre de la galerie.

Styles d’affichage des galeries par défaut

Chaque thème comprend les styles d’affichage par défaut suivants :

Personnaliser les styles d’affichage des galeries

Les styles d’affichage des galeries peuvent être personnalisés avec le même éditeur puissant que les pages personnalisées, offrant une liberté totale sur leur mise en page, et des dizaines de paramètres pour personnaliser ce qui doit être affiché et comment, et faire correspondre parfaitement le style de la galerie avec son utilisation prévue.

Pour accéder à cet outil avancé, allez dans Mon site / Design. Naviguez vers une galerie utilisant le style que vous souhaitez modifier et cliquez sur le bouton pour personnaliser le style de la galerie. Cet outil est également accessible depuis la popup de sélection du style d’affichage pour toute galerie sous Mes images & vidéos.

Pages de vignettes

Ce panneau contrôle les pages de vignettes qui listent les sous-galeries et/ou les fichiers d’une galerie. Vous pouvez modifier la mise en page de ces pages, par exemple pour ajouter un champ de recherche bien visible à toutes les galeries utilisant ce style d’affichage.

En particulier, l’élément principal Contenu de la galerie comporte de nombreux paramètres qui vous permettent de modifier la manière dont les vignettes sont affichées :

• Vignettes des images/vidéos: choisissez parmi de superbes préréglages tels que la mosaïque murale magique, ou modifiez de petits détails tels que l’affichage ou non d’icônes de téléchargement sur les vignettes.
• Couvertures des galeries: Cette section contrôle les vignettes de couverture qui ouvrent les sous-galeries, comme la galerie principale « Galleries ». Par exemple, vous pouvez essayer ici différentes façons d’afficher les titres des galeries sur ou sous leurs vignettes. Une option notable est le paramètre Un clic sur la couverture d’une galerie ouvre:. Il déterminera si les visiteurs verront une grande image / un diaporama ou des vignettes lorsqu’ils entreront pour la première fois dans une galerie.
• Pages de vignettes: Vous trouverez ici des options qui s’appliquent à la fois aux pages de couverture des galeries et aux vignettes des images/vidéos.

Pages de détail

L’élément Titre, navigation et / ou boutons permet d’afficher titre et boutons. Vous pouvez avoir plusieurs éléments de ce type, par exemple pour afficher le titre et les boutons séparément, ou pour afficher différents boutons à différents endroits de la mise en page.

L’élément principal Média agrandi comporte de nombreux paramètres qui vous permettent de modifier la manière dont les images/vidéos sont affichées. C’est également ici que l’on peut ajuster le comportement d’avance automatique activé par exemple dans le style Vitrine par défaut.

Parmi ces paramètres, le paramètre Taille du fichier de l’image agrandie vous permet d’ajuster la taille/qualité/résolution des images et vidéos affichées sur votre site web.

Notez que la qualité des images sur un site web est toujours un compromis entre :

• la taille affichée à l’écran
• la qualité
• le temps de chargement (son importance est trop souvent négligée)

Vous pouvez ajuster différents paramètres dans les styles d’affichage des galeries pour maximiser la qualité :

• utiliser une taille plus grande - le temps de chargement sera plus long
• ne pas activer l’agrandissement dans les paramètres d’agrandissement automatique
• ne pas autoriser de rognage
• veillez également à importer des fichiers d’au moins 3 000 px de large.

Dupliquer un style de galerie et créer le vôtre

Vous pouvez dupliquer un style d’affichage existant depuis son panneau de personnalisation sous l’onglet Avancé / Créer un nouveau style à partir de celui-ci.

Cela vous permet de créer de nouveaux styles pour des galeries spécifiques, et vos propres styles ne sont pas réinitialisés lorsque vous changez de thème.

La page d’accueil est ce que les visiteurs voient lorsqu’ils accèdent à l’URL de votre site. Elle peut être changée sous Mon site / Page d’accueil.

La page d’accueil peut être :

• L’index des galeries (vignettes). C’est le réglage par défaut. Les galeries cachées ne sont pas incluses.
• Une galerie particulière. Par exemple, vous pouvez avoir une galerie comprenant une sélection de vos images / vidéos les plus uniques, et la mettre sur votre page d’accueil (voir ci-dessous pour créer un diaporama impressionnant).
  Alternativement, si vous avez organisé vos galeries par catégorie (par ex. “Portfolio”, “Photothèque”, …), vous pouvez mettre en page d’accueil la galerie/catégorie la plus importante. L’index des vignettes des sous-galeries sera alors affiché.
• Une page personnalisée, si vous préférez une page de contenu libre, par exemple avec un diaporama en fond de page (voir tutoriel ci-dessous). Vous pouvez choisir une page d’accueil différente pour votre site smartphone.

Notez que si vous placez une galerie spécifique en page d’accueil, vous devrez vous assurer que les autres galeries sont bien accessibles, via des liens dans votre menu de navigation. Référez-vous à l’aide sur les menus pour plus d’information !

TUTORIEL 1 : Afficher une image, vidéo ou un diaporama en fond de page d’accueil

1. Créez une nouvelle page personnalisée sous Mon site / Pages hors menu ;
2. Laissez le contenu de la page vide, et cliquez le bouton Bannière / fond de page ;
3. Sélectionnez le modèle Fond de page, entrez le texte à afficher sur le diaporama (facultatif), et cliquez sur le bouton Créer ;
4. Sélectionnez la galerie de laquelle le diaporama doit tirer les images / vidéos. Vous pouvez également choisir à la main les images que vous souhaitez intégrer (le diaporama peut se limiter à une seule image ou vidéo) 
5. Ajustez à votre convenance les paramètres sous la section Textes. Si vous affichez plusieurs images, au lieu (ou en complément) du texte fixe, vous pouvez utiliser les titres des images afin que le texte change à chaque image. Vous pouvez également ajuster la luminosité du diaporama et la couleur du texte pour une meilleure lisibilité ;
6. Fermez la popup de la bannière / fond d’écran, et sous l’onglet Paramètres de la page de la page, activez l’option Cette page est la page d’accueil.

TUTORIEL 2 : Afficher un diaporama en taille automatique sur la page d’accueil

1. Placez en page d’accueil une galerie spécifique, contenant les images du diaporama (voir ci-dessus). Il peut s’agir d’une galerie déjà présente sur votre site, ou d’une galerie créée spécialement à cet effet.
2. Assurez-vous que cette galerie utilise le style d’affichage par défaut “Vitrine”. (Vous pouvez utiliser un autre style d’affichage, mais il doit être configuré pour ouvrir les galeries sur leur première image, avec le redimensionnement automatique et le diaporama activés.)
3. Au besoin, ajustez la durée de transition, le type de boucle, le style de transition et le rognage maximum des images, en éditant le style d’affichage. Vous pourrez aussi cacher les boutons e-commerce et sélection si nécessaire.
4. Facultatif : si vous le souhaitez, vous pouvez également cacher la galerie afin qu’elle n’apparaisse pas dans l’index des vignettes des galeries.

La taille et la position du diaporama sont définies directement par votre thème.

Il est possible d’aller plus loin dans la personnalisation du thème, via l’onglet Avancé de l’éditeur de thème, ainsi qu’en personnalisant les Styles d’affichage des galeries.

Notez que cela peut être une tâche prenante sans impact direct sur votre travail. A moins que vous ne construisiez qu’un simple site portfolio, nous vous recommandons, à ce stade du guide, de continuer à remplir votre site et de mettre en place les fonctions de commerce électronique ou de livraison de reportages.