Divi Builder : Le constructeur de page ultime pour vos sites WordPress
Dans cet article, nous allons voir en détail le constructeur de pages Divi Builder pour WordPress, en mettant l’accent sur ses fonctionnalités, ses modules, son interface et sa facilité d’utilisation. L’objectif est de vous aider à déterminer si ce constructeur de page est le bon choix pour la création de votre site internet.
Les constructeurs de pages sur WordPress ont gagné en popularité au fil des années, car ils offrent une solution facile et rapide pour créer des sites internet sans avoir besoin de connaissance en langage informatique. Parmi les constructeurs de pages les plus populaires disponibles pour WordPress, Divi Builder occupe la première place avec Elementor, son principal concurrent. Il est un choix solide en matière de création de sites aussi bien pour les professionnels que pour les débutants.
Divi Builder a été développé et lancé en 2013 par ElegantThemes, une entreprise bien établie dans le domaine des thèmes et des plugins WordPress. Initialement conçu comme un complément au thème Divi, il a évolué pour devenir un constructeur de pages indépendant, compatible avec d’autres thèmes WordPress.
Au fil des ans, Divi Builder a continué à se développer en ajoutant de nouveaux modules, en améliorant les performances et en offrant des intégrations avec d’autres services et outils populaires. Aujourd’hui, Divi Builder est considéré comme l’un des constructeurs de pages les plus complets et les plus puissants disponibles pour WordPress.
Aperçu rapide des principaux avantages de Divi Builder
Voici quelques-uns des principaux avantages de Divi Builder :
Interface utilisateur intuitive
Divi Builder est facile à utiliser, même pour les débutants, grâce à son interface utilisateur glisser-déposer. Vous pourrez rapidement créer des mises en page, ajouter des modules de contenu et personnaliser les paramètres sans avoir besoin de compétences en langage web.
Personnalisation avancée
Avec plus de 40 modules de contenu préconçus et une multitude d’options de personnalisation, Divi Builder vous permet de créer un site web unique et attrayant qui correspond à votre marque et à vos objectifs.
Responsive design
Divi Builder est conçu pour s’adapter automatiquement à tous les types d’appareils, y compris les ordinateurs de bureau, les tablettes et les smartphones. Vous pourrez également personnaliser les paramètres pour chaque type d’appareil
Économies financières
Divi Builder est inclus dans l’abonnement à Elegant Themes, qui comprend également d’autres thèmes et plugins premium pour un prix compétitif.
Mises à jour régulières et support
Elegant Themes propose des mises à jour régulières pour Divi Builder, y compris de nouvelles fonctionnalités et des améliorations de sécurité. De plus, ils offrent un support client rapide et fiable pour aider à résoudre les problèmes et répondre aux questions.
Gain de temps et d’efforts
Grâce à ses modèles prédéfinis et à ses outils de duplication et de réutilisation, Divi Builder vous permet de créer rapidement des pages et des mises en page sans avoir à partir de rien à chaque fois.
Forte Communauté
Divi Builder bénéficie d’une large communauté d’utilisateurs et de développeurs qui partagent des conseils, des astuces et des ressources pour tirer le meilleur parti du constructeur de pages.
Les fonctionnalités et caractéristiques clés de Divi Builder
Interface glisser-déposer (drag-and-drop)
L’une des principales caractéristiques de Divi Builder est son interface intuitive basée sur fonctionnement par glisser-déposer (drag-and-drop). Cette fonctionnalité permet vous permet de créer et de personnaliser les pages de votre site en déplaçant simplement les sections et les modules à l’endroit souhaité. Cela facilite grandement la création de mises en page complexes et offre une grande liberté créative.
Les modules
Divi Builder propose un large éventail de modules, des éléments de de contenu préconçus, tels que des galeries d’images, des formulaires de contact, des témoignages, des boutons, des compteurs, et bien d’autres encore. Ces modules peuvent être insérés dans vos pages et personnalisés en fonction de vos gouts. De plus, les modules peuvent être enregistrés et réutilisés ultérieurement, ce qui permet un gain de temps considérable.
Nous verrons plus tard dans cet article de façon détaillé les différents modules fournit par Divi Builder.
Personnalisation avancée des designs
Grâce à Divi Builder, vous pourrez personnaliser en profondeur l’apparence de vos pages. Les options de personnalisation incluent la modification des polices, des couleurs, des marges, des espacements, des arrière-plans et bien d’autres aspects.
De plus, vous pourrez également créer des effets visuels avancés, tels que des animations et des transitions, pour donner vie à votre site Web.
Aperçu des modifications temps réel
Divi Builder propose une fonction d’édition en temps réel, également appelée édition en front-end, qui permet visualiser instantanément les modifications apportées à sa page Cette fonctionnalité facilite l’ajustement des éléments de design sans avoir à actualiser la page ni à passer entre l’éditeur et l’aperçu.
Intégration avec WooCommerce
Divi Builder fournit différents modules dédiés à WooCommerce, le plugin le plus utilisées pour la création de boutiques en ligne avec WordPress.
Grâce à ces modules, vous pourrez personnaliser les pages de produits, les catégories, ajouter des éléments tels qu’un bouton Ajouter au panier, des descriptions de produits, des prix, etc.
Responsive
Divi Builder permet de créer des sites internet dit réactifs, c’est-à-dire qui s’adapte automatiquement aux différents types d’écrans et de résolutions, tels que les ordinateurs de bureau, les tablettes et les smartphones. De plus, vous pourrez prévisualiser et ajuster le design sur différents appareils directement depuis l’interface de Divi Builder.
Exploration approfondie des différents modules de Divi Builder
Les modules sont les éléments clés utilisés pour créer des pages avec Divi Builder. Ils sont composés de divers éléments tels que des boutons, des images, des galeries, des formulaires… Il existe plus de 40 modules disponibles dans Divi Builder auquel il faut rajouter les modules pour WooCommerce.
Tous ces modules s’intègrent à vos pages par glisser-déposer et offrent des fonctionnalités spécifiques ainsi que de nombreuses options de personnalisations.
Beaucoup de modules ont en commun les options de personnalisation ci-dessous, c’est pourquoi je ne les préciserai pas à chaque fois.
- Couleurs et polices : Permet de personnaliser les couleurs, les polices et les tailles de texte, des boutons, etc.
- Bordures et arrière-plans : Permet d’ajouter et d’ajuster les bordures, les couleurs d’arrière-plan et les rayons de bordure pour créer un aspect visuel distinct et cohérent.
- Espacement : Permet de modifier les marges et les espacements internes des modules pour contrôler l’espacement entre les éléments et améliorer la lisibilité.
- Effets de survol : Permet de créer des effets de survol sur les éléments, tels que des changements de couleur, des soulignements, des changements de taille, etc.
- Animation : Permet d’ajouter des effets d’animation pour attirer l’attention sur l’élément lorsque les visiteurs font défiler la page.
- Bordures et rayons de bordure : Pour d’ajuster les bordures et les rayons de bordure de l’élément.
Modules de texte et de contenu
Titre
Le module titre vous permet d’ajouter et de personnaliser les titres. Ces derniers sont essentiels pour structurer le contenu de vos pages et guider vos lecteurs à travers les différentes sections. Avec ce module, vous pourrez ajuster la taille, la couleur, la police, l’espacement… des titres. Ainsi qu’ajouter des effets d’animation ou de défilement pour les rendre plus attrayants et dynamiques.
Texte
Ce module offre une grande flexibilité pour adapter le texte à votre design et à vos besoins en matière de contenu. Comme pour les titres, vous pourrez modifier la taille, la couleur, la police, l’espacement…
Barre latérale
Grâce à ce module, vous pourrez insérer des barres latérales dans n’importe quelle partie de votre page, y compris à l’intérieur des sections et des colonnes.
Pour utiliser ce module, vous devez d’abord configurer les widgets de votre barre latérale WordPress en accédant à l’interface d’administration de votre site, puis en naviguant vers Apparence > Widgets. Une fois vos widgets configurés, ajoutez simplement le module barre latérale à votre page Divi et sélectionnez la barre latérale que vous souhaitez afficher.
Le module offre plusieurs options de personnalisation, telles que la possibilité d’ajuster l’espacement entre les widgets, de modifier les couleurs et les polices, et d’appliquer des effets d’animation. En combinant ce module avec d’autres modules Divi Builder, vous pourrez créer des mises en page complexes dignes d’un professionnel.
Blog
Le module blog vous permet d’afficher vos articles de blog sur une page pour inciter vos lecteurs à explorer vos autres publications. Ce module est très flexible, vous pourrez choisir parmi différents styles de présentation, tels que la grille, la liste ou le masonry. Vous pourrez également personnaliser le nombre d’articles affichés, les catégories incluses et les métadonnées associées à chaque publication.
Parmi les options de personnalisation du module blog, vous trouverez :
- Format d’affichage : Sélectionnez entre les formats grille, liste ou masonry pour présenter vos articles.
- Nombre d’articles : Déterminez combien d’articles doivent être affichés.
- Catégories : Choisissez les catégories d’articles à inclure ou à exclure.
- Métadonnées : Personnalisez les informations affichées pour chaque article, telles que l’auteur, la date, les catégories et les commentaires.
- Pagination : Activez ou désactivez la pagination pour permettre aux visiteurs de naviguer entre les pages d’articles.
- Mise en forme : Ajustez les couleurs, les polices, les marges et d’autres propriétés de style pour que le module blog corresponde à l’apparence de votre site.
Curseur de défilement des articles
Le module curseur de défilement des articles (également appelé Post Slider) vous permet d’afficher vos articles de blog récents sous forme de diaporama. Ce module est idéal pour mettre en avant vos publications les plus récentes ou les plus populaires de manière visuelle et attrayante. Vos lecteurs pourront naviguer à travers les articles à l’aide des flèches de navigation ou des points de pagination.
Parmi les options de personnalisation du module curseur de défilement des articles, vous trouverez :
- Sélection d’articles : Choisissez les articles à afficher en fonction de leur catégorie, de leur date ou de leur popularité.
- Nombre d’articles : Déterminez le nombre d’articles à inclure dans le curseur.
- Affichage du contenu : Personnalisez l’affichage des métadonnées, telles que l’auteur, la date, les catégories et les commentaires. Vous pouvez aussi déterminer la longueur de l’extrait de texte pour chaque article.
- Navigation : Choisissez le style et la position des flèches de navigation et des points de pagination.
- Transition : Sélectionnez le type de transition (glissement ou fondu) et la durée entre les diapositives.
- Autoplay : Activez ou désactivez la lecture automatique et réglez la durée d’affichage de chaque diapositive.
- Mise en forme : Ajustez les couleurs, les polices, les marges et d’autres propriétés de style pour que le module curseur de défilement des articles s’intègre harmonieusement à votre site.
Menu
Les menus de navigation sont essentiels pour aider vos visiteurs à naviguer facilement sur votre site et à trouver rapidement les informations qu’ils recherchent. Avec ce module, vous pouvez ajouter des liens vers des pages, des articles, des catégories ou des éléments personnalisés, et personnaliser l’apparence du menu pour qu’il corresponde à l’esthétique de votre site.
Parmi les options de personnalisation du module Menu, vous trouverez :
- Sélection du menu : Choisissez le menu que vous souhaitez afficher parmi les menus que vous avez créés dans l’interface de gestion des menus de WordPress.
- Orientation : Choisissez l’orientation du menu (horizontal ou vertical) pour l’adapter à l’emplacement et à la disposition de votre site.
- Couleurs : Personnalisez les couleurs du texte, des liens, des arrière-plans et des séparateurs pour qu’ils correspondent à l’esthétique de votre site ou pour créer un contraste visuel.
- Polices et tailles de texte : Personnalisez les polices et les tailles de texte des éléments du menu pour qu’ils correspondent à l’esthétique de votre site et soient faciles à lire.
- Espacement : Contrôlez l’espacement entre les éléments du menu pour une disposition propre et ordonnée.
- Bordures et rayons de bordure : Ajustez les bordures et les rayons de bordure des éléments du menu pour créer un aspect visuel distinct et cohérent.
- Effets de survol : Personnalisez les effets de survol des éléments du menu, tels que les changements de couleur ou les soulignements, pour signaler les liens interactifs et encourager la navigation.
- Sous-menus : Personnalisez l’apparence et le comportement des sous-menus, tels que les menus déroulants, pour une navigation hiérarchique et intuitive.
Chercher
Le module Chercher vous permet d’ajouter une barre de recherche sur votre site. Ces dernières sont importantes pour aider vos lecteurs à trouver rapidement et facilement le contenu qu’ils recherchent.
Parmi les options de personnalisation du module Chercher, vous trouverez :
- Placeholder : Entrez un texte de substitution dans le champ de recherche pour guider vos visiteurs et indiquer clairement la fonction du formulaire.
- Bouton de recherche : Personnalisez le texte, la couleur, la taille et la forme du bouton de recherche.
Commentaires
Le module Commentaires vous permet d’ajouter et de personnaliser une section de commentaires sur vos publications. Les commentaires sont un moyen idéal pour permettre à vos lecteurs d’interagir avec vous, mais aussi entre eux, de partager leurs opinions, de poser des questions et d’obtenir des informations supplémentaires. Le module Commentaires est généralement utilisé pour les articles de blog, les pages de produits ou tout autre type de contenu où les discussions et les échanges d’opinions sont souhaités.
Parmi les options de personnalisation du module Commentaires, vous trouverez :
- Nom et adresse e-mail : Demandez aux lecteurs de fournir leur nom et leur adresse e-mail pour laisser un commentaire. Vous pouvez également autoriser les commentaires anonymes.
- Avatar : Affichez ou masquez les avatars des utilisateurs à côté de leurs commentaires pour ajouter une touche personnelle et faciliter la reconnaissance des auteurs.
- Pagination : Activez la pagination pour organiser et afficher les commentaires en plusieurs pages si leur nombre dépasse un seuil spécifique.
- Modération : Activez la modération des commentaires pour examiner et approuver les commentaires avant qu’ils ne soient publiés sur votre site.
- Réponses : Autorisez les réponses aux commentaires pour encourager les discussions et les interactions entre vos lecteurs.
Témoignages
Le module témoignages vous permet d’afficher des citations ou des avis de clients, d’utilisateurs ou de partenaires sur votre site. Les témoignages sont un excellent moyen de renforcer la crédibilité de votre entreprise et de mettre en évidence vos produits ou services. Ce module vous offre la possibilité d’inclure le nom de la personne, sa photo, son titre professionnel et l’avis lui-même.
Parmi les options de personnalisation du module témoignages, vous trouverez :
- Contenu du témoignage : Ajoutez le texte du témoignage, le nom de la personne, son titre professionnel et sa photo. Vous pouvez également ajouter un lien vers un profil en ligne ou une page web pertinente.
- Citation : Personnalisez l’apparence de la citation, y compris la taille, la couleur, la police et l’espacement du texte.
- Mise en page : Choisissez l’alignement du texte et la position de la photo et des informations personnelles.
- Image : Ajustez la taille, la forme (rond, carré, etc.) et les bordures de l’image.
- Arrière-plan : Sélectionnez une couleur d’arrière-plan ou une image pour mettre en valeur le témoignage.
Personne
Le module Personne vous permet d’afficher et de personnaliser des profils de personnes sur votre site. Ce module est idéal pour présenter les membres de votre équipe, les auteurs de votre blog, ou les intervenants de vos événements, de manière attrayante et professionnelle. Vous pouvez inclure des informations telles que le nom, la photo, la biographie, les coordonnées et les liens vers les réseaux sociaux.
Parmi les options de personnalisation du module Personne, vous trouverez :
- Photo : Ajoutez une photo de la personne pour la rendre plus reconnaissable et pour donner un visage aux noms de votre équipe ou de vos auteurs.
- Nom : Indiquez le nom de la personne pour que les visiteurs sachent qui elle est et pour faciliter la recherche de profils spécifiques.
- Titre / Fonction : Ajoutez un titre ou une fonction pour informer vos lecteurs du rôle de la personne au sein de votre organisation ou de votre projet.
- Biographie : Incluez une courte biographie pour donner un aperçu de l’expérience et des compétences de la personne, et pour établir un lien personnel avec les visiteurs.
- Coordonnées : Ajoutez des coordonnées telles que l’adresse e-mail, le numéro de téléphone ou l’adresse physique pour permettre aux visiteurs de contacter la personne directement.
- Réseaux sociaux : Incluez des liens vers les profils de réseaux sociaux de la personne pour permettre aux lecteurs de la suivre et d’en apprendre davantage sur ses activités et ses réalisations.
Modules d'image et de média
Image
Le module image vous permet d’ajouter et de personnaliser des images sur vos pages. Ces dernières sont des éléments clés, car elles contribuent à rendre vos publications attrayantes, à transmettre des messages rapidement et à illustrer vos produits, services ou idées. Avec ce module, vous pouvez insérer des images sur différentes parties de vos pages, y compris à l’intérieur des sections, des colonnes et des modules de texte.
Parmi les options de personnalisation du module image, vous trouverez :
- Source de l’image : Téléchargez une image depuis votre ordinateur ou sélectionnez une image déjà présente dans votre bibliothèque multimédia.
- Taille de l’image : Choisissez parmi plusieurs tailles prédéfinies ou définissez une taille personnalisée pour l’image.
- Alignement : Alignez l’image à gauche, à droite, au centre ou justifiez-la par rapport à son conteneur.
- Légende : Ajoutez une légende facultative à l’image et personnalisez sa mise en forme, y compris la taille, la couleur et la police du texte.
- Bordures et ombres : Appliquez des bordures, des coins arrondis et des ombres portées à l’image pour lui donner un aspect unique et professionnel.
- Effets de survol : Ajoutez des effets de survol, tels que des changements de couleur, des zooms ou des rotations, pour rendre l’image interactive lorsque vos lecteurs passent leur souris dessus.
- Lien : Attribuez un lien à l’image, permettant à vos lecteurs de cliquer dessus pour accéder à une autre page, télécharger un fichier ou ouvrir une fenêtre modale.
Galerie
Le module galerie vous permet de créer et de personnaliser des galeries d’images sur votre site web. Les galeries sont idéales pour présenter une collection de photos, d’illustrations ou de projets de manière organisée et attrayante. Avec ce module, vous pouvez ajouter des images, les organiser en grille ou en mosaïque, et personnaliser l’apparence des vignettes et des légendes.
Parmi les options de personnalisation du module galerie, vous trouverez :
- Ajout d’images : Téléchargez des images depuis votre ordinateur ou sélectionnez des images déjà présentes dans votre bibliothèque multimédia. Vous pouvez également définir l’ordre d’affichage des images.
- Mise en page : Choisissez entre une mise en page en grille (avec des images de taille uniforme) ou en mosaïque (avec des images de tailles différentes).
- Espacement : Ajustez l’espacement entre les images pour créer un aspect plus aéré ou plus compact.
- Taille des vignettes : Sélectionnez la taille des vignettes ou définissez une taille personnalisée pour chaque image.
- Légendes : Activez ou désactivez l’affichage des légendes sous les images et personnalisez leur mise en forme, y compris la taille, la couleur et la police du texte.
- Effets de survol : Ajoutez des effets de survol, tels que des changements de couleur, des zooms ou des rotations, pour rendre les images interactives lorsque les visiteurs passent leur souris dessus.
- Fenêtre modale : Activez l’option pour afficher les images en taille réelle dans une fenêtre modale lorsque vos lecteurs cliquent dessus. Vous pouvez également personnaliser l’apparence de la fenêtre modale et des boutons de navigation.
- Pagination : Activez ou désactivez la pagination pour permettre aux lecteurs de naviguer entre plusieurs pages de la galerie.
Portfolio & Portfolio filtrable
Le module Portfolio (portefeuille) vous permet d’afficher et de personnaliser un portfolio de vos projets, de vos réalisations ou de vos créations sur votre site internet. Un portfolio bien conçu est essentiel pour présenter votre travail de manière professionnelle et pour impressionner vos clients potentiels. Avec ce module, vous pouvez organiser et mettre en valeur vos projets en utilisant différentes mises en page, ajouter des filtres de catégorie, et personnaliser l’apparence du portfolio pour qu’il corresponde à l’esthétique de votre site.
Parmi les options de personnalisation du module Portfolio, vous trouverez :
- Sélection de projets : Choisissez les projets à inclure dans votre portfolio en fonction de leur catégorie, de leur étiquette ou de leur ordre de publication.
- Mises en page : Choisissez parmi différentes mises en page pour votre portfolio, telles que la grille, le carrousel, ou le plein écran, pour mettre en valeur vos projets de manière attrayante et fonctionnelle.
- Filtres de catégorie : Ajoutez des filtres de catégorie pour permettre à vos visiteurs de trier et d’afficher les projets en fonction de leurs domaines d’intérêt ou de leurs compétences.
- Nombre de colonnes : Ajustez le nombre de colonnes pour organiser vos projets de manière ordonnée et proportionnelle à votre mise en page.
- Pagination : Activez la pagination pour faciliter la navigation.
Galerie
Le module galerie vous permet de créer et de personnaliser des galeries d’images sur votre site web. Les galeries sont idéales pour présenter une collection de photos, d’illustrations ou de projets de manière organisée et attrayante. Avec ce module, vous pouvez ajouter des images, les organiser en grille ou en mosaïque, et personnaliser l’apparence des vignettes et des légendes.
Parmi les options de personnalisation du module galerie, vous trouverez :
- Ajout d’images : Téléchargez des images depuis votre ordinateur ou sélectionnez des images déjà présentes dans votre bibliothèque multimédia. Vous pouvez également définir l’ordre d’affichage des images.
- Mise en page : Choisissez entre une mise en page en grille (avec des images de taille uniforme) ou en mosaïque (avec des images de tailles différentes).
- Espacement : Ajustez l’espacement entre les images pour créer un aspect plus aéré ou plus compact.
- Taille des vignettes : Sélectionnez la taille des vignettes ou définissez une taille personnalisée pour chaque image.
- Légendes : Activez ou désactivez l’affichage des légendes sous les images et personnalisez leur mise en forme, y compris la taille, la couleur et la police du texte.
- Effets de survol : Ajoutez des effets de survol, tels que des changements de couleur, des zooms ou des rotations, pour rendre les images interactives lorsque les visiteurs passent leur souris dessus.
- Fenêtre modale : Activez l’option pour afficher les images en taille réelle dans une fenêtre modale lorsque vos lecteurs cliquent dessus. Vous pouvez également personnaliser l’apparence de la fenêtre modale et des boutons de navigation.
- Pagination : Activez ou désactivez la pagination pour permettre aux lecteurs de naviguer entre plusieurs pages de la galerie.
Vidéo
Le module vidéo vous permet d’ajouter et de personnaliser des vidéos sur votre site web. Les vidéos sont un excellent moyen de transmettre des informations de manière dynamique et immersive. Avec ce module, vous pouvez intégrer des vidéos hébergées sur des plateformes populaires comme YouTube et Vimeo, ou télécharger des fichiers vidéo directement depuis votre ordinateur.
Parmi les options de personnalisation du module vidéo, vous trouverez :
- Source de la vidéo : Collez l’URL d’une vidéo hébergée sur une plateforme telle que YouTube ou Vimeo, ou téléchargez un fichier vidéo depuis votre ordinateur.
- Image de couverture : Ajoutez une image de couverture qui s’affiche avant que la vidéo ne soit lue. Vous pouvez utiliser une image personnalisée ou une image générée automatiquement par la plateforme vidéo.
- Légende : Ajoutez une légende facultative pour la vidéo et personnalisez sa mise en forme, y compris la taille, la couleur et la police du texte.
- Contrôles de lecture : Activez ou désactivez les contrôles de lecture pour permettre aux visiteurs de lire, mettre en pause et contrôler le volume de la vidéo.
- Lecture automatique : Activez ou désactivez la lecture automatique de la vidéo lorsque la page est chargée.
- Muet : Activez ou désactivez le son par défaut de la vidéo.
- Boucle : Activez ou désactivez la répétition automatique de la vidéo lorsqu’elle atteint la fin.
Curseur de défilement vidéo
Le module curseur de défilement vidéo vous permet de créer et de personnaliser un diaporama de vidéos sur vos pages. Ce module est parfait pour présenter une série de vidéos, telles que des témoignages clients, des démonstrations de produits ou des extraits de conférences… Les lecteurs peuvent naviguer entre les vidéos à l’aide des flèches de navigation ou des points de pagination.
Parmi les options de personnalisation du module curseur de défilement vidéo, vous trouverez :
- Ajout de vidéos : Ajoutez des vidéos en collant leur URL (de sources telles que YouTube ou Vimeo) ou en téléchargeant des fichiers vidéo depuis votre ordinateur.
- Légendes : Ajoutez des légendes facultatives pour chaque vidéo et personnalisez leur mise en forme, y compris la taille, la couleur et la police du texte.
- Navigation : Choisissez le style et la position des flèches de navigation et des points de pagination.
- Transition : Sélectionnez le type de transition (glissement ou fondu) et la durée entre les diapositives.
- Autoplay : Activez ou désactivez la lecture automatique et réglez la durée d’affichage de chaque diapositive.
- Contrôles de lecture : Personnalisez l’apparence des boutons de lecture/pause, du curseur de volume et de la barre de progression.
Audio
Le module audio vous permet d’ajouter et de personnaliser des fichiers audio sur votre site web. Les fichiers audio sont un excellent moyen de partager des podcasts, des enregistrements de conférences, des interviews ou de la musique. Ce module vous permet d’intégrer des fichiers audio hébergés sur des plateformes populaires comme SoundCloud, ou de télécharger des fichiers audio directement depuis votre ordinateur.
Parmi les options de personnalisation du module audio, vous trouverez :
- Source de l’audio : Collez l’URL d’un fichier audio hébergé sur une plateforme telle que SoundCloud, ou téléchargez un fichier audio depuis votre ordinateur.
- Image de couverture : Ajoutez une image de couverture qui s’affiche à côté du lecteur audio. Vous pouvez utiliser une image personnalisée ou une image générée automatiquement par la plateforme audio.
- Titre et artiste : Ajoutez un titre et le nom de l’artiste pour le fichier audio, et personnalisez leur mise en forme, y compris la taille, la couleur et la police du texte.
- Contrôles de lecture : Activez ou désactivez les contrôles de lecture pour permettre à vos lecteurs de lire, mettre en pause et contrôler le volume du fichier audio.
- Lecture automatique : Activez ou désactivez la lecture automatique du fichier audio lorsque la page est chargée.
- Boucle : Activez ou désactivez la répétition automatique du fichier audio lorsqu’il atteint la fin.
Modules de formulaire
Formulaire de contact
Le module formulaire de contact vous permet de créer, d’ajouter et de personnaliser des formulaires de contact sur votre site. Les formulaires de contact sont essentiels pour permettre à vos lecteurs de vous envoyer des messages, poser des questions ou demander des devis. Ce module vous offre la possibilité d’ajouter différents champs, tels que le nom, l’adresse e-mail, le sujet et le message, et de personnaliser leur apparence et leur disposition.
Parmi les options de personnalisation du module formulaire de contact, vous trouverez :
- Ajout de champs : Ajoutez des champs de texte, des cases à cocher, des boutons radio, des listes déroulantes et des zones de texte pour recueillir différentes informations auprès de vos lecteurs.
- Labels et placeholders : Personnalisez les labels et les placeholders des champs pour indiquer clairement les informations requises.
- Validation : Activez ou désactivez la validation des champs pour vous assurer que toutes les informations ont été complétées correctement avant de soumettre le formulaire.
- Mise en page : Organisez les champs du formulaire en colonnes et en lignes pour créer une mise en page cohérente et attrayante.
- Bouton de soumission : Personnalisez le texte, la couleur et la taille du bouton de soumission pour encourager les visiteurs à envoyer leurs messages.
- Message de confirmation : Personnalisez le message qui s’affiche lorsque le formulaire est soumis avec succès, pour informer les visiteurs que leur message a bien été envoyé.
- Notifications par e-mail : Configurez les paramètres d’envoi des notifications par e-mail, y compris l’adresse e-mail de destination, le sujet et le contenu du message.
- Style : Ajustez les couleurs, les polices et les tailles de texte des labels, des champs et des boutons pour que le formulaire s’intègre harmonieusement dans votre site web.
Formulaire de connexion
Ce module vous permet de créer et de personnaliser des formulaires de connexion. Ils vont permettre à vos lecteurs de s’identifier et d’accéder à des zones réservées aux membres ou à des contenus protégés par mot de passe. Vous pourrez ajouter des champs pour le nom d’utilisateur et le mot de passe, ainsi que de personnaliser leur apparence et leur disposition.
Parmi les options de personnalisation du module formulaire de connexion, vous trouverez :
- Champs de connexion : Ajoutez des champs pour le nom d’utilisateur (ou l’adresse e-mail) et le mot de passe, afin que vos visiteurs puissent saisir leurs identifiants.
- Labels et placeholders : Personnalisez les labels et les placeholders des champs pour guider vos visiteurs et indiquer clairement les informations requises.
- Mise en page : Organisez les champs du formulaire en colonnes et en lignes pour créer une mise en page cohérente et attrayante.
- Bouton de connexion : Personnalisez le texte, la couleur et la taille du bouton de connexion.
- Liens de récupération : Ajoutez des liens pour permettre aux lecteurs de récupérer leur mot de passe oublié ou de créer un nouveau compte.
- Redirection : Configurez une URL de redirection vers une page spécifique une fois la connexion réussie.
Email optin
Le module Email Optin vous permet de créer et de personnaliser des formulaires d’inscription à votre Newsletter. Ils sont indispensables pour recueillir les adresses e-mail de vos lecteurs et les ajouter à votre liste de diffusion pour les tenir informés de vos nouvelles publications, vos offres spéciales, vos promotions… Ce module est compatible avec divers fournisseurs de services d’email marketing, tels que Mailchimp, AWeber, pour gérer et automatiser vos campagnes.
Parmi les options de personnalisation du module Email Optin, vous trouverez :
- Fournisseur d’email marketing : Connectez le module à votre fournisseur de services d’email marketing préféré et sélectionnez la liste à laquelle les lecteurs seront ajoutés.
- Champs d’inscription : Ajoutez des champs pour recueillir les informations souhaitées, telles que l’adresse e-mail, le nom et le prénom.
- Labels et placeholders : Personnalisez les labels et les placeholders des champs pour indiquer clairement les informations requises.
- Mise en page : Organisez les champs du formulaire en colonnes et en lignes pour créer une mise en page cohérente.
- Bouton d’inscription : Personnalisez le texte, la couleur et la taille du bouton d’inscription.
- Message de confirmation : Personnalisez le message qui s’affiche lorsque le formulaire est soumis avec succès, pour informer vos lecteurs que leur inscription s’est déroulée correctement.
Modules de mise en page et de design
Bouton
Le module bouton vous permet d’ajouter et de personnaliser des boutons sur vos pages. Ils sont des éléments de conception importants qui incitent vos lecteurs à effectuer une action spécifique, telle que s’inscrire à une newsletter, acheter un produit, télécharger un fichier ou accéder à une autre page. Avec ce module, vous pourrez créer des boutons qui s’intègrent parfaitement à l’esthétique de votre site.
Parmi les options de personnalisation du module bouton, vous trouverez :
- Texte du bouton : Saisissez le texte que vous souhaitez afficher sur le bouton pour indiquer clairement l’action à effectuer.
- Lien : Entrez l’URL vers laquelle vous voulez que le bouton redirige vos visiteurs lorsqu’ils cliquent dessus. Vous pouvez également définir si le lien doit s’ouvrir dans la même fenêtre ou dans une nouvelle fenêtre.
- Icône : Ajoutez une icône facultative pour compléter le texte du bouton et renforcer le message visuel.
- Style : Personnalisez l’apparence du bouton, y compris la couleur de fond, la couleur du texte, la taille de la police, l’espacement des lettres et la hauteur de ligne. Vous pouvez aussi définir des couleurs et des styles différents lors du survol du bouton.
- Bordure : Ajustez la taille, le style et la couleur de la bordure du bouton pour donner plus de relief et de contraste.
- Rayon de la bordure : Modifiez le rayon de la bordure pour créer des boutons aux coins arrondis ou aux angles droits.
- Ombre : Appliquez une ombre portée au bouton pour lui donner un aspect en relief.
- Animation : Ajoutez des effets d’animation pour attirer l’attention sur le bouton lorsque vos visiteurs font défiler la page.
Séparateur
Le module séparateur vous permet d’ajouter et de personnaliser des lignes de séparation sur vos pages. Les séparateurs sont des éléments de conception utiles pour diviser et organiser votre contenu en sections claires et distinctes. Avec ce module, vous pouvez créer des séparateurs horizontaux ou verticaux adaptés au style et à la mise en page de votre site.
Parmi les options de personnalisation du module séparateur, vous trouverez :
- Orientation : Choisissez entre un séparateur horizontal ou vertical pour diviser votre contenu dans la direction souhaitée.
- Style de ligne : Sélectionnez le style de la ligne de séparation, tel que solide, pointillé, en tirets ou double, pour créer un aspect visuel distinct.
- Couleur : Définissez la couleur de la ligne de séparation pour l’harmoniser avec les couleurs de votre site ou pour ajouter un contraste visuel.
- Largeur et hauteur : Ajustez la largeur et la hauteur du séparateur pour qu’il s’adapte parfaitement à la taille et à l’espacement de votre contenu.
- Marge : Modifiez les marges supérieure et inférieure (ou gauche et droite pour un séparateur vertical) pour contrôler l’espacement entre le séparateur et les éléments adjacents.
Onglet
Le module onglet vous permet d’ajouter et de personnaliser des onglets sur vos publications. Les onglets sont des éléments de conception utiles pour organiser et présenter votre contenu de manière claire et structurée, en regroupant des informations similaires ou liées dans des sections séparées, mais facilement accessibles. Vous pourrez créer des onglets horizontaux ou verticaux, ajouter des titres et du contenu personnalisés, et personnaliser leur apparence pour qu’ils s’intègrent harmonieusement à votre site.
Parmi les options de personnalisation du module onglets, vous trouverez :
- Orientation : Choisissez entre des onglets horizontaux ou verticaux pour organiser votre contenu dans la direction souhaitée.
- Titres des onglets : Saisissez les titres de chaque onglet pour indiquer clairement le contenu ou les sujets qu’ils représentent.
- Contenu des onglets : Ajoutez et formatez le texte, les images, les vidéos et autres éléments pour chaque onglet, en utilisant l’éditeur de texte riche intégré.
Accordéon
Les accordéons sont des éléments de conception interactifs qui permettent de présenter et d’organiser votre contenu de manière compacte et structurée. Ils sont particulièrement utiles pour afficher des informations détaillées ou des questions fréquentes (FAQ) de manière claire et ordonnée. Lorsqu’un élément d’accordéon est cliqué, il s’étend pour afficher le contenu associé, tandis que les autres éléments restent fermés. Avec ce module, vous pouvez ajouter des titres et du contenu personnalisés pour chaque élément d’accordéon et personnaliser leur apparence.
Parmi les options de personnalisation du module accordéon, vous trouverez :
- Titres des éléments d’accordéon : Saisissez les titres de chaque élément d’accordéon pour indiquer clairement le contenu ou les sujets qu’ils représentent.
- Contenu des éléments d’accordéon : Ajoutez et formatez le texte, les images, les vidéos et autres éléments pour chaque élément d’accordéon, en utilisant l’éditeur de texte intégré.
- Icônes : Sélectionnez les icônes d’ouverture et de fermeture pour chaque élément d’accordéon pour indiquer visuellement leur état et encourager l’interaction.
Bascule
Les bascules sont des éléments interactifs similaires aux accordéons, qui permettent de présenter et d’organiser votre contenu de manière compacte et structurée. Les bascules sont particulièrement utiles pour afficher des informations détaillées ou des questions fréquentes (FAQ) de manière claire et ordonnée. Lorsqu’un élément de bascule est cliqué, il s’étend pour afficher le contenu associé, tandis que les autres éléments peuvent rester ouverts. Avec ce module, vous pouvez ajouter des titres et du contenu personnalisés pour chaque élément de bascule et personnaliser leur apparence.
Parmi les options de personnalisation du module Bascule, vous trouverez :
- Titres des éléments de bascule : Saisissez les titres de chaque élément de bascule pour indiquer clairement le contenu ou les sujets qu’ils représentent.
- Contenu des éléments de bascule : Ajoutez et formatez le texte, les images, les vidéos et autres éléments pour chaque élément de bascule, en utilisant l’éditeur de texte riche intégré.
- Icônes : Sélectionnez les icônes d’ouverture et de fermeture pour chaque élément de bascule pour indiquer visuellement leur état et encourager l’interaction.
Icône
Avec ce module, vous pouvez choisir parmi une vaste bibliothèque d’icônes, ajuster leur taille, leur couleur et leur espacement, et ajouter des liens ou des effets d’animation.
Parmi les options de personnalisation du module Icône, vous trouverez :
- Sélection d’icône : Choisissez parmi une large gamme d’icônes pour trouver celle qui correspond le mieux à votre contenu ou à la fonction que vous souhaitez mettre en avant.
- Couleurs : Personnalisez la couleur de l’icône et de l’arrière-plan.
- Taille : Ajustez la taille de l’icône pour qu’elle soit proportionnelle à votre contenu et à votre mise en page.
- Espacement : Contrôlez l’espacement autour de l’icône pour éviter les chevauchements avec d’autres éléments.
- Bordures et rayons de bordure : Ajustez les bordures et les rayons de bordure de l’icône.
- Liens : Ajoutez des liens à vos icônes pour diriger vos lecteurs vers d’autres pages ou sections de votre site, ou vers des ressources externes.
Modules de réseaux sociaux
Le module Suivez-nous sur les réseaux sociaux vous permet d’ajouter et de personnaliser des boutons de partage et de suivi pour les réseaux sociaux sur vos pages. Avec ce module, vous pouvez ajouter des liens vers vos profils sur des plateformes telles que Facebook, Twitter, Instagram, LinkedIn, Pinterest, YouTube… et personnaliser l’apparence des boutons pour qu’ils correspondent à l’esthétique de votre site.
Parmi les options de personnalisation du module Suivez-nous sur les réseaux sociaux, vous trouverez :
- Plateformes de réseaux sociaux : Sélectionnez les plateformes de réseaux sociaux que vous souhaitez inclure et entrez les liens vers vos profils correspondants.
- Style des icônes : Choisissez parmi plusieurs styles d’icônes pour personnaliser l’apparence des boutons de réseaux sociaux, tels que des icônes simples, des icônes avec des cercles ou des carrés, et des icônes avec des arrière-plans colorés.
- Couleurs : Ajustez les couleurs des icônes et des arrière-plans pour qu’ils correspondent à l’esthétique de votre site ou pour ajouter un contraste visuel.
- Taille des icônes : Modifiez la taille des icônes pour qu’elles s’intègrent harmonieusement à votre mise en page et attirent l’attention de vos visiteurs.
Modules d'animation
Compteur barre
Le module Compteur Barre vous permet d’ajouter et de personnaliser des barres de progression animées sur vos pages. Ces barres de progression sont un moyen visuel et attrayant de présenter des informations quantitatives, telles que les compétences, les progrès d’un projet, les pourcentages de réalisation ou tout autre type de données chiffrées.
Parmi les options de personnalisation du module Compteur Barre, vous trouverez :
- Titres des barres de progression : Saisissez les titres de chaque barre de progression pour indiquer clairement le sujet ou la compétence qu’ils représentent.
- Pourcentages : Entrez les pourcentages pour chaque barre de progression pour montrer visuellement la quantité, le niveau ou le progrès réalisé.
Compteur cercle
Le module Compteur Cercle vous permet d’ajouter et de personnaliser des compteurs circulaires animés sur votre site web. Ces compteurs circulaires sont une manière visuelle et attrayante de présenter des informations quantitatives, telles que les compétences, les pourcentages de réalisation, ou tout autre type de données chiffrées.
Parmi les options de personnalisation du module Compteur Cercle, vous trouverez :
- Titres des compteurs circulaires : Saisissez les titres de chaque compteur circulaire pour indiquer clairement le sujet ou la compétence qu’ils représentent.
- Pourcentages : Entrez les pourcentages pour chaque compteur circulaire pour montrer visuellement la quantité, le niveau ou le progrès réalisé.
Compteur nombre
Le module Compteur Nombre vous permet d’ajouter et de personnaliser des compteurs de chiffres animés sur votre site web. Ces compteurs de chiffres sont une manière visuelle et attrayante de présenter des informations quantitatives, telles que le nombre de clients satisfaits, les projets réalisés, les produits vendus ou tout autre type de données chiffrées.
Parmi les options de personnalisation du module Compteur Nombre, vous trouverez :
- Titres des compteurs de chiffres : Saisissez les titres de chaque compteur de chiffres pour indiquer clairement le sujet ou la statistique qu’ils représentent.
- Chiffres : Entrez les chiffres pour chaque compteur de chiffres pour montrer visuellement la quantité, le niveau ou le progrès réalisé.
Compte à rebours
Les compteurs à rebours sont un excellent moyen d’attirer l’attention sur un événement, une promotion, une offre spéciale ou une date limite. Avec ce module, vous pouvez définir une date et une heure spécifiques pour la fin du compte à rebours, et personnaliser son apparence.
Parmi les options de personnalisation du module Compte à rebours, vous trouverez :
- Date et heure : Définissez la date et l’heure exactes auxquelles le compte à rebours doit se terminer. Cela peut être utile pour des événements spécifiques, des promotions à durée limitée ou des dates limites pour les inscriptions.
- Format d’affichage : Choisissez le format d’affichage du compte à rebours, y compris les jours, les heures, les minutes et les secondes, pour montrer le temps restant de manière précise et compréhensible.
Divers
Appel à action
Le module Appel à l’action vous permet d’ajouter et de personnaliser des boites d’appel à l’action (CTA – Call To Action) sur votre site web. Les CTA encouragent vos lecteurs à effectuer une action spécifique, comme s’inscrire à une newsletter, acheter un produit, ou demander un devis. Ce module vous offre la possibilité de personnaliser le texte, la couleur, la taille et la forme du bouton, ainsi que d’ajouter un titre et une description pour expliquer l’objectif de l’action.
Parmi les options de personnalisation du module Appel à l’action, vous trouverez :
- Titre : Ajoutez un titre pour décrire l’objectif de l’appel à l’action et attirer l’attention de vos visiteurs.
- Description : Incluez une description pour expliquer les avantages ou les résultats attendus de l’action proposée, et pour inciter les lecteurs à agir.
- Bouton : Personnalisez le texte, la couleur, la taille et la forme du bouton.
- Lien : Ajoutez un lien vers la page ou le formulaire associé à l’action.
Tableaux des tarifs
Le module Tableau des tarifs vous permet de créer, de personnaliser et d’ajouter des tableaux tarifaires pour vos produits ou services sur votre site. Ce module est idéal pour les entreprises qui proposent plusieurs niveaux de prix, des plans d’abonnement ou des offres groupées. Vous pouvez inclure des informations telles que le nom du plan, le prix, la période de facturation, les caractéristiques incluses et un bouton d’appel à l’action pour l’achat ou l’inscription.
Parmi les options de personnalisation du module Tableau des tarifs, vous trouverez :
- Nom du plan : Indiquez le nom de chaque plan ou niveau de prix pour aider vos clients à identifier rapidement l’offre qui leur convient le mieux.
- Prix : Affichez le prix de chaque plan, en incluant éventuellement la période de facturation (par exemple, par mois ou par an) pour plus de clarté.
- Liste des caractéristiques : Présentez les caractéristiques incluses dans chaque plan pour permettre à vos clients de comparer facilement les offres et choisir celle qui répond au mieux à leurs besoins.
- Bouton d’appel à l’action : Ajoutez un bouton d’appel à l’action pour chaque plan, avec un lien vers la page d’achat ou d’inscription correspondante, pour encourager les visiteurs à prendre une décision et à passer à l’action.
- Mise en avant d’un plan : Mettez en avant un plan spécifique pour attirer l’attention sur l’offre la plus populaire ou la plus rentable.
- Disposition : Choisissez la disposition du tableau des tarifs, comme une grille ou une liste, pour présenter vos offres de manière attrayante et organisée.
Code
Le module Code vous permet d’ajouter et de personnaliser des blocs de code HTML, CSS, JavaScript ou d’autres langages de programmation directement sur vos pages. Ce module est idéal pour les développeurs web et les concepteurs qui souhaitent intégrer des fonctionnalités personnalisées, des scripts ou des éléments de style à leur site Divi. Le module Code vous offre un contrôle total sur le contenu et la présentation de vos éléments personnalisés.
Parmi les options de personnalisation du module Code, vous trouverez :
- Bloc de code : Insérez votre code HTML, CSS, JavaScript ou autre code directement dans le module. Le code sera rendu et exécuté sur votre site.
- Aperçu : Visualisez l’aperçu de votre code personnalisé directement dans l’éditeur Divi, vous permettant de voir les changements en temps réel.
- Intégrations externes : Intégrez des bibliothèques de scripts, des feuilles de style ou d’autres ressources externes pour étendre les fonctionnalités de votre site.
- Responsive : Utilisez des Medias queries ou d’autres techniques de conception adaptative pour garantir que votre code personnalisé fonctionne correctement sur tous les appareils et toutes les tailles d’écran.
Carte
Le module Carte vous permet d’intégrer et de personnaliser des cartes interactives Google Maps sur votre site internet. Ce module est idéal pour afficher l’emplacement de votre entreprise, de vos événements ou de vos points d’intérêt, et pour aider vos clients à planifier leur itinéraire. Vous pouvez personnaliser l’apparence de la carte, ajouter des marqueurs pour indiquer des emplacements spécifiques et inclure des informations supplémentaires telles que des adresses et des descriptions.
Parmi les options de personnalisation du module Carte, vous trouverez :
- Emplacement : Entrez l’adresse ou les coordonnées de l’emplacement que vous souhaitez afficher sur la carte.
- Marqueurs : Ajoutez des marqueurs pour indiquer des emplacements spécifiques sur la carte, tels que votre bureau, votre magasin ou votre lieu d’événement.
- Zoom : Contrôlez le niveau de zoom de la carte pour montrer plus ou moins de détails.
- Styles de carte : Personnalisez l’apparence de la carte en modifiant les couleurs, les textures et les éléments visuels pour qu’ils correspondent à l’esthétique de votre site.
- Info-bulles : Incluez des informations supplémentaires, telles que les adresses et les descriptions, dans les info-bulles qui apparaissent lorsque les lecteurs cliquent sur les marqueurs de la carte.
- Contrôles de la carte : Activez ou désactivez les contrôles de la carte, tels que le zoom, la rotation et le déplacement, pour permettre aux clients d’interagir avec la carte comme ils le souhaitent.
- Mode plein écran : Permettez aux lecteurs de passer en mode plein écran pour explorer la carte plus en détail et planifier leur itinéraire.
- Responsive : Permet d’afficher la carte correctement sur tous les appareils et toutes les tailles d’écran en ajustant la hauteur et la largeur de la carte.
Les modules spécifiques à WooCommerce
Les modules spécifiques à WooCommerce sont au nombre de 25, ils permettent de personnaliser l’apparence et les fonctionnalités de votre boutique en ligne.
Voici quelques modules spécifiques :
Produits WooCommerce : Ce module vous permet d’afficher et de personnaliser la présentation de vos produits WooCommerce. Vous pouvez choisir d’afficher des produits spécifiques, des catégories de produits ou des produits en vedette. Vous pouvez également personnaliser la mise en page, la couleur, la police et d’autres éléments de conception.
Add to Cart (Ajouter au panier) : Ce module vous permet d’ajouter un bouton « Ajouter au panier » personnalisable pour vos produits WooCommerce. Vous pouvez personnaliser le texte, la couleur, la taille et la forme du bouton, ainsi que définir des actions spécifiques lorsqu’un utilisateur clique sur le bouton.
Panier WooCommerce : Ce module affiche le panier WooCommerce sur votre site et vous permet de personnaliser son apparence. Vous pouvez choisir entre différents styles, couleurs et polices pour que le panier corresponde à l’esthétique de votre site.
Checkout (Paiement) WooCommerce : Ce module vous permet de personnaliser le processus de paiement. Vous pouvez choisir d’afficher ou de masquer certains champs, personnaliser les couleurs, les polices et les styles, et ajouter des informations supplémentaires pour guider les clients tout au long du processus de paiement.
Mon compte WooCommerce : Ce module vous permet d’ajouter et de personnaliser la page « Mon compte » de WooCommerce, où les clients peuvent gérer leurs informations de compte, suivre leurs commandes et accéder à d’autres fonctionnalités. Vous pouvez personnaliser l’apparence de la page, ajouter ou supprimer des sections et modifier les informations affichées.
Produits associés WooCommerce : Ce module vous permet d’afficher et de personnaliser les produits associés ou similaires sur les pages de produits individuelles. Vous pouvez choisir d’afficher des produits spécifiques, des catégories de produits ou des produits en vedette, et personnaliser la mise en page, la couleur, la police et d’autres éléments de conception.
Création des mises en page
L’autre atout majeur de Divi Builder réside dans sa capacité à concevoir des agencements élaborés pour vos pages et articles.
Paramètres de sections, rangées et colonnes
Ajouter, supprimer et dupliquer des sections, rangées et colonnes
Divi Builder permet d’ajouter facilement des sections, des rangées et des colonnes à votre mise en page en utilisant les boutons « + » et les icônes correspondantes. Vous pouvez supprimer des éléments en cliquant sur l’icône de la corbeille, et dupliquer des éléments en cliquant sur l’icône de copie.
Modifier la largeur et la hauteur des sections, rangées et colonnes
Dans Divi Builder, vous pouvez ajuster la largeur et la hauteur des sections, rangées et colonnes en cliquant sur l’icône d’engrenage pour accéder aux paramètres de l’élément. Vous pouvez définir des valeurs spécifiques en pixels, pourcentage ou viewport (unités relatives à la taille de la fenêtre du navigateur).
Modifier la disposition des colonnes
Divi Builder offre plusieurs options de disposition des colonnes, telles que des colonnes de largeurs égales, des colonnes de largeurs inégales, et des colonnes imbriquées. Pour modifier la disposition, cliquez sur l’icône d’engrenage de la rangée, puis sélectionnez la disposition souhaitée dans l’onglet « Structure de la colonne ».
Appliquer des paramètres spécifiques pour les appareils mobiles
Divi Builder vous permet d’optimiser la mise en page de votre site pour les appareils mobiles en appliquant des paramètres spécifiques pour les tablettes et les smartphones. Pour cela, cliquez sur l’icône d’engrenage de l’élément (section, rangée ou colonne), puis sur l’onglet Style → la section Dimensionnement → l’icône de l’appareil souhaité (tablette ou smartphone). Vous pouvez ajuster la largeur, la hauteur, les marges, les espacements et d’autres propriétés en fonction de l’appareil sélectionné.
Gestion des espacements et marges
La gestion adéquate des espacements et des marges est cruciale pour concevoir une mise en page soignée. Divi Builder propose toutes les options nécessaires pour les ajuster dans les moindres détails.
Régler les marges internes et externes entre les éléments
Les marges internes (padding) et externes (margin) permettent de déterminer l’espace entre les éléments de votre page. Divi Builder vous donne la possibilité de modifier les marges entre les sections, les rangées, les colonnes et les modules en ajustant leurs paramètres individuels.
Utiliser des unités de mesure personnalisées (pixels, pourcentage, etc.)
Les marges internes (padding) et externes (margin) permettent de déterminer l’espace entre les éléments de votre page. Divi Builder vous donne la possibilité de modifier les marges entre les sections, les rangées, les colonnes et les modules en ajustant leurs paramètres individuels.
Appliquer des marges différentes pour les appareils mobiles
Avec la popularité croissante des smartphones et des tablettes, il est essentiel de s’assurer que votre site web est réactif et s’affiche correctement sur différents appareils. Divi Builder permet de définir des espacements et des marges spécifiques pour les appareils mobiles, pour adapter automatiquement la mise en page en fonction de la taille de l’écran.
Options d'arrière-plan, bordures et ombres
Divi Builder offre une variété d’options pour personnaliser les arrière-plans, les bordures et les éléments de vos pages. Voici quelques-unes de ces options :
- Appliquer des images, des couleurs ou des dégradés en arrière-plan.
- Images : Téléchargez des images personnalisées ou sélectionnez-en parmi les images préchargées dans votre bibliothèque multimédia.
Couleurs : Choisissez une couleur unie à l’aide de la pipette ou en entrant le code couleur hexadécimal, RVB ou HSL.
Dégradés : Créez des dégradés linéaires ou radiaux en sélectionnant deux ou plusieurs couleurs et en ajustant l’angle et la position.
- Images : Téléchargez des images personnalisées ou sélectionnez-en parmi les images préchargées dans votre bibliothèque multimédia.
- Utiliser des bordures personnalisées (couleur, épaisseur, style, etc.).
- Couleur : Personnalisez la couleur de la bordure en utilisant la pipette ou en entrant le code couleur.
- Épaisseur : Ajustez l’épaisseur de la bordure en pixels.
- Style : Sélectionnez un style de bordure parmi les options disponibles (solide, pointillé, double, etc.).
- Arrondi : Modifiez les angles pour créer des bordures arrondies.
- Ajouter des ombres portées aux éléments pour un effet de profondeur.
- Couleur : Choisissez la couleur de l’ombre portée à l’aide de la pipette ou en entrant le code couleur.
- Position : Ajustez la position horizontale et verticale de l’ombre portée en pixels.
- Flou : Modifiez la quantité de flou appliqué à l’ombre portée pour créer un effet plus doux ou plus prononcé.
- Étendue : Agrandissez ou réduisez la taille de l’ombre portée par rapport à l’élément.
- Utiliser des filtres et des effets pour modifier l’apparence des arrière-plans.
- Luminosité : Augmentez ou diminuez la luminosité de l’arrière-plan.
- Contraste : Ajustez le contraste entre les couleurs de l’arrière-plan.
- Saturation : Modifiez l’intensité des couleurs de l’arrière-plan.
- Flou : Appliquez un effet de flou à l’arrière-plan pour adoucir les détails.
- Opacité : Ajustez l’opacité de l’arrière-plan pour le rendre plus ou moins transparent.
Typographie et personnalisation du texte
La typographie et la personnalisation du texte sont des éléments essentiels pour donner à votre site internet une apparence professionnelle et engageante. Divi Builder propose diverses options pour personnaliser la typographie de votre site :
Choisir parmi une large gamme de polices Google et des polices personnalisées : Divi Builder intègre une vaste sélection de polices Google, offrant un large éventail de styles typographiques adaptés à différents secteurs et préférences. Vous pouvez également importer et utiliser des polices personnalisées pour créer un aspect unique et cohérent avec votre image de marque.
Personnaliser la taille, le style, la couleur et l’espacement des caractères : Avec Divi Builder, vous pouvez facilement modifier la taille, le style (gras, italique, souligné, etc.), la couleur et l’espacement des caractères pour chaque élément de texte sur votre site. Cela vous permet d’ajuster la hiérarchie visuelle et de mettre en valeur les éléments importants.
Appliquer des styles de texte prédéfinis ou créer des styles personnalisés : Divi Builder propose des styles de texte prédéfinis pour simplifier le processus de personnalisation. Cependant, si vous souhaitez créer un style de texte unique pour votre site, vous pouvez le faire en ajustant les paramètres individuels et en enregistrant le style personnalisé pour une utilisation ultérieure.
Utiliser des options avancées pour le texte, telles que les transformations et les ombres portées : Les options avancées de texte dans Divi Builder vous permettent d’ajouter des effets spéciaux à votre typographie, tels que les transformations de texte (majuscules, minuscules, capitalisation) et les ombres portées. Ces effets peuvent ajouter une touche de sophistication et d’originalité à votre conception.
Conclusion
Divi Builder s’impose comme le constructeur de page incontournable pour quiconque souhaite créer un site WordPress personnalisé, tant pour les débutants que pour les professionnels du web. Grâce à ses fonctionnalités avancées, son interface glisser-déposer conviviale et sa vaste sélection de modules, il facilite la réalisation de designs uniques et sur mesure pour chaque projet.
Il est important de souligner que le Divi Builder est intégré à un ensemble complet comprenant une diversité de thèmes, y compris les populaires thèmes Divi et Extra, ainsi que les extensions Monarch et Bloom.
En outre, sa traduction en français, son support technique de qualité et sa solide communauté permettent d’exploiter facilement et rapidement son plein potentiel.
