Configurer l’apparence du site (le thème)

Ajouter un thème

Avant d’écrire notre premier article, nous allons choisir un thème. Un thème de site web (souvent appelé template en anglais) est un ensemble de fichiers prédéfinis qui déterminent l’apparence générale, la mise en page et parfois certaines fonctionnalités complémentaires d’un site web.

Vous pouvez utiliser le thème fourni par défaut avec le logiciel. Vous pouvez aussi télécharger différents thèmes sur le site web de Publii.

Figure 3 : Choisir un thème

Le choix d'un thème se déroule en 3 étapes :

1. Choisir un thème : Publii propose de parcourir des exemples de sites web créés avec les différents thèmes disponibles. Cette première étape n’installe rien sur votre application. Elle permet uniquement de télécharger des thèmes compactés au format zip sur le disque dur de votre ordinateur. Cliquez sur les 3 points verticaux, en haut à droite de la page principale de Publii. Dans le menu qui s'ouvre, cliquez sur "Thèmes". Un nouvel, écran apparait, cliquez sur "Obtenez plus de thèmes". Vous êtes dirigé sur une page internet où se trouvent proposés des thèmes, certains gratuits d'autres payants. Vous pouvez télécharger tous les thèmes qui vous intéressent. Je vous propose de télécharger le thème Mercury (recommandé dans le cadre de ce tutoriel pour ce premier contact avec Publii).
2. Installer un thème : Dans cette étape, vous pouvez installer 1 ou plusieurs thèmes. Cliquez sur le bouton "Ajouter un thème" (Voir la figure 2).En vous déplaçant vers le répertoire où sont les thèmes que vous avez téléchargés, sélectionnez le fichier mercury_3.2.0.0.zip pour installer le thème sur votre ordinateur. Une fois les thème installés, cliquez sur le bouton “Retour” pour revenir à la page d’accueil du logiciel.
3. Activer un thème : Le thème est installé, mais pas encore activé. Vous choisirez et activerez un thème pendant le réglage des paramètres de votre site (menu de gauche “Paramètres du site”). Vous pouvez ajouter autant de thèmes que vous le souhaitez à l’application Publii. Cependant, on ne peut en utiliser qu’un seul à la fois. Avant d'accéder aux réglages du thème, vous allez l'activer. Cliquez sur “Paramètres du site” dans le menu de gauche de Publii (voir figure 2). Puis sélectionnez un thème parmi ceux que vous avez installés.

💡 Ce thème peut être traduit en français pour en faciliter l’utilisation aux non anglophones. Une méthode simple sera présentée plus loin dans ce document.

Réglages du thème

Vous accédez aux réglages du thème que vous avez choisi pendant les réglages des paramètres du site. Attention, les options de réglages des thèmes peuvent se présenter différemment selon le thème que vous aurez choisi. Avant un changement de thème, pensez à sauvegarder votre site.

Cliquez sur "Thèmes" dans le menu de gauche de Publii.

Paramètres de base

Dans les paramètres de base du thème, il y a peu de choses à modifier. Vous pouvez laisser les choix par défaut et y revenir si nécessaire par la suite. Vous pouvez ajouter un logo, c'est facultatif mais conseillé. Un clic sur ce logo renvoie votre visiteur à la page d’accueil de votre blog. Vous pouvez utiliser une petite image de type icône (.ico) comme celle ci-dessus. L’intérêt de ces icônes est de présenter un fond d’image transparent. Ils s’adapteront à votre site, quelle que soit la couleur de vos fonds de pages.

Paramètres personnalisés

Comme pour les paramètres avancés du site, il faudra descendre vers le bas de la page pour accéder aux différentes options de réglage du thème. Utilisez la molette de votre souris ou la flèche vers le bas de votre clavier. Nous n'aborderons pas tous les paramètres dans ce document. Seuls ce qui nous ont semblé incontournables pour la mise en route de votre site ont été cités. Là encore, vous pourrez modifier ces options quand votre site sera prêt à être publié.

Options layout

• Hero section : c’est l’entête de votre blog. Ajouter un texte, une image... C’est dessous cette présentation que viendront s’afficher vos articles de blog.
• Filtrer par Tags (activer “enable post filter ”). Les tags sont des étiquettes ajoutées à vos articles de blog. Ils sont utiles pour que les visiteurs filtrent le contenu de votre site.
• Disposition visuelle (Grid type) : Masonry. Ce type de grille adapte au mieux la disposition des images de vos page en fonction de leur taille et de leur orientation (paysage ou portrait). Il s'agit ici des images d'illustration de la page d'accueil de votre blog. Pour chaque article, une image cliquable est affichée. Pour une présentation optimale, il est préférable d’utiliser des images de même orientation.
• Disposition de la page d’accueil (homepage layout) : il s’agit du nombre de colonnes utilisées pour afficher les articles de blog. Bien sûr, ça ne concerne pas les affichages sur smartphone. Sur un ordinateur, 3 est un bon compromis.
• Options Réseaux sociaux (share buttons) : Désactiver toutes les options. Vous pourrez revenir par la suite sur ces réglages.
• Options Pied de page (Footer ) : Ce texte apparaîtra sur toutes les pages de votre site. Vous pouvez y écrire un copyright, une citation... Décochez “follow button”.
• Options Additional : Format de date : JJ/MM/AAAA, pour avoir une date au format français.
• Options de l’auteur : Si vous êtes le seul rédacteur de votre site désactivez tous les boutons.
• Options de publication : Vous pouvez mettre toutes les options sur disable sauf :
  1. Featured image width : “normal”
  2. la date (display date) : “enable”. Affiche la date de publication de votre article.
  3. les étiquettes (display tags) : “enable”. Affiche les étiquettes qui caractérisent votre article.
  4. la navigation entre articles (display post navigation) : “enable”. Affiche en bas de page, des flèches qui renvoient à l’article suivant ou au précédent.
  5. Options de page : Toutes les options sont marquées "disabled", c’est à dire désactivées. Sauf l’option "featured image width" que vous marquerez à normal.

⚠️ Encore une fois, n'oubliez pas de cliquer sur "Enregistrer" avant de quitter la page d’options du thème.