• Paru le 4 juin 2016 - mis à jour le 30 novembre 2017

Ajoutez une rubrique photo à votre site avec WPBakery Page Builder

1797 mots - 8mn

Ajoutez une rubrique photo à votre site avec WPBakery Page Builder

1024 680 Tout sur WordPress

Comment rajou­ter une rubrique « photo­blog » à votre site, sans pour autant tout chan­ger ? En utili­sant une exten­sion WordPress dédiée à la mise en forme : Visual Composer. Découvrons ensemble cette exten­sion, et comment s’en servir pour créer notre nouvelle rubrique.

Vous vouliez rajou­ter une rubrique photo à votre site exis­tant, sans tout chan­ger. Mais voilà… Ce n’est pas prévu d’origine.

Vous avez trouvé le thème qu’il vous faut… mais il ne met pas vrai­ment vos photos en valeur. Pour ne pas dire que c’est une catas­trophe.

Alors que faire ? Tout chan­ger ? Pas forcé­ment. Si vous utili­sez WordPress, il y a peut‐être toujours une solu­tion à votre problème. La solu­tion, en l’occurrence, c’est une exten­sion dédiée à la mise en forme : WPBakery Page Builder.

Il existe quelques alter­na­tives à cette exten­sion, mais aucune n’a fédéré une pareille commu­nauté autour d’elle.

WPBakery Page Builder for WordPress (ancien­ne­ment Visual Composer) est utilisé par des dizaines, voire des centaines de milliers de sites (WPBakery parle de plus d’un million de sites, l’extension Showcase – Visual Composer Addon compte plus de 20 000 instal­la­tions actives à elle seule), et est direc­te­ment inté­gré dans certains thèmes en vente sur ThemeForest.

De plus, des centaines de modules complé­men­taires ajoutent des fonc­tion­na­li­tés à cette exten­sion ; vous les trou­ve­rez pour la plupart sur , sauf ceux, gratuits, qui sont dispo­nibles sur le site WordPress – sous les étiquettes visual compo­ser et wpba­kery.

Bien sûr, rien n’est gratuit, mais au vu des avan­tages, le prix reste plus que raison­nable. Pour moins de 40 € TTC et éven­tuel­le­ment quelques heures de mise en forme (proba­ble­ment moins) vous allez rajou­ter la section photo­blog qui manque cruel­le­ment à votre site – ou à votre thème, mais cela revient au même.

Phases préliminaires

Commencez par véri­fier si l’extension est four­nie avec votre thème WordPress (c’est parfois le cas sur ThemeForest), sinon il vous faut l’acheter.

Obtenir WPBakery Page Builder for WordPress

Il va falloir ensuite télé­char­ger, instal­ler et acti­ver l’extension, mais cette phase‐ci n’est pas diffé­rente de la procé­dure habi­tuel­le­ment utili­sée sous WordPress.  Enregistrer votre exten­sion, mais là non plus, on ne va pas s’attarder sur cette opéra­tion, on reste dans les stan­dards sous WordPress.

Si vous n’avez jamais installé d’extension, ou si vous n’êtes pas à l’aise avec cette opéra­tion, vous pouvez lire l’article Installer, acti­ver, mettre à jour et suppri­mer une exten­sion WordPress.

Si vous rencon­trez des diffi­cul­tés lors de l’installation de l’extension, référez‐vous à la docu­men­ta­tion – dans le pire des cas, vous avez 6 mois de support inclus dans le prix… si vous consta­tiez un bug ou une (impro­bable) incom­pa­ti­bi­lité avec votre thème après achat.

Et ensuite… à vous la mise en page facile !

Utiliser WPBakery Page Builder

Cerise sur le gâteau, vous pouvez utili­ser cette exten­sion depuis votre inter­face d’administration, mais aussi direc­te­ment dans la page finale.

Choix de l’interface Visual Composer

Utiliser WPBakery Page Builder depuis l’éditeur WordPress

C’est l’utilisation clas­sique : vous créez une nouvelle page, et vous utili­sez l’éditeur inté­gré à WPBakery Page Builder au lieu de l’éditeur WordPress, en sélec­tion­nant « éditeur back‐office ».

Interface clas­sique de WPBakery Page Builder

Trois possi­bi­li­tés : ajou­ter un élément, un bloc de texte ou un modèle. La traduc­tion n’est pas vrai­ment le fort des créa­teurs d’extensions – il y a une traduc­tion, même partielle, ne nous plai­gnons pas !

en cliquant sur « ajou­ter un élément », vous ouvrez une popup :

Ajouter un élémént

Et là, c’est la caverne d’Ali Baba ! Vous avez la possi­bi­lité de rajou­ter un peu tout et n’importe quoi dans votre page. 49 éléments. Pas moins. Autant dire que tous les besoins de base sont couverts.

Créer des colonnes, ajou­ter un bloc de texte, une image ou une gale­rie d’images, des barres laté­rales, des boutons, une carte Google Maps, des graphiques,  une grille d’articles, de médias… toutes ces inser­tions se font en un simple clic.

Vous pouvez affi­cher l’ensemble des éléments, ou, grâce aux onglets en haut de la popup, par type : contenu, social, struc­ture, widgets WordPress, et dépré­ciés (des éléments qui ne seront plus utili­sés dans les prochaines versions de l’extension).

Pour voir le fonc­tion­ne­ment de chaque élément, nous allons tout simple­ment en créer un. Au hasard (mais vrai­ment au hasard), un carrou­sel d’images.

Dans la popup, cliquez sur « Carrousel d’images ». La popup se referme et laisse la place à une seconde popup.

Le premier onglet déter­mine les options géné­rales du carrou­sel. En cliquant sur le + en‐dessous de « Images » vous ouvrez une popup médias pour sélec­tion­ner les médias affi­chés dans le carrou­sel. Vous réglez la taille, l’orientation, la vitesse…

Carrousel d’images – Onglet géné­ral

Le deuxième onglet est dédié à l’apparence du carrou­sel lui‐même. Réglages très basiques, mais qui permettent de lisser la présen­ta­tion.

Carrousel d’images – Onglet design

Vous sauve­gar­dez les modi­fi­ca­tions, et visua­li­sez les modi­fi­ca­tions comme pour n’importe quelle page ou article.

Pour chaque élément créé par Visual Composer, vous avez une barre d’outils – avec à minima un crayon pour éditer l’élément, la copie  pour le dupli­quer et la corbeille  pour le suppri­mer.

Outils Visual Composer

Les flèches  servent à dépla­cer, le signe plus  à ajou­ter un nouvel élément, et servent à fermer ou étendre l’affichage d’un ensemble d’éléments. L’utilisation reste intui­tive, et vous trou­ve­rez faci­le­ment l’utilité de chaque icone, grâce au texte qui s’affiche au survol.

Lorsque vous désac­ti­vez l’affichage en mode back‐office, vous vous retrou­vez avec une suite de short­codes. Visual Composer agit de fait comme un géné­ra­teur de short­codes, puis­sant au niveau des outils de créa­tion et du rendu final, mais simple dans son utili­sa­tion.

Shortcodes

Utiliser Visual Composer en mode visuel

Vous pouvez aussi utili­ser Visual Composer en mode WYSIWYG que ce soit sur une page ou un article pré‐existant ou créé pour l’occasion.

Nous allons tester sur la page en cours, en cliquant sur « éditeur front‐office ». Et nous avons la page en cours, éditable :

Interface front‐office

Et c’est au survol de chaque élément que l’on trouve les outils de WPBakery Page Builder :

Détail du front‐office

Les popups de réglage par élément sont les mêmes que lors de l’édition dans le back‐office.

Créez votre rubrique photoblog avec WPBakery Page Builder

Maintenant que vous avez compris le mode de fonc­tion­ne­ment de l’outil, nous allons l’utiliser – comme prévu – pour créer notre nouvelle rubrique (ou caté­go­rie, pour employer la termi­no­lo­gie WordPress).

Vous avez proba­ble­ment remar­qué que je ne parle pas de caté­go­ries mais de rubriques. En effet, dans le monde de l’édition (maga­zines et jour­naux) le terme appro­prié est rubrique.

Nous allons reprendre le thème Photex, qui malgré ses quali­tés est quelque peu limité quant à l’affichages des archives d’articles. Nous allons créer un affi­chage « Masonry » pour les médias, et je vous montre­rai ensuite le résul­tat d’une grille créée avec Visual Composer pour les articles. Beaucoup plus utile pour ce thème où les gale­ries d’images ont la part belle.

Commencez par créer une nouvelle page, Que vous nomme­rez tout natu­rel­le­ment Photoblog, ou Photographies, ou… je vous laisse le choix du nom, il n’est pas impor­tant en soi, mais pensez réfé­ren­ce­ment : « photo­gra­phies » est plus parlant pour Google que « nouvelle rubrique ».

Commençons par sélec­tion­ner « Masonry media grid » dans « Ajouter un élément ».

Élément « Masonry Media Grid »

Nous avons déjà vu le fonc­tion­ne­ment de l’ajout d’images avec le carrou­sel, ici, vous procé­dez de la même manière. Un clic sur le + en dessous de Images, sélec­tion des médias que vous souhai­tez affi­cher. C’est tout. Vous parcou­rez les diffé­rentes options dans les listes dérou­lantes, il s’agit de régler l’affichage.

Et voici le résul­tat, brut de décof­frage :

Page créée avec Visual Composer

Vous pouvez modi­fier l’animation lors de l’entrée dans la page, l’espacement entre colonnes, le nombre de photo­gra­phies à affi­cher sur une ligne.

Via l’onglet « Item design », vous pour­rez égale­ment défi­nir le type d’affichage.

Veillez à rester dans la section « Masonry media », pour un affi­chage opti­mal de votre gale­rie.

Je vous avais promis une page pour affi­cher les articles, la voici :

Page d’archive des articles créée avec Visual Composer

Vous aurez bien sûr à revoir les couleurs des boutons, leur aligne­ment – via les CSS – mais l’essentiel est fait, et vous avez une page plus agréable à visua­li­ser que l’archive d’origine du thème.

C’est à nouveau du « brut de décof­frage », mais le résul­tat est tout simple­ment bluf­fant – n’oubliez pas que vous avez juste à cliquer sur deux voire trois boutons, sélec­tion­ner des options dans des listes dérou­lantes, et que c’est déjà prêt à l’emploi !

Et si le résul­tat n’est pas à la hauteur de vos espé­rances…

Utilisez un module complémentaire

Un compo­sant tel que Fast Media Gallery For Visual Composer vous permet­tra d’aller plus loin encore dans la person­na­li­sa­tion de votre rubrique (13 styles, dispo­si­tion en grille ou masonry, de 1 à 9 colonnes, 2 types de pagi­na­tion, possi­bi­lité d’intégrer du son, de la vidéo en plus des images…) et vous dotera d’un carrou­sel digne de ce nom (celui inté­gré à Visual Composer est assez basique). 

Carrousel du module Fast Media Gallery

Carrousel du module Fast Media Gallery

Avec un tel module dédié, on ne dépasse pas les 60 € TTC (Visual Composer inclus) ce qui est somme toute plus que raison­nable, moins cher qu’une refonte totale ou que l’appel à un pres­ta­taire. Mais rien ne vous empêche de faire appel à une ressource exté­rieure pour réali­ser votre rubrique photo­blog, si vous ne voulez vrai­ment pas mettre les mains dans le cambouis…

Aller plus loin avec WPBakery Page Builder

Créer une page, c’est déjà bien. Mais WPBakery Page Builder est plus puis­sant encore, grâce à l’utilisation de modèles.

Aussi simples à créer qu’une simple page, ils permettent la réuti­li­sa­tion de compo­si­tions que vous créez une fois pour toute, pour géné­rer par exemple une page d’archive par caté­go­rie.

Et une fois que vous aurez fait le tour des fonc­tion­na­li­tés, et rencon­tré certaines limi­ta­tions, vous irez cher­cher dans les modules complé­men­taires.

Votre prochain thème sera peut‐être même une créa­tion origi­nale basée sur cette exten­sion et ses modules.

Certains liens de cet article sont des liens affi­liés, c’est à dire que si vous ache­tez WPBakery Page Builder ou un module complé­men­taire en les suivant, je touche­rai éven­tuel­le­ment une petite commis­sion, mais vous, vous ne paye­rez pas un centime de plus.

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

Laisser une réponse

La modération des commentaires est activée. Votre commentaire peut prendre un certain temps avant d'apparaître.

    Partager…

    Rapport de faute d’orthographe

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