Creative Elements 3.16 : une nouvelle ère du web design avec les Containers
Créer des pages PrestaShop puissantes ne devrait pas nécessiter une structure complexe. Creative Elements 3.16 introduit une approche plus moderne pour créer et afficher vos pages. Avec les Flexbox Containers, Optimized DOM Output et un chargement plus intelligent des ressources, vous pouvez créer les mêmes designs avec une structure plus propre et moins de ressources inutiles.
Une structure de page beaucoup plus propre
L'une des améliorations les plus importantes de Creative Elements 3.16 se trouve en coulisses.
Jusqu'à présent, même une mise en page simple pouvait nécessiter plusieurs niveaux structurels avant d'atteindre le contenu lui-même. À mesure que les pages deviennent plus complexes, ces wrappers supplémentaires peuvent augmenter à la fois le nombre d'éléments HTML et la profondeur du DOM.
Creative Elements 3.16 introduit une manière beaucoup plus légère de structurer vos pages, en réduisant le balisage inutile et en créant un DOM plus propre et moins profond.
The traditional structure uses several wrappers around the actual widget. These layers add up as layouts become more complex.
Dans cet exemple simple, la structure passe de 9 éléments HTML à seulement 4, soit 56 % d'éléments HTML en moins pour le même contenu.
La réduction exacte dépend de la structure et de la complexité de chaque page, mais le principe reste le même : moins de wrappers nécessaires signifie un DOM plus propre et moins profond.
Améliorations des Sections & Columns
Le système existant de Sections & Columns a également été amélioré dans Creative Elements 3.16.
Vos pages actuelles restent entièrement prises en charge et continuent de fonctionner comme auparavant. En activant la nouvelle option Sortie DOM optimisée, Creative Elements peut simplifier le HTML généré en supprimant, lorsque cela est possible, les wrappers inutiles.
Cela signifie que vous pouvez obtenir un DOM plus propre et moins profond avec vos mises en page Sections & Columns existantes, sans reconstruire vos pages ni modifier leur design.
Découvrez les Flexbox Containers
Sortie DOM optimisée rend le système existant de Sections & Columns plus léger. Mais jusqu'où pouvons-nous pousser l'optimisation ?
Pour réduire encore davantage le nombre de niveaux structurels nécessaires, Creative Elements 3.16 introduit les Flexbox Containers, une nouvelle option de mise en page disponible aux côtés des Sections & Columns.
Les Containers sont disponibles aux côtés des Sections & Columns. Rien ne change donc pour vos pages existantes. Vous pouvez continuer à utiliser vos mises en page actuelles comme auparavant et commencer à utiliser les Containers là où ils sont pertinents pour vos designs nouveaux ou existants.
Avec les Containers, les widgets peuvent être placés directement dans un Container sans nécessiter de Column séparée. Les Containers peuvent également être imbriqués dans d'autres Containers lorsqu'une structure supplémentaire est nécessaire.
Le résultat : moins de niveaux nécessaires et un contrôle plus direct sur vos mises en page.
Flexbox Containers vs. Sections & Columns
Les Flexbox Containers vous offrent un contrôle plus direct sur la disposition, l'alignement, la taille et la répartition des éléments.
| Flexbox Containers | Sections & Columns | |
|---|---|---|
| Structure | Les widgets peuvent être placés directement dans un Container, sans nécessiter de Column supplémentaire. | Les widgets doivent être placés dans une Column, qui appartient elle-même à une Section. |
| Largeur des widgets | Les widgets sont inline par défaut, ce qui permet à plusieurs widgets de se placer naturellement côte à côte dans le même Container. | Les widgets occupent toute la largeur par défaut et s'empilent normalement verticalement dans leur Column. |
| Direction de la mise en page | Disposez les widgets horizontalement ou verticalement à l'aide de Row, Column, Row Reverse ou Column Reverse. | Les mises en page suivent la structure traditionnelle de Sections et Columns, avec un contrôle moins direct sur la direction des éléments qu'elles contiennent. |
| Imbrication | Placez des Containers à l'intérieur d'autres Containers pour créer des mises en page plus complexes uniquement lorsque vous en avez besoin. | Les mises en page plus complexes nécessitent généralement une Inner Section avec des Columns supplémentaires, ajoutant ainsi des niveaux structurels supplémentaires à la page. |
| Mises en page responsive | Modifiez la direction, l'alignement, l'ordre et la taille selon les appareils tout en conservant la même structure de Container. | Les ajustements responsive sont plus limités et certaines mises en page peuvent nécessiter d'inverser les Columns ou de créer des structures supplémentaires. |
Contrôlez votre mise en page avec les Containers
Les Containers vous donnent un contrôle direct sur la disposition des widgets.
Le paramètre Direction définit la mise en page de base. Choisissez Ligne pour placer les éléments côte à côte horizontalement, ou Colonne pour les empiler verticalement.
Vous pouvez ensuite contrôler la répartition et l'alignement des éléments, ajuster l'espace entre eux, définir leur taille, modifier leur ordre ou leur permettre de passer à la ligne suivante.
Par exemple, placer quatre images sur une même ligne ne nécessite plus une Section avec quatre Columns distinctes. Ajoutez simplement les images dans un Container, définissez sa direction sur Row, puis utilisez les contrôles d'alignement et d'espacement pour les positionner.
Créez des mises en page responsive avec le même Container
L'un des principaux avantages de Flexbox est la facilité avec laquelle une mise en page peut s'adapter aux différentes tailles d'écran.
Un Container peut utiliser Ligne sur desktop et Colonne sur mobile. Vous pouvez également modifier l'alignement, l'ordre, l'espacement, la taille et d'autres paramètres pour chaque appareil.
Au lieu de créer des structures supplémentaires pour adapter une mise en page au mobile, vous pouvez utiliser le même Container et l'adapter aux différentes tailles d'écran.
Imbriquez des Containers pour des mises en page plus complexes
Besoin d'une structure plus avancée ? Placez simplement des Containers à l'intérieur d'autres Containers.
Chaque Container peut avoir sa propre direction, son propre alignement, sa propre taille et ses propres paramètres responsive. Vous pouvez ainsi combiner des mises en page horizontales et verticales pour créer des structures plus complexes sans dépendre de multiples Sections, Columns et Inner Sections.
Gardez votre structure aussi simple que possible. Ajoutez des Containers imbriqués lorsque votre mise en page en a besoin, plutôt que d'ajouter des niveaux supplémentaires par défaut.
Les Sections & Columns existantes peuvent être converties en Containers, ce qui vous permet de moderniser progressivement vos mises en page tout en conservant vos designs existants.
Prêt à essayer les Flexbox Containers ?
Vous souhaitez explorer le nouveau système de mise en page avant de l'utiliser sur vos propres pages ?
Visitez notre Flexbox Container Playground pour découvrir le fonctionnement des Containers et tester les nouveaux contrôles de mise en page.
Nous avons également préparé des exemples pratiques montrant comment convertir des mises en page Creative Elements existantes en Containers.
Une meilleure façon de gérer votre design
Maintenir un design cohérent dans l'ensemble de votre boutique devient beaucoup plus simple.
Avec Global Colors et Global Fonts, vous pouvez définir une seule fois vos couleurs et votre typographie principales, puis les réutiliser dans tous vos designs Creative Elements.
Modifiez un style global une seule fois et chaque élément qui l'utilise suivra automatiquement la modification. Plus besoin de parcourir vos pages pour modifier encore et encore la même couleur ou la même police.
Nous avons également repensé Theme Style, en intégrant les paramètres de style de l'ensemble de votre site directement dans le Live Editor.
Passez moins de temps à répéter les mêmes réglages de style et davantage de temps à créer votre design.
Chargement amélioré des ressources
Creative Elements 3.16 gère plus intelligemment les ressources chargées sur chaque page.
Le JavaScript des widgets et les bibliothèques tierces sont désormais chargés dynamiquement, de sorte que les scripts et les bibliothèques nécessaires à un widget ne sont chargés que lorsque ce widget est réellement utilisé sur la page. Cela se fait automatiquement et permet de réduire le JavaScript inutile sans aucune configuration supplémentaire.
Vous pouvez également activer le Chargement dynamique de la bibliothèque pour modifier la manière dont ces bibliothèques sont chargées. Lorsque cette option est activée, les bibliothèques sont chargées de manière asynchrone avec JavaScript au lieu d'être ajoutées au contenu de la page par PHP, ce qui permet d'optimiser davantage le chargement des ressources.
Ensemble, ces améliorations réduisent les ressources frontend inutiles et permettent à Creative Elements de ne charger que ce dont chaque page a réellement besoin.
Plus de possibilités de design
Creative Elements 3.16 introduit plusieurs nouveaux outils pour créer des mises en page et des effets visuels plus avancés.
- Conteneur grille: créez des mises en page bidimensionnelles avec un contrôle sur les lignes et les colonnes, idéales pour des designs basés sur des grilles plus complexes.
- Éléments imbriqués: placez des widgets à l'intérieur des widgets compatibles. Les widgets Tabs renouvelé et Accordion sont les premiers à prendre en charge l'imbrication, vous offrant beaucoup plus de liberté pour créer leur contenu.
- Masque: appliquez des masques aux éléments pour créer des formes personnalisées et des compositions visuelles plus originales directement dans l'éditeur.
- Custom Units: utilisez des unités CSS supplémentaires ainsi que des fonctions mathématiques CSS telles que calc(), min(), max() et clamp() pour bénéficier d'un dimensionnement et d'un espacement plus flexibles.
Un workflow plus rapide
Certaines des améliorations les plus utiles de cette version ont été conçues pour vous faire gagner du temps lors de vos tâches d'édition quotidiennes.
Voici les nouveautés pour accélérer votre workflow :
- Copier-coller entre sites: copiez du contenu Creative Elements depuis un site et collez-le directement dans un autre. Un gain de temps considérable lorsque vous travaillez sur plusieurs boutiques PrestaShop.
- Sélection multiple: sélectionnez plusieurs éléments à la fois et effectuez des actions groupées comme Copy, Paste ou Delete.
- Widgets favoris: enregistrez les widgets que vous utilisez le plus souvent et retrouvez-les facilement dans leur propre section.
- Ajouter des widgets en un clic: ajoutez des widgets directement à votre page d'un simple clic, sans devoir systématiquement les glisser-déposer.
- Sélecteur de couleurs: sélectionnez directement des couleurs à partir d'images et des contrôles de couleur existants pendant que vous créez votre design.
De petites améliorations individuellement, mais qui, ensemble, rendent le travail quotidien dans l'Editor nettement plus fluide.
Le responsive design, en toute simplicité
Le nouveau Responsive Mode facilite le passage d'un appareil à l'autre et vous permet d'affiner vos designs pour desktop, tablette et mobile.
Vous pouvez choisir votre appareil responsive par défaut, décider si les éléments masqués restent visibles pendant l'édition et ajuster davantage de paramètres individuellement pour chaque taille d'écran.
Un nouveau look pour Creative Elements
Vous remarquerez la différence dès l'ouverture de Creative Elements. Le Live Editor et les autres écrans de Creative Elements bénéficient d'une nouvelle palette de couleurs, avec une interface plus épurée et plus simple, optimisée pour l'accessibilité.
- Ajustement des valeurs par glissement: Click and drag numeric controls label to quickly adjust their values.
- Plus d'options de style: Additional size units, responsive z-index, Word Spacing, and RGBA and HSLA color formats give you more control over your designs.
- Meilleure gestion des SVG: Media controls have been improved to handle SVG uploads more reliably.
- Google Fonts mis à jour: The available Google Fonts list has been refreshed.
- Raccourcis clavier améliorés: The shortcuts panel has been updated with quick access to Page Settings and User Preferences.
Comment mettre à jour ?
La nouvelle version de Creative Elements est disponible dès maintenant. Vous pouvez effectuer la mise à jour directement depuis votre gestionnaire de modules et commencer immédiatement à profiter des nouvelles améliorations de performances.
Commencez par une optimisation simple : activez Optimized DOM Output et Dynamic Library Loading pour vos mises en page existantes.
Ensuite, lorsque vous serez prêt, explorez les Flexbox Containers dans notre Playground et commencez à utiliser le nouveau système de mise en page pour vos nouveaux designs, ou convertissez progressivement vos pages existantes.
Bienvenue dans la nouvelle génération de Creative Elements.
Explorer d’autres mises à jour
Creative Elements 2.5.9 : Introduction des effets avancés de design et de motion
Creative Elements 2.5.9 introduit des capacités de design avancées, incluant les effets de mouvement…
En savoir plus »
Creative Elements 2.5.10 : Introduction du Product Miniature Builder et des Dynamic Tags
Creative Elements 2.5.10 introduit de nouvelles fonctionnalités puissantes conçues pour vous offrir …
En savoir plus »
Creative Elements 2.13 : Support de PrestaShop 9, nouveaux constructeurs de pages et bien plus encore
Nous sommes ravis d’annoncer la sortie de Creative Elements 2.13, une mise à jour majeure riche en n…
En savoir plus »