Utiliser le builder Chapitre 1

UTILISER LE BUILDER

CHAPITRE 1 : DÉMARRAGE AVEC LE DIVI BUILDER

MODULE 2

Démarrage avec le Divi Builder

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?

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?

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

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

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

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

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

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

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

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

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.

MERCI