Want to make creations as awesome as this one?

Utiliser le builder Chapitre 1

Transcript

UTILISER LE BUILDER

CHAPITRE 1 : DÉMARRAGE AVEC LE DIVI BUILDER

MODULE 2

Démarrage avec le Divi Builder

Divi est mieux utilisé en mode visuel, vous permettant de construire votre page sur le front-end de votre site web.

Le Divi Builder vous donne la liberté d'explorer de nouvelles possibilités de mise en page intéressantes.

Créez des pages de destination époustouflantes qui capturent vos visiteurs et créez des articles de blog basés sur des articles qui cap- turent l'imagination de vos visiteurs. web.


Voici quelques exemples du Divi Builder en action

https://www.elegantthemes.com/preview/Divi-Builder/11496-2/


Qu'est-ce que le Visual Builder?

Le Divi Builder se présente sous deux formes: le standard "Back-end Builder" et le front- end "Visual Builder".

Les deux interfaces vous permettent de créer exactement les mêmes types de sites Web avec les mêmes éléments de contenu et paramètres de conception.

La seule différence est l'interface. Le constructeur Back-end Builder vit à l'intérieur du tableau de bord WordPress et il est accessible avec tous les autres paramètres WordPress standard.

Il se trouve à l'intérieur de l'interface utilisateur WordPress et remplace l'éditeur d'articles WordPress standard.


Il est idéal pour effectuer des changements rapides pendant que vous êtes dans le tableau de bord, mais il est également limité par le tableau de bord et est rendu comme une représentation de bloc de votre site Web. Ce tutoriel se con- centrera uniquement sur le constructeur visuel.


Qu'est-ce que le Visual Builder?

Le tout nouveau Visual Builder, quant à lui, vous permet de construire vos pages sur le front-end de votre site !

C'est une expérience incroyable et permet un design beaucoup plus rapide.

Lorsque vous ajoutez du contenu ou ajustez les paramètres de conception dans le générateur visuel, vos modifications apparaissent instantanément.


Vous pouvez cliquer sur la page et commencer à taper. Vous pouvez mettre le texte en sur-brillance et ajuster sa police et son style. Vous pouvez ajouter du nouveau contenu, construire votre page et voir tout ce qui se passe sous vos yeux.


Activation du Visual Builder

Lorsque vous êtes connecté à votre tableau de bord WordPress, vous pouvez naviguer jusqu'à n'importe quelle page de votre site Web et cliquer sur le bouton "Activer Visual Builder" dans la barre d'administration WordPress pour lancer le visual builder.

Si vous modifiez votre page sur le back-end, vous pouvez passer au constructeur visuel en cliquant sur le bouton "Activer Visual Builder" qui se trouve en haut de l'interface Divi Builder du back-end (notez que vous devez d'abord activer Divi Builder avant que le bouton du constructeur visuel n'apparaisse).


LES bases du Visual Builder

La puissance de Divi réside dans le Visual Builder, un générateur de pages à glisser-déposer qui vous permet de construire pratiquement n'importe quel type de site Web en combinant et en organisant des éléments de contenu.

Le constructeur utilise trois composantes principales: les sections, les rangées et les modules.


Les utiliser à l'unisson vous permet de créer un nombre incalculable de mises en page. Les sections sont les plus grands blocs de construction et abritent des groupes de rangées.


Les rangées s'assoient à l'intérieur des sections et sont utilisées pour loger les modules. Les modules sont placés à l'intérieur des rangées. C'est la structure de chaque site Divi.


Sections

Lignes

Modules

Les éléments de construction les plus élémentaires et les plus grands utilisés dans la conception des plans avec Divi sont les sections.

Ceux-ci sont utilisés pour créer de grands groupes de contenu, et ils sont la première chose que vous ajoutez à votre page.


Il existe trois types de sections: Régulier, Spécialité et Pleine largeur.

Les sections régulières sont composées de rangées de colonnes tandis que les sections pleine largeur sont composées de modules pleine largeur qui élargissent toute la largeur de l'écran.


Les sections spéciales permettent une disposition plus avancée des barres latérales.

Les rangées s'assoient à l'intérieur des sections et vous pouvez placer n'importe quel nombre de rangées à l'intérieur d'une section.


Vous avez le choix entre plusieurs types de colonnes. Une fois que vous avez défini une structure de colonnes pour votre ligne, vous pouvez ensuite placer les modules dans une colonne souhaitée.


Il n' y a pas de limite au nombre de modules que vous pouvez placer dans une colonne. Pour plus d'informations sur l'utilisation des lignes, reportez-vous à notre tutoriel détaillé sur les lignes.

Les modules sont les éléments de contenu qui composent votre site web. Chaque module que possède Divi peut s'adapter à n'importe quelle largeur de colonne et ils sont tous entièrement réactifs.


Construire votre première page

Les trois modules de base (sections, rangées et modules) sont utilisés pour construire votre page.

Ajouter votre première section

Avant de pouvoir ajouter quoi que ce soit à votre page, vous devez d'abord ajouter une section. Vous pouvez ajouter des sections en cliquant sur le bouton bleu (+).

Lorsque vous passez au-dessus d'une section qui existe déjà sur la page, un bouton bleu (+) apparaît en dessous.


Une fois cliqué, une nouvelle section sera ajoutée en dessous de la section sur laquelle vous êtes actuellement en survol.


Si vous commencez une nouvelle page, alors votre première section sera ajoutée automatiquement.


Ajout de votre première ligne

Après avoir ajouté votre première section, vous pouvez commencer à ajouter des rangées de colonnes à l'intérieur. Une section peut contenir un nombre quelconque de lignes, et vous pouvez mélanger et assortir des lignes de types de colonnes différents pour créer une variété de structures.

Pour ajouter une rangée, cliquez sur le bouton vert (+) à l'intérieur d'une section vide, ou cliquez sur le bouton vert (+) qui apparaît lorsque vous survolez une rangée pour ajouter une nouvelle rangée en dessous.

Une fois que vous avez cliqué sur le bouton vert (+) vous serez accueilli avec une liste de types de colonnes. Choisissez la colonne de votre choix et vous êtes prêt à ajouter votre premier module.


Ajouter votre premier module

Des modules peuvent être ajoutés à l'intérieur des rangées, et chaque rangée peut contenir un nombre quelconque de modules.

Les modules sont les éléments de contenu de votre page, et Divi est livré avec plus de 40 éléments différents que vous pouvez utiliser pour construire.

Vous pouvez utiliser des modules de base tels que Texte, Images et Boutons, ou des modules plus avancés comme Sliders, Portfolio Galleries et Ecommerce Shops.


Nous avons des tutoriels individuels pour chaque module Divi, donc si vous voulez en savoir plus sur les types de modules proposés par Divi, n'oubliez pas de retourner à la page principale du document et de parcourir la section "Modules".


Pour ajouter un module, cliquez sur le bouton gris (+) qui existe à l'intérieur d'une colonne vide ou cliquez sur le bouton gris (+) qui existe lorsque vous survolez un module de la page pour ajouter un nouveau module en dessous.


Une fois que vous avez cliqué sur le bouton, vous serez accueilli par une liste de modules. Choisissez le module de votre choix, il sera ajouté à votre page et le panneau de configuration du module apparaîtra. A l'aide de ce panneau de configuration, vous pouvez commencer à configurer votre module.


Configuration et personnalisation des sections, lignes et modules

Chaque section, rangée et module peut être personnalisé de différentes manières.

Vous pouvez accéder au panneau des paramètres d'un élément en cliquant sur l'icône de vi- tesse qui existe lorsque vous survolez n'importe quel élément de la page.

Ceci lancera le panneau des paramètres pour l'élément spécifié. Chaque panneau de configuration est divisé en trois onglets: Contenu, Design et Avancé. Chaque onglet est conçu pour rendre l'accès et le réglage de la grande variété de réglages de Divi rapide et facile.


L'onglet Contenu vous permet bien sûr d'ajouter des contenus tels que des images, des vidéos, des liens et des libellés d'administration. L'onglet Design permet de placer tous les paramètres de conception intégrés pour chaque élément.


En fonction de ce que vous éditez, vous pouvez contrôler une grande variété de paramètres de conception d'un simple clic: typographie, espacement (tapis/marges), styles de boutons, et plus encore.


Pour plus d'informations sur l'onglet Design, consultez notre tutoriel sur les paramètres de design. Enfin, si vous voulez encore plus de contrôle, vous pouvez aller dans l'onglet Avancé où vous pouvez appliquer des CSS personnalisés, ajuster la visibilité en fonction du périphérique et (en fonction de l'élément que vous éditez) effectuer des réglages encore plus précis.


sauvegarde de votre page et accès aux paramètres de la page

Pour accéder aux paramètres généraux de la page, cliquez sur l'icône du dock violet en bas de l'écran.

La barre des paramètres s'agrandit et vous propose diverses options.

Vous pouvez ouvrir les paramètres de votre page en cliquant sur l'icône d'engrenage.

Ici, vous pouvez régler des choses comme la couleur de fond de page et la couleur du texte.


Vous trouverez également les boutons Sauvegarder et Publier ainsi que les boutons de prévisualisation réactifs.


Démarrez votre conception avec des mises en page préétablies

Une excellente façon de lancer votre nouvelle page est de commencer par une mise en page préétablie.

Divi est livré avec plus de 20 mises en page préétablies qui couvrent une variété de types de pages courantes, telles que "À propos de nous", "Contact", "Blog", "Portfolio", etc.

Vous pouvez les charger et ensuite échanger le contenu de la démo contre le vôtre. Votre nouvelle page sera bientôt terminée !


Pour en savoir plus sur l'utilisation de mises en page préétablies, consultez notre didacticiel détaillé sur les mises en page préétablies.


Sauvegarde de vos propres mises en page dans la bibliothèque

En plus d'utiliser les mises en page prédéfinies fournies avec Divi, vous pouvez également sauvegarder vos propres créations dans la Bibliothèque Divi.

Lorsqu'un dessin est enregistré en tant que modèle Divi dans la Bibliothèque Divi, il peut être chargé sur de nouvelles pages.

Plus vous construisez votre bibliothèque avec vos designs préférés, plus vite vous pourrez créer de nouveaux sites Web. Pour en savoir plus sur la Bibliothèque Divi, consultez notre tutoriel consacré à la Bibliothèque Divi.


Pour enregistrer un élément dans la bibliothèque, cliquez sur l'icône de la bibliothèque qui existe lorsque vous passez au-dessus d'un élément et dans la barre des paramètres de la page. Une fois qu'un élément a été ajouté à la bibliothèque, il apparaîtra dans l'onglet "Add From Library" lors de l'ajout de nouveaux modèles, sections, lignes et modules Divi.


Vous avez donc maintenant ajouté vos premières sections, lignes et modules à votre page. Vous avez ajusté leurs paramètres et commencé à construire et personnaliser votre design.

Vous avez les bases, mais il y a encore beaucoup à apprendre.

Nous avons des douzaines et des dizaines de tutoriels qui couvrent tous les aspects de Divi. Je vous encourage à retourner à la page de documentation principale et à lire chacune d'entre elles.

Quand vous aurez terminé, vous serez un maître divin!

MERCI