Comment créer un site Web personnalisé en utilisant Divi Builder (étape par étape)

Une fois le plug – in activé, vous pouvez commencer à l’utiliser pour créer votre propre mise en page. Créons une nouvelle page avec Divi. Étape 2: créer la première page en utilisant Divi Builder pour créer la première page en utilisant Divi, allez sur le tableau de bord WordPress et cliquez sur Ajouter une nouvelle page. Une nouvelle page apparaît avec un bouton utiliser Divi Builder. Cliquez sur ce bouton:
Puis cliquez sur le bouton utiliser Divi Builder: Cela vous mènera à un nouvel écran avec 3 options. Si vous créez un dessin à partir de zéro sans utiliser de mise en page par défaut, sélectionnez la première option. Si vous souhaitez utiliser la disposition par défaut, sélectionnez la deuxième option. En sélectionnant la deuxième option, vous pouvez commencer immédiatement, car tout est déjà construit pour vous. La troisième option vous permet de réutiliser un dessin existant. Vous pouvez choisir l’option qui vous convient le mieux. Étape 3: importer une mise en page \/ site de présentation pré – construit si vous ne voulez pas créer un site à partir de zéro, vous pouvez sélectionner la mise en page par défaut. Pour ce faire, sélectionnez l’option select default Layout. Vous verrez la Bibliothèque de mise en page par défaut:
Selon l’emplacement de votre site, vous voudrez peut – être rechercher des mises en page dans des catégories spécifiques. Pour ce faire, vous pouvez sélectionner la catégorie à gauche ou utiliser le champ de recherche pour rechercher la catégorie. Divi affichera toutes les mises en page qui correspondent à vos besoins. Vous pouvez ensuite choisir la disposition que vous préférez. Ceci affiche un aperçu de la mise en page avec deux options différentes. Voir la présentation en direct utiliser cette disposition Sélectionnez pour utiliser cette option de mise en page. Cela vous demandera de valider le plug – in. Utilisez votre nom d’utilisateur et l’API pour l’authentifier: Après cela, vous pouvez commencer à personnaliser la mise en page. Cependant, dans ce tutoriel, nous choisirons la première option, démarrer la construction, qui nous permettra de construire tout à partir de zéro.
Pasag
Une de la médiathèque.
Après avoir ajouté une image, vous pouvez faire défiler vers le bas le lien que vous avez ajouté à l’image. Vous verrez également d’autres options telles que l’ouverture d’un lien image dans un nouvel onglet, l’ouverture d’un lien image dans une boîte lumineuse, et plus encore. Vous pouvez également ajouter une couleur de fond à l’image à partir du lien à côté de l’image. Pour les options de conception, cliquez sur l’onglet conception. Ici, vous pouvez choisir d’ajouter de l’animation, de l’espacement, des filtres, etc. L’onglet avancé vous permet d’ajouter des id et des classes CSS, ainsi que des CSS personnalisés. Cette option s’applique aux utilisateurs avancés qui souhaitent ajouter leur propre code.
Mais si vous n’êtes pas programmeur, vous pouvez sauter cette carte complètement. N’oubliez pas d’enregistrer les paramètres en appuyant sur la coche verte. La personnalisation des boutons est exactement la même que l’ajout de texte et d’images. Il suffit de cliquer sur le module bouton pour le sélectionner. Ensuite, commencez à personnaliser en utilisant les options affichées dans la fenêtre contextuelle de l’écran. Appuyez ensuite sur la coche verte pour enregistrer les paramètres. Vous pouvez le faire sur n’importe quel formulaire que vous souhaitez ajouter et personnaliser. Étape 6: configuration de la page maintenant que vous savez comment ajouter et personnaliser des lignes et des formulaires, regardons comment utiliser la configuration de la page. Pour modifier la configuration de la page, cliquez sur les 3 points violets au bas de la page.
Ceci élargit la barre de configuration avec plusieurs options. Cliquez sur l’icône du rapport (paramètres): Vous verrez une page de configuration pop – up avec 3 onglets: dans l’onglet contenu, vous pouvez traiter le titre de la page, ajouter une image de premier plan, ajouter un arrière – plan à la page, et même effectuer un test Split pour voir comment la page fonctionne
– Oui. Pour ajouter une image de premier plan, cliquez sur le symbole +, puis ajoutez l’image de la médiathèque ou téléchargez une nouvelle image de votre ordinateur. Ensuite, l’onglet conception. Ici, vous pouvez travailler avec les schémas de couleurs, l’espacement des pages et la couleur du texte. Il suffit de cliquer sur l’option à traiter et d’apporter les modifications suivantes: Enfin, vous avez l’onglet avancé. Dans cet onglet, vous pouvez ajouter des CSS personnalisés et activer les options de génération de fichiers CSS statiques. Vous pouvez également choisir la façon dont la page cherche les utilisateurs. Une fois les modifications terminées, cliquez sur la coche verte en bas pour enregistrer les modifications. Vous pouvez également annuler les modifications en utilisant le bouton violet et répéter les modifications en utilisant le bouton bleu à côté de la coche verte. Étape 7: après avoir sauvegardé la mise en page pour une utilisation future, vous pouvez la sauvegarder pour une utilisation future. Ceci sera sauvegardé dans la Bibliothèque Divi. La prochaine fois que vous voulez utiliser cette mise en page, vous pouvez la sélectionner et ajouter du texte immédiatement. Pour enregistrer la mise en page, passez le curseur sur la page et cliquez sur l’icône bibliothèque dans la barre de configuration de la page. Une fenêtre contextuelle apparaît où vous pouvez ajouter un nom à la mise en page. Vous pouvez également choisir d’y ajouter une catégorie: Puis cliquez sur l’option enregistrer dans la bibliothèque. Votre mise en page sera maintenant sauvegardée pour une utilisation future. Lorsque vous ajoutez un élément à la bibliothèque, il apparaît sur l’onglet ajouter à partir de la Bibliothèque lorsque vous ajoutez de nouvelles mises en page, sections, lignes et modules Divi. Vous pouvez également enregistrer des formulaires spécifiques en exécutant la même procédure. Assurez – vous de passer le curseur sur l’élément pour trouver le bouton Enregistrer dans la bibliothèque. Étape 8: vérifier la réactivité de la mise en page Divi après avoir créé la mise en page, Divi vous montre à quoi elle ressemble sur des écrans de différentes tailles
– Oui. Pour vérifier la réactivité de la mise en page, cliquez sur l’icône de l’écran dans le coin inférieur gauche de l’écran: La première icône affiche une vue wireframe de la disposition. Si vous souhaitez agrandir la vue, l’icône loupe à côté vous permet de contrôler l’apparence de la disposition. L’icône suivante fournit une vue de bureau de la mise en page, suivie d’une tablette et d’une vue d’écran mobile. Vous pouvez cliquer sur chacune de ces icônes pour voir si votre mise en page est suffisamment réactive. Étape 9: publier la mise en page Divi une fois que tout est prêt et que vous êtes sûr de publier la page en utilisant la mise en page que vous avez créée, cliquez sur le bouton publier dans le coin inférieur droit de l’écran: Votre page sera publiée dès que vous appuyez sur le bouton publier. Il est facile de créer votre propre mise en page en utilisant Divi Builder. Nous espérons que vous apprécierez cet article. Si vous n’êtes toujours pas certain d’utiliser Divi, vous devrez peut – être trouver d’autres générateurs de page pour votre site WordPress. Regardez ce commentaire sur le plug – in Beaver Builder, un autre plug – in populaire pour la création de page.