Divi Layouts AI : Le guide complet

Avant le début de la révolution de l’intelligence artificielle (IA), la création d’une page Web nécessitait des compétences en codage ou l’embauche d’un développeur coûteux. Pour certains, cela était généralement hors de portée en raison d’un manque d’expérience ou de budget. Tout a changé grâce à la nouvelle technologie qui vous permet de créer des pages Web entières avec une invite de texte.

Cet article servira de guide Divi Layouts AI qui vous montrera les tenants et les aboutissants de ce nouveau produit passionnant. Nous expliquerons ce qu'il fait, comment il fonctionne et comment créer facilement de superbes pages Web.

Allons-y.

Qu’est-ce que l’IA Divi Layouts ?

Divi Layouts AI est un nouveau produit que nous avons lancé et il fonctionne parallèlement à notre thème WordPress phare, Divi. La puissance combinée de Divi et Divi AI en fait l’un des meilleurs créateurs de sites Web IA actuellement sur le marché. Il peut créer des pages entières, vous aider à affiner une copie existante, générer des images et ajouter du code, le tout avec une invite de texte. Divi Layouts AI peut également créer des pages alignées sur votre image de marque en vous permettant de fournir des couleurs et des polices. De cette façon, chaque page que vous générez aura une apparence cohérente à chaque fois.

Obtenez Divi AI

Comment fonctionne l’IA Divi Layouts ?

Divi Layouts AI est intégré directement au framework Divi et fonctionne de manière transparente avec Visual Builder. Grâce à sa compréhension approfondie de la base de code de Divi, il peut apprendre de votre site Web. Il comprend le fonctionnement de chaque ligne de code et module de conception, ce qui facilite la création de belles mises en page. Divi Layouts AI agit comme un concepteur, un développeur et un photographe à la fois.

Vous fournissez une simple invite de texte décrivant le type de page dont vous avez besoin, et Divi Layouts AI créera une page Web entière, comprenant du texte et des images, avec les modules de conception de Divi. Il évite l'étape initiale de planification et de création de la structure d'une page Web, vous donnant ainsi une longueur d'avance sur le processus de conception.

Créer une page Web complète avec Divi Layouts AI

Pour démarrer avec Divi Layouts AI, vous devez acheter un abonnement Elegant Themes avec Divi AI. Si vous êtes déjà membre, vous pouvez ignorer le processus d’inscription et acheter Divi AI séparément. Il est disponible pour 17,04 $ par mois (si vous payez mensuellement) ou 153 $ par an .

Dans ce guide Divi Layouts AI, nous vous guiderons à travers les étapes nécessaires pour créer une page Web avec l'IA, depuis la création initiale de la page jusqu'à l'affinement du résultat.

Étape 1 : Achat de Divi Layouts AI

Commencez par vous rendre sur le site Web principal d’Elegant Themes et accédez à la page Divi AI. Vous pouvez vous inscrire à Divi + Divi AI ou opter pour Divi AI en tant que produit autonome (si vous utilisez déjà Divi). Cliquez sur INSCRIVEZ-VOUS AUJOURD'HUI ! bouton pour continuer.

Pour cet article, nous supposerons que vous êtes déjà membre d’Elegant Themes. En cliquant sur le bouton d'inscription, vous serez invité à vous connecter à votre compte Elegant Themes.

Une fois connecté, vous serez redirigé vers la page d'inscriptionde Divi AI , où vous pourrez ajouter des services supplémentaires, tels que Divi Cloud, Divi VIP ou Divi Teams.Si vous continuez sans achats supplémentaires, cliquez sur NON MERCI, PROCÉDER À LA CAISSE .

Terminez votre achat en saisissant les informations de votre carte de crédit, ou si vous avez une carte enregistrée, cliquez simplement sur le bouton ACHETER DIVI AI .

Une fois votre achat effectué, vous pouvez consulter les informations de votre abonnement Divi AI en cliquant sur Compte > Abonnements. Vous aurez besoin d’une clé API pour utiliser Divi AI dans votre installation WordPress. Générer une clé unique pour chaque installation Divi est une bonne idée. Pour ce faire, cliquez sur l'onglet Compte et accédez à Nom d'utilisateur et clé API .

Lorsque la page est actualisée, faites défiler vers le bas et cliquez sur le bouton Générer une nouvelle clé API (1). Une fois que vous avez généré la clé, il est avantageux de lui fournir une étiquette (2). Cette pratique est particulièrement utile si vous comptez créer plusieurs sites Web Divi.

Cliquez sur la clé pour la copier. Vous devrez activer Divi AI dans le panneau Options du thème Divi. Accédez à votre installation WordPress, connectez-vous et accédez à Divi > Options du thème > Mises à jour .

Entrez votre nom d'utilisateur et la clé API que vous avez copiée, puis cliquez sur le bouton Enregistrer les modifications pour l'enregistrer.

Étape 2 : créer une nouvelle page

Maintenant que vous avez ajouté une clé API, vous pouvez utiliser Divi AI pour créer une page Web. Commencez par ajouter une nouvelle page à votre site WordPress. Accédez à Pages > Ajouter une nouvelle page .

Lorsque la page s'actualise, donnez un titre à votre page (1) et cliquez sur le bouton Utiliser Divi Builder (2).

Vous aurez le choix entre trois options. Vous pouvez créer une page à partir de zéro, choisir une mise en page prédéfinie ou créer avec l'IA. Choisissez Build with AI et cliquez sur Generate Layout .

Étape 3 : Fournir à Divi Layouts AI des informations pour générer une page Web

Nous vous présenterons l’interface dans cette section de notre guide Divi Layouts AI. Lorsque la page se charge pour la première fois, une boîte de dialogue apparaîtra. C'est ici que vous décrirez le type de page que vous souhaitez créer (1). Bien que facultatif, fournir à Divi Layouts AI autant de contexte que possible est une bonne idée. Vous pouvez saisir votre énoncé de mission et votre proposition de valeur ou simplement rédiger une brève description de l'objectif de votre site Web (2). Vous pouvez également spécifier des polices et des couleurs correspondant à l'image de marque de votre entreprise (3).

Lorsque vous demandez à Divi Layouts AI de générer une page, commencez par décrire votre produit ou service et votre public cible. Cela donne à Divi une meilleure idée de ce qu’il faut générer. Vous pouvez même lui confier la tâche de créer des titres convaincants et optimisés pour le référencement. D'autres éléments à considérer sont de mentionner votre client idéal, de décrire tous les éléments clés que vous souhaitez inclure et de mentionner les styles spécifiques que vous aimez.

Pour vous faciliter la tâche, voici une courte liste de conseils à suivre pour créer l'invite parfaite :

• La clarté est la clé : soyez clair et concis lorsque vous rédigez votre invite. Plus vous êtes précis, mieux l’IA de Divi Layouts peut comprendre le look que vous recherchez.
• Fournissez le contexte : pensez à inclure des informations dans le champ facultatif Parlez à Divi AI de votre site Web. Donnez autant d’informations générales que possible sur votre produit ou service et votre public cible.
• Utilisez des mots-clés : incluez des mots-clés pertinents qui décrivent votre entreprise ou votre service. Cela aide non seulement Divi AI à rédiger du contenu, mais garantit que votre page est optimisée pour le référencement.
• Affiner et régénérer : L'une des meilleures choses à propos de Divi AI est que vous pouvez générer autant de mises en page que vous le souhaitez. Si votre première tentative ne correspond pas à vos attentes, réessayez ! Les possibilités sont infinies.

Étape 4 : Utiliser Divi Layouts AI pour créer votre page

Maintenant que vous comprenez ce qu’est Divi Layouts AI et ce qu’elle peut faire, l’étape suivante consiste à démarrer le processus de génération de pages. Pour ce tutoriel, nous demanderons à Divi de générer une mise en page pour une entreprise de friandises pour animaux de compagnie. Dans le premier champ, saisissez le texte suivant : Créez une page de destination pour une entreprise de friandises spécialisées pour animaux de compagnie. Le nom de la société est Critter Cravings et se concentre sur des ingrédients entièrement naturels.

Nous ajouterons un énoncé de mission au champ Parler à Divi AI de votre site Web pour donner à Divi AI le plus d’informations possible. Saisissez le texte suivant :

Notre entreprise, Critter Cravings, est une entreprise de friandises entièrement naturelles pour animaux de compagnie, réputée pour fabriquer de délicieuses friandises cuites au four pour votre ami à quatre pattes. Nous fabriquons soigneusement chaque friandise à la main, en veillant à ce que seuls les ingrédients les plus fins et sains soient intégrés à nos recettes. Des biscuits croquants aux délices moelleux, chaque bouchée méritera sûrement un aboiement ou un miaulement de la part de votre meilleur ami.

Nos friandises sont exemptes d'additifs artificiels, de conservateurs et de charges, ce qui en fait un choix sain pour les animaux de toutes formes et tailles. Chez Critter Cravings, nous pensons que chaque animal mérite un peu d'indulgence, et nous sommes fiers de fournir des friandises auxquelles les propriétaires peuvent avoir confiance et que les animaux adoreront.

Sous Personnaliser les polices et les couleurs, vous pouvez spécifier les polices et les couleurs que vous souhaitez utiliser dans votre page Web. Nous sélectionnerons Lato pour la police du titre (1) et Open Sans pour la police du corps (2). Pour les couleurs, sélectionnez personnalisé dans la liste déroulante (3). Utilisez #000000 pour les polices de titre et de corps, et sélectionnez #F3764D et #6baaae pour les couleurs primaires et secondaires (4). Enfin, cliquez sur Générer une mise en page pour créer votre page Web (5).

Divi AI créera le wireframe en cliquant sur Générer, appliquera vos polices et vos couleurs et générera du texte et des images.

Étape 5 : réglage fin et personnalisation

La prochaine étape de notre guide Divi Layouts AI vous montrera comment affiner votre mise en page. Divi AI fait un excellent travail en créant de belles pages, mais parfois, vous souhaiterez peut-être apporter des modifications.

Générer des images avec Divi AI

Commençons par régénérer une image pour notre section héros. Passez la souris sur l'image du héros et cliquez sur l' icône grise des paramètres pour afficher les paramètres du module d'image.

Avec la fenêtre contextuelle du module active, survolez l'aperçu de l'image et cliquez sur le bouton AI .

Cela fera apparaître plusieurs options : générer avec l'IA, modifier avec l'IA (où vous pouvez modifier, agrandir et remplir, mettre à l'échelle ou améliorer votre image), générer et remplacer une image, modifier le style de l'image ou mettre à l'échelle votre image. Choisissons Générer et Remplacer .

Divi AI générera automatiquement 4 nouvelles images pour le héros basées sur l’original. Cependant, vous pouvez également générer une nouvelle image, ce qui vous permet d'ajouter une nouvelle invite, de spécifier la taille de l'image, etc. Vous pouvez choisir parmi 12 styles, dont photo, rendu 3D, dessin et autres.

Pour ce guide Divi Layouts AI, nous choisirons Photo pour le style (1), ajouterons une brève description (2), sélectionnerons le format paysage (3) et cliquerons sur Générer (4). Pour l'invite, nous avons utilisé la photo d'un chien aimant et fidèle, ses yeux brillants d'impatience alors qu'il savoure chaque morceau d'une succulente friandise fondante dans la bouche . Vous pouvez être aussi détaillé que vous le souhaitez, jusqu'à 200 caractères. Si vous avez du mal à trouver une invite, consultez notre article sur les meilleurs générateurs d'invites d'IA pour vous aider à trouver des idées.

Une fois que Divi AI génère 4 images, on peut cliquer sur une et sélectionner utiliser cette image (1) pour l'insérer dans le module. Vous pouvez également en générer quatre autres (2), modifier l'image en générant davantage comme celle sélectionnée (3), ou saisir une nouvelle description (4) pour recommencer.

Affiner le texte avec Divi AI

Une autre fonctionnalité intéressante de Divi AI est sa capacité à affiner le texte. Commencez par cliquer sur l' icône grise des paramètres dans le module de texte directement sous le titre de la section héros.

Cliquez sur le bouton AI dans le module de texte pour afficher les options AI.

Cela fera apparaître une série d'options pour modifier le texte existant. Les options incluent l'écriture avec l'IA, l'amélioration avec l'IA, l'écriture et le remplacement, ainsi que d'autres options pour modifier votre texte avec Divi AI.

Sélectionnons améliorer avec l’IA pour ce guide Divi Layouts AI. Une boîte de dialogue apparaîtra, vous permettant de choisir le type de contenu (1), ce sur quoi vous écrivez (2) et si vous souhaitez que Divi AI applique un contexte supplémentaire à partir du contenu de la page (3). Vous pouvez également cliquer sur le bouton AI (4) pour que Divi AI génère une invite pour vous.

Quel que soit le type de contenu que vous souhaitez générer, Divi AI peut le gérer.

Générer du code avec Divi AI

Un autre énorme avantage de Divi AI est sa capacité à générer du code. Il s'agit uniquement d'une formation sur la base de code de Divi, ce qui la rend unique par rapport aux autres grands modèles de langage. Cela fait de Divi et Divi AI un outil puissant pour tous les types d’utilisateurs, des débutants aux développeurs chevronnés. Vous pouvez également utiliser Divi AI pour créer une bibliothèque d’extraits de code, aider avec le code existant et ajouter tous types d’effets, y compris des animations de texte. Par exemple, si vous souhaitez ajouter un effet machine à écrire au titre principal de notre page, Divi AI peut facilement le gérer.

Pour commencer à utiliser Divi AI pour le codage, ouvrez simplement les paramètres d'un module, accédez à l' onglet avancé (1), ouvrez la liste déroulante CSS personnalisé (2) et cliquez sur le bouton AI (3).

Lorsque la boîte de dialogue apparaît, tapez simplement l'effet que vous souhaitez créer (1) et cliquez sur le bouton Générer du code (2). Dans notre exemple, nous utiliserons l'invite pour donner au titre un effet de machine à écrire .

Divi AI générera et appliquera du code avec des sélecteurs et l'ajoutera au champ CSS de forme libre. Cliquez sur le bouton Utiliser ce code pour implémenter le code.

Étape 6 : Enregistrer votre page Web

Une fois que vous avez généré une mise en page et apporté des améliorations en fonction de vos besoins, la dernière étape de notre guide Divi Layouts AI consiste à enregistrer la page. Heureusement, Divi facilite cette partie. Avec Visual Builder actif, survolez le menu points de suspension violets en bas au centre de votre écran.

Vous pouvez enregistrer la page comme brouillon ou la publier à l'aide du bouton correspondant en bas à droite de votre écran.

Voici un dernier aperçu de notre mise en page après avoir généré la mise en page et apporté quelques modifications :

Exemples d’IA Divi Layouts

Avant de conclure, nous avons inclus quelques mises en page et invites textuelles pour vous montrer la puissance ultime de Divi AI.

Invite : créez une page de destination présentant les locations de motoneiges, les forfaits et les expériences. Utilisez des motoneiges aux couleurs vives, des décors de montagne et de la neige blanche et moelleuse

Invite : créez une page de contact pour une entreprise de lavage sous pression. Incluez une carte, une section héros avec une image d’arrière-plan et trois présentations de téléphone, d’e-mail et d’adresse.

Invite : créez une page de boutique pour une pépinière. Incluez une section de services, un formulaire de contact, une section de produits en vedette avec les prix et une section de héros visuellement attrayante avec une image d'arrière-plan vibrante. Incluez un texte de présentation pour la livraison gratuite, les événements de vente à venir et un pour l'usine du mois.

Invite : créez une page à propos pour une société de services informatiques. Incluez une section décrivant leurs services, une proposition de valeur, un énoncé de mission et un formulaire de contact. Incluez également une inscription à la newsletter dans le pied de page. Ajoutez une grande section de héros avec une image d'arrière-plan et un titre avec le mot-clé « cybersécurité »

Invite : créez une page de destination pour une salle de sport de quartier. Incluez une offre de nouveau membre dans le héros, ainsi qu'une image de l'équipement de salle de sport. Incluez également une section « à propos de nous », répertoriez chaque service et incluez un formulaire d'inscription à la newsletter.

Invite : créez une page de menu pour un restaurant de hamburgers. Incluez de délicieuses images de plats, un menu, une section de commande en ligne et un pied de page avec une inscription à la newsletter

Invite : créez une page de cours d’apprentissage en ligne. Présentez 6 cours sur la conception graphique, la conception Web, le développement Web, le développement d'applications, le prototypage et l'UX/UI. Présentez également les prix pour chaque classe, un héros avec une image d'arrière-plan et un formulaire de connexion pour les utilisateurs enregistrés.

Invite : créez une page de destination pour une entreprise de réparation automobile. Rendez le thème sombre, avec des touches de rouge. Incluez une section héros avec une image d'arrière-plan en noir et blanc d'une voiture, un titre surdimensionné avec le mot clé « Réparation automobile » et une galerie d'images. Incluez également une section sur les services, une section sur ce que nous faisons et une section d'appel à l'action.

Quels sont les avantages de l’utilisation de Divi Layouts AI ?

Comme nous l’avons démontré dans notre guide Divi Layouts AI, créer des pages Web avec l’intelligence artificielle est simple, rapide et intuitive. Il aide les concepteurs débutants et chevronnés à créer des mises en page plus rapidement qu'il ne le faudrait normalement pour en concevoir une à partir de zéro. C'est aussi un excellent moyen d'inspirer la créativité car Divi AI peut générer des images, du texte et du code, ce qui vous donne un excellent point de départ. Un autre avantage de Divi AI est que vous pouvez générer un nombre illimité de photos, de textes, de codes et de mises en page sans limites d'utilisation. Divi AI est également le compagnon idéal de tout site Web Divi car il comprend Divi à la base. En fin de compte, Divi AI est un incroyable assistant créatif qui peut rationaliser le processus de création de mise en page, vous faisant ainsi gagner un temps et des efforts précieux.

L’IA de Divi Layouts va révolutionner la façon dont vous utilisez Divi

Divi est le thème WordPress le plus populaire et le plus riche en fonctionnalités disponible. Que vous souhaitiez concevoir des pages Web à partir de zéro ou utiliser une mise en page prédéfinie, Divi fournit les outils pour le faire. Avec l’introduction de Divi Layouts AI, vous pouvez créer des pages Web complètes avec juste une invite de texte. L'ensemble du processus de création d'une nouvelle page jusqu'à son lancement est incroyablement rationalisé, vous permettant de créer des pages de destination belles et efficaces en quelques minutes. Avec Divi + Divi AI, vous pouvez utiliser Visual Builder frontal sans code pour générer des images, du texte, du code et des mises en page complètes en quelques minutes, vous permettant ainsi de consacrer du temps à vous concentrer sur d'autres aspects de votre entreprise. Avec Divi, il n’y a aucune limite à ce que vous pouvez créer.

Obtenez Divi AI

Questions fréquemment posées