OceanWP, Elementor et Gutenberg - un trio de choc

Quel que soit votre projet (portfolio, blog, site d'entreprise…), OceanWP est un challenger à ne pas écarter. Couplé à Elementor et à Gutenberg, son potentiel est quasi illimité. L'avez-vous essayé ?

Cet article prend 15 minutes à lire et comporte 3543 mots.

Si les twen­ties (Twenty Twenty One, Twenty Twenty, Twenty Nineteen…) sont les leaders incon­tes­tés des thèmes WordPress toutes caté­go­ries confon­dues (de 500 000 à plusieurs millions d’ins­tal­la­tions actives chacun), OceanWP ne démé­rite pas en habillant plus de 700 000 sites et blogs.

Quelque part en fin d’ar­ticle, je vous donne un code de réduc­tion perma­nente de 25% sur le pack d’ex­ten­sions payantes (Core Bundle). Soyez attentifs !

On peut le dire, ce thème fait figure d’ex­cep­tion dans les thèmes gratuits propo­sés dans le dépôt WordPress : outre sa capa­cité d’adap­ta­tion à tout type de projet et surtout son empreinte rela­ti­ve­ment légère, il propose une multi­tude d’op­tions qui vous permettent de créer un site doté de sa propre person­na­lité, en un mini­mum de temps, sans même débour­ser un centime, et sans (trop) mettre les mains dans le cambouis.

Comment ? Grâce à son support d’Elementor, et de la plupart des construc­teurs de pages phares, tels que WPBakery Page Builder, Site Origin, Beaver Builder, Thrive Architect, Divi Builder ou l’un des tous derniers, Brizy. Ces construc­teurs de page existent en version gratuite, à l’ex­cep­tion de WPBakery Page Builder, de Divi Builder et de Thrive Architect.

Mais dans cet article, nous nous foca­li­se­rons sur l’uti­li­sa­tion d’Elementor, pour deux raisons : 

  • pour moins de 30$, vous pouvez acqué­rir l’ex­ten­sion Elementor Widgets qui comprend plus de 50 blocs utili­sables dans vos pages et même dans vos articles via l’ex­ten­sion (gratuite) Elementor Blocks for Gutenberg que vous trou­ve­rez dans le dépôt WordPress 
  • le but de cet article n’est pas de déter­mi­ner quel est le meilleur construc­teur de page : mission impos­sible, chacun a ses points forts et ses points faibles, et celui qui convient à votre projet ne convien­dra pas forcé­ment à un autre projet 

Vous pouvez aussi acqué­rir l’en­semble des exten­sions premium d’OceanWP pour 39$, mais tout dépend de vos besoins, person­nel­le­ment je n’ai pas eu besoin de ces exten­sions sur les projets que j’ai réali­sés avec ce thème.

Mais commen­çons par la décou­verte du thème lui-même…

OceanWP, le thème gratuit configurable à l’envi

OceanWP, Elementor et Gutenberg - un trio de choc
Thème OceanWP pour WordPress

La plupart des thèmes gratuits que vous trou­ve­rez dans le dépôt WordPress offrent des possi­bi­li­tés très limi­tées de person­na­li­sa­tion, quand elles ne sont pas tout simple­ment inexis­tantes – je ne compte plus les thèmes qui vous brident jusque dans l’uti­li­sa­tion d’un logo ou qui ne permettent pas de régler la taille des carac­tères 🙁 ne vous lais­sant pas d’autre choix que de passer à la version payante pour vous lais­ser accé­der à ces réglages. Plutôt mesquin.

Mais non, ce n’est pas la poli­tique de la maison. OceanWP vous permet, dès son acti­va­tion, une confi­gu­ra­tion rapide, en deux étapes :

  • tout d’abord, il vous propose des modèles pour instal­ler une démo
Choix des démos
Choix des démos

Mais vous pouvez aussi ne pas impor­ter de démo, garder la confi­gu­ra­tion d’ori­gine, pour tout para­mé­trer vous-même ulté­rieu­re­ment, et passer à la seconde étape :

  • la person­na­li­sa­tion du thème et du site
OceanWP, Elementor et Gutenberg - un trio de choc
Personnalisation d’OceanWP

Là, vous avez déjà fait le strict mini­mum pour person­na­li­ser votre site. Avec la grande majo­rité des thèmes gratuits propo­sés dans le dépôt WordPress, vous avez fini. Mais pas avec OceanWP, qui n’a pas lésiné sur…

Les options de personnalisation intégrées au thème

Options de personnalisation d'OceanWP
Options de person­na­li­sa­tion d’OceanWP

Sans même rajou­ter la moindre exten­sion, OceanWP permet de confi­gu­rer fine­ment l’ap­pa­rence de votre site. Les options dispo­nibles via l’ou­til de person­na­li­sa­tion inté­gré à WordPress ne manquent pas, même si tout n’est pas vrai­ment intuitif.

J’ai long­temps cher­ché certaines options, pour fina­le­ment les décou­vrir (ou les retrou­ver) là où je ne les atten­dais pas vrai­ment. Mais l’es­sen­tiel, c’est de les avoir à disposition 😉

Vous pouvez donc person­na­li­ser, au fil des dix onglets dispo­nibles (je ne compte pas l’on­glet donnant accès aux modules payants) :

  • l’ap­pa­rence géné­rale – c’est par là que vous devriez commen­cer, pour défi­nir le design de votre site, des formu­laires, des boutons, pour défi­nir aussi la pagi­na­tion, la page d’er­reur 404, l’af­fi­chage du fil d’Ariane, pour (éven­tuel­le­ment) ajou­ter et person­na­li­ser un bouton de retour en haut de page…
  • la barre supé­rieure, au-dessus de l’en-tête. Cette zone (si vous choi­sis­sez de l’uti­li­ser) dispa­raît lors du défi­le­ment, mais permet un complé­ment d’affichage.
  • l’en-tête juste­ment, confi­gu­rable en long, en large et en travers (le média d’en-tête, le logo, le menu, le type de menu, le menu social, le menu mobile…). À noter que l’en-tête peut être hori­zon­tale ou verti­cale, avec le logo et le menu dans une barre latérale.
  • La typo­gra­phie (si vous voulez vrai­ment tout person­na­li­ser, vous en avez pour un bout de temps) avec tout un ensemble d’on­glets pour régler élément par élément (22 onglets pour gérer de manière globale, puis le corps de page, puis les titres… pour finir avec le pied de page)
  • le blog – les archives et les articles (la page d’af­fi­chage pour un article, comme celle-ci) ont leurs propres réglages de mise en page
  • la colonne ou barre laté­rale (en anglais side­bar)
  • les modules (en anglais widgets) du pied de page. À noter que même si le thème propose par défaut un pied de page fixe, cette option semble inac­tive dans la version gratuite du thème.
  • les CSS et le javas­cript (cet onglet remplace l’on­glet CSS addi­tion­nel proposé par défaut par WordPress)
  • et fina­le­ment, le bas du pied de page (habi­tuel­le­ment, le copy­right et éven­tuel­le­ment un lien vers les condi­tions géné­rales d’uti­li­sa­tion ou les mentions légales du site)

C’est un peu le fouillis dans les options de l’ou­til de person­na­li­sa­tion. Pour y remé­dier, c’est simple, instal­lez l’ex­ten­sion Customizer Search et faites une recherche par mot clé. Vous gagne­rez en produc­ti­vité, jusqu’au moment où à force d’uti­li­sa­tion, vous n’en aurez plus besoin.

Et OceanWP propose bien plus encore, il propose…

Des options de personnalisation accessibles via des extensions gratuites

Vous les trou­ve­rez dans le dépôt WordPress, en cher­chant oceanwp dans les extensions. 

Voici les plus utiles pour person­na­li­ser votre thème :

Pour activer / désactiver certaines fonctionnalités du thème

Ocean Extra est proposé dès l’ac­ti­va­tion du thème, en même temps qu’Elementor et que WP Forms Lite.

Une nouvelle entrée avec des sous-menus appa­raît dans le menu laté­ral gauche de l’ad­mi­nis­tra­tion WordPress, Theme Panel.

Un clic sur Theme Panel et vous accé­de­rez au panneau de confi­gu­ra­tion du thème lui-même, pour acti­ver (ou désac­ti­ver) des pans entiers de l’ou­til de person­na­li­sa­tion de WordPress, en fonc­tion de vos besoins.

Grâce à cette exten­sion, vous pouvez gérer une bonne cinquan­taine d’op­tions de person­na­li­sa­tion, sans même passer par l’ou­til de person­na­li­sa­tion. Plutôt inté­res­sant pour une confi­gu­ra­tion rapide.

Vous pouvez par exemple amélio­rer la vitesse de char­ge­ment de votre site en acti­vant ou en désac­ti­vant tous les scripts et styles dont vous n’avez pas besoin sur votre site, en allant dans Theme Panel >Scripts & styles via le menu laté­ral d’ad­mi­nis­tra­tion de WordPress.

Activer / désactiver les scripts & styles d'OceanWP
Activer / désac­ti­ver les scripts & styles d’OceanWP

Ocean Extra permet aussi d’im­por­ter une confi­gu­ra­tion complète, ou de l’ex­por­ter, en un clic.

Enfin, Ocean Extra auto­rise une gestion fine de l’ap­pa­rence de chaque page ou article, via un panneau de réglage présent en-dessous de la zone de saisie du contenu.

Réglages personnalisés d'un article
Réglages person­na­li­sés d’un article

Vous avez ci-dessus la capture d’écran pour un article, pour une page vous aurez les mêmes possi­bi­li­tés de réglages, hormis les options concer­nant les articles.

Autant dire que c’est vrai­ment l’ex­ten­sion indis­pen­sable, même si OceanWP fonc­tionne très bien sans – en fait, c’est vous qui fonc­tion­ne­rez mieux avec que sans 😉

Pour rendre une barre latérale statique

De nombreux sites disposent d’une barre laté­rale (side­bar) statique. C’est à dire que lorsque vous faites défi­ler votre page, le contenu et la barre laté­rale descendent, puis, en fonc­tion de la posi­tion dans la page, la barre laté­rale reste un temps fixe, tandis que le contenu conti­nue à défi­ler. Avant de réajus­ter sa posi­tion quand vous arri­vez en fin de course.

Cette dispo­si­tion a ses avan­tages, dont la persis­tance des éléments que vous mettez dans votre barre laté­rale, visibles en perma­nence. Par exemple un module d’ins­crip­tion à la lettre d’in­for­ma­tion. Ou les liens vers vos réseaux sociaux. Je l’ai un temps utilisé sur mes pages de services pour que les heures d’ou­ver­tures et mes coor­don­nées restent visibles, et que le mini formu­laire de contact soit toujours