13 Sep 2023
Prettyblocks, un module builder open source pour Prestashop

PrettyBlocks, un constructeur de page gratuit sur Prestashop

Si vous me suivez sur mon blog ou sur Youtube, vous aurez remarqué que je parle régulièrement de Creative Element, un module de page builder premium et numéro 1 sur Prestashop. Aujourd’hui, je vous présente un module builder open source sur Prestashop créé par un développeur Français, cocorico !

Les avantages du page builder Prettyblocks

L’avantage premier de ce module, c’est qu’il est open source et donc tout le monde peut le télécharger gratuitement.

Il a été développé en 2022 par un développeur Français, Guillaume Batier de PrestaSafe, qui a pour souhait de mettre à disposition un constructeur de page pour Prestashop plus simple, moins lourd et accessible à tous.

Prettyblocks permet d’implémenter des “éléments” sur des hooks, les emplacements de module de Prestashop, avec un code bien moins lourd par rapport à tous les builders payants du marché.

Pour le moment, il n’y a que quelques éléments ou blocs que vous pouvez mettre sur vos hooks. Cela évoluera dans le temps mais vous pouvez également le faire développer par un spécialiste Prestashop ou par vous-même.

Le module est open source, le code est accessible à tous, si vous êtes développeur Prestashop vous pouvez intervenir pour améliorer Prettyblocks ou créer vos propres blocs pour votre boutique en ligne.

Guillaume a mis à disposition de nombreuses ressources sur son site et sur Youtube pour vous aider à créer vos propres blocs.

Prettyblocks est compatible avec Prestashop 8 et 1.7.

Comment télécharger et installer le module Prettyblocks ?

Cela fonctionne en deux étapes, le builder et les blocs.

Vous devez vous rendre sur Github et télécharger la dernière version en date du module en zip : https://github.com/PrestaSafe/prettyblocks/releases

Ensuite, dans votre back-office Prestashop, vous l’importez comme n’importe quel module depuis le menu module et upload en haut à droite.

Dès que vous importez le module vous rentrez dans Prettyblocks et vous avez un nouveau menu pour y accéder.

L'affichage Prettyblocks en back-office de Prestashop
Le menu qui apparaît en back-office

Ensuite, vous devez importer des blocs pour vous permettre d’en insérer dans le constructeur de page. Rendez-vous ici pour télécharger la dernière version : https://github.com/PrestaSafe/classicblocks/releases.

Les développeurs de chez Team Ever mettent à disposition un module Everblock pour vous permettre d’ajouter un élément HTML dans la page.

Et rebelote, vous faites le même processus pour installer un module Prestashop.

Classic blocks Prettyblocks Prestashop
Voici les 1ers blocs que vous installez

Vous avez votre base pour commencé à travailler sur votre boutique.

Les fonctionnalités du builder Prettyblocks

On va parler de la fonction constructeur de page mais sachez qu’il permet aussi de faire des petites modifications essentielles selon moi, notamment pour le thème natif de Prestashop.

Changer la couleur du fond et de la typographie du thème

Vous avez une option dans le module pour vous permettre d’enlever le fond gris du thème Classic de Prestashop et ça, ça fait du bien !

Attention, on parle du background du wrapper, c’est-à-dire le corps de la page. Pas celle du footer ou du header.

D’ailleurs, vous pouvez aussi modifier la couleur du texte par défaut qui va s’afficher sur votre boutique en ligne.

Comment changer les couleurs du thème dans prettyblocks

Insérer des éléments à l’infini dans l’ordre que vous voulez

Si vous avez installé le module classic blocks vous avez des éléments que vous pouvez insérer.

Sur le thème Classic je vous conseille de désactiver les modules natifs pour construire une page d’accueil uniquement avec Prettyblocks. En effet, vous allez pouvoir choisir la position de chaque module facilement et qui plus est en mettre à l’infini. Les blocs classiques permettent les mêmes fonctionnalités que les modules par défaut de Prestashop et même mieux !

Donc n’hésitez pas à enlever le module carrousel, produit phare, custom texte, bannière etc.

Vous devez choisir sur quel emplacement vous souhaitez le mettre et sélectionné le bloc que vous voulez.

Ensuite, ajoutez l’élément que vous voulez sur la page. Il va s’intégrer directement dans votre page.

Comment placer un élément sur prettyblocks

En passant la souris un élément (3) vous pouvez choisir de le supprimer, le déplacer ou accéder aux réglages de celui-ci.

A droite de l’interface de Prettyblocks, vous avez les champs associés aux blocks pour vous permettre d’éditer votre contenu.

bloc bannière prettyblocks
Voici les éléments à modifier pour le bloc bannière

Mais surtout n’oubliez pas d’enregistrer vos modifications en haut à droite.

Vérifiez le contenu de votre Prestashop sur tous les types d’écrans

Le module vous permet de vérifier votre contenu sur 4 types d’écrans. Cela sera pratique quand vous allez devoir tester le contenu que vous avez créé sur tous types de support.

Sans quitter l’interface d’édition, en vérifiant sur votre navigateur web, vous pouvez travailler sans changer de fenêtre.

Responsive design Pretty Blocks

Développer vos blocs de contenu sur Prestashop

Le gros avantage de Prettyblocks, c’est la possibilité de le faire évoluer comme vous le souhaitez.

J’en parlais au début de l’article mais vous pouvez créer vos propres blocs selon les besoins de votre site Prestashop.

Il existe déjà des conditions que vous pouvez utiliser dans vos intégrations comme avec la case à cocher “Placer le contenu dans une colonne centrée (container)”.

<div class="home-popular-categories {if $block.settings.mgt}mgt{/if} {if $block.settings.default.container} container {/if} ">

A partir de là, vous pouvez faire de l’intégration graphique sur votre Prestashop par rapport à une option. Si vous êtes développeur ou si vous touchez un peu au code, vous allez vous amuser avec Prettyblocks !

PrettyBlocks est-il compatible avec tous les thèmes ?

Il s’intègre parfaitement avec tous les thèmes grâce à sa conception, le rendant pratiquement invisible sur le front office.

Vous pouvez utiliser des blocks existants à rajouter à Prettyblocks ou bien en créer. Le block d’un thème pour être utilisé par un autre thème.

Les blocks peuvent également être modifiés via un “override” sur votre thème enfant Prestashop.

Guillaume, le développeur de Prettyblocks, a développé un thème Pestashop rapide et performant qui est totalement compatible avec le builder : Cartzilla.

Cartzilla un thème SEO Friendly Prestashop

En plus d’être rapide, avec un builder, SEO friendly, différents modèles de page produits etc. C’est un thème Prestashop Français et idem pour le support. Cocorico !

Vous pouvez donc utiliser Prettyblocks avec le thème par défaut ou Cartzilla.

Prettyblocks est-il mieux que Creative Element ?

En créant depuis plusieurs années déjà du contenu sur Creative Element, le module numéro 1 en vente sur Prestashop Addons, je peux vous le comparer avec Prettyblocks.

Et bien, les deux modules sont incomparables, ils n’ont rien à voir !

Creative Element est sur une base d’Elementor, c’est un module payant, on attend donc des fonctionnalités avancées et vraiment pouvoir faire un site de A à Z. Prettyblocks est un module gratuit open source qui va permettre d’administrer certains contenus en “natif” mais que vous pouvez faire évoluer par vous même.

Bien sûr, Creative Element permet de tout construire sur Prestashop, mettre des sections, des colonnes etc. Forcément, pour permettre cela, il a la réputation d’être assez lourd en implémentant beaucoup de code quand un élément est placé sur le site.

Prettyblocks, c’est tout l’inverse. Quand vous placez un élément, c’est 80% de code en moins par rapport à Creative Element. Si on insère une image dans notre page, Prettyblocks va charger que quelques lignes de code, comme ferait un développeur qui vous réalise un site sur-mesure. Il a beaucoup moins de fonctionnalités mais il est vraiment bien plus léger, c’est indéniable !

Si vous avez besoin d’un module juste pour vous permettre de créer et d’administrer quelques contenus sur le site, je vous recommande Prettyblocks sans hésitation !

Une formation Prestashop pour créer sa boutique seul

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *