Neve: un thème WordPress ultra personnalisable à l’ère Gutenberg

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.

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.

theme_neve_wordpress

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

wp_neve_container

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:

wp_neve_container_smartphone

Contenu / Barre

wp_neve_sidebar

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.

wp_neve_sidebar

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).

wp_neve_blog_settings

Ainsi en quelques cliques, on peut afficher nos articles comme ceci:

wp_neve_blog_page

ou comme ceci:

wp_neve_blog_page

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

Un lien vers la documentation

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.

wp_neve_header_builder

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.

wp_neve_header_builder

pour obtenir ceci:

navbar_search_iconen 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:

wp_neve_customizer_settings

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:

wp_neve_logo_size

Dans la section ‘Mise en page’ on peut définir la justification du texte, les marges intérieurs (paddings) et les marges.

wp_neve_header_layout

et dans la partie ‘Style’ on peut choisir la couleur pour le titre et le slogan.

wp_neve_header_colors

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.

wp_neve_menu_layout

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

wp_neve_header_settings

En cliquant sur celle-ci, nous faisons apparaître le tableau de bord pour les paramètres principaux de l’En-tête.

wp_neve_header_layout

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

wp_neve_header_settings_layout

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é.

wp_neve_header_frontend

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.

plugin_wp_sticky_menu

Vous allez dans les réglages de l’application.

wp_sticky_menu_settings

Vous ajoutez l’En-tête ici:

wp_sticky_menu_settings

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)

Un lien vers la documentation

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

wp_neve_footer

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

wp_neve_footer_builder

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.

wp_neve_footerwp_neve_footer

Ainsi, on peut ajouter le Widget désiré directement avec le bouton “Ajouter un Widget”

wp_neve_footer_add_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.

wp_neve_footer_frontend

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’

wp_neve_footer_settings

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.

wp_neve_body_font

De même pour tous les niveaux de titres.

wp_neve_fonts_titles

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.

wp_neve_buttonsAinsi, de ce bouton là:

wp_neve_button

Nous pouvons obtenir un bouton de ce type:

wp_neve_button

Il suffit de choisir ‘Outline’, augmenter le Radius, augmenter la largeur, mettre un fond blanc et mettre le texte en bleu.

wp_neve_button_settings

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.

Lien vers la documentation

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.

Lien vers la documentation

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.

Lien vers la documentation

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.

Un lien vers la documentation

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:

wp_neve_sites_demarrages

Nous arrivons sur une page qui liste une libraire de différentes démos.

wp_neve_demos_library

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’

wp_neve_demo_import

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.

wp_neve_demo_import

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.

wp_neve_homepage

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.

wp_neve_page_settings

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

blocks_breadcrumb

Bloc section

Ce bloc permet de définir des colonnes pour chaque section, et l’espace entre ces colonnes.

wp_ottig_blocks_section

et dans la partie ‘Style’,  on peut définir l’arrière-plan. Ici j’ai une  image en lien avec ma thématique.

wp_neve_otter_blocks_section

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.

otter_blocks_section_column

Par exemple, pour construire la partie Team, il suffit de subdiviser le bloc Section en 4 colonnes.

wp_neve_startertheme_original_team

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.

wp_neve_otter_blocks_column

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

wp_neve_otter_blocks_advanced_heading

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).

wp_neve_otter_blocks_posts

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 !

A propos de l'auteur...

Cyril BRON

Formateur média-vidéo dans une Haute Ecole à Genève et développeur web indépendant, j'utilise WordPress au quotidien. Je pratique beaucoup la veille technologique; j'aime découvrir, expérimenter et partager. Je me déplace souvent en Europe avec mon ordinateur, j'occupe mon temps entre exploration, prises de vue, traitement d’images et lignes de code...

Vous pouvez laisser votre commentaire ci-dessous et même vous abonner aux commentaires de l'article.
Nota: pour le champ "Site Web", seuls les liens vers vos réseaux sociaux sont autorisés.

Likez, Tweetez, Commentez, Partagez !