Zita - un thème gratuit à la limite du premium

Cet article prend 9 minutes à lire et comporte 2073 mots.

Un thème généraliste gratuit, configurable, léger… Utopie ? Non, Zita. À découvrir de toute urgence.

Quand on cherche un thème dans le dépôt WordPress, on trouve prin­ci­pa­le­ment des thèmes allé­gés, telle­ment allé­gés qu’ils n’ont plus grand chose à voir avec la version payante. En-tête collant, person­na­li­sa­tion des polices de carac­tères, modèles de pages, affi­chage d’un logo sont parfois souvent impos­sibles dans la version gratuite.

Et il y a Zita. J’ai déjà parlé de ce thème dans un compa­ra­tif : OceanWP, Astra, Suki et Zita – perfor­mances et fonc­tion­na­li­tés. Mais je ne m’at­tarde pas sur ses fonc­tion­na­li­tés, parce que ce n’est pas vrai­ment le thème du compa­ra­tif.

Mais récem­ment, en cher­chant un thème dans le dépôt WordPress, pour un projet 100% Open Source et unique­ment avec des éléments tirés du dépôt, j’ai voulu tenter ce thème. Et le moins que je puisse dire, c’est que je n’ai pas été déçu.

Pas déçu, et même enthou­siasmé au point de rédi­ger cet article pour parta­ger mon expé­rience.

En préam­bule, avant de parler person­na­li­sa­tion, nous allons revoir les perfor­mances de Zita :

23 requêtes, 333Ko et 405ms. Un score PageSpeed de 96% et un score YSlow de 85%. Sans être aussi léger ou perfor­mant que Suki ou qu’Astra, Zita ne démé­rite pas.

Tout sur WordPress – OceanWP, Astra, Suki et Zita – perfor­mances et fonc­tion­na­li­tés

Autant dire que nous avons un thème léger, très léger même. Mais la person­na­li­sa­tion ? Réduite au mini­mum syndi­cal, ou suffi­sante pour créer un site pro ? C’est le sujet de cet article, alors décou­vrons sans plus attendre…

Les options de personnalisation de Zita en version gratuite

Onglets de person­na­li­sa­tion

Pas moins de 7 onglets pour person­na­li­ser le thème : nous allons les passer en revue l’un après l’autre et décou­vrir ce qui peut être person­na­lisé – et ce qui ne peut pas l’être.

L’organisation est un peu bancale, on trouve un premier onglet inti­tulé WordPress Default avec l’iden­tité du site, les réglages de la page d’ac­cueil et le CSS addi­tion­nel – et deux onglets (Menus et Widgets) qui eux aussi concernent des réglages présents par défaut quel que soit le thème choisi.

Personnellement, j’au­rais laissé les réglages par défaut de WordPress sans y toucher, et j’au­rais éven­tuel­le­ment préfixé les autres onglets du nom du thème (Zita Layout par exemple).

Peu importe, c’est un point de détail qui n’in­flue en rien sur la qualité du thème.

Le premier onglet, c’est celui des gaba­rits, en anglais…

Layout

Et non, on n’est pas rendus, tout est confi­gu­rable ou presque ; il va falloir passer chaque onglet, et parfois ses sous-onglets, si on veut pous­ser la person­na­li­sa­tion.

L’onglet Container (conteneur)

Pour régler la largeur du site, et l’agen­ce­ment géné­ral, des articles, des pages, des archives. Vous aurez le choix entre Boxed (tout dans une « boîte »), Content Boxed (Contenu en « boîte »), Full Width/Contained (pleine largeur/contenu) et Full Width/Stretched (pleine largeur/étiré).

L’onglet Header (En-tête)

Et on se trouve à nouveau avec une brochette d’on­glets, pour régler la barre supé­rieure (Above Header), l’en-tête prin­ci­pale (Main Header), la barre en-dessous du menu (Below Header) et pour finir les en-têtes trans­pa­rents (Transparent Header).

Gabarits d’en-tête

Pour le menu prin­ci­pal, Zita dans sa version gratuite propose cinq gaba­rits – quatre en-têtes hori­zon­taux non collants (il faudra prendre la version Pro ou une exten­sion dédiée pour avoir un menu hori­zon­tal collant) et trois en-têtes verti­caux, tous fixes.

L’un des en-têtes verti­caux et l’un des en-têtes hori­zon­taux ne montrent par défaut qu’un hambur­ger sur lequel il faudra cliquer pour accé­der au menu. Gain de place dans un esprit mini­ma­liste.

Deux des menus verti­caux sont entiè­re­ment cachés et visible via un bouton en forme de double chevron, fixe lors du défi­le­ment de la page, dans la version mobile. On aime ou on n’aime pas. Mais au moins, le menu ne prend pas de place dans la page, tant qu’on n’en a pas besoin, et reste pour­tant toujours acces­sible.

Pour le menu en version mobile, vous aurez le choix entre un posi­tion­ne­ment inline (logo à gauche ou à droite et menu dans le coin opposé) ou slack (menu en dessous du logo). A vous de choi­sir, en fonc­tion de votre design.

Les onglets Below / Above Header permettent de rajou­ter de une à trois zones de contenu (texte, menu, module, recherche ou médias sociaux) en-dessus et en-dessous du menu prin­ci­pal.

L’onglet Sidebar (barre latérale)

Pour avoir une barre laté­rale à droite, à gauche – ou pour ne pas en affi­cher. Certains veulent à tout prix garder une barre laté­rale sur leur blog, d’autres la suppriment pure­ment et simple­ment, et certains enfin font au cas par cas, en fonc­tion des pages ou des caté­go­ries d’ar­ticles. Alors voilà, plutôt que de l’im­po­ser ou que de ne pas en four­nir, autant lais­ser le choix… et ça, les concep­teurs de Zita l’ont bien compris.

L’onglet Blog

Et à nouveaux, deux onglets : le premier pour les pages d’ar­chives, le second pour un article. On se trouve un peu limité dans l’agen­ce­ment des archives de blog : on a droit à un unique gaba­rit, une grille avec une, deux, trois ou quatre colonnes. Pour une mise en page alter­na­tive, vous devrez faire appel à un thème enfant, Business Zita par exemple. Voici la page d’ar­chives de ce blog, avec ce thème enfant et une mise en page alter­na­tive :

Archive du blog avec Business Zita

Pour certains, la mise en page des archives aura son impor­tance, pour d’autres, surtout dans le cas d’un site d’en­tre­prise, ce point sera secon­daire voire sans inté­rêt.

Pour le modèle d’ar­ticle unique, on a les réglages essen­tiels : affi­cher ou non les métas (ou certaines unique­ment), l’image mise en avant, les articles suggé­rés, les infos sur l’au­teur… ce n’est pas Venise, mais on n’en est quand même pas loin.

L’onglet Footer (pied de page)

À nouveau, trois onglets pour gérer trois zones : la zone de modules (widgets) avec huit gaba­rits diffé­rents de une à quatre colonnes, et les zones au-dessus et au-dessous des modules.

Les onglets Above / Below Footer permettent, à l’ins­tar des onglets Below / Above Header, de rajou­ter de une à trois zones de contenu (texte, menu, module, recherche ou médias sociaux) au-dessus et au-dessous du pied de page.

L’onglet Scroll To Top (retour en haut en français)

Intégré par défaut au thème, ce bouton permet de retour­ner tout en haut de la page et est main­te­nant un quasi-standard. Peu de thèmes gratuits le proposent pour­tant.

Zita ne fait pas que le propo­ser, il en permet égale­ment la person­na­li­sa­tion : la posi­tion (à droite ou à gauche), le rayon de la bordure, les couleurs… votre bouton Scroll To Top, c’est le vôtre, tel que vous le voulez.

Colors & Background (couleurs et arrière-plan)

Deux onglets permettent de gérer assez fine­ment les couleurs et l’ar­rière plan de votre site.

Un premier onglet (Global Colors) pour régler les couleurs des titres, des liens, du texte… et un second spécia­le­ment pour le menu hambur­ger (couleurs du fond, de la bordure, du texte). Et, tiens donc, le rayon du conte­neur de ce menu. Ni couleur ni arrière plan, mais après tout, ce n’est ni la première ni la dernière inco­hé­rence que l’on rencontre dans la gestion des options des thèmes WordPress. Parfois, c’est même large­ment pire 😉

Zita – Typographie des titres

Typography (Typographie)

Deux onglets seule­ment… le premier, Font Subset, pour l’en­co­dage à char­ger (latin est coché par défaut et convient dans la plupart des cas), et un second, Base Typography, qui nous emmène vers trois nouveaux onglets, pour régler la police par défaut (Body) le titre (Title), et les titres de niveau 1 à 6 (Content). Les inti­tu­lés ne sont pas forcé­ment perti­nents, mais quand vous êtes dans l’on­glet, vous ne pouvez pas ne pas comprendre.

Pour la police par défaut (le texte, comme dans ce para­graphe par exemple), et pour chaque niveau de titre, vous pour­rez choi­sir la police de carac­tère, une éven­tuelle mise en forme (majus­cules, minus­cules, première lettre en majus­cule ou aucune trans­for­ma­tion), l’es­pa­ce­ment entre lettres, la hauteur de ligne, la taille des carac­tères.

Et bien sûr, vous pour­rez varier la plupart des réglages en fonc­tion du support : vous pouvez déci­der d’une taille de carac­tères diffé­rente pour un affi­chage sur écran, sur tablette ou sur smart­phone, par exemple.

Site Button

Les boutons eux aussi ont leur onglet de person­na­li­sa­tion, pour en défi­nir les couleurs (de texte et d’ar­rière plan, dans leur état par défaut et au survol). Et pour gérer le rayon de bordure.

On retrouve la même logique que pour le bouton de retour en haut de page.

Comme quoi, ce qui ne parais­sait pas logique obéit à une certaine logique…

Pre Loader

Vous souhai­tez affi­cher une image pendant le char­ge­ment de la page ? Rien de plus simple : acti­vez cette option, choi­sis­sez une couleur de fond, une image animée… et le tour est joué.

Social Media

Vous souvenez-vous des conte­nus dispo­nibles pour les zones au-dessus et au-dessous des en-tête et pied de page ? Eh bien, il y avait juste­ment Social Media. Et c’est dans cet onglet que vous allez gérer les réseaux sociaux à lier à votre site.

Vous rensei­gnez l’URL et le bouton sera affi­ché. Vous lais­sez la zone vide (vous suppri­mez donc le # présent par défaut) et le bouton n’ap­pa­raî­tra pas.

Et tout en bas de l’on­glet, vous avez le choix entre un affi­chage mono­chrome des boutons, ou dans la couleur offi­cielle du réseau social.

Search

D’un côté on règle l’af­fi­chage de l’icone (cette petite loupe que l’on connait bien) de l’autre on gère les options du champ de recherche lui-même. Et à nouveau, ce ne sont pas deux ou trois para­mètres sur lesquels on peut jouer, mais une dizaine.

Et voilà, nous avons passé en revu l’en­semble des possi­bi­li­tés de person­na­li­sa­tion de Zita. L’en-tête, le pied de page, la typo­gra­phie, les couleurs, l’ap­pa­rence des boutons, le bouton de retour en haut de page… et j’en passe.

Mais bien sûr, s’il existe une version payante, c’est que certaines fonc­tion­na­li­tés ne sont pas incluses dans la version gratuite. Mais on peut toujours instal­ler et acti­ver…

Des extensions pour pallier les lacunes de Zita en version gratuite

Une en-tête collante (sticky menu)

My Sticky Menu permet, en quelques minutes à peine, de rendre l’en-tête collante tant pour les versions bureau que mobile. La classe ou id à rensei­gner est .main-header-bar.

Une barre latérale fixe

Q2W3 Fixed Widget for WordPress permet de rendre votre barre laté­rale collante, depuis une valeur de défi­le­ment que vous fixez (100px par exemple) et jusqu’à un certain point que vous déter­mi­nez égale­ment – #zita-footer si vous souhai­tez pouvoir affi­cher serei­ne­ment le pied de page.

Un gabarit Masonry pour les pages d’archives

Là, il n’y a pas de solu­tion réel­le­ment prête à l’emploi.

Si vous tenez à affi­cher vos articles avec un gaba­rit de ce type, il faudra gruger : soit vous avez une connais­sance assez appro­fon­die de javas­cript, HTML, CSS et vous êtes capables de modi­fier la page d’ar­chive dans un thème enfant, soit il faudra créer vos propres pages, utili­ser une exten­sion, et créer des règles de redi­rec­tion. Tout un programme et des compli­ca­tions en vue !

Je ne vous recom­mande pas cette dernière solu­tion, que j’ai testée person­nel­le­ment il y a quelques années.

Ou, si vous utili­sez la version Pro d’Elementor, vous avez la possi­bi­lité de créer votre page d’ar­chive direc­te­ment depuis le construc­teur de page.

Mais vous avez, comme vu précé­dem­ment dans l’ar­ticle, le thème enfant Business Zita qui permet une mise en page alter­na­tive. Ce n’est pas du Masonry, mais ça peut satis­faire un certain nombre de blogueurs.

En bref…

Le thème Zita est léger, gratuit et confi­gu­rable à l’envi. 7 onglets et plus de 20 sous-onglets… Même sans exten­sion, il supporte sans rougir la compa­rai­son face à de nombreux thème payants.

Et puis… quelques exten­sions, un construc­teur de page (Elementor, Beacer Builder, SiteOrigin, Visual Composer ou Brizzy) et vous pouvez créer le site de vos rêves, avec un thème gratuit !

Les plus de la version Pro

Nous l’avons vu dans Des exten­sions pour pallier les lacunes de Zita en version gratuite : pas de menu collant, pas de barre laté­rale fixe, pas de gaba­rit Masonry. Ces fonc­tion­na­li­tés sont présentes dan la version payante.

Zita en version Pro offre égale­ment des effets visuels sur le menu d’en-tête (surli­gnage, souli­gne­ment, coins oppo­sés, trois points…), une inté­gra­tion plus pous­sée de WooCommerce, des pieds de pages collants ou fixes, un menu en pied de page plutôt qu’en en-tête, une gestion plus fine des couleurs et arrières plans, du gaba­rit des modèles où tout va être réglable : largeur de la zone contenu, de la page…

L’ensemble pour un coût plutôt inté­res­sant au vu de la concur­rence : 49$ avec un an de mises à jour, ou 149$ en version life­time.

Et vous ? Avez-vous testé Zita en version gratuite ? Qu’en avez-vous pensé ? Et si vous êtes passés à la version Pro, quel est la raison de ce passage à la version payante ?

Certains liens de cet article sont des liens affi­liés ; c’est à dire que si vous ache­tez en suivant un des liens de cet article, vous ne paie­rez pas plus cher, et moi je touche­rai éven­tuel­le­ment une petite commis­sion.

Vous aimerez aussi…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Abonnez-vous à la
newsletter

Pour être informé à chaque fois que je publie un nouvel article.

Merci !

Quelque chose c'est mal passé…

Retour haut de page

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :