• A la une
  • Catégories
  • Dossiers
  • +

Unyson pour Wordpress : L'utilisation du page builder

par Benjamin SANCHEZle 30/08/2016

Aujourd'hui, le BlogDuWebdesign vous propose un focus sur l'extension Page Builder du plugin Unyson pour Wordress sous la forme d'un guide vous aidant de l'activation de l'extension jusqu'à la création de templates.

Pour commencer, si vous n'avez pas encore entendu parler d'Unyson, je vous conseille fortement la lecture de l'article "Unyson, peut-être un des meilleurs plugins gratuits pour Wordpress ?" pour une presentation detaillee.

Pour les autres, je vous propose un petit rappel en quelques mots : Unyson est un plugin/framework open-source et gratuit pour Wordpress. Sa particularite est qu'il vous propose de nombreuses extensions (activables uniquement si vous le souhaitez) tres interessantes, dont celle qui nous interesse aujourd'hui : un page builder vraiment excellent.

Activer le page builder

Commençons par le commencement, avec l'activation de l'extension page builder. Après avoir téléchargé, installé et activé le plugin, rendez-vous sur la page dédiée à sa gestion dans l'administration, et activez Page builder.

Une fois cette étape faite, cliquez sur "settings" dans la carte du page builder.

Il ne vous reste plus qu'à cocher les posts-types pour lesquels vous voulez avoir le page builder, enregistrer, et nous pourrons passer a la suite.

Composition d'une page

Pour la suite, créez une nouvelle page et cliquez sur le bouton "visual page builder" si besoin.

Nous nous retrouvons face à l'interface du builder, qui se compose d'une bibliothèque d'éléments à onglets sur sa partie haute, une barre d'outils avec undo/redo, votre bibliothèque de templates et un bouton pour enregistrer. Enfin, tout le reste du builder compose la partie principale.

La construction de la page se fait par glissé déposé d'éléments dans la boîte principale. Commencez par les éléments de structure (section, colonnes, etc.) puis changez d'onglet sur la bibliothèque d'éléments pour aller chercher les autres éléments nécessaires à votre page (textes, boutons, images, vidéos, ...).

Enfin, il vous restera évidemment à éditer les éléments que vous avez insérez dans la page pour y ajouter votre contenu.

Notez bien que contrairement aux colonnes, les sections sont éditables. Cela permet de déterminer si elles doivent être limitées à la largeur de votre grille ou si elles doivent prendre toute la largeur de votre site, leur donner une classe, et choisir une couleur, image ou vidéo en background si besoin.

Enregistrement et utilisation de templates

Il nous reste à aborder la bibliothèque de templates, que vous retrouverez dans la barre d'outil du builder à droite. Cette bibliothèque est évidemment partagée entre tous les posts de tous vos posts-types.

Elle se compose de 3 parties, Full page, sections et columns, que je ne vous ferais pas l'affront de vous expliquer tellement les noms sont évidents. Pour l'instant, vous pouvez noter qu'elles sont tous vides (contrairement aux miennes), il ne tiendra qu'a vous de les remplire.

Au survol d'une section ou d'un groupe de colonnes, vous pouvez noter l'apparition d'un bouton carré contenant une fleche. Pour enregistrer une template, cliquez simplement sur ce bouton et choisissez un nom pour la template. Elle ira se ranger a sa place dans la bibliothèque de templates.

Pour la partie full page enfin, vous pouvez trouver le bouton d'enregistrement directement dans la partie "full templates" de la bibliothèque de templates.

Notez pour finir qu'enregistrer une template n'enregistrent pas seulement les différents éléments et leur disposition, mais aussi toutes leurs configurations. L'idéal est donc de les remplir de lorem-ipsum pour les enregistrer dans un état "générique".

Pour la suite

Il y a un point de l'utilisation du page builder que je n'ai pas abordé dans cet article : la création de nouveaux éléments. Pourquoi ? Tout simplement car leur création ne passe pas par l'administration ! 

Bien que vraiment très simple (surtout comparer à la création de nouveaux boutons pour visual composer), cette tache demande tout de même toute une batterie de compétences (utilisation d'un FTP, connaissance de l'organisation des dossiers Wordpress, utilisation d'un éditeur de texte, un peu de HTML, un tout petit peu de PHP, ....)

Si vous voulez en apprendre plus sur la création de nouveaux éléments, et que les compétences citées précédemment ne vous ont pas fait peur, je vous donne rendez-vous dans mon prochain article !

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir