Divi est l’un des thèmes WordPress premium les plus populaires. L’une des meilleures offres est le Divi Page Builder, un constructeur visuel qui vous permet de concevoir de beaux sites Web sans jamais toucher une seule ligne de code.

Dans notre revoirNous avons trouvé que le générateur de page était peu coûteux, personnalisable et flexible, avec des fonctionnalités intéressantes telles que l’édition visuelle intuitive, la fonctionnalité glisser-déposer, la prise en charge CSS personnalisée, la fonctionnalité mobile et une variété d’éléments de conception.

Ce guide du débutant vous montrera comment utiliser ces fonctionnalités pour créer facilement des pages de qualité professionnelle pour votre site Web.

Disposition et modules de Divi Page Builder

Le Divi Page Builder peut être acheté sur Site Web à thème élégant pour un droit d’accès annuel de 89 $ ou un prix d’accès à vie de 249 $. Après avoir installé le thème, vous pouvez accéder à la mise en page minimaliste de Divi Page Builder, qui peut être développée en cliquant sur les 3 boutons horizontaux ci-dessous.

Disposition Divi Page Builder
La mise en page du Divi Page Builder est plutôt minimaliste.
  1. Paramètres du constructeur: Avec les trois points verticaux, nous pouvons modifier les paramètres du constructeur tels que les options de la barre d’outils, les actions standard et d’autres fonctionnalités.
Paramètres de Divi Page Builder
Paramètres du constructeur dans Divi Page Builder.
  1. Vue filaire: Le bouton suivant montre la page en vue filaire. Il montre la page entière en termes des éléments de base du générateur – sections, lignes, colonnes et modules.
Vue filaire
La vue filaire facilite la recherche d’éléments.
  1. Dézoomer: Vous pouvez effectuer un zoom arrière avec le bouton de la loupe pour voir davantage la page pendant l’édition.
  2. Vue de l’appareil: Les trois boutons suivants vous permettent d’afficher la page en mode bureau, tablette et mobile pour vous assurer que votre site Web ressemble exactement à ce que vous souhaitez pour les utilisateurs sur n’importe quel appareil.
Générateur de pages Mobile View Divi
Vous pouvez afficher la page en mode bureau, tablette ou mobile.
  1. Charger à partir de la bibliothèque: Vous pouvez utiliser le bouton plus pour télécharger des mises en page prêtes à l’emploi depuis la bibliothèque Divi. Vous pouvez trouver des packs de mise en page pour tout, des sites Web éducatifs aux magasins en ligne. Chaque package de mise en page est entièrement modifiable et contient des pages clés telles que Accueil, Blog et Contactez-nous.
Modèles Divi Page Builder
Le Divi Page Builder propose 205 packs de mise en page pour une utilisation immédiate.
  1. Enregistrer dans la bibliothèque: Vous pouvez également utiliser ce bouton pour enregistrer vos propres mises en page dans la bibliothèque.
  2. Disposition claire: Ce bouton vous permet de supprimer toute la mise en page et de recommencer si nécessaire.
  3. Paramètres de la page: Ce bouton vous donne accès aux paramètres de la page tels que le titre de la page et l’image sélectionnée. Vous pouvez modifier l’arrière-plan de la page, mettre en forme le texte, modifier la palette de couleurs et également ajouter du CSS personnalisé si nécessaire.
Options de personnalisation de la page
Options de personnalisation de page dans Divi Page Builder.
  1. Modifier l’historique: Si jamais vous faites une erreur, vous pouvez facilement accéder à l’historique des modifications et annuler toute modification.
  2. Portabilité: Si vous souhaitez utiliser une mise en page que vous avez créée sur un autre site Web qui utilise Divi Page Builder, vous pouvez utiliser le bouton Portabilité pour exporter des mises en page entières vers d’autres sites Web.
  3. Rechercher: Cette fonctionnalité vous permet de rechercher et de trouver rapidement des éléments, des paramètres de module, des paramètres de page, etc.
  4. Couches: Le paramètre Niveaux facilite la gestion des niveaux et de l’ordre des éléments sur la page.
Gérer les niveaux
Gérez les niveaux et l’ordre des éléments sur la page.
  1. Aide Divi Builder: Le Divi Builder Helper est un outil utile pour accéder à des didacticiels vidéo sur divers sujets et montre également les raccourcis clavier.
  2. Sauver: Lorsque vous avez terminé de créer une page, vous pouvez utiliser le bouton vert pour enregistrer la page.

Créer une page avec le Divi Page Builder

Créons une page simple avec une image, un bloc de texte et un bouton. Avant de commencer, cependant, vous devez savoir qu’une page typique dans Divi Page Builder se compose de plusieurs lignes disposées verticalement. Ces lignes sont constituées de colonnes et chaque colonne peut contenir plusieurs modules. Mais qu’est-ce qu’un module? Un module est un élément de contenu de base utilisé pour créer des pages telles que des images, des boutons, des formulaires et des critiques. Le Divi Page Builder a plus de 40 modules, chacun avec sa propre personnalisation.

Modules
Le Divi Page Builder propose une longue liste de modules.

Ajouter une image

Pour créer une page à l’aide du générateur de page Divi, ajoutez une ligne en cliquant sur le bouton plus. Choisissez ensuite un format de ligne dans la fenêtre contextuelle. Ensuite, sélectionnez un module à ajouter à la colonne. Cliquez sur le module d’image pour l’ajouter à la colonne.

Chaque module a ses propres paramètres, qui sont divisés en trois onglets: Contenu, Conception et Avancé. L’onglet Contenu vous permet de modifier les éléments de contenu du module tels que les images et le texte. Vous pouvez basculer vers l’onglet Conception si vous avez besoin de plus de contrôle sur l’apparence du module. L’onglet Avancé permet des modifications avancées à l’aide d’attributs CSS et HTML personnalisés.

Ajout d'un module d'image
Ajout d’une image dans le Divi Page Builder.

Pour télécharger votre image, cliquez sur l’image prédéfinie. Sélectionnez ensuite une image dans votre bibliothèque. Ci-dessous, vous pouvez ajouter un lien vers l’image et définir une couleur d’arrière-plan, un dégradé, une image ou une vidéo.

Composition d'image
Personnalisez l’image dans l’onglet Conception.

L’onglet Conception vous permet d’orienter l’image comme vous le souhaitez. Les options de taille, d’espacement et de bordure vous permettent de contrôler des paramètres tels que la hauteur et la largeur de l’image, la bordure et l’espacement de l’image, ainsi que les styles et largeurs de bordure.

L’option Filtres vous permet d’appliquer une teinte, une saturation, une luminosité et d’autres filtres à l’image. L’onglet Transformer vous permet de créer des effets de conception avancés sans utiliser un programme de conception graphique distinct qui utilise une combinaison de mise à l’échelle, de translation, de rotation et de décalage.

Animations d'image
Ajout d’animations au module d’image.

Enfin, vous pouvez également ajouter une animation de base à n’importe quel module pour lui donner un aspect professionnel. Bien que l’onglet Avancé soit principalement utilisé pour les attributs CSS et HTML personnalisés, vous pouvez également contrôler la visibilité de l’appareil, les transitions, les positions des calques et les effets de défilement.

Lorsque vous avez terminé, cliquez sur le bouton vert pour enregistrer les modifications. Vous pouvez accéder à ces paramètres plus tard en survolant le module et en cliquant sur le bouton Paramètres.

Vous remarquerez également que lorsque vous survolez une section, une ligne ou un module, les boutons d’action appropriés apparaissent.

Boutons d'action
Chaque élément a ses propres boutons d’action.

Chaque section, ligne, colonne et module a ses propres options qui peuvent être utilisées pour personnaliser son apparence et ses fonctionnalités. D’autres boutons d’action peuvent être utilisés pour déplacer, dupliquer et supprimer les éléments.

ajouter de nouveaux éléments
Il existe des symboles plus séparés pour ajouter des modules, des lignes et des sections.

De plus, trois symboles plus apparaissent lorsque vous souhaitez ajouter de nouveaux éléments. L’icône grise vous permet d’ajouter de nouveaux modules dans la ligne, l’icône verte ajoute une nouvelle ligne dans la section et l’icône bleue ajoute une nouvelle section à votre page.

Ajout d’un bloc de texte et d’un bouton

Ajoutez une nouvelle section sous l’image en cliquant sur le bouton bleu. Vous avez le choix entre trois types de sections: les sections régulières correspondent à la largeur standard de votre mise en page, des sections spéciales peuvent être utilisées pour créer des mises en page avancées de la barre latérale et les sections pleine largeur s’étendent sur toute la largeur de votre page et peuvent être utilisées en pleine largeur. modules.

Types de sections
Options de module pour chaque type de section.

Nous allons avec une section régulière et ajoutons une ligne avec deux colonnes. Ensuite, ajoutez le module de texte à la section. Vous pouvez modifier le corps du module de texte dans l’onglet Contenu pour dire ce que vous souhaitez. Vous pouvez également mettre en forme l’alignement, la police, l’épaisseur, le style et la couleur du texte dans l’onglet Conception. Enregistrez vos modifications lorsque vous avez terminé.

Mise en forme du texte
Formatage du module de texte.

Nous allons ajouter un bouton dans la colonne adjacente. Dans l’onglet Contenu, vous pouvez modifier le texte du bouton et ajouter un lien vers l’endroit où vous souhaitez que le bouton aille. L’onglet Conception vous permet d’aligner le bouton dans la colonne et de modifier son apparence en modifiant la couleur du texte et en ajoutant une couleur d’arrière-plan.

Style clé
Ajoutez un style personnalisé au bouton.

Une fois les modules créés, vous pouvez les réorganiser à l’aide des boutons d’action glisser-déposer qui apparaissent lorsque vous déplacez le pointeur de la souris. Notez que vous pouvez également enregistrer vos conceptions de section, de ligne, de colonne et de module pour une réutilisation future en cliquant avec le bouton droit sur l’élément et en sélectionnant «Enregistrer dans la bibliothèque». Si vous ne souhaitez pas créer de pages à partir de zéro, vous pouvez importer une mise en page prédéfinie et simplement la modifier à votre guise.

De cette façon, vous pouvez facilement créer votre module de page par module avec le Divi Page Builder. Découvrez la large gamme de modules et de modèles proposés par le constructeur de pages et adaptez-les à la conception de votre site Web. Si vous avez besoin d’aide, veuillez laisser un commentaire ci-dessous et nous vous répondrons.

Si vous préférez une version vidéo, voici une vidéo simple:

lecture supplémentaire



Source link

Recent Posts