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

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

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

Quand on cherche un thème dans le dépôt Word­Press, on trou­ve prin­ci­pale­ment des thèmes allégés, telle­ment allégés qu’ils n’ont plus grand chose à voir avec la ver­sion payante. En-tête col­lant, per­son­nal­i­sa­tion des polices de car­ac­tères, mod­èles de pages, affichage d’un logo sont par­fois sou­vent impos­si­bles dans la ver­sion gra­tu­ite.

Et il y a Zita. J’ai déjà par­lé de ce thème dans un com­para­tif : Ocean­WP, Astra, Suki et Zita – per­for­mances et fonc­tion­nal­ités. Mais je ne m’at­tarde pas sur ses fonc­tion­nal­ités, parce que ce n’est pas vrai­ment le thème du com­para­tif.

Mais récem­ment, en cher­chant un thème dans le dépôt Word­Press, pour un pro­jet 100% Open Source et unique­ment avec des élé­ments tirés du dépôt, j’ai voulu ten­ter 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 ent­hou­si­as­mé au point de rédi­ger cet arti­cle pour partager mon expéri­ence.

En préam­bule, avant de par­ler per­son­nal­i­sa­tion, nous allons revoir les per­for­mances de Zita :

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

Tout sur Word­Press — Ocean­WP, Astra, Suki et Zita – per­for­mances et fonc­tion­nal­ités

Autant dire que nous avons un thème léger, très léger même. Mais la per­son­nal­i­sa­tion ? Réduite au min­i­mum syn­di­cal, ou suff­isante pour créer un site pro ? C’est le sujet de cet arti­cle, alors décou­vrons sans plus atten­dre…

Les options de personnalisation de Zita en version gratuite

Pas moins de 7 onglets pour per­son­nalis­er le thème : nous allons les pass­er en revue l’un après l’autre et décou­vrir ce qui peut être per­son­nal­isé — et ce qui ne peut pas l’être.

L’or­gan­i­sa­tion est un peu ban­cale, on trou­ve un pre­mier onglet inti­t­ulé Word­Press Default avec l’i­den­tité du site, les réglages de la page d’ac­cueil et le CSS addi­tion­nel — et deux onglets (Menus et Wid­gets) qui eux aus­si con­cer­nent des réglages présents par défaut quel que soit le thème choisi.

Per­son­nelle­ment, j’au­rais lais­sé les réglages par défaut de Word­Press sans y touch­er, et j’au­rais éventuelle­ment pré­fixé les autres onglets du nom du thème (Zita Lay­out par exem­ple).

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

Le pre­mier onglet, c’est celui des gabar­its, en anglais…

Layout

Et non, on n’est pas ren­dus, tout est con­fig­urable ou presque ; il va fal­loir pass­er chaque onglet, et par­fois ses sous-onglets, si on veut pouss­er la per­son­nal­i­sa­tion.

L’onglet Container (conteneur)

Pour régler la largeur du site, et l’a­gence­ment général, des arti­cles, des pages, des archives. Vous aurez le choix entre Boxed (tout dans une “boîte”), Con­tent Boxed (Con­tenu 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 trou­ve à nou­veau avec une bro­chette d’on­glets, pour régler la barre supérieure (Above Head­er), l’en-tête prin­ci­pale (Main Head­er), la barre en-dessous du menu (Below Head­er) et pour finir les en-têtes trans­par­ents (Trans­par­ent Head­er).

Pour le menu prin­ci­pal, Zita dans sa ver­sion gra­tu­ite pro­pose cinq gabar­its — qua­tre en-têtes hor­i­zon­taux non col­lants (il fau­dra pren­dre la ver­sion Pro ou une exten­sion dédiée pour avoir un menu hor­i­zon­tal col­lant) et trois en-têtes ver­ti­caux, tous fix­es.

L’un des en-têtes ver­ti­caux et l’un des en-têtes hor­i­zon­taux ne mon­trent par défaut qu’un ham­burg­er sur lequel il fau­dra cli­quer pour accéder au menu. Gain de place dans un esprit min­i­mal­iste.

Deux des menus ver­ti­caux sont entière­ment cachés et vis­i­ble via un bou­ton en forme de dou­ble chevron, fixe lors du défile­ment de la page, dans la ver­sion 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 tou­jours acces­si­ble.

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

Les onglets Below / Above Head­er per­me­t­tent de rajouter de une à trois zones de con­tenu (texte, menu, mod­ule, recherche ou médias soci­aux) 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 affich­er. Cer­tains veu­lent à tout prix garder une barre latérale sur leur blog, d’autres la sup­pri­ment pure­ment et sim­ple­ment, et cer­tains enfin font au cas par cas, en fonc­tion des pages ou des caté­gories d’ar­ti­cles. Alors voilà, plutôt que de l’im­pos­er ou que de ne pas en fournir, autant laiss­er le choix… et ça, les con­cep­teurs de Zita l’ont bien com­pris.

L’onglet Blog

Et à nou­veaux, deux onglets : le pre­mier pour les pages d’archives, le sec­ond pour un arti­cle. On se trou­ve un peu lim­ité dans l’a­gence­ment des archives de blog : on a droit à un unique gabar­it, une grille avec une, deux, trois ou qua­tre colonnes. Pour une mise en page alter­na­tive, vous devrez faire appel à un thème enfant, Busi­ness Zita par exem­ple. Voici la page d’archives de ce blog, avec ce thème enfant et une mise en page alter­na­tive :

Pour cer­tains, 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 sec­ondaire voire sans intérêt.

Pour le mod­èle d’ar­ti­cle unique, on a les réglages essen­tiels : affich­er ou non les métas (ou cer­taines unique­ment), l’im­age mise en avant, les arti­cles sug­gé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)

À nou­veau, trois onglets pour gér­er trois zones : la zone de mod­ules (wid­gets) avec huit gabar­its dif­férents de une à qua­tre colonnes, et les zones au-dessus et au-dessous des mod­ules.

Les onglets Above / Below Foot­er per­me­t­tent, à l’in­star des onglets Below / Above Head­er, de rajouter de une à trois zones de con­tenu (texte, menu, mod­ule, recherche ou médias soci­aux) 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 bou­ton per­met de retourn­er tout en haut de la page et est main­tenant un qua­si-stan­dard. Peu de thèmes gra­tu­its le pro­posent pour­tant.

Zita ne fait pas que le pro­pos­er, il en per­met égale­ment la per­son­nal­i­sa­tion : la posi­tion (à droite ou à gauche), le ray­on de la bor­dure, les couleurs… votre bou­ton Scroll To Top, c’est le vôtre, tel que vous le voulez.

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

Deux onglets per­me­t­tent de gér­er assez fine­ment les couleurs et l’ar­rière plan de votre site.

Un pre­mier onglet (Glob­al Col­ors) pour régler les couleurs des titres, des liens, du texte… et un sec­ond spé­ciale­ment pour le menu ham­burg­er (couleurs du fond, de la bor­dure, du texte). Et, tiens donc, le ray­on du con­teneur de ce menu. Ni couleur ni arrière plan, mais après tout, ce n’est ni la pre­mière ni la dernière inco­hérence que l’on ren­con­tre dans la ges­tion des options des thèmes Word­Press. Par­fois, c’est même large­ment pire 😉

Typography (Typographie)

Deux onglets seule­ment… le pre­mier, Font Sub­set, pour l’en­codage à charg­er (latin est coché par défaut et con­vient dans la plu­part des cas), et un sec­ond, Base Typog­ra­phy, qui nous emmène vers trois nou­veaux onglets, pour régler la police par défaut (Body) le titre (Title), et les titres de niveau 1 à 6 (Con­tent). Les inti­t­ulés ne sont pas for­cé­ment per­ti­nents, mais quand vous êtes dans l’on­glet, vous ne pou­vez pas ne pas com­pren­dre.

Pour la police par défaut (le texte, comme dans ce para­graphe par exem­ple), et pour chaque niveau de titre, vous pour­rez choisir la police de car­ac­tère, une éventuelle mise en forme (majus­cules, minus­cules, pre­mière let­tre en majus­cule ou aucune trans­for­ma­tion), l’e­space­ment entre let­tres, la hau­teur de ligne, la taille des car­ac­tères.

Et bien sûr, vous pour­rez vari­er la plu­part des réglages en fonc­tion du sup­port : vous pou­vez décider d’une taille de car­ac­tères dif­férente pour un affichage sur écran, sur tablette ou sur smart­phone, par exem­ple.

Site Button

Les bou­tons eux aus­si ont leur onglet de per­son­nal­i­sa­tion, pour en définir les couleurs (de texte et d’ar­rière plan, dans leur état par défaut et au sur­vol). Et pour gér­er le ray­on de bor­dure.

On retrou­ve la même logique que pour le bou­ton de retour en haut de page.

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

Pre Loader

Vous souhaitez affich­er une image pen­dant le charge­ment de la page ? Rien de plus sim­ple : activez cette option, choi­sis­sez une couleur de fond, une image ani­mée… et le tour est joué.

Social Media

Vous sou­venez-vous des con­tenus disponibles 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ér­er les réseaux soci­aux à lier à votre site.

Vous ren­seignez l’URL et le bou­ton sera affiché. Vous lais­sez la zone vide (vous sup­primez donc le # présent par défaut) et le bou­ton n’ap­pa­raî­tra pas.

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

Search

D’un côté on règle l’af­fichage de l’i­cone (cette petite loupe que l’on con­nait bien) de l’autre on gère les options du champ de recherche lui-même. Et à nou­veau, ce ne sont pas deux ou trois paramètres sur lesquels on peut jouer, mais une dizaine.

Et voilà, nous avons passé en revu l’ensem­ble des pos­si­bil­ités de per­son­nal­i­sa­tion de Zita. L’en-tête, le pied de page, la typogra­phie, les couleurs, l’ap­parence des bou­tons, le bou­ton de retour en haut de page… et j’en passe.

Mais bien sûr, s’il existe une ver­sion payante, c’est que cer­taines fonc­tion­nal­ités ne sont pas inclus­es dans la ver­sion gra­tu­ite. Mais on peut tou­jours installer et activ­er…

Des extensions pour pallier les lacunes de Zita en version gratuite

Une en-tête collante (sticky menu)

Float­ing Noti­fi­ca­tion Bar, Sticky Menu on Scroll, Announce­ment Ban­ner, and Sticky Head­er for Any Theme – My Sticky Bar (for­mer­ly myStick­y­menu)

Auteur(s) : Gal Dubin­s­ki

Ver­sion actuelle : 2.7.8

Dernière mise à jour : 2 avril 2025

mystickymenu.2.7.8.zip

98%Éval­u­a­tions 100 000+Instal­la­tions 3.5.1Néces­saire

My Sticky Menu per­met, en quelques min­utes à peine, de ren­dre l’en-tête col­lante tant pour les ver­sions bureau que mobile. La classe ou id à ren­seign­er est .main-header-bar.

Une barre latérale fixe

Fixed Wid­get and Sticky Ele­ments for Word­Press

Auteur(s) : mon­e­tize­more

Ver­sion actuelle : 6.2.3

Dernière mise à jour : 30 mars 2023

q2w3-fixed-widget.6.2.3.zip

94%Éval­u­a­tions 100 000+Instal­la­tions WP 5.0+Néces­saire

Q2W3 Fixed Wid­get for Word­Press per­met de ren­dre votre barre latérale col­lante, depuis une valeur de défile­ment que vous fix­ez (100px par exem­ple) et jusqu’à un cer­tain point que vous déter­minez égale­ment — #zita-footer si vous souhaitez pou­voir affich­er sere­ine­ment le pied de page.

Un gabarit Masonry pour les pages d’archives

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

Si vous tenez à affich­er vos arti­cles avec un gabar­it de ce type, il fau­dra gruger : soit vous avez une con­nais­sance assez appro­fondie de javascript, HTML, CSS et vous êtes capa­bles de mod­i­fi­er la page d’archive dans un thème enfant, soit il fau­dra créer vos pro­pres pages, utilis­er une exten­sion, et créer des règles de redi­rec­tion. Tout un pro­gramme et des com­pli­ca­tions en vue !

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

Ou, si vous utilisez la ver­sion Pro d’Ele­men­tor, vous avez la pos­si­bil­ité de créer votre page d’archive directe­ment depuis le con­struc­teur de page.

Mais vous avez, comme vu précédem­ment dans l’ar­ti­cle, le thème enfant Busi­ness Zita qui per­met une mise en page alter­na­tive. Ce n’est pas du Mason­ry, mais ça peut sat­is­faire un cer­tain nom­bre de blogueurs.

En bref…

Le thème Zita est léger, gra­tu­it et con­fig­urable à l’en­vi. 7 onglets et plus de 20 sous-onglets… Même sans exten­sion, il sup­porte sans rou­gir la com­para­i­son face à de nom­breux thème payants.

Et puis… quelques exten­sions, un con­struc­teur de page (Ele­men­tor, Beac­er Builder, Site­O­ri­gin, Visu­al Com­pos­er ou Brizzy) et vous pou­vez créer le site de vos rêves, avec un thème gra­tu­it !

Un bémol cepen­dant :
- les menus ver­ti­caux ne sont pas des mod­èles de sta­bil­ité. J’ai ren­con­tré divers bugs en ten­tant de créer une mise en page alter­na­tive.
- le menu trans­par­ent n’est pas aus­si sim­ple à con­fig­ur­er et n’a pas un ren­du aus­si par­fait qu’avec Suki, Astra ou Ocean­WP.
Met­tons ces dys­fonc­tion­nements sur le compte de la jeunesse du thème, et gageons qu’ils seront rapi­de­ment cor­rigés…

Les plus de la version Pro

Nous l’avons vu dans Des exten­sions pour pal­li­er les lacunes de Zita en ver­sion gra­tu­ite : pas de menu col­lant, pas de barre latérale fixe, pas de gabar­it Mason­ry. Ces fonc­tion­nal­ités sont présentes dan la ver­sion payante.

Zita en ver­sion Pro offre égale­ment des effets visuels sur le menu d’en-tête (surlig­nage, souligne­ment, coins opposés, trois points…), une inté­gra­tion plus poussée de WooCom­merce, des pieds de pages col­lants ou fix­es, un menu en pied de page plutôt qu’en en-tête, une ges­tion plus fine des couleurs et arrières plans, du gabar­it des mod­èles où tout va être réglable : largeur de la zone con­tenu, de la page…

L’ensem­ble pour un coût plutôt intéres­sant au vu de la con­cur­rence : 49$ avec un an de mis­es à jour, ou 149$ en ver­sion life­time.

Bevro : une alternative à Zita ?

À peine avais-je mis mon arti­cle en ligne, qu’on me pro­po­sait de jeter un œil à un clone : Bevro, avec un mod­èle de licence plus avan­tageux. Je vous le présente dans l’ar­ti­cle Bevro – juste un clone de Zita ?

Et vous ? Avez-vous testé Zita en ver­sion gra­tu­ite ? Qu’en avez-vous pen­sé ? Et si vous êtes passés à la ver­sion Pro, quel est la rai­son de ce pas­sage à la ver­sion payante ?

Cer­tains liens de cet arti­cle sont des liens affil­iés ; c’est à dire que si vous achetez en suiv­ant un des liens de cet arti­cle, vous ne paierez pas plus cher, et moi je toucherai éventuelle­ment une petite com­mis­sion.