En tant qu’utilisateur, développeur et formateur, j’ai toujours apprécié l’évolution de WordPress. De version en version, le CMS est de plus en plus accessible et s’ouvre toujours davantage au plus grand nombre. Une personne qui ne sait pas coder, qui n’a pas beaucoup de sous et pas vraiment de notions de design pourra, en investissant un peu de temps, réaliser un site tout à fait convenable et convaincant. Pour ajouter encore du confort aux concepteur.se.s WordPress, en décembre 2018, est sorti le nouvel éditeur, qui permet à l’aide de blocs, de composer une page.
Dans le même temps, les standards du design ont changé avec l’utilisation du material design: on pense plus facilement les contenus autour de l’horizontalité, on superpose les éléments, on crée des grilles, on utilise beaucoup d’images et on laisse facilement des espaces vides. On crée des rythmes visuels entre les différents éléments. Surtout, on pense de plus en plus à la personne qui va aller sur le site, on va à l’essentiel, on ne surcharge pas les pages. Une réflexion sous-jacente accompagne la conception d’un site et on dispose l’information de manière pertinente et harmonieuse. Et bien sûr les interfaces sont pensées pour les différentes tailles d’écran et les différentes manières de naviguer sur un site web.
Neve: un thème WordPress à l’ère Gutenberg
L’arrivée du nouvel éditeur et ces nouvelles tendances marquent un tournant. À son arrivée le nouvel éditeur portait le nom de Gutenberg. Un patronyme annonciateur d’une nouvelle ère dans l’édition de contenu dans WordPress; on ira plus vite et les contenus sont réutilisables comme si le monde d’avant du manuscrit avec WYSIWYG était révolu.
Dorénavant, la page blanche ne fait plus peur. Au contraire, elle est une potentialité. D’un bloc à l’autre, on dispose des éléments parfois sur toute une largeur de page, on choisit les espacements, on peut mettre des arrière-plans en couleur et on met des titres sur des bannières avec une facilité déconcertante et sans utiliser la moindre extension du WordPress de base.
Thème Neve
Neve est un thème créé dans cet esprit. Il suit l’arrivée de Gutenberg. Le thème est sorti en avril 2019. Le titre de l’article de Themeisle pour annoncer la sortie du thème annonce ce programme:
The Lightweight Theme Built for Speed in the Gutenberg Era _meet neve
Un thème léger, rapide, adapté pour l’ère Gutenberg.
Neve est un thème parfait pour les débutant.e.s. À l’aide de l’éditeur de WordPress, et quelques réglages du thème, vous pouvez facilement personnaliser le thème, lui donner votre image et ce sans écrire une seule ligne de codes.
J’avais déjà parlé de ce thème dans un autre article autour de la découverte de blocs additionnels.
Ce thème a beaucoup d’avantage et il très centré sur la facilité et le confort utilisateur.trice
- Neve est gratuit. Il y a des options payantes mais avec la version de base, vous pouvez déjà aller très loin.
- Il est Gutenberg friendly
- Il est parfaitement adapté pour accueillir l’extension Woocommerce
- Il est très léger et rapide.
- Il propose des mise en pages clés en main
- Il comporte un constructeur pour l’En-tête et le Pied de Page.
On va voir tout ça en détails.
On verra tout ce qu’on peut faire dans la version gratuite et de temps en temps, nous verrons ce que propose les versions payantes.
La personnalisation
On va commencer par voir que ce thème, comme OceanWP ou Astia, a beaucoup de possibilités de personnalisation.
Mise en page
Contenu
Ici on peut changer au pixel près la largeur du contenu de nos pages. Et pour la page de blog ou d’archive ainsi que l’affichage d’un article, on peut décider si c’est le conteneur qui s’applique ou alors on occupe toute la largeur de la page. On peut faire de même pour toutes les autres pages en sélectionnant le menu déroulant pour “Style de conteneur par défaut”.
De plus, on peut nuancer la largeur en fonction du device (smartphone ou tablette).
Si on sélectionne tablette ou smartphone, on peut régler la largeur de manière différente pour chaque device:
Contenu / Barre
Dans cette section, on peut décider de supprimer la barre, et le pourcentage qu’occupe le contenu de la page en fonction de la largeur totale.
Si vous sélectionnez “Activer les options avancées”, vous pouvez personnaliser l’affichage de la barre et le pourcentage du contenu de manière différente pour la page de blog, une page article et pour les autres pages.
Page Blog / Archive
Avec Neve, on peut changer facilement l’affichage de la liste des articles sur la page blog. On peut afficher en colonnes ou en grilles, on peut choisir la longueur des extraits, on peut changer la pagination, mettre des ombres sur l’image à la une. De plus, on peut modifier l’apparence des métadonnées (auteur de l’article, date, commentaires et catégorie).
Ainsi en quelques cliques, on peut afficher nos articles comme ceci:
ou comme ceci:
Blog booster
Blog Booster est un module de la version payante.
Pour la page Blog / Archive, nous pouvons:
- Changer l’ordre d’affichage des articles, des plus anciens aux plus récents par exemple, ou alors afficher en priorité les articles mis à jour
- Choisir le séparateur des métadonnées de chaque article
- Changer la taille pour l’affichage de l’avatar
- Modifier l’affichage du ‘Lire la suite’
et pour un article simple, nous pouvons:
- Afficher des boutons de partage
- Ajouter la notice biographique de l’auteur
- Afficher des articles associés
En-tête
Pour l’En-tête, il existe un constructeur qui permet d’ajouter et déplacer des éléments très facilement en glissant déposant. Des éléments peuvent être ajoutés en cliquant sur les boutons “+” qui apparaissent au survol.
Ce constructeur se trouve en bas de la zone de visualisation divisé en trois rang.
Le rang médian correspond à notre à notre En-tête principal. Le rang du haut est consacré à ce qui pourrait être affiché en dessus de l’En-tête et le troisième correspond à ce qui pourrait être affiché en dessous.
Ici par exemple, je décide d’intégrer un icône ‘recherche’ à la suite de mon menu principal.
pour obtenir ceci:
en cliquant sur les différents éléments, nous ouvrons dans la barre de gauche un tableau de bord qui permet de faire différents réglages. Si je sélectionne par exemple Logo et identité du site, je peux aller changer plusieurs paramètres en ce qui concerne l’affichage du logo, du titre du site et du slogan.
Trois niveaux de réglages sont affichés:
Dans l’onglet Général, on peut changer la disposition du logo par rapport au titre et au slogan.
Ici par exemple, je décide de n’afficher que le logo
et on peut notamment changer la taille du logo très facilement ici:
Dans la section ‘Mise en page’ on peut définir la justification du texte, les marges intérieurs (paddings) et les marges.
et dans la partie ‘Style’ on peut choisir la couleur pour le titre et le slogan.
On peut ainsi modifier tous les éléments qui composent l’En-tête.
Par exemple, dans la section ‘Style’ du menu on peut choisir les couleurs des items, y compris au survol, y compris pour l’élément actif.
De plus, on peut choisir le le mode de coloris au survol:
- un changement de couleur
- un encadrement
- un soulignage
- un surlignage
Ici par exemple, je choisis un soulignage au survol des items du menu.
Dans cette section ‘Style’, on peut également modifier la typographie pour les éléments du menu. On verra cette partie-là plus loin quand il sera question de la section Typographie de la personnalisation.
Paramètres généraux de l’En-tête
Quand on survol un rang du constructeur de l’En-tête, une route dentée apparaît
En cliquant sur celle-ci, nous faisons apparaître le tableau de bord pour les paramètres principaux de l’En-tête.
Dans la section Mise en page, on peut choisir que l’En-tête occupe:
- la largeur du contenu défini dans la section ‘Mise en page’ de la personnalisation
- toute la largeur de la page
- un contenu à l’intérieur du contenu défini dans la section ‘Mise en page’ de la personnalisation
Dans la partie Style, on peut choisir la hauteur en px de l’En-tête, choisir le mode clair ou foncé et définir l’arrière-plan (couleur ou image)
Ainsi en quelques cliques, on obtient un En-tête personnalisé.
Il suffit d’ajouter l’extension Sticky Menu (or Anything!) on Scroll pour avoir un menu qui reste collé en haut de la page quelque soit le niveau du scroll.
Vous allez dans les réglages de l’application.
Vous ajoutez l’En-tête ici:
Et le tour est joué ! Vous avez un En-tête personnalisé et qui reste visible même quand on scroll dans la page.
Header Booster
Header Booster est un module de la version payante.
Header Booster comporte notamment:
- Un affichage des En-têtes différents en fonction du contenu à afficher. Par exemple, on peut créer un En-tête différent pour l’affichage des pages et des articles.
- Un composant pour afficher les liens sociaux
- Un composant ‘contact’ qui permet d’afficher le mail, le téléphone et l’adresse postale avec des pictogrammes.
- Une modification de l’apparence de l’En-tête en fonction du scroll
- Un En-tête collant (sticky)
Le Pied de page
Pour la conception du Pied de page c’est la même chose. Un constructeur permet de disposer des zones de Widgets de la même manière que l’En-tête. Nous avons deux rang: haut du pied de page et bas du pied de page. Par défaut, il y a la fameuse mention: Propulsé par WordPress
Pour les Widgets, rien de nouveau et pour celles et ceux qui ne connaissent pas, je vous laisse lire ce tutoriel
Ici l’avantage avec Neve c’est que tu peux changer l’emplacement des différentes zones de Widgets très facilement. Tu sélectionnes une zone d’emplacement
et tu choisis une zone de Widgets, de la même qu’on attribue des zones dans l’administration des Widgets ordinaires. Si je sélectionne ‘Pied un’ par exemple, un tableau de bord spécifique s’ouvre dans la barre.
Ainsi, on peut ajouter le Widget désiré directement avec le bouton “Ajouter un Widget”
En disposant les zones de Widgets sur le constructeur du pied de page, en sélectionnant les largeurs qu’occupe chaque Widget, et choisissant la bonne justification, nous pouvons arriver à un Pied de Page personnalisé et opérationnel.
Pour avoir un texte blanc, vous devez sélectionner la roue dentée pour ‘Haut du Pied de Page’ ou ‘Bas du Pied de Page’, et dans ‘Style’ sélectionnez le mode ‘DARK’
Typographie
Le thème Neve propose un large éventail de personnalisation au niveau des typographies.
Les réglages sont divisés en deux parties:
- Général
- En-têtes
Dans l’onglet ‘Général’ on peut définir la ‘Font’, la graisse, la taille, la hauteur des lignes et l’espacement.
De même pour tous les niveaux de titres.
Boutons
Dans cette partie-là, nous pouvons personnaliser les boutons qui concernent la partie Woocommerce dans l’onglet ‘Primaire’ et les boutons d’ajouts de commentaires dans l’onglet ‘Secondaire’.
Il existe beaucoup de réglages différents pour les boutons. On peut choisir un arrière-plan avec une couleur de fond ou un contour d’une certaine couleur et largeur. Nous pouvons choisir la couleur de fond ainsi que le texte, également pour le hover. Nous pouvons changer les marges intérieures.
Ainsi, de ce bouton là:
Nous pouvons obtenir un bouton de ce type:
Il suffit de choisir ‘Outline’, augmenter le Radius, augmenter la largeur, mettre un fond blanc et mettre le texte en bleu.
Et encore
Dans les versions payantes de Neve, il existe beaucoup d’autres modules pour approfondir encore plus la personnalisation.
Custom Layouts Module
Ce module permet d’aller très loin dans la personnalisation des différentes pages de notre site. Ce module permet de composer différentes personnalisations de pages et de les afficher à travers des logiques conditionnelles.
On peut aller très loin dans la composition du contenu des pages: un éditeur de code existe pour notamment ajouter des hooks ou des filtres.
Scroll to top Module
On peut mettre en place une flèche en bas de la page qui permet de revenir en haut à n’importe quel moment.
Ce module permet de choisir la taille, les couleurs, l’emplacement etc.
White Label Module
Ce module permet de mettre votre nom ou le nom de l’agence sur le thème dans l’administration comme si c’était votre propre création.
Woocommerce Booster
Ce module permet d’aller très loin dans la personnalisation de votre boutique.
- On peut changer la pagination et un bouton permet au client de choisir des modes d’affichage selon son confort
- Pour la liste des produits, on peut changer l’emplacement des boutons, on peut mettre des ombres, on peut choisir quels éléments afficher et comment les afficher
- Pour chaque produit, on peut changer l’affichage de la galerie d’images, et enlever ou afficher les produits associés et la navigation d’un produit à l’autre. Pour chaque produit, on peut choisir de mettre une vidéo comme image principale.
- On peut changer l’affichage pour la page de paiement et la page pour l’affichage du panier.
Sites de démarrage
En deuxième partie de ce tutoriel, nous allons installer un site de démarrage prêt à l’emploi, pour étudier la puissance de Neve, couplé avec Gutenberg par exemple.
Sur la page d’accueil du tableau de bord, il suffit de cliquer sur ce bouton:
Nous arrivons sur une page qui liste une libraire de différentes démos.
Vous avez juste besoin de choisir votre préférée, et nous allons prendre soin de tout le reste.
Effectivement, vous allez voir en installant l’une des démos, que tous les paquets s’installent en un clique: du contenu, des extension et les blocs nécessaires.
La bibliothèque propose les sites de démarrage à partir de différents constructeurs de page:
- Elementor
- Brizy
- Beave Builder
- Thrive Architect
- Divi Builder
- Gutenberg
Nous allons voir que l’éditeur par défaut de WordPress, nommé ici Gutenberg, en alliance avec Neve, peut devenir un constructeur de page extrêmement puissant.
C’était justement le sujet d’un article précédent que j’avais publié sur WPFormation.
Dans le même principe, nous allons voir comment les concepteurs de Neve construisent des pages en alliant Neve et Gutenberg.
Importation d’un site de démarrage
Pour importer la démo, il suffit de cliquer sur le bouton import. Pour l’exemple, nous allons installer la démo ‘Original’
N’hésitez pas appuyer sur le bouton Preview pour voir un aperçu de ce que vous propose ce site de démarrage.
Une fenêtre modale s’affiche avec les différents éléments que la démo a l’intention d’importer dans votre site WordPress.
Pour la plupart des éléments importés, on peut choisir d’autoriser l’importation ou pas. Pour l’exemple, on va tout importer.
Orbit fox est une grosse extension de Themeisle qui permet de:
- Créer une page error 404
- Intégrer Google Analytics
- Créer des boutons de partages sur les réseaux sociaux
- Ajouter des icônes pour le menu
- Des blocs pour Gutenberg
Et l’extension vient avec une bibliothèque de templates
Vous pouvez visiter le site ici
WPforms est une extension qui permet de faire facilement des formulaire en glisser déposer. Le site de wpforms
Gutenberg Blocks and Template Library by Otter est une bibliothèque de différents blocs crée par Themeisle. Voir la page de l’extension
Blocks Animation permet d’ajouter des animations en fonction du scroll sur les différents blocs de Gutenberg. Voir la page de l’extension
Une fois l’importation effectuée, on peut choisir d’ajouter notre contenu.
Construction d’une page d’accueil avec Neve et Gutenberg
Nous atterrissons sur la page d’accueil ‘HOME’. Nous allons voir comment elle est construite pas à pas.
Pour les réglages de la page, nous voyons que le conteneur occupe la pleine largeur, aucune barre, et on a désactivé le titre.
Il est important de désactiver le titre, car nous allons écrire le titre directement dans la composition de notre page.
En cliquant sur le fil d’Arianne des blocs Gutenberg, on peut voir qu’on a divisé la page avec le bloc ‘Sections’ de Otter
Bloc section
Ce bloc permet de définir des colonnes pour chaque section, et l’espace entre ces colonnes.
et dans la partie ‘Style’, on peut définir l’arrière-plan. Ici j’ai une image en lien avec ma thématique.
Section column
En cliquant sur le fil d’Arianne des blocs, on voit que le bloc ‘Section’ a un sous-bloc ‘Section Column’, ça permet de faire des réglages différents pour chaque colonne et notamment la largeur des colonnes.
Par exemple, pour construire la partie Team, il suffit de subdiviser le bloc Section en 4 colonnes.
et ici par exemple, nous avons un espace entre les colonnes de 15px.
et pour chaque colonne, nous pouvons éditer notamment la largeur des colonnes et le padding.
Advanced Heading
Grâce à un bloc de Otter très pratique Advanced Heading, nous allons pouvoir mettre le titre principal pour cette page, en définissant une balise H1. Ce titre est personnalisable: on peut changer la taille, changer la couleur, mettre des majuscules etc.
Si vous voulez en savoir + sur les titres dans les pages web, un excellent tutoriel
Bloc Posts
Pour la partie blog de cette page d’accueil, il existe un bloc nommé Posts. Il permet de définir les colonnes, le nombre d’articles, et les éléments affichés pour chaque article (métadonnées, images et extraits).
Et encore…
Si on résume ici: pour la composition d’une page avec Neve et les blocs by Otter, c’est une succession de blocs ‘Section’ pour lesquels on définit des colonnes. Dans chaque colonnes, on peut ajouter un bloc de notre choix tout en distillant des titres de différents niveaux: H1, H2, H3, H4, H5 et H6.
Conclusion
Voilà j’arrive au terme de ce tour d’horizon du thème Neve, de quelques-unes de ces possibilités. Vous voyez qu’en alliant un thème extrêmement personnalisable et l’éditeur par défaut Gutenberg, nous avons un outil très puissant pour créer un site web avec WordPress sans forcément mettre les mains dans le code ou en utilisant de nombreuses extensions.
Vous pouvez créer votre En-tête et votre Pied de Page avec la personnalisation et ensuite laissez vous inspirer par les sites de démarrage pour créer le contenu de vos pages.
Et pour ajouter encore des potentialités, il y a la possibilité d’ajouter les options payantes du thème Neve.
Pour celles et ceux qui travaillent régulièrement avec Neve, n’hésitez pas à laisser des remarques, des avis ou des questions dans les commentaires.
Bonne création avec Neve et WordPress !
Merci de ce tuto très détaillé. Pour un debutant pour faire un site simple, que recommandez vous entre Divi et Neve? Je suis un peu perdue !