Qu’est-ce que le constructeur visuel?

Le Divi Builder se présente sous deux formes: le constructeur back-end standard et le constructeur visuel front-end. Avec l’une ou l’autre interface, vous pouvez créer exactement les mêmes types de sites Web avec les mêmes éléments de contenu et les mêmes paramètres de conception. La seule différence est l’interface. Le constructeur back-end est situé dans le tableau de bord WordPress et est accessible avec tous les autres paramètres WordPress standard. Il est situé dans l’interface utilisateur de WordPress et remplace l’éditeur de publication WordPress standard. Il est idéal pour effectuer des changements rapides sur le tableau de bord. Cependant, il est également limité au tableau de bord et est rendu comme une représentation par blocs de votre site Web. Ce didacticiel se concentre uniquement sur le constructeur visuel.

image de la documentation

Cependant, avec le tout nouveau Visual Builder, vous pouvez créer vos pages dans le front-end de votre site Web! C’est une expérience incroyable et permet une conception beaucoup plus rapide. Lorsque vous ajoutez du contenu ou ajustez les paramètres de conception dans Visual Builder, vos modifications sont immédiatement reflétées. Vous pouvez cliquer sur la page et commencer à taper. Vous pouvez mettre du texte en surbrillance et personnaliser la police et le style. Vous pouvez ajouter du nouveau contenu, créer votre page et regarder tout cela se passer sous vos yeux.

using-visual-builder-2-2

Activer le constructeur visuel

Une fois connecté à votre tableau de bord WordPress, vous pouvez accéder à n’importe quelle page du front-end de votre site Web et cliquer sur le bouton « Activer Visual Builder » dans la barre d’administration WordPress pour lancer Visual Builder.

Si vous éditez votre page dans le back-end, vous pouvez passer au visual builder en cliquant sur le bouton « Activer Visual Builder » en haut de l’interface du back-end de Divi Builder (notez que vous devez activer Divi Builder avant le visual builder apparaît).

image de la documentation

Les bases de Visual Builder

La force de Divi réside dans son Visual Builder, un constructeur de pages par glisser-déposer qui vous permet de créer presque n’importe quel type de site Web en combinant et en organisant des éléments de contenu.

Le générateur utilise trois blocs de construction principaux: les sections, les lignes et les modules. En les utilisant ensemble, vous pouvez créer une myriade de mises en page. Les sections sont les plus grands blocs de construction et regroupent des groupes de rangées. Les lignes sont en sections et sont utilisées pour accueillir des modules. Les modules sont placés dans des lignes. C’est la structure de chaque site Internet Divi.

Sections

Les blocs de construction les plus basiques et les plus importants utilisés dans la conception de mises en page avec Divi sont les sections. Ceux-ci sont utilisés pour créer de grands groupes de contenu, et c’est la première chose que vous ajoutez à votre page. Il existe trois types de sections: régulière, spéciale et pleine largeur. Les sections régulières sont constituées de rangées de colonnes, tandis que les sections pleine largeur sont constituées de modules pleine largeur qui élargissent la largeur de l’écran. Des sections spéciales permettent des mises en page avancées de la barre latérale. Pour plus d’informations sur l’utilisation des sections, consultez notre sections détaillées du didacticiel.

Lignes

Les lignes sont dans des sections et vous pouvez placer n’importe quel nombre de lignes dans une section. Vous avez le choix entre de nombreux types de colonnes. Une fois que vous avez défini une structure de colonne pour votre ligne, vous pouvez insérer des 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, consultez notre tutoriel de ligne détaillé.

Modules

Les modules sont les éléments de contenu qui composent votre site Web. Chaque module de Divi peut s’adapter à n’importe quelle largeur de colonne et ils répondent tous pleinement.

Créez votre première page

Les trois blocs de construction de base (sections, lignes et modules) sont utilisés pour créer votre page.

image de la documentation

Ajoutez votre première section

Avant de pouvoir ajouter quoi que ce soit à votre page, vous devez d’abord ajouter une section. Des sections peuvent être ajoutées en cliquant sur le bouton bleu (+). Si vous survolez une section qui est déjà sur la page, un bouton bleu (+) apparaîtra en dessous. En cliquant dessus, vous ajouterez une nouvelle section sous la section que vous êtes actuellement au-dessus.

Chaque fois que vous démarrez une toute nouvelle page, votre première section sera ajoutée automatiquement.

image de la documentation

Ajoutez votre première ligne

Maintenant que vous avez ajouté votre première section, vous pouvez commencer à y ajouter des lignes de colonnes. N’importe quel nombre de lignes peut être dans une section, et vous pouvez mélanger et assortir des lignes avec différents types de colonnes pour créer une variété de dispositions.

Pour ajouter une ligne, cliquez sur le bouton vert (+) dans une section vide ou cliquez sur le bouton vert (+) qui apparaît lorsque vous survolez une ligne actuelle pour ajouter une nouvelle ligne en dessous. Une fois que vous avez cliqué sur le bouton vert (+), vous serez accueilli avec une liste de types de colonnes. Sélectionnez la colonne que vous souhaitez et vous pouvez ajouter votre premier module.

image de la documentation

Ajout de votre premier module

Les modules peuvent être ajoutés dans les lignes, et chaque ligne peut contenir n’importe quel nombre de modules. Les modules sont les éléments de contenu de votre page, et Divi a plus de 40 éléments différents avec lesquels vous pouvez construire. Vous pouvez utiliser des modules de base tels que du texte, des images et des boutons, ou des modules plus avancés tels que des curseurs, des galeries de portefeuille et des magasins de commerce électronique. Nous avons des tutoriels individuels pour chaque module Divi. Donc si vous souhaitez en savoir plus sur les types de modules proposés par Divi, n’oubliez pas de revenir à Page principale du document et recherchez la section « Modules ».

Pour ajouter un module, cliquez sur le bouton gris (+) dans une colonne vide, ou cliquez sur le bouton gris (+) qui apparaît lorsque vous survolez un module sur la page pour ajouter un nouveau module en dessous. Une fois que vous appuyez sur le bouton, vous serez accueilli par une liste de modules. Sélectionnez le module que vous souhaitez et il sera ajouté à votre page et le panneau de configuration du module apparaîtra. Vous pouvez utiliser ce champ de paramétrage pour démarrer la configuration de votre module.

image de la documentation

Configurer et personnaliser des sections, des lignes et des modules

Chaque section, ligne et module peut être personnalisé de plusieurs manières. Vous pouvez accéder au panneau des paramètres d’un élément en cliquant sur l’icône d’engrenage qui apparaît lorsque vous survolez un élément sur la page.

en utilisant-visual-builder-8-2

Cela ouvrira le panneau des paramètres pour l’élément spécifié. Chaque champ de paramètre est divisé en trois onglets: Contenu, Conception et Avancé. Chaque onglet est conçu pour que vous puissiez accéder et personnaliser rapidement et facilement les nombreux paramètres de Divi. Bien sûr, l’onglet Contenu est l’endroit où vous pouvez ajouter du contenu tel que des images, des vidéos, des liens et des étiquettes d’administration. Dans l’onglet Conception, nous avons placé tous les paramètres de conception intégrés pour chaque élément. En fonction de ce que vous modifiez, vous pouvez contrôler une variété de paramètres de conception en un seul clic. Ceux-ci incluent: la typographie, l’espacement (espacement / marge), les styles de boutons, etc. Pour un aperçu détaillé de l’onglet Design, jetez un œil au nôtre Tutoriel sur les paramètres du thème. Si vous voulez encore plus de contrôle, vous pouvez vous diriger vers l’onglet Avancé, où vous pouvez appliquer un CSS personnalisé, ajuster la visibilité en fonction de votre appareil et (en fonction de l’élément que vous modifiez) faire encore plus de réglage.

Enregistrez votre page et accédez 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. Cela élargira la barre de paramètres et vous offrira diverses options. Vous pouvez ouvrir les paramètres de votre page en cliquant sur l’icône d’engrenage. Ici, vous pouvez personnaliser des éléments comme la couleur d’arrière-plan de la page et la couleur du texte. Vous y trouverez également les boutons Enregistrer et Publier et les bascules d’aperçu réactif.

image de la documentation

Commencez votre conception avec des mises en page prédéfinies

Une excellente façon de commencer votre nouvelle page est de commencer avec une mise en page préconçue. Divi est livré avec plus de 20 mises en page prédéfinies qui couvrent une variété de types de pages populaires, par exemple B. «À propos de nous», «Contactez-nous», «Blog», «Portfolio», etc. Vous pouvez les télécharger et ensuite partager le contenu de la démonstration pour vous-même. Votre nouvelle page sera prête avant que vous ne le sachiez! Pour en savoir plus sur l’utilisation de mises en page prédéfinies, consultez nos informations détaillées Tutoriel pour les mises en page prédéfinies.

image de la documentation

Enregistrez vos propres mises en page dans la bibliothèque

En plus des mises en page prédéfinies fournies avec Divi, vous pouvez également enregistrer vos propres créations dans la bibliothèque Divi. Lorsqu’un design est enregistré en tant que mise en page Divi dans la bibliothèque Divi, il peut être chargé sur de nouvelles pages. Plus vous créez votre bibliothèque de vos designs préférés, plus vite vous pouvez créer de nouveaux sites Web. Pour un aperçu détaillé de la bibliothèque Divi, veuillez lire notre Tutoriel dédié à la bibliothèque Divi

Pour enregistrer un élément dans la bibliothèque, cliquez sur l’icône de la bibliothèque qui apparaît lorsque vous survolez 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 Ajouter à partir de la bibliothèque au fur et à mesure que de nouvelles mises en page, sections, lignes et modules Divi sont ajoutés.

image de la documentation

Ok, vous avez les bases ci-dessous. Il est maintenant temps de creuser plus profondément!

Vous avez maintenant ajouté vos premières sections, lignes et modules à votre page. Vous avez ajusté vos paramètres et commencé à créer et personnaliser votre design. Vous avez les bases, mais il y a tellement plus à apprendre. Nous avons des dizaines de tutoriels couvrant chaque aspect de Divi. Je vous encourage à retourner à la page principale de la documentation et à lire chacune d’elles. Lorsque vous aurez terminé, vous serez un Maître Divi!

Développez le potentiel de Divi avec plus de modules, de sous-thèmes et de mises en page

L’un des plus grands atouts de Divi est la communauté passionnée de designers et de développeurs. Sur le Place de marché DiviLes développeurs de Divi ont créé et partagé des ressources Divi incroyables comme des ressources personnalisées Modules Divi, Thèmes pour enfants Divi et préfabriqué Mises en page Divi. L’utilisation de sous-thèmes et de mises en page est un excellent moyen de démarrer de nouveaux sites Web, et les modules Divi libèrent le potentiel de Divi en vous donnant plus de blocs de construction.





Source link

Recent Posts