Want to make creations as awesome as this one?

Les Bases Chapitre 2

Transcript

LES BASES

CHAPITRE 2 : MISE EN ROUTE DU DIVI BUILDER

MODULE 1

MISE EN ROUTE DU DIVI BUILDER

Le Thème Interior - http://interior.aspengrovestudios.space/

Conçu par Kenny Sing comme l'un des sites de démo Divi 2.4 de Theme Elégant, Interior a été conçu, développé et développé pour devenir un thème d'enfant Divi entièrement fonctionnel.

En plus de cinq pages principales, dont trois peuvent être utilisées pour afficher différentes formes de contenu en rapport avec différentes catégories de produits ou de services, Interior dispose d'une page de blog magnifiquement conçue.

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 construire 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 se trouve à 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 de Wordpress, mais il est également limité par le tableau de bord et son rendu est comme une représentation en bloc de votre site Web (Comme visual Composer). Ce tutoriel se concentrera uniquement sur le constructeur visuel.



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 surbrillance 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.


Info

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'imbriquent à 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

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


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

Il existe trois types de sections: Standard, pleine largeur et spéciales. Les sections standards 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. Pour plus d'informations sur l'utilisation des sections, reportez-vous à notre didacticiel de sections détaillées.

Rangées

Les rangées se placent à 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 rangées, reportez-vous à notre tutoriel détaillé sur les rangées.


Modules

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

Ajout de votre première ligne

AJouter votre premier module

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.

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érentes 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.

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 . 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 roue crantée 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, Style 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 Style 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 (marges), styles de boutons, et plus encore. Pour plus d'informations sur l'onglet Style, consultez notre tutoriel sur les paramètres de style. 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 la votre. 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 modèle 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 "Ajouter de la bibliothèque" lors de l'ajout de nouveaux modèles, sections, lignes et modules Divi.

Ok, vous avez les bases. Maintenant, il est temps de creuser plus profondément!


Vous avez donc maintenant ajouté vos premières sections, rangées 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 en- courage à retourner à la page de documentation principale et à lire chacune d'entre elles. Quand vous aurez terminé, vous serez un maître divi!

MERCI