Vous trouverez dans cet article la liste exacte des étapes nécessaires pour créer un site internet avec Divi. Parce que je sais que ce n’est peut être pas très très clair dans votre tête…

Vous y trouverez tout le nécessaire, de l’achat d’un nom de domaine jusqu’à la création des modèles de page, en passant par l’installation de WordPress,
Et vous pourrez vous rendre compte du temps que ça pourrait vous prendre.
Certaines de ces étapes sont détaillées dans d’autres articles.
Et un article traite autre plus en détail des sites internet avec Showit, pour que vous puissiez comparer.

Note : Cet article contient 2 liens affiliés. Ils ne concernent que des produits que j’utilise moi-même : mon hébergeur et Divi.

Sur le même thème :
Créer un site internet avec Divi et WordPress : les étapes
Créer la version mobile de son site internet avec Divi
Quelle est la différence entre WordPress.com et WordPress.org, et lequel choisir ?

À quoi sert un Page Builder ?

 

1. Choisir un nom de domaine

La toute première étape n’a rien de technique : il faut d’abord choisir un nom de domaine pour votre futur site internet.
Ce sera son adresse.

Si vous avez déjà trouvé le nom idéal pour votre entreprise, ce sera facile.
Le nom de domaine est généralement le même que le nom de votre entreprise ou le votre (sinon ça n’aurait tout simplement aucuns sens), avec l’extension de votre choix : .fr, .com, .be, etc.

Mais il peut arriver que le nom que vous vouliez soit déjà pris!

(C’est ce qui m’est arrivé. Je l’attendais depuis longtemps, mais « andrea-studio.com » a été racheté par quelqu’un. Je me suis fait doubler, par une fille qui s’appelle Andrea et qui crée des sites internet quelque par dans le Minnesota…)

Vous pouvez vérifier  sur ce site officiel que le nom de domaine que vous visez est encore disponible.

La location d’un nom de domaine ne coute pas très cher : environ 5 à 15€ par an.

Cette première étape est souvent couplée avec la suivante « choisir un hébergement ».  

 

2. Choisir un service d’hébergement

Votre site WordPress doit être hébergé quelque part.
C’est-à-dire qu’il doit être stocké sur un disque dur accessible à tout le monde.
Afin que tout le monde puisse le consulter, où qu’il se trouve dans le monde.
Et comme votre ordinateur n’est pas accessible à tous, il va falloir souscrire aux services d’une entreprise spécialisée.

Il existe des dizaines d’opérateurs qui proposent ce service.
Par exemple :

• OVH
• Infomaniak
• O2Switch
• WP Server
• Ghandi
• GoDaddy, etc.

Vous pouvez simplement parcourir les sites de plusieurs hébergeurs, et choisir celui qui vous propose les meilleures offres, comme vous le feriez pour un abonnement de téléphone.

(Note : un site WordPress.com n’a pas besoin de cette étape.
Dans ce cas, vous souscrivez à l’offre payante de WordPress.com, et le tarif de l’hébergement et du nom de domaine sont compris dedans.
C’est un système particulier. Cet article traite uniquement du cas général avec la version libre de WordPress.
Pour en savoir plus sur ce système, consultez cet article : Quelle est la différence entre Worpdress.com et WordPress.org? ). 

 

3- Installer WordPress

Bon, maintenant que vous avez tout le matériel, vous pouvez commencer à utiliser et à travailler.
Étape suivante : l’installation de WordPress.

Vous allez d’abord télécharger WordPress.
WordPress est un logiciel libre, que vous pouvez télécharger gratuitement sur le site officiel.
Attention, rendez vous bien sur le site WordPress.org et pas WordPress.com ! Ce sont deux offres très différentes mais qui portent le même nom.

Pour en savoir plus, vous pouvez consulter cet article :
« Quelle est la différence entre Worpdress.org et WordPress.com ? »

Vous allez devoir utiliser un petit logiciel pour visualiser le contenu de votre serveur distant (qui est vide pour l’instant). Vous pouvez par exemple utiliser FileZilla.
Grâce à lui, vous pourrez visualiser le contenu de votre espace de stockage, comme avec l’explorateur Windows. Vous allez voir les dossiers de WordPress et les fichiers qu’ils contiennent, les déplacer etc.

Suivez les instructions :

• dézipper le dossier,
• créez une base de données (depuis votre espace client), 
• puis lancez le programme d’installation en remplissant les champs affichés à l’écran.

Vous trouverez toutes les instructions précises dans la documentation officielle.

 

Méthode alternative pour installer WordPress facilement

Votre hébergeur vous proposera sans doute une installation automatique de WordPress.
O2Switch propose par exemple l’installation automatique avec Softaculous.
Dans ce cas, vous n’avez rien à faire, à part choisir un identifiant et un mot de passe. WordPress sera directement installé sur votre serveur.

 

Sur le même thème :
Comment utiliser WordPress? Le tableau de bord pour les débutants

 

4- Télécharger Divi

Dernière installation : Divi.
Divi va vous permettre de construire le site en direct, en modifiant chaque page visuellement par glisser déposer, un peu à la manière de Canva.   

Article lié :
À quoi sert un Page Builder ?

Là encore, téléchargez la dernière version de Divi.

Si vous n’êtes pas encore sûre, et que vous voulez vous faire votre propre avis sur Divi, vous pourrez voir plus d’explications sur cette page.

Et si vous voulez voir comment ça marche, et tester le logiciel, vous pouvez même utiliser cette page de démonstration. (ou ici)

Lorsque vous aurez crée votre compte, vous pourrez télécharger la dernière version de Divi au format Zip.

 

5- Installer Divi à la place du thème par défaut

Divi est un thème, il ne nécessite aucune installation particulière. Il faudra juste l’ajouter à la liste de vos thèmes WordPress.

• Après avoir téléchargé Divi, allez juste le récupérer dans votre dossier de téléchargements, au format .zip (compressé).
• Inutile de le décompresser, vous pouvez le laisser sous cette forme.
• Rendez vous dans le tableau de bord de WordPress,
• Puis dans « Apparence » et « Thèmes ».
• Vous verrez alors la liste de vos thèmes déjà installés.
• Cliquez sur « Ajouter » et « Téléverser un thème ».

• Une petite fenêtre va s’ouvrir, vous pourrez cliquer pour choisir un ficher dans votre ordinateur, ou simplement le faire glisser. 
• Cliquez ensuite sur Installer.
• Lorsque l’installation sera terminée (au bout de quelques secondes) cliquez sur « Activer ».

 

Divi apparait désormais dans la liste des thèmes de votre tableau de bord !

(à cette étape, le votre doit déjà être »Activé ». Si vous aviez zappé cette étape, eh bien… cliquez sur le bouton Activer.

 

 

Facultatif mais recommandé : installer un thème enfant pour Divi

Si vous prévoyez de faire des modifications sur le thème lui-même en ajoutant du code, vous allez devoir créer un thème enfant. Celui-ci est une sorte de copie de Divi.
Ce dossier ne contiendra que le code personnalisé que vous avez ajouté.
Il évitera que vos modifications ne soient effacées à la prochaine mise à jour.
Si vous n’avez pas l’intention d’ajouter du code, ce n’est pas obligatoire (les pages que vous allez concevoir avec Divi ne seront pas effacées avec les mises à jour). 

Vous pourrez toujours le faire plus tard, lorsque vous vous sentirez plus à l’aise, ou prête à ajouter votre propre code si l’occasion se présente.
Dans ce cas, vous pourrez suivre cette documentation.

6- Créer les pages. Puis concevoir leur contenu avec le Divi Builder

Maintenant que tout est en ordre, vous pouvez ENFIN commencer à créer le site internet avec Divi !

Créer une page à partir du catalogue de modèles (Divi Layouts)

Pour en savoir plus :
Utiliser les modèles Divi pour créer un site web plus vite
6 modèles Divi pour créer son site d’architecte d’intérieur avec WordPress

Si vous voulez, vous pouvez créer les pages en partant d’une base.
Divi propose un catalogue de presque 300 modèles que vous pouvez personnaliser.

Dans ce cas, ajoutez une page.
Dans votre tableau de bord WordPress : rendez-vous dans « Pages », puis cliquez sur « Ajouter ». Donnez un titre à votre première page.
Choisissez « Utiliser le Divi Builder »

Vous aurez ensuite 3 choix :

• Construire à partir d’une page blanche (voir-ci-dessous)
• Utiliser un modèle du catalogue
• Cloner l’une de vos autres pages (si vous en avez)

Le catalogue va s’ouvrir directement.
C’est exactement le même catalogue de modèles que sur cette page : Catalogue de modèles Divi

Vous pouvez filtrer par catégories pour trouver plus facilement celui qui vous plait. Ils sont spécialement conçus pour des professions spécifiques : studios de yoga, restaurants, fleuristes, etc.

Dans chaque modèle, vous pourrez ensuite choisir la page que vous souhaitez installer: Accueil, Contact, Services, etc. (pensez à bien retenir quel modèle vous avez choisi, afin de sélectionner le même lorsque vous allez créer les pages suivantes).

Pour en savoir plus sur les templates Divi :
Utiliser les modèles Divi pour créer un site web plus vite
8 templates de site internet Divi pour créer son site internet de thérapeute
6 modèles Divi pour créer son site d’architecte d’intérieur avec WordPress
6 templates Divi pour créer un site internet de yoga
3 templates Divi pour créer un site internet de psychologue

 

Créer une page avec le Divi Builder, 100% personnalisée

Vous pouvez aussi partir de zéro.

1- Pour commencez, rendez-vous dans la liste des pages.

Et cliquez sur « Ajouter ».

2- Choisissez un titre pour votre page

Par exemple : « accueil ».
Et cliquez sur « Publier » ou sur « Enregistrer le brouillon ».

3- Cliquez sur le bouton violet : « utiliser le Divi Builder »

 

4- Parmi les 3 choix qui s’offrent à vous,

Choisissez le premier, en bleu : « Construire à partir de zéro »

5- Vous arriverez alors sur une page blanche.

Dans le Divi Builder, un code couleur vous permet de vous y retrouver dans le système.

3 couleurs :

• Bleu pour les sections, qui s’affichent en pleine page.
• Vert pour lignes, qui sont dans les sections (utiles car elles peuvent avoir plusieurs colonnes)
• Gris pour les modules (textes, boutons, etc.)
  
  
  

6- Ajoutez une première section

En cliquant sur le signe + de couleur bleue, dans laquelle vous ajouterez une ligne en cliquant sur le signe + de couleur verte.

7- Puis vous pourrez y mettre les modules dont vous avez besoin,

En cliquant sur le signe + de couleur grise : des titres, des images, des boutons, etc.

8- Personnalisez chaque module

Pour chaque module, rendez-vous ensuite dans l’onglet « design » pour en modifier l’apparence : polices, couleurs de fonds, bordures, animations, etc.

Pour tester les fonctionnalités de Divi sans modifier votre propre site, n’hésitez pas à utiliser la page d’entrainement en cliquant ici. (Ou ici)

 

 

Créer des modèles pour les pages dynamiques d’articles et de fiches produits

Certaines pages ne peuvent pas être crées directement car elles sont affichés de manière dynamique.

Par exemple :
Si vous avez une boutique en ligne, avec 200 produits, vous n’avez pas besoin de créer manuellement les 200 pages « votre site.com/produit1 » , « votre site.com/produit2 », « votre site.com/produit199 » etc.
Vous allez gagner un temps incroyable en utilisant des modèles.
Un seul modèle peut être utilisé pour créer à la volée un nombre illimité de pages qui remplissent les mêmes critères.

Avec ce  système, vous allez dire à Divi, que pour chaque fiche produit, vous aimeriez le titre en haut, puis une description du produit, et une image et le prix en dessous.
Pour chaque élément, vous allez indiquer son emplacement, sa taille, sa police sa couleur, etc dans le modèle.

Et lorsque vous allez remplir votre catalogue de produits, chaque fiche va se créer automatiquement.
Lorsqu’un client voudra voir le produit n°150, votre site utilisera le modèle pour lui afficher une jolie page.

Et c’est le même système avec les articles.
Vous créez le modèle une fois, et vous n’avez plus qu’à taper le texte de l’article dans l’éditeur WordPress.
Par la suite, le site affichera chaque article suivant ce modèle défini à l’avance, que vous n’avez pas besoin de reproduire à chaque fois.
Vous pouvez ainsi publier des milliers d’articles sans refaire la mise en page pour chacun d’eux.

D’ailleurs sur ce site, si vous parcourez plusieurs articles, vous constaterez qu’ils utilisent tous le même modèle.

Votre site peut utiliser des modèles pour :

• Les articles de blog
• Les fiches produits
• Le panier (qui change pour chaque commande)
• Les catégories (qui affichent des articles ou des produits différents)
• La page « Erreur 404 »