C’est connu, le meilleur moyen pour créer des pages bien structurées c’est d’utiliser un page Builder. Et sur WordPress, les pages builder (plugin de mise en page ou mise en forme) , il y en a des milliers.

page-builder-by-site-origin

Pourtant, parmi cette grande liste de plugins, quelques-uns parviennent à se distinguer, c’est le cas de Visual Composer et du plugin Page Builder by site origin. En ce qui concerne ce dernier, il a la particularité d’être gratuit, et dans ce tutoriel, je vous montrerai comment l’utiliser.

Comment installer et configurer le plugin Page Builder

C’est la première chose à faire afin d’utiliser ce plugin. Vous pouvez le faire directement depuis votre tableau bord pour ne pas perdre du temps. Vous pouvez également le télécharger sous forme de fichier zip.

page-builder-installation-tableau-debord

Comment construire une page PRO

Après avoir installé et activé le plugin, un nouvel onglet « Page Builder » s’ajoutera à l’éditeur visuel (disponible depuis l’interface de création des pages/articles).

page-builder-onglet-editeur-visuel

En cliquant dessus, vous accèderez à l’interface du page builder. Vous remarquerez que cette interface est composée de plusieurs boutons. La création d’une page passe par la création des colonnes, qui vous permettent de délimiter les différentes zones. Et pour ça, vous devez cliquer sur « Add Row ».

creation-des-colonnes

Une fenêtre s’ouvrira, et vous pourrez configurer les largeurs des colonnes. Vous pourrez même en ajouter « Set Row Layout ».

ajouter-des-colonnes-fenetre-page-builder

Une fois que c’est fait, cliquez sur « Insert ». Vous remarquerez les zones correspondantes aux zones que vous avez ajoutées.

représentation-des-colonnes

Vous pouvez cliquer sur chaque zone pour sélectionner cette dernière, ce qui vous permettra d’y ajouter des éléments, en cliquant sur « Ajouter le widget », une nouvelle fenêtre s’ouvrira et vous pouvez choisir un widget à insérer dans la ligne.

ajoutr-un-nouveau-widget

Vous pourrez répéter le processus avec tous les éléments de votre ligne.

présentation-interface-des-colonnes

Vous pouvez également déplacer les lignes entres elles, en cliquant sur les flèches directionnelles situés à droite et au-dessus de chaque ligne. Chaque élément ajouté aux lignes peut être modifié, dupliqué ou supprimé.

Pour avoir plus d’espace pour la personnalisation, vous pouvez cliquer sur le bouton « Live Editor ». Vous accèderez à une interface similaire à celle de personnalisation des thèmes.

presentation-interface-live-editor

Remarque : Je reproche toute fois à cette interface de ne pas permettre de créer, ni d’ajouter des colonnes, encore moins d’éléments.

Vous pouvez désormais consulter votre blog question de voir comment fonctionne le plugin.

C’est tout pour ce tutoriel sur l’utilisation du plugin Page Builder by SiteOrigin pour créer des pages PRO. N’hésitez pas à partager ce tutoriel avec vos amis sur vos réseaux sociaux préférés.