La version 3.16 de Creative Elements marque une étape majeure pour le page builder PrestaShop. Elle introduit un nouveau système de conteneurs Flexbox et CSS Grid tout en allégeant l’ancienne structure basée sur les sections et les colonnes. Au programme : des mises en page plus souples et modernes, un DOM simplifié pour des pages plus légères et potentiellement plus rapides, un chargement plus intelligent des ressources ainsi qu’une compatibilité avec PrestaShop 9.2.
Creative Elements 3.16 : quelles sont les principales nouveautés ?
Creative Elements 3.16 fait évoluer en profondeur la manière de construire les pages de votre boutique PrestaShop. Cette mise à jour ne se limite pas à ajouter quelques options supplémentaires : elle modifie également la structure HTML générée par le page builder, le chargement des ressources et plusieurs aspects de l’éditeur.
Parmi les principales nouveautés de cette version, on retrouve :
- les nouveaux conteneurs Flexbox
- la prise en charge de CSS Grid en tant que fonctionnalité expérimentale
- une structure DOM optimisée avec moins de balises HTML intermédiaires
- un système Sections/Colonnes toujours disponible, mais allégé
- un chargement conditionnel des ressources JavaScript et CSS
- les nouveaux Global Colors et Global Fonts
- un nouveau mode responsive
- la possibilité de copier-coller des éléments entre plusieurs sites
- une amélioration potentielle des performances de chargement
- la compatibilité avec PrestaShop 9.2
Les nouveaux conteneurs Flexbox de Creative Elements
La grande nouveauté de Creative Elements 3.16 est l’arrivée d’un nouveau système de conteneurs inspiré du fonctionnement moderne des page builders comme Elementor.
Auparavant, la création d’une mise en page reposait principalement sur une succession de sections, colonnes et widgets. Cette organisation fonctionne toujours, mais elle peut générer de nombreuses balises HTML imbriquées.
Avec les nouveaux conteneurs Flexbox, les widgets peuvent être placés directement à l’intérieur d’un conteneur et organisés en ligne ou en colonne.
Une structure de page plus simple
Il devient par exemple possible d’aligner plusieurs widgets côte à côte sans créer obligatoirement une colonne pour chaque élément.
Cette approche permet de réduire le nombre de div intermédiaires et donc d’obtenir un HTML plus propre et plus léger.
Concrètement, vous pouvez gérer beaucoup plus facilement :
- l’alignement horizontal et vertical
- l’espacement entre les éléments
- la répartition de l’espace disponible
- le retour à la ligne des widgets
- l’ordre et le positionnement des éléments
- l’adaptation responsive de vos contenus
Pour les utilisateurs habitués au système historique Sections/Colonnes, cette logique demande un petit temps d’adaptation, mais elle offre beaucoup plus de souplesse pour concevoir des mises en page PrestaShop modernes.
CSS Grid : davantage de liberté pour les mises en page complexes
En complément de Flexbox, Creative Elements 3.16 introduit également CSS Grid.
Il faut toutefois préciser que dans cette version, le Grid Container est encore présenté comme une fonctionnalité expérimentale. Il peut donc être intéressant de le tester progressivement avant de l’utiliser massivement sur une boutique en production.
Là où Flexbox est particulièrement adapté à l’organisation des éléments sur un seul axe, horizontal ou vertical, CSS Grid permet de travailler simultanément sur les lignes et les colonnes.
Cette approche est particulièrement intéressante pour créer :
- des grilles de produits ou de catégories
- des blocs éditoriaux complexes
- des pages d’accueil structurées sur plusieurs zones
- des compositions asymétriques
- des mises en page responsive plus avancées
L’association de Flexbox et Grid donne ainsi beaucoup plus de liberté dans la conception des pages tout en évitant de multiplier inutilement les conteneurs imbriqués.
Un DOM optimisé pour alléger les pages PrestaShop
L’autre évolution importante de Creative Elements 3.16 concerne la structure DOM.
Le DOM correspond à la représentation de la structure HTML d’une page par le navigateur. Plus une page contient de balises imbriquées, plus cette structure peut devenir complexe.
La version 3.16 cherche donc à réduire le nombre de wrappers et de conteneurs inutiles afin de produire un code HTML plus compact.
Moins de balises HTML intermédiaires
Le bénéfice ne concerne pas uniquement les nouveaux conteneurs. L’ancien système Sections/Colonnes reste disponible et bénéficie lui aussi d’un allègement de sa structure.
Creative Elements supprime notamment plusieurs wrappers historiques comme .elementor-inner, .elementor-row et .elementor-column-wrap lorsque l’optimisation correspondante est utilisée. Le wrapper elementor-section-wrap peut également être retiré dans le cadre de l’optimisation du DOM.
Cette évolution permet notamment de :
- réduire le nombre d’éléments présents dans le DOM
- simplifier le HTML généré par Creative Elements
- faciliter le travail du navigateur
- limiter certaines imbrications inutiles
- améliorer la maintenabilité des mises en page
Quel impact sur les performances ?
Un DOM plus léger peut contribuer à améliorer les performances d’une page, notamment en réduisant la quantité d’éléments que le navigateur doit analyser, afficher et manipuler.
Creative Elements 3.16 améliore également le rendu dynamique du CSS côté frontend et utilise des fichiers JavaScript plus légers lorsque cela est possible.
Il ne faut toutefois pas considérer l’optimisation du DOM comme une solution miracle. Les performances d’une boutique PrestaShop dépendent également de nombreux autres éléments : thème, modules, images, JavaScript, CSS, serveur, cache ou encore services tiers.
La réduction de la complexité HTML reste néanmoins une bonne pratique technique, particulièrement sur les pages riches en widgets ou en contenus.
Un chargement plus intelligent des fichiers JavaScript et CSS
Creative Elements 3.16 introduit également une évolution importante appelée Improved Asset Loading.
L’objectif est simple : éviter de charger certaines ressources lorsqu’elles ne sont pas utilisées sur la page.
Des bibliothèques ou fonctionnalités comme Swiper, Dialog ou Lightbox peuvent ainsi être chargées de manière conditionnelle. Les fichiers CSS liés aux animations peuvent également être appelés uniquement lorsqu’ils sont nécessaires.
Cela signifie qu’une page qui n’utilise pas certaines fonctionnalités n’a plus forcément besoin de charger les fichiers correspondants.
Cette optimisation peut contribuer à :
- réduire le nombre de ressources chargées
- limiter le JavaScript inutile
- alléger certaines pages
- améliorer le temps de chargement ressenti
- réduire la quantité de données transférées
L’intérêt est particulièrement visible sur les pages relativement simples qui n’utilisent qu’une partie des widgets disponibles dans Creative Elements.
Global Colors et Global Fonts : une gestion plus cohérente du design
Creative Elements 3.16 introduit également les Global Colors et Global Fonts.
Ces nouvelles fonctionnalités permettent de centraliser les principales couleurs et typographies utilisées sur votre boutique.
Au lieu de définir manuellement la même couleur ou la même police sur plusieurs widgets, vous pouvez utiliser des valeurs globales et les réutiliser dans différentes parties du site.
Pourquoi utiliser les styles globaux ?
Cette approche présente plusieurs avantages :
- maintenir une identité visuelle cohérente
- modifier plus facilement une couleur utilisée sur plusieurs pages
- uniformiser les typographies
- gagner du temps lors des modifications graphiques
- limiter les différences de style entre plusieurs pages
Creative Elements ajoute également un aperçu des couleurs et polices globales afin de mieux visualiser le système graphique utilisé sur le site.
Les réglages de Theme Style ont eux aussi été revus afin de regrouper davantage de paramètres directement dans l’éditeur.
Nested Elements : des widgets capables d’en contenir d’autres
Autre évolution technique importante : Creative Elements 3.16 introduit une nouvelle infrastructure appelée Nested Elements.
Cette architecture permet à certains widgets de devenir eux-mêmes des conteneurs pouvant accueillir d’autres widgets.
Concrètement, cela ouvre la voie à des composants beaucoup plus flexibles et personnalisables.
Les widgets Tabs et Accordion bénéficient notamment de cette nouvelle architecture.
Vous pouvez ainsi imaginer des onglets ou des accordéons contenant des compositions beaucoup plus riches qu’un simple bloc de texte.
Cette évolution rapproche encore davantage Creative Elements du fonctionnement des page builders modernes et devrait permettre à terme de proposer davantage de widgets utilisant cette logique d’imbrication.
Un nouveau mode responsive plus pratique
La version 3.16 apporte également un nouveau Responsive Mode destiné à faciliter l’adaptation des pages aux différentes tailles d’écran.
Creative Elements étend la prise en charge du responsive à davantage de contrôles et permet de choisir plus facilement l’appareil utilisé lors de l’édition.
Une préférence utilisateur permet également de définir le périphérique responsive affiché par défaut lorsque vous passez dans ce mode.
Il devient aussi possible de choisir si certains éléments masqués selon les appareils doivent rester visibles ou non dans l’éditeur.
Ces améliorations peuvent faciliter le travail lorsque vous optimisez vos pages pour :
- les ordinateurs
- les tablettes
- les smartphones
Le mécanisme de gestion des breakpoints a également été revu afin de faciliter l’ajout potentiel de nouveaux points de rupture dans les futures versions.
De nouvelles fonctions pour gagner du temps dans l’éditeur
Creative Elements 3.16 apporte plusieurs petites améliorations qui, mises bout à bout, peuvent faire gagner beaucoup de temps lors de la création des pages.
Copier-coller entre plusieurs sites
Il est désormais possible de profiter d’une fonction de copier-coller entre différents sites utilisant Creative Elements.
Cette fonction peut être particulièrement pratique pour réutiliser une mise en page, un bloc ou certains réglages entre plusieurs boutiques.
Multi-sélection des éléments
Le nouveau système de multi-sélection permet de sélectionner plusieurs éléments d’une page afin d’effectuer des actions groupées comme :
- copier
- coller
- supprimer
Cela évite d’avoir à manipuler chaque widget individuellement.
Widgets favoris
Une nouvelle section Favorite Widgets permet également d’enregistrer les widgets que vous utilisez le plus souvent afin de les retrouver plus rapidement dans l’éditeur.
Il est aussi possible d’ajouter certains widgets à la page d’un simple clic, ce qui simplifie encore le workflow.
De nouvelles possibilités pour les unités CSS et le design
Creative Elements 3.16 enrichit également plusieurs contrôles de style.
Le module prend désormais en charge davantage d’unités CSS personnalisées et permet notamment d’utiliser certaines fonctions mathématiques CSS dans les champs compatibles.
Cela apporte davantage de liberté aux utilisateurs avancés qui souhaitent créer des dimensions dynamiques ou des mises en page plus adaptatives.
Le sélecteur de couleurs prend également en charge les formats RGBA et HSLA.
Parmi les autres améliorations graphiques, on retrouve notamment :
- une option de masque applicable aux éléments
- un échantillonneur de couleurs capable de récupérer des couleurs depuis une image
- de nouvelles unités de taille
- un meilleur contrôle de l’espacement des mots
- des options supplémentaires pour les effets de survol des boutons
L’ancien système Sections et Colonnes reste disponible
Bonne nouvelle pour les boutiques possédant déjà de nombreuses pages : Creative Elements 3.16 ne vous oblige pas à reconstruire tous vos contenus.
Le système historique basé sur les Sections et Colonnes reste pris en charge. Vous pouvez donc continuer à modifier vos anciennes pages tout en utilisant progressivement les nouveaux conteneurs.
Cette compatibilité facilite une migration progressive vers Flexbox sans devoir refaire l’intégralité du site.
Faut-il convertir toutes ses anciennes pages Creative Elements ?
Pas nécessairement.
Si une page existante fonctionne correctement, il n’est pas indispensable de la reconstruire immédiatement. Il peut être plus pertinent d’utiliser les conteneurs Flexbox et Grid sur les nouvelles pages, puis de moderniser progressivement les anciennes mises en page lorsque cela présente un réel intérêt.
Cette approche limite les risques tout en permettant de profiter progressivement de la nouvelle architecture de Creative Elements.
Attention lors du passage aux nouveaux conteneurs
Le passage de l’ancien système Sections/Colonnes aux nouveaux conteneurs doit toutefois être effectué avec prudence.
Les deux systèmes ne reposent pas exactement sur la même logique de mise en page. Les paramètres de largeur, d’alignement, d’espacement ou de responsive peuvent donc se comporter différemment.
Après une conversion ou l’activation d’une option d’optimisation du DOM, il est conseillé de contrôler attentivement le rendu de la page, aussi bien sur ordinateur que sur tablette et mobile.
Quelques points à vérifier
- les largeurs des widgets
- les espacements internes et externes
- l’alignement des éléments
- le comportement des éléments Flexbox
- le retour à la ligne des widgets
- l’affichage responsive
- les éventuels CSS personnalisés liés à l’ancienne structure HTML
Il est également préférable d’éviter de basculer constamment une même mise en page entre l’ancien système et les nouveaux conteneurs.
Flexbox peut demander un petit temps d’apprentissage
Les utilisateurs qui découvrent CSS Flexbox devront probablement adapter certaines habitudes.
Avec le système classique de colonnes, la largeur et la position des blocs sont généralement très explicites. Avec Flexbox, une partie de la mise en page repose sur la manière dont les éléments se répartissent automatiquement dans leur conteneur.
Il faut notamment se familiariser avec des notions comme :
- direction du conteneur
- justify-content
- align-items
- gap
- wrap
- largeur et croissance des éléments flexibles
Une fois cette logique assimilée, Flexbox permet cependant de réaliser rapidement des mises en page qui nécessitaient auparavant plusieurs sections et colonnes.
Creative Elements 3.16 et PrestaShop 9.2
Autre point important de cette mise à jour : Creative Elements 3.16 est prévu pour fonctionner avec PrestaShop 9.2.
Le module reste également accessible aux boutiques utilisant des versions plus anciennes de PrestaShop. Les exigences minimales sont PrestaShop 1.7.4 et PHP 7.1.
Cette large compatibilité permet donc aussi bien aux boutiques encore basées sur des versions antérieures de PrestaShop qu’à celles qui préparent leur migration vers PrestaShop 9.2 de continuer à utiliser Creative Elements.
Le changelog mentionne également des correctifs de compatibilité avec PrestaShop 9.1+, PHP 8.2+ et Hummingbird 2.x.
Des corrections spécifiques concernent aussi plusieurs modules de blog, notamment PrestaBlog, PrestaHero Blog et HiBlog.
Creative Elements continue ainsi de suivre l’évolution du cœur de PrestaShop tout en conservant son éditeur visuel et les pages déjà créées avec le module.
Plusieurs corrections pour les boutiques PrestaShop
Au-delà des grandes nouveautés visibles, Creative Elements 3.16 corrige également plusieurs problèmes directement liés à l’utilisation du module sur une boutique PrestaShop.
Parmi les corrections intéressantes, on retrouve notamment :
- une meilleure compatibilité avec le multiboutique lors de l’édition de certaines zones produit
- des corrections liées au changement de langue dans l’éditeur produit
- une meilleure gestion de l’affichage du prix dans la recherche AJAX selon les réglages PrestaShop
- des corrections sur les widgets de quantité et d’informations produit
- des améliorations sur les variantes produits avec textures et couleurs
- des corrections concernant les carrousels
- une correction de certains problèmes liés aux éléments sticky
- plusieurs correctifs CSS, JavaScript, PHP et Smarty
La gestion des fichiers SVG a également été renforcée afin d’appliquer des règles de sécurité plus strictes lors des téléchargements.
Creative Elements et les futures évolutions liées au MCP
Les développeurs de Creative Elements suivent les évolutions de l’écosystème PrestaShop et une intégration future avec le Model Context Protocol (MCP) pourrait ouvrir la voie à de nouveaux usages dans le page builder. Si vous voulez en savoir plus sur le MCP de PrestaShop, je vous invite à lire mon article sur le sujet : PrestaShop 9.2 et l’IA : comment le développement assisté change la donne.
On peut imaginer à terme des fonctionnalités telles que :
- la génération assistée de mises en page
- l’adaptation automatique de certains contenus
- des suggestions de design
- la génération ou l’enrichissement de contenus dans l’éditeur
Ces possibilités restent toutefois à distinguer des fonctionnalités effectivement disponibles aujourd’hui dans Creative Elements 3.16. Il s’agit pour le moment de perspectives et de suppositions sur les futures évolutions du module.
Creative Elements se rapproche encore du fonctionnement d’Elementor
Creative Elements s’inspire depuis longtemps de l’expérience proposée par Elementor sur WordPress. Avec la version 3.16, cette proximité devient encore plus visible.
Le fonctionnement des nouveaux conteneurs reprend les grands principes désormais courants dans les page builders modernes : Flexbox, Grid, réduction des wrappers HTML et gestion plus directe des widgets.
Les Global Colors, Global Fonts, Nested Elements et les nouvelles possibilités responsive renforcent également cette proximité.
Pour les utilisateurs ayant déjà travaillé avec les conteneurs Elementor de WordPress, la transition devrait donc être relativement intuitive.
Quels sont les principaux avantages ?
Cette nouvelle approche apporte plusieurs bénéfices :
- une structure HTML plus propre
- moins de conteneurs imbriqués
- des mises en page plus flexibles
- une meilleure gestion des alignements
- davantage de possibilités en responsive
- un chargement plus intelligent des ressources
- une gestion globale des couleurs et des typographies
- une migration progressive depuis les anciennes sections
Faut-il passer aux conteneurs Flexbox avec Creative Elements 3.16 ?
Les nouveaux conteneurs constituent clairement l’évolution logique du système de mise en page de Creative Elements pour PrestaShop.
Pour les nouvelles pages, utiliser Flexbox permet de partir directement sur une structure plus moderne et souvent plus légère.
Le Grid Container étant encore présenté comme expérimental dans cette version, il peut être préférable de commencer par Flexbox pour les pages importantes et de tester Grid progressivement.
Pour les pages existantes, une migration progressive reste probablement l’approche la plus prudente : inutile de reconstruire immédiatement une page qui fonctionne correctement uniquement pour remplacer ses sections par des conteneurs.
Il peut en revanche être intéressant de profiter d’une refonte, d’une optimisation responsive ou d’une amélioration des performances pour adopter progressivement la nouvelle structure.
Conclusion : une mise à jour importante pour Creative Elements
Creative Elements 3.16 constitue une évolution importante du page builder PrestaShop. L’arrivée des conteneurs Flexbox et CSS Grid modernise la création des mises en page tandis que l’optimisation du DOM permet de réduire une partie de la complexité HTML générée par l’éditeur.
Mais cette version va plus loin. Le chargement conditionnel des ressources, les Global Colors et Global Fonts, les Nested Elements, le nouveau mode responsive et les différentes améliorations du workflow font de cette version une mise à jour beaucoup plus complète qu’un simple changement de système de colonnes.
Le maintien de l’ancien système Sections/Colonnes facilite également la transition : les boutiques existantes peuvent continuer à fonctionner tout en adoptant progressivement les nouveaux conteneurs.
Enfin, la compatibilité avec PrestaShop 9.2 permet à Creative Elements de poursuivre son évolution avec les prochaines versions de la plateforme.
Si vous utilisez déjà Creative Elements, cette version mérite donc d’être testée, en particulier sur une copie de votre boutique ou un environnement de préproduction avant de modifier massivement vos pages existantes.
