Le thème Rosa 2 est-il vraiment appétissant ?

Manger dans le noir, sous l’eau, dans les airs, ou même tout nu : il existe à travers le monde des concepts de restaurants pour le moins insolites.

Récemment, en m’informant sur le web, j’en ai découvert un tout aussi décalé. Appelé Bord för en (Table pour un, en suédois), il n’accueille qu’un client par service. Ce dernier mange seul au milieu de la nature, à ciel ouvert, et se fait servir… par tyrolienne.

L’idée a germé dans la tête des propriétaires pendant la crise du coronavirus. Puisqu’il a fallu s’adapter à la distanciation physique, autant y aller à fond. 

Un concept fort, une cuisine raffinée, un service 5 étoiles : les professionnels de la restauration peuvent jouer sur plusieurs tableaux pour séduire leurs (futurs) clients. 

Sans oublier un site internet aux petits oignons. Pour le mettre sur pied, vous pouvez par exemple compter sur un thème dédié : ce n’est pas ce qui manque sur le marché. Parmi eux, il y a par exemple le thème Rosa 2, qui a lui aussi misé sur un concept original (et rare). 

Il est 100% compatible avec l’éditeur de contenus Gutenberg et fonctionne avec des blocs sur-mesure. Personnellement, ça nous a ouvert l’appétit. Du coup, on est passé à table en le testant et on vous sert nos conclusions sur un plateau. 

Asseyez-vous, votre rond de serviette vous attend.

Cet article contient des liens affiliés. Cela signifie que WPMarmite touchera une commission si vous achetez une licence de Rosa 2 en passant par nos liens. Cela permet de récompenser le travail de recherche et d’écriture des rédacteurs et ne nous empêche pas d’être impartial. Si l’on n’aime pas un thème ou un plugin, on ne se privera pas de vous le dire.

Présentation du thème Rosa

Qu’est-ce que le thème Rosa ?

Lancé en 2014, Rosa 1 est à l’origine est un thème WordPress pour restaurants. Il a rapidement gagné en popularité auprès de sa cible, au point de devenir le thème le plus vendu dans sa niche sur Themeforest, la plus grande plateforme de vente de thèmes WordPress.

Au moment d’écrire ces lignes, il cumulait plus de 14 200 ventes, avec une note globale très positive (4,67/5).

Des utilisateurs satisfaits, des ventes au beau fixe : pour Rosa 1, tout allait pour le mieux dans le meilleur des mondes. Mais ses créateurs avaient encore pas mal d’appétit pour se lancer un nouveau défi de taille : adapter leur thème best-seller à Gutenberg, l’éditeur de contenus natif de WordPress, apparu fin 2018 avec le lancement de WP 5.0.

Un pari osé – une très faible minorité de thèmes fonctionnent totalement avec Gutenberg – avec un leitmotiv en tête : “mettre la complexité de côté” afin de proposer une “façon plus saine et efficace de créer des sites”.

Après plusieurs mois de travail, Rosa 2 voyait officiellement le jour en octobre 2019. Il s’agit d’une suite de Rosa 1, “réimaginée pour le nouvel éditeur Gutenberg”.

La cible de base reste toujours les restaurateurs. Cependant, Rosa 2 est un thème versatile et flexible. Grâce à l’utilisation de blocs Gutenberg sur-mesure, il permet aussi de créer un site adapté à d’autres domaines, à l’image de cette entreprise de coaching :

Qui se cache derrière ce thème WordPress original ?

A l’origine de ce virage à 180 degrés, on retrouve le studio de design roumain Pixelgrade. Dans le circuit depuis 8 ans, Pixelgrade est bien implanté dans l’écosystème WordPress, au sein duquel il s’est bâti une solide réputation.

Il dispose de plus de 60 000 clients et propose une vingtaine de thèmes premium à la vente. Ils se caractérisent par leur design minimaliste, soigné et épuré.

Ces thèmes sont principalement adaptés au blogging, mais aussi aux petites entreprises et aux restaurants, donc.

Après cette mise en bouche, et si vous passiez à l’entrée ? Au menu : la prise en main de Rosa2. 

Prise en main de Rosa 2

Rosa 2 Lite & Rosa 2

Pour commencer, sachez que Rosa2 est d’abord disponible gratuitement au téléchargement sur le répertoire officiel WordPress. Vous le trouverez sous le nom de Rosa2 Lite (400+ installations actives) :

Cette version gratuite est là pour vous mettre l’eau à la bouche, c’est-à-dire découvrir le mode de fonctionnement du thème. Forcément, elle sera très limitée, n’en attendez pas monts et merveilles.

Par exemple, vous aurez uniquement 5 blocs sur-mesure à disposition, et ne pourrez pas profiter de fonctionnalités avancées. La personnalisation est réduite au minimum.

Pour profiter à plein régime de Rosa 2, il faudra acheter la version Premium disponible à partir de 68,50€/an pour une utilisation sur 1 site.

C’est sur cette version que cet article va se concentrer. 

Découverte de l’interface

Une fois le thème installé et activé (via le menu Apparence > Thèmes), vous tomberez sur un assistant de configuration. Par ailleurs, on vous demandera d’installer 3 extensions : 

• Customify : ce plugin embarque toute la gestion du style du thème (son apparence visuelle) ;
• Nova Blocks : cette extension contient notamment tous les blocs Gutenberg créés et à venir sur Rosa 2 ; 
• Pixelgrade Care : cette extension vous recommande d’autres extensions pour “booster votre site”, met à disposition un Starter Site (démo de site prête à l’emploi) et vous permet de bénéficier du support par les créateurs du thème en ouvrant un “ticket” directement depuis le Tableau de bord de votre site WordPress.

Comme vous pouvez le constater, ces 3 extensions sont nécessaires pour pouvoir vous servir de toutes les fonctionnalités du thème, et qu’il marche correctement. Personnellement, je trouve dommage de devoir installer des plugins supplémentaires. Pourquoi ne pas avoir intégré tout ça directement dans le thème ?

Cela rajoute un peu de complexité dans l’installation et ne favorise pas l’expérience utilisateur.

On peut aussi regretter le fait que l’interface d’administration soit disponible uniquement en anglais. C’est un détail qui n’a cependant rien d’insurmontable. Les intitulés sont facilement compréhensibles.

De plus, notez que vous pouvez traduire tout cela grâce à une extension bien sympathique : Loco Translate. Alex vous explique comment la manier dans cette vidéo :

Allez, on reprend le fil. En activant l’extension Pixelgrade, vous tomberez sur un assistant de configuration (Site Setup Wizard). C’est toujours pas mal d’être pris par la main, mais je trouve dommage de devoir encore une fois ajouter des étapes supplémentaires dans cette phase de configuration.

Par exemple, on va vous inviter à vous connecter à votre compte Pixelgrade en sortant de l’interface de WordPress.

Ensuite, vous avez le choix de suivre les différentes recommandations proposées :

• ajout d’extensions supplémentaires. Deux sont requises (Customify et Nova Blocks) et deux autres sont suggérées : Contact Form by WPForms et HubSpot All-In-One Marketing.

• Activer un Starter Site

Libre à vous de faire comme bon vous semble. Si vous ne souhaitez pas partir de zéro, je vous recommande d’utiliser le Starter Site proposé (Rosa 2). Grâce à lui, vous disposerez d’une base toute prête et économiserez un temps précieux.

Pour éviter toute incompatibilité, Pixelgrade recommande de partir d’une installation fraîche de WordPress, sans contenu. J’ai testé pour voir ce que cela donnait sur un site avec un peu d’âge et, effectivement, c’était un joli bazar.

En fait, l’assistant de configuration n’a pas réussi à installer totalement le Starter Site. Du coup, toute l’apparence visuelle a sauté et la majorité des contenus n’a pas réussi à s’importer.

Lorsque tout est prêt, vous serez redirigé(e) sur votre Tableau de bord WordPress.

Un menu Pixelgrade fait son apparition dans votre colonne latérale de gauche, avec 2 options de réglages seulement :

• Dashboard (chiffre 1 sur la capture ci-dessous) est un tableau de bord à partir duquel vous pouvez par exemple gérer les plugins installés, ou encore accéder à des liens directs pour débuter la personnalisation du thème (onglet Customizations).

• Themes (chiffre 2) parle de lui-même : cette option vous indique que le thème Rosa 2 est actif, avec un lien pour le personnaliser (bouton Customize).

Résultat des courses : l’accent est mis sur la clarté et la simplicité. Grâce à des réglages réduits à la portion congrue, Pixelgrade vous évite de vous perdre dans un océan d’options à tire-larigot.

Par contre, on peut quand même noter que l’onglet Themes est redondant avec celui de WordPress. Une simple page de réglages supplémentaire dans l’onglet Apparence aurait suffi à faire le boulot.

J’espère que cette phase initiale de découverte vous a ouvert l’appétit… et que vous avez un sacré coup de fourchette.

Dans la partie suivante, on va s’attaquer à un gros morceau : le plat de résistance. Vous allez découvrir où et comment personnaliser Rosa 2.

Où et comment personnaliser le thème ?

Depuis l’Outil de personnalisation

Pour personnaliser son thème, Pixelgrade vous envoie directement sur l’Outil de personnalisation de WordPress (Customizer, en anglais).
La première chose qui saute aux yeux, c’est le nombre très restreint de réglages proposés. Ma première réaction a été de ce genre : “Quoi, que ça !”.

Il faut dire que je suis plus habitué à utiliser des thèmes fournis à ce niveau-là, comme Astra ou GeneratePress.

Avec Rosa 2, on reste sur la ligne directrice fixée dès le départ. Rappelez-vous : les maîtres-mots sont simplicité et efficacité. Pour le coup, on est en plein dedans.

Passées les options classiques proposées déjà nativement par WordPress (réglages des menus et de la page d’accueil, ajout de CSS additionnel), Rosa 2 vous donne l’accès à 3 sous-menus.

Le premier, appelé Site Identity (Identité du site), permet d’ajouter/supprimer un logo. Et c’est tout.

Le deuxième, intitulé Style Manager, vous aide à paramétrer les couleurs globales de votre site, ainsi que les polices d’écriture (fonts) utilisées.

Pour ces deux éléments, le thème Rosa 2 a mis en place un système de palettes (20 au total pour les couleurs, 10 pour les fonts). 

Une palette de polices propose des paires de polices pour vos titres et le corps de votre contenu.

Une palette de couleurs agit quant à elle sur les couleurs des titres, des arrières-plans, des liens etc.

Une palette permet d’appliquer globalement plusieurs couleurs conçues pour se marier ensemble sur la totalité de votre site. Un clic sur celle de votre choix, et le tour est joué.

Vous pouvez aussi ajouter des filtres pour ajuster les propriétés de couleurs, ou encore jouer sur la coloration.

Enfin, place au troisième sous-menu : Theme Options (Options du thème). C’est ici que vous serez en mesure de paramétrer l’apparence de votre en-tête (header) en jouant sur les éléments suivants : taille, hauteur, position, espacement entre les éléments du menu.

À noter la possibilité de créer un sticky menu (menu flottant), qui continuera à s’afficher même lorsque l’utilisateur scrolle dans la page. 

Vous pourrez aussi choisir le type de police à appliquer sur vos titres, le corps du contenu, les liens, le menu, les boutons etc.

Tous les changements que vous effectuerez depuis l’Outil de personnalisation seront visibles en temps réel. 

Après avoir mis les mains dans le cambouis, voici mon ressenti. Passée la petite phase de frustration dûe au supposé manque de réglages, j’ai apprécié le fait de pouvoir rapidement customiser des éléments basiques de mon site (couleurs, police, en-tête).

Certes, les options ne sont pas légion, mais elles sont bien pensées et cela évite à l’utilisateur de faire tout et surtout n’importe quoi avec l’apparence de son thème. 

Après ce tour de chauffe, allons voir comment modifier directement les blocs Gutenberg qui composent nos pages. 

Depuis l’interface de Gutenberg

Gutenberg est donc le second lieu où vous pourrez personnaliser le thème Rosa 2. Pour voir ce que cela donne, modifiez la page d’accueil de votre site (Home Page).

Avec Gutenberg, tout se passe au niveau des blocs, le système sur lequel il est basé. Chaque nouvel élément de contenu que vous ajoutez (ex : texte, image, bouton) est compris dans un bloc et fonctionne de façon indépendante, contrairement à l’ancien éditeur où tout était regroupé dans une seule fenêtre de texte.

En gros, un bloc est une sorte de conteneur au sein duquel vous incorporez de l’information. Un peu comme un carton de déménagement dans lequel vous amassez des affaires.

Bien sûr, vous pouvez éditer directement un bloc en ligne. Par exemple, vous pouvez modifier le texte d’un titre très simplement :

Des réglages plus fins sont ensuite proposés bloc par bloc. Par exemple, avec le Bloc Titre ci-dessus, je peux :

• Modifier le niveau de titre, aussi appelé balise hn dans le jargon (h1, h2, h3, h4, h5).
• Régler la taille de la police d’écriture.
• Ajouter une classe CSS additionnelle, si je maîtrise un peu ce langage.

Si WordPress propose nativement 5 types de blocs de contenus (Blocs communs, mise en forme, Mise en page des éléments, Widgets, Contenus embarqués), vous avez aussi et surtout intérêt à vous servir de ceux créés spécialement par Rosa 2 ;-).

On vous les présente juste en-dessous.

Zoom sur les blocs Gutenberg du thème Rosa 2

Le thème Rosa 2 est livré avec 12 blocs Gutenberg créés sur-mesure. Ils sont compris à l’intérieur de l’extension Nova Blocks, que vous avez normalement installée en suivant les instructions du début de cet article. 

On peut d’ailleurs souligner que les développeurs ont bien suivi les bonnes pratiques de WordPress en séparant les deux.

Pour voir ces blocs en application, on va faire un focus sur 5 d’entre-eux qui ont particulièrement attiré notre attention.

Nova Blocks est un plugin gratuit disponible sur le répertoire officiel. Vous pouvez aussi vous en servir pour ajouter des blocs personnalisés sur votre site, même si vous n’utilisez pas Rosa 2. Par contre, vous n’aurez accès qu’à une poignée de blocs. Seule la version payante du thème embarque tous les blocs de l’extension.

Hero of the Galaxy

Héros de la galaxie (oui, chez Pixelgrade, ils ont de l’humour), en français, est un bloc qui permet d’afficher un contenu en arrière-plan, afin d’attirer l’oeil de vos visiteurs.

Avant d’entrer dans le détail, petit rappel rapide pour ajouter un bloc. Vous pouvez procéder de plusieurs façons : 

• Soit passer par le menu contextuel proposé par Gutenberg en haut de votre page/article et ouvrir la section Nova Blocks (1).
• Soit utiliser le slash (/) dans une zone de texte pour choisir le bloc de votre choix (2).
• Soit cliquer sur les petits boutons + disséminés au cœur de votre contenu (3).

Une fois votre bloc Hero of the Galaxy ajouté, vous pouvez y incorporer du contenu supplémentaire (ex : Titre, Bouton, Paragraphe etc.).

Sans oublier la possibilité d’intervenir sur des effets liés à l’apparence de votre bloc. Pour cela, vous devez passer par ses réglages, sur la colonne de droite de votre page.

Si vous ne les voyez pas affichés, cliquez sur Afficher les réglages du bloc dans votre barre d’outils supérieure.

A l’intérieur, on retrouve pas mal de choses à picorer. Vous pouvez modifier la photo ou vidéo d’arrière-plan, appliquer des effets au scroll (ex : parallaxe), ou encore choisir la taille des marges et la largeur du contenu. 

Food Menu

Bon, avant de penser à picorer, il faut mettre l’eau à la bouche de vos visiteurs afin de leur donner envie de se rendre dans votre établissement.

Que proposez-vous sur votre carte ? C’est l’objet du bloc Food Menu. Avec lui, tout devient plus simple. Entrez le nom de votre plat, son prix, une petite description et dressez le couvert : il ne manque plus que la mayonnaise prenne.

Une fois le bloc ajouté, personnalisez son contenu en modifiant directement en ligne les plats pré-ajoutés.

Evidemment, vous pouvez aussi intégrer les plats de votre choix en les ajoutant au coup par coup.

Open Table Reservation

Vos visiteurs s’en lèchent déjà les babines ? Bravo, vous venez de marquer des points. Maintenant, vous allez devoir les inciter à passer à l’action en leur proposant de réserver une table chez vous.

Pour cela, ajoutez le bloc Open Table Reservation. Vos visiteurs pourront alors choisir : 

• Le nombre de convives
• La date
• L’heure du repas

A noter que ce système fonctionne via OpenTable, un service de réservation en ligne de restaurants. Le principal souci, c’est qu’il est pour le moment relativement peu utilisé en France par rapport à d’autres concurrents. 

Afin que le module fonctionne, votre restaurant devra faire partie du réseau OpenTable.

Au niveau du bloc, on apprécie notamment la possibilité de pouvoir changer la langue du texte en français.

Announcement Bar Block

Announcement Bar Block ajoute une barre de notification horizontale où vous le souhaitez au sein de votre contenu.

C’est une fonctionnalité maligne dont vous pouvez tirer profit pour afficher vos horaires d’ouverture et de fermeture, annoncer une promotion, proposer de s’inscrire à une newsletter etc.

Header

Enfin, abordons le bloc Header, qui permet d’ajouter un en-tête contenant les éléments de votre menu de navigation et votre logo.

Ça, c’est vraiment super pratique. Vous devez d’abord sélectionner l’emplacement de votre logo (à gauche ou au centre), le reste s’affichera automatiquement.

Ensuite, vous pouvez bien sûr personnaliser cet en-tête depuis l’Outil de personnalisation, comme vous l’avez découvert dans le passage que nous lui avons consacré. Dommage qu’il ne soit pas possible de le faire directement sur Gutenberg, via les réglages du bloc.

Et si vous vous rendez compte que vous n’avez pas ajouté votre header en haut de votre page, sachez que vous pouvez le repositionner facilement en le remontant grâce à la flèche associée dans votre barre d’outils (cela vaut pour n’importe quel bloc, d’ailleurs).

Vous pouvez aussi éditer le pied de page (footer) du thème en utilisant Gutenberg. Le footer est composé de plusieurs blocs très facilement personnalisables. Vous pourrez ainsi agir sur le texte, le style et les crédits du pied de page. La documentation de Rosa 2 propose un tutoriel détaillé et didactique pour procéder à vos modifications.

On vient de vous présenter 5 blocs en particulier, mais ils ne sont pas seuls. Avec Rosa 2, vous aurez aussi accès aux blocs suivants :

• OpenHours : affiche vos horaires d’ouverture
• Media Card Constellation : ajoute un contenu visuel (Image/vidéo) couplé à un contenu textuel
• Gallery of the Stars : intègre une galerie photo
• Slideshow Me the Way (celui-là m’a bien fait rire) : implémente un slider
• Map of the World : ajoute une Google Maps afin que vos visiteurs puissent situer votre établissement 
• Headline : pour intégrer un titre ayant déjà la palette (couleur, police) défini via l’Outil de personnalisation
• Cards Collection : ajoute du contenu sur plusieurs colonnes (Image, Titre, Description, Bouton).

Design et personnalisation : on débriefe

Personnaliser Rosa 2 est plutôt simple. La courbe d’apprentissage sera rapide, à condition de maîtriser au préalable les quelques bases de Gutenberg. Si vous débutez sur WordPress, vous ne serez pas perdu(e) en utilisant Rosa 2.

Finalement, les options de personnalisation sont réduites au maximum en surface (“seuls” 12 blocs sont disponibles). 

Mais lorsque l’on creuse un peu, on se rend compte qu’il est quand même possible d’aller assez loin dans les réglages, en procédant bloc par bloc. Et ce sans, sans toucher à la moindre ligne de code. 

Comme l’explique Pixelgrade, l’une des idées derrière Rosa consiste à vous aider à “avoir un site web cohérent”, sans tomber dans le syndrome du sapin de Noël, comme le décrit Alex dans cette (vieille) vidéo :

En cela, son thème Rosa adopte l’un des préceptes-phares de WordPress : “decisions, not options”. En gros, on aide l’utilisateur final à agir (prendre des décisions) sans le noyer sous une tonne d’options trop techniques et inutiles.

Alors évidemment, si vous espérez des réglages à foison comme ce que l’on peut trouver sur des thèmes usines à gaz qui pullulent sur Themeforest, tracez votre chemin. Vous serez déçu(e) avec Rosa.

Niveau design, je trouve l’interface d’édition de Gutenberg agréable (aarrfff, certains d’entre-vous vont s’étouffer derrière leur écran), et le parti pris de l’utiliser à 100% sur le thème Rosa 2 est réussi, de mon point de vue.

Enfin, le Starter Site utilisé renvoie une image de clarté, tout en restant minimaliste. La prédominance est donnée au visuel. Si vous comptez utiliser ce mode de construction, pensez à utiliser des photos de bonne qualité afin de ne pas tout saccager. 

Je vous l’avais dit, le design et la personnalisation constituaient le gros morceau de cet article. Mais le repas n’est pas pour autant terminé. Digérez un peu, hydratez-vous et c’est reparti pour un nouveau coup de fourchette.

Tout de suite, décortiquons l’adaptation de Rosa 2 aux plugins.

Adaptation aux extensions

Les constructeurs de page

Au moment d’écrire ces lignes, parmi les extensions qui ont le plus le vent en poupe auprès des utilisateurs de WordPress, on retrouve les fameux constructeurs de page (page builders, en anglais).

Il s’agit d’outils qui permettent de créer des mises en page riches et complexes pour votre contenu, sans toucher à la moindre ligne de code, en particulier grâce à l’emploi de modèles prêts à l’emploi. L’édition se fait souvent en glisser-déposer et en temps réel.

Parmi les page builders célèbres, on retrouve par exemple Elementor (5M+ installations actives sur le répertoire officiel), Divi, ou encore Beaver Builder.

Ces constructeurs de page permettent de créer un site rapidement sans connaissances techniques, ce qui les rend très prisés des débutants.

Pour pouvoir les utiliser, vous allez avoir besoin d’un thème. Tiens, tiens, comme Rosa 2, par exemple. À ce propos, Pixelgrade précise dans sa FAQ que “vous devriez être en mesure d’utiliser le page builder de votre choix [avec Rosa] sans aucun problème”.

On a testé avec Elementor et l’expérience a été plutôt chaotique. S’il est bien possible de modifier le contenu créé par le thème Rosa 2, il va falloir prendre votre courage à deux mains pour y parvenir. 

Déjà, la mise en page n’est plus similaire à ce que la démo de Rosa 2 propose sous Gutenberg (logique). Ensuite, il n’est pas possible d’éditer en ligne les différents éléments (Titre, images, paragraphes etc.).

Regardez par exemple ce qui s’est passé lorsque j’ai cliqué sur un des paragraphes de la page A Propos :

Ce n’est pas pratique du tout mais, en soi, ce n’est pas vraiment un problème. Utiliser un page builder avec Rosa 2 est en quelque sorte contre-productif et n’a pas grand intérêt selon moi, puisqu’il repose à 100% sur Gutenberg, comme vous l’avez vu.

Je profite de ce passage pour vous glisser une précision importante. Même s’il se rapproche sous certains aspects d’un constructeur de page, Gutenberg n’en est pas un.

Il s’agit d’un éditeur de contenus avancé, on va dire. Alex vous présente d’ailleurs très bien la différence entre les deux outils dans cette vidéo :

Sachez quand même que WordPress a prévu d’intégrer dans le noyau (Core) de Gutenberg ce que l’on appelle le full site editing, au sein des versions 5.8 et 5.9, dont le lancement est prévu 2021.

A ce moment-là, Gutenberg permettra d’éditer absolument toutes les zones de votre site (en-tête et pied de page compris), et plus seulement le corps du contenu.

C’est une petite révolution qui se prépare et, évidemment, Rosa 2 n’en sera que plus attractif ;-).

WooCommerce

Après les constructeurs de page, passons à une autre extension connue comme le loup blanc : WooCommerce. Ce plugin (5M+ installations actives) transforme votre site en boutique en ligne.

WooCommerce s’intègre sans souci à Rosa 2. Par contre, Pixelgrade vend un add-on spécifique à part dans deux de ses Licences (à partir de 14€). Cet add-on est censé “autoriser des options de style spéciales sur WooCommerce afin de conserver le même design sur votre site entier”.

Dit comme ça, cela reste assez vague. Je ne peux pas vous en dire plus car je ne l’ai pas testé.

Les autres extensions

Concernant le reste des plugins, Pixelgrade ne rapporte aucune incompatibilité notable dans sa documentation.

Elle recommande même une liste d’une dizaine de plugins pour optimiser vos images, migrer votre site, ou encore le sauvegarder. 

Pour aller plus loin loin sur le sujet, n’hésitez pas à consulter notre sélection des 25 meilleurs plugins qui pourraient figurer sur n’importe quel type de site (blog, boutique, portfolio, etc).

Allez, sans transition, on passe maintenant à la suite du menu : le fromage. L’occasion de discuter de l’expérience utilisateur proposée par Rosa 2.

Expérience utilisateur

Performance

Étant déchargé de nombreuses fonctionnalités souvent superflues chez ses concurrents, le thème Rosa 2 est léger par nature. Son fichier zip pèse un peu moins de 500 KO, et cela se ressent à l’usage.

Je n’ai noté absolument aucun temps de latence, que ce soit sur l’Outil de personnalisation, ou en utilisant Gutenberg. Le rendu des changements est immédiat. Pour le webmaster, c’est top.

Et pour les visiteurs de votre site aussi. Leur offrir une expérience de navigation fluide et rapide est primordial. La raison principale est toute simple : si votre site patine, ils risquent d’aller voir ailleurs si l’herbe est plus verte.

Avec le risque de ne plus jamais revenir chez vous, et que votre image de marque en pâtisse.

Note : la vitesse de chargement est l’un des 200 critères utilisés par Google pour classer une page dans son moteur de recherche. Ce critère a relativement peu d’importance, mais ce n’est pas une raison pour le négliger :-).

SEO

Place maintenant à un deuxième élément très important : le SEO (Search Engine Optimization). En français, on parle de référencement naturel. 

Il s’agit de l’ensemble des techniques qui permettent d’essayer de positionner un contenu (une page ou un article) le plus haut possible sur un moteur de recherche.

On va parler ici tout particulièrement de Google, qui est le moteur de recherche ultra-majoritaire en France (plus de 90% de parts de marché). 

Pour cela, certains facteurs pris en compte par Google ont plus de poids que d’autres, en particulier la nécessité de créer du bon contenu et les liens entrants (backlinks), c’est-à-dire des liens faits par d’autres sites vers le vôtre.

L’optimisation technique de votre contenu joue aussi un rôle important. Si certaines extensions peuvent vous filer un coup de main à ce sujet, comme Yoast SEO, RankMath, ou SEOPress, votre thème devrait aussi être en mesure de vous laisser paramétrer facilement quelques réglages de base.

Je pense en particulier aux balises hn (les balises titres de type h2, h3, h4 etc.). Bonne nouvelle : c’est très aisé avec Rosa. Son bloc Headline dispose d’options qui vont dans ce sens :

Par ailleurs, j’aimerais attirer votre attention sur un écueil à éviter niveau expérience utilisateur, qui n’est pas du fait de Pixelgrade, je précise.

Par défaut, toutes les pages créées par la démo de Rosa 2 sont en anglais. Au niveau du contenu, ce n’est pas très gênant : vous devrez penser à les traduire si vous vous adressez à un public francophone.

En revanche, c’est un peu plus embêtant pour vos visiteurs. Il faut savoir que les URLs générées par chaque contenu (article/page) le sont aussi dans la langue de Shakespeare, ce qui n’est pas très pertinent pour un visiteur français.

Par exemple, la page A Propos a été créée avec le permalien suivant : http://localhost/rosa/about (localhost veut dire que j’utilise une installation en local, sur mon ordinateur).

Encore une fois, c’est tout à fait logique pour des anglophones (About signifie A Propos). Moins pour des francophones. 

Lorsqu’un visiteur tombera sur votre page A Propos, il sera en mesure de voir cette URL : https://votresite.fr/about. C’est un détail, mais cela fait moins professionnel que : https://votresite.fr/a-propos.

Pour résoudre ce petit souci technique, modifiez simplement le slug (la partie d’une URL qui représente le nom de l’article) sur Gutenberg.

Dès que vous installez WordPress, pensez aussi à régler vos permaliens sur Titre de la publication dans le menu Réglages > Permaliens.

Responsive

Les développeurs de Pixelgrade l’assurent : “tous leurs thèmes sont totalement responsive”. On dit d’un site qu’il est responsive lorsqu’il s’adapte à n’importe quel type de support : ordinateur, tablette et smartphone.

C’est un critère très important à prendre en compte. Déjà parce que le smartphone est le principal moyen d’accès à Internet pour plus de la moitié des Français.

Ensuite parce que Google utilise principalement la version pour mobile d’un site pour l’indexation et le classement des pages dans son moteur de recherche : on parle aussi d’index mobile-first, en anglais.

Contrairement à de très nombreux thèmes, Rosa 2 ne dispose pas d’une petite fonctionnalité visuelle très pratique pour savoir en un clin d’oeil si votre site s’affiche correctement sur les 3 supports dont je viens de vous parler. Mais je vous rappelle une petite parade : tout cela est natif sur l’Outil de personnalisation de WordPress. Servez-vous en !

Pour nous faire une première idée de sa compatibilité mobile, on a d’abord réduit la fenêtre de notre navigateur pour voir ce qu’il en ressortait. A première vue, RAS : l’affichage était impeccable.

Ensuite, on l’a passé au révélateur du test d’optimisation mobile de Google. Là encore, aucun problème à signaler :

Combien coûte Rosa 2 ?

Votre repas se déroule bien ? J’espère que votre estomac dispose d’encore un peu de place : il est temps d’attaquer le dessert en goûtant aux tarifs du thème Rosa 2. En espérant ne pas frôler l’indigestion…

Tout d’abord, Rosa 2 Lite Theme est disponible en version gratuite sur le répertoire officiel WordPress.

Mais rappelez-vous : cette version est (très) limitée. Pour tirer parti à 100% de ce que propose le thème, vous devrez utiliser l’une des 3 Licences Premium :

Laquelle choisir ? Si vous souhaitez vous servir du thème Rosa 2 sur 1 seul site (ex : votre site personnel) deux options s’offrent à vous : 

• Soit opter pour la Licence Rosa 2 on a roll (70€/an). Il s’agit de l’entrée de gamme et vous devrez repayer le même montant chaque année pour continuer à profiter du support et des mises à jour. 
• Soit choisir la licence Rosa 2 for life. Si vous êtes un inconditionnel du thème, choisissez cette option. Vous ne payerez qu’une fois 85€ pour profiter du thème à vie (support et mises à jour incluses). 

Enfin, dernière possibilité : choisir la Licence Themes Bundle, qui englobe tous les thèmes vendus par Pixelgrade (21 au total). Principal avantage ? Vous pouvez vous en servir sur un nombre de sites illimités. Ce package se destine avant tout aux freelances et aux agences qui créent des sites pour des clients.

Sur le papier, l’addition semble salée (445€ pour un accès à vie, support et mises jour comprises), mais l’investissement peut devenir intéressant à moyen-terme si vous installez les thèmes sur de nombreux sites.

Enfin, notez que Pixelgrade propose une garantie satisfait ou remboursé de 14 jours sur tous ses thèmes, ainsi qu’un add-on pour WooCommerce dans ses Licences Rosa 2 on a roll (15€) et Rosa 2 for life (30€).

Forces et limites de Rosa 2

Après ce sacré festin, un petit récapitulatif sous forme de digestif ne sera pas de trop, il me semble. Découvrez un résumé des points forts et des limites de Rosa 2.

Forces du thème Rosa 2

• La prise en main et la facilité d’utilisation.
• L’intégration à WordPress : la personnalisation du thème utilise les composants natifs de WP (l’Outil de personnalisation et Gutenberg), ce qui permet à l’utilisateur de se sentir comme à la maison.
• Le design et l’apparence graphique du thème : personnellement, j’apprécie le côté minimaliste et épuré qui en ressort.
• Créer une page efficace et attrayante est très rapide. Le Starter Site vous évite de partir de zéro et le fait que les blocs disposent de leur propre contenu à modifier permet aussi de gagner un temps précieux. Au total, créer un site à votre image ne prend qu’une poignée d’heures, sans aucune connaissance technique.
• Un thème packagé pour les métiers de la restauration et qui répond vraiment aux besoins de ce corps de métier.

Limites du thème Rosa

• Même si vous pouvez vous en servir pour concevoir des sites dans n’importe quelle niche, le thème est principalement conçu pour créer des sites dans le domaine de la restauration. En témoignent les blocs Gutenberg dédiés uniquement à ce secteur (ex : Food Menu, OpenTable Reservation).
• Le faible nombre de réglages. C’est le parti pris du thème et d’un côté, c’est une force pour éviter à l’utilisateur de se perdre. On peut aussi le voir comme une limite à la personnalisation. Une dizaine de blocs sur-mesure, c’est assez léger.
• Le nom de certains blocs n’est pas suffisamment explicite et l’on ne sait pas ce qu’ils contiennent avant de les ajouter (ex : Hero of the Galaxy, Media Card Constellation).
• Vous ne trouverez pas de templates sur le thème Rosa 2. Dommage, quelques modèles prêts à l’emploi dans quelques niches (ex : cafés, food-trucks etc.) pourraient être sympathiques. Si vous ne voulez pas partir de zéro, vous n’avez qu’un seul choix : utiliser leur fameux Starter Site. Et c’est tout.
• L’interface d’administration du thème n’est pas traduite en français.

À qui s’adresse le thème Rosa 2 ?

Et voilà, votre dégustation est sur le point de s’achever. Avant de passer à la caisse, vous vous posez peut-être une dernière question : devez-vous craquer pour le thème Rosa 2 ?

Pour commencer, je dirais que sa facilité d’utilisation le rend attrayant pour n’importe quel type de profil, en particulier les débutants. Ces derniers apprécieront le fait de pouvoir personnaliser le thème sans toucher à la moindre ligne de code.

Pour autant, ne dressez pas immédiatement le couvert si vous êtes novice !

Mais avant d’y goûter, vérifiez bien que les fonctionnalités qu’il propose via ses blocs Gutenberg collent à vos besoins.

En revanche, si vous évoluez dans un autre secteur, la mayonnaise ne sera pas la même. Vous serez limité(e) si vous comptez vous reposer uniquement sur le thème, principalement conçu pour les restaurants. 

Néanmoins, vous pourrez tout de même vous en servir couplé à des extensions de blocs Gutenberg, si les fonctionnalités dont vous avez besoin ne sont pas proposées par Rosa 2.  

Allez, maintenant, je vous laisse la parole. Que pensez-vous de Rosa 2 ? Donnez-nous votre avis en publiant un commentaire ci-dessous.