ContentBuilder.js est un plugin jQuery qui convertit un élément  <div> d’une page Web en un bloc éditable. Vous pouvez utiliser le plugin dans vos applications Web, CMS, etc. Contrairement aux autres éditeurs, le plugin vous fournit des blocs de contenu très bien conçus, prêts à être glisser-déposer au sein de n’importe quelle zone de vos pages. Vous pouvez même créer vos propres blocs de contenu.

Un éditeur de texte user friendly qui peut vous aider à modifier facilement vos pages Web en utilisant un mélange de WYSIWYG classique et une expérience de drag & drop. ContentBuilder.js repose sur jQuery et utilise des blocs comme unité d'édition. Chaque section sur la page est un bloc et selon leur type, diverses commandes d'édition sont disponibles. Ces blocs peuvent facilement être déplacés par glisser-déposer, et plus de 150 nouveaux blocs de contenu préréglés peuvent être ajoutés au sein d’une page Web à partir d’une barre latérale sur l'écran.

L’avantage d’une telle solution réside dans le fait que des utilisateurs n’ayant pas un bagage technique très développé peuvent être en mesure d’éditer une page Web ou un site design via quelques gestes. ContentBuilder.js inclut également la possibilité de dupliquer des blocs existants de contenu. Cela a pour avantage de tirer profit des dispositions existantes de contenu sans les reproduire étape par étape. Cet éditeur de site Web peut être utilisé sur tous types d’applications, indépendamment de la technologie en arrière plan. ContentBuilder.js est également disponible en tant que plugin WordPress sous le nom de WP Content Builder. Ce WordPress theme builder est accessible via une licence commerciale disponible à partir de $99.

Comment utiliser ce page builder

Inclure les fichiers HTML et JS nécessaire au sein de votre site Internet :

$("#contentarea").contentbuilder({      
  snippetFile: 'snippets.html'      
  });

var sHTML = $('#contentarea').data('contentbuilder').html();

<div data-thumb="assets/simple/thumbnails/01.png">
  <div>
    <h1>Heading 1</h1>
    <p>Lorem Ipsum is simply dummy text...</p>
  </div>
</div>
<div data-thumb="assets/simple/thumbnails/02.png">
  <div>
    <p>Lorem Ipsum is simply dummy text...</p>
  </div>
</div>
<div data-thumb="assets/simple/thumbnails/03.png">
  <div>
    <img src="assets/simple/header.jpg" />
  </div>
</div>

Demos

• Un simple bloc de contenu ;
• Une page de contenu.

Conclusion

En explorant le fonctionnement et les démos ci-dessus, vous aurez certainement compris le potentiel de ce page builder. En implémentant quelques lignes de code .js, ce plugin jquery permet à quiconque de modifier via son navigateur une page Web ou un site Internet dans son ensemble.

J’ai déjà vu par le passé des outils promettant ce type de fonctionnement mais je n’avais jusqu’à présent pas été convaincu de leur facilité d’utilisation et par dessus tout de leur flexibilité. ContentBuilder.js nous offre une belle promesse via une interface user friendly et une adaptabilité à tout type d’environnement technique avec une possibilité d’inclure et de modifier à la volé des blocs de contenus personnalisés.

La licence standard de ce site builder est disponible à partir de $69, soit environ 60 €.

Faites le test et partagez votre expérience sur la page Facebook et le compte Twitter du Magazine du Webdesign.