Vous êtes sur la page 1sur 21

DIVI 4.

0
LE GUIDE ULTIME
POUR UNE PRISE
EN MAIN EXPRESS

H MARKETING AGENCY
WordPress & Divi : une grande histoire d’amour ?
Le ​thème WordPress Divi​ est un thème intuitif et facile à prendre en main. Toutefois, il
est beaucoup plus facile de le dompter lorsqu’on a déjà de ​l’expérience avec
WordPress​.
Si vous débutez complètement dans la ​création de site​ et que vous avez choisi de vous
lancer avec ce thème WordPress, ce guide va vous accompagner tout au long du
processus de création.
Cependant, il est possible que vous ne parveniez pas à savoir ​par où commencer​.
C’est souvent le cas lorsqu’on débute, on lit beaucoup d’articles et on se rend compte,
souvent tardivement, que nous aurions dû faire ceci ou cela avant, si nous avions eu
connaissances de ces informations…
Ce ​guide de démarrage avec WordPress et Divi​ est justement fait pour ça !
Je vous propose une sorte de ​méthodologie hiérarchisée​ pour ne rien laisser au
hasard.
Comment installer le thème Divi sur WordPress ?

Tout d’abord : les pré-requis


Dans un premier temps vous allez devoir choisir ​un nom de domaine, un hébergeur et
installer WordPress​.
Je ne parlerai pas de cela ici car il existe déjà ​de nombreuses ressources sur le Web
qui pourront vous aide
Si vous avez déjà effectué tout cela, nous allons pouvoir continuer ensemble…

Première étape : l’achat du thème Divi.

Le ​thème Divi est un thème premium​, cela signifie que c’est un thème payant,
contrairement aux thèmes gratuits que vous pouvez trouver sur ​le repository de
WordPress​.
Je vous déconseille d’utiliser un thème Divi que vous auriez pu trouver sur des
plateformes douteuses, vous pourriez avoir de sérieux ennuis par la suite…
Je vous déconseille également d’utiliser le thème Divi que votre « poto » vous aurait
gentiment « filé » car c’est un bon moyen pour que les mises à jour ne soient pas
suivies. Divi est un thème qui évolue régulièrement, il y a plusieurs mises à jour par mois
et cela sous-entendrait que vous seriez dépendant de la personne qui vous a mis à
disposition le thème.
Donc, la meilleure chose à faire est de vous procurer légalement et honnêtement la
licence de ce thème (enfin, c’est comme ça que je vois les choses) en vous rendant
directement sur la plateforme de ElegantTheme.

Dès votre arrivée sur le site, vous pourrez remarquer ce joli bouton fuchsia avec écrit ​«
Join to Download »​, il vous suffira de cliquer dessus pour voir apparaitre les deux
formules d’acquisitions :

● la licence annuelle « Yearly Access » à 89$ :​ vous devrez renouveler ce

paiement chaque année pour pouvoir bénéficier des mises à jour. Si vous ne

renouvelez pas votre licence, votre site fonctionnera toujours mais vous ne

pourrez pas installer les mises à jour.

● la licence à vie « LifeTime Access » à 249$ :​ vous payez une fois pour toute la

licence qui vous donnera accès à tous les thèmes et plugins de la plateforme

avec les mises à jour « à vie ». Cette formule est très rentable dès le court terme

si vous utilisez Divi pour créer les site de vos clients.

Dans les deux cas, votre licence pourra être utilisée sur un nombre illimité de sites, c’est
l’un des avantages offerts par ElegantThemes… Contrairement aux thèmes achetés sur
ThemeForest, par exemple, où 1 licence = 1 site.
Faites donc votre choix entre ces deux formules, renseignez les informations de votre
compte puis procédez au règlement. Voilà, maintenant vous êtes propriétaire d’une
licence Divi, vous allez pouvoir vous en servir !
Deuxième étape : le téléchargement du thème Divi

Maintenant que vous avez ​un compte sur ElegantThemes​, vous pourrez vous
connecter afin de télécharger tout ce que vous voudrez : ça peut être le thème Divi mais
aussi le thème Extra, le plugin Monarch ou Bloom…
Pour cela, vous devrez vous connecter à votre compte en cliquant sur l’onglet ​LOGIN
(situé à gauche du bouton ​Join to Download​) afin d’accéder à votre ​« Member Area »​ =
c’est ici que ça se passe !
Il vous suffira alors que cliquer sur le bouton ​« Download »​ du ou des produits qui vous
intéressent. Le téléchargement est instantané.
Troisième étape : l’installation du thème Divi
À présent, vous êtes en possession de votre thème, il se trouve certainement dans le
dossier des téléchargements de votre ordinateur. Pour l’installer sur votre site, vous
pourrez procéder de deux manières différentes :

Option 1 : Installer Divi depuis l’administration de WordPress


Cette façon de faire est la plus simple si vous débutez sur WordPress, voici les étapes à
suivre :

1. Connectez-vous à l’administration de votre site WordPress

2. Rendez-vous à l’onglet ​Apparence > Thème

3. Cliquez sur le bouton ​Ajouter

4. Cliquez ensuite sur ​Téléverser un thème

5. Cliquez sur ​Parcourir

6. Sélectionnez alors le thème que vous avez récemment téléchargé dans votre

ordinateur. ​ATTENTION : vous devrez sélectionner ​le dossier de thème

compressé​, c’est-à-dire le ​dossier.zip.​

7. Patientez pendant le téléchargement

8. Activez votre thème.


Option 2 : Installer Divi sur votre hébergement via FTP

Sur cette capture d’écran, nous installons Divi via FTP (Filezilla) 
– la fenêtre de gauche en rose correspond à votre ordinateur – 
la fenêtre de droite en violet correspond à votre serveur. Pour 
atteindre le dossier « Themes » vous devrez effectuer des 
doubles clics… 

Cette procédure est un peu plus complexe si vous n’avez jamais utilisé de logiciel FTP
mais de toutes façons, vous devrez tôt ou tard vous y mettre, alors pourquoi ne pas
s’entrainer dès maintenant ?

1. Si vous n’avez pas de ​FTP​, vous pouvez vous procurer ​Filezilla

2. Une fois installé sur votre ordinateur, vous pourrez l’ouvrir afin de renseigner ​les

informations de connexion à votre serveur​ : celles-ci vous ont été fournies par

votre hébergeur lors de la souscription de l’offre.


3. Une fois la connexion effectuée entre votre ordinateur et votre serveur, vous allez

pouvoir procéder à l’envoi de votre thème Divi : ​la fenêtre de droite de Filezilla

(en violet) correspond à votre hébergeur​ (serveur), c’est ici que vous trouverez

tous les fichiers de votre site WordPress – ​la fenêtre de gauche (en rose)

correspond à votre ordinateur​. Le plus délicat à présent est d’effectuer le

transfert au bon endroit.

4. À droite, du côté de l’hébergeur, ​vous effectuerez un double-clic sur les

dossiers que vous souhaitez ouvrir​ jusqu’à atteindre le bon répertoire => le

thème Divi doit être placé à ce chemin : ​www (ou « public » selon votre

hébergeur) > wp-content > themes.​

5. Une fois que ce répertoire est ouvert, vous pourrez glisser le thème Divi de la

partie gauche de l’écran (le côté ordinateur) vers la partie droite de l’écran.

ATTENTION : contrairement à la méthode n°1 (via l’administration de WP)

vous devrez importer le dossier de thème décompressé (non Zippé).

6. Patientez le temps du téléchargement.

7. Enfin, vous pouvez retourner dans la partie administration de votre site, dans

l’onglet ​Apparence > Thèmes​ pour y voir apparaitre le thème Divi.

8. Cliquez sur ​activer​. C’est terminé !


Comment créer un thème enfant pour Divi ?
Et comment s’en servir ?
La customisation poussée d’un thème, que ce soit le thème Divi ou bien un autre thème
WordPress, ​passe impérativement par la création d’un thème enfant​.
Bien-sûr qu’on peut utiliser des plugins pour ajouter du code sans avoir à créer de
thème enfant ou bien des plugins pour créer des thèmes enfant en un clic.
Il existe même des générateurs qui peuvent le faire pour vous mais je vous déconseille
toutes ces options…
Pourquoi ne pas ​créer vous-même votre thème enfant pour Divi​ ? C’est tellement
simple !

1 – Qu’est-ce qu’un thème enfant ?


Un thème enfant est un «thème satellite» qui dépend d’un thème parent​ et qui
permet d’effectuer des retouches et des modifications sans en impacter le thème initial
(le thème Divi). Un thème enfant hérite des fonctionnalités d’un thème parent et prime
sur celui-ci, c’est à dire que tous les styles CSS que vous saisirez seront pris en compte
à la place du thème parent.
Un thème enfant est indispensable si l’on veut effectuer des modifications sur un thème
parent afin que celles-ci soient conservées lors des mises à jour du thème parent.
Créer un ​thème enfant pour Divi​ protège votre thème initial, vous pourrez ainsi copier
dans le thème enfant des fichiers utilisés par le thème parent, afin de les modifier sans
craintes. Il n’y a que des avantages à utiliser un thème enfant.
La création d’un thème enfant n’est pas compliquée, toutefois vous pourrez vous aider
du ​codex de WordPress​ si besoin.
Pour construire un thème enfant, vous aurez besoin :

● d’un éditeur de texte

● du ​thème Divi

● de créer un fichier ​style.css

● de créer un fichier ​functions.php

2 – Création du fichier ​functions.php


​ racket
Si vous n’en possédez pas déjà un, téléchargez un éditeur de texte tel que B

ou ​SublimText​. Ensuite, vous allez pouvoir commencer à créer votre premier

fichier => le fichier functions.php :


● Ouvrez Sublim Text (par exemple) et allez à File > New File

Dans ce fichier saisissez simplement ces quelques lignes :

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style('parent-style', get_template_directory_uri() .

'/style.css');
● }

● Enregistrez ce fichier sur votre bureau (desktop) en allant à File > Save As

● Nommez ce fichier functions.php, tout en minuscule, puis cliquez sur Save


● L’application SublimText peut vous envoyer une notification : confirmez en

cliquant sur Use .php

3 – Création du fichier ​style.css


Toujours à l’aide d’un éditeur de texte comme SublimText, vous allez pouvoir

créer le deuxième fichier nécessaire à la conception du thème enfant pour Divi, il

s’agit du fichier style.css. Ce fichier est obligatoire, tout comme le fichier

functions.php, et c’est dans ce fichier que vous pourrez écrire toutes vos

modifications et règles CSS.

Si vous êtes débutant en CSS et que vous avez besoin d’y voir plus clair, j’ai

sélectionné pour vous le meilleur site – et je pèse mes mots – pour comprendre le

CSS, il est facile, il n’y a pas de bla-bla et il est très pédagogique, il s’agit de

LearLayout,​ n’hésitez pas y faire un tour.

Revenons à nos moutons, pour créer le fichier, voici ce que vous devez faire :

● Ouvrez, dans SublimText, le fichier style.css contenu à la racine du thème

Divi original. C’est dans ce fichier que vous trouverez les informations

utiles pour créer votre thème enfant.


● Repérez l’en-tête en début de fichier : ce sont les éléments inscrits entre /*

et */

● Sélectionnez ces éléments contenus dans l’en-tête et copiez-les (Ctrl+C).

● Toujours dans SublimText, créez un nouveau fichier en allant dans le menu

File > New File puis collez (Ctrl+V) l’entête du fichier style.css du thème Divi

que vous venez de copiez.

● Modifiez la ligne «Theme Name: Divi» en «Theme Name: Divi Child» (voir

ligne 2 de la capture ci-dessous). Rajoutez une ligne appelée «Template:

Divi» (voir ligne 3). Ne pas insérer d’espace entre le mot Template et les
deux points qui suivent.

● Vous pouvez ajouter l’URL de votre site, votre nom, modifier la description

et supprimer éventuellement les lignes que vous jugeriez superflues.

● Enregistrez ce fichier sur votre bureau (desktop) en allant à File > Save As

(la même procédure que pour l’enregistrement du fichier functions.php).

● Nommez ce fichier style.css, tout en minuscule, puis cliquez sur Save.

​ creenshot.png
4 – Création du s
Le screenshot.png est l’image qui illustre votre thème enfant dans la partie

administration sous l’onglet Apparence > Thème. C’est une étape superflue mais

c’est un petit «plus» qui apporte une valeur ajoutée à votre thème enfant, surtout

si c’est pour l’un de vos clients.

● Choisissez une image pour représenter votre thème enfant

● Redimensionnez-la en 1200 pixels x 900 pixels (ou 600×450)

● Enregistrez-la sous le nom de screenshot.png


Image pour illustrer le thème enfant pour Divi visible depuis 
l’onglet Apparence > Thèmes 

5 – Création du dossier de thème enfant (répertoire


du thème)
À présent, vous êtes en possession de 3 fichiers :

● le fichier functions.php

● le fichier style.css

● le fichier screenshot.png

Vous allez pouvoir les réunir dans un dossier qui deviendra le dossier de votre

thème enfant pour Divi.


● Sur le bureau (desktop) de votre ordinateur, créez un nouveau dossier que

vous nommerez «Divi-child».

● Déplacez les 3 fichiers dans ce nouveau dossier.

● Si besoin, compressez le dossier de votre thème enfant afin d’obtenir un

dossier .zip (clic-droit > compresser).

6 – Envoi du thème enfant sur votre hébergement


Un thème enfant s’installe comme n’importe quel thème WordPress, je vous avais

déjà expliqué comment installer le thème Divi.

En conclusion…
Et voilà, il vous aura fallu 10 minutes montre en main pour créer votre thème

enfant pour Divi. Était-ce difficile ?

À présent, vous allez pouvoir partir sur de bonnes bases et ainsi customiser un

max votre site ou votre blog. Vous avez les cartes en mains, il ne vous reste plus

qu’à suivre les autres tutoriels disponibles sur ce guide


Comment mettre à jour le thème Divi ?
Comment mettre à jour le thème Divi ? C’est pourtant simple mais si vous débutez

avec Divi, vous risquez de chercher un peu… Dans cet article, je vous explique

comment activer les mises à jour automatiques du thème.

1 – Comment savoir si une mise à jour du thème est


disponible ?
Lorsque vous vous rendez dans l’onglet Apparence > Thèmes de l’administration

de votre site, vous verrez les couvertures des thèmes WordPress qui y sont

installés.

Lorsqu’une mise à jour est disponible, un bandeau de notification est apposé sur

l’image : « Nouvelle version disponible »

Si la mention « Mettre à jour maintenant » est inscrite (comme sur l’image de

droite), il vous suffira alors de cliquer sur ce lien bleu et votre thème se mettra à

jour automatiquement.
Par contre, si cette mention n’apparaît pas (comme sur l’image de gauche), vous

devrez activer les mises à jour à l’aide de votre clé API Divi.

2 – Où obtenir une API Key Divi (clé API) ?


Lorsque vous avez acheté votre licence Divi, quelle soit annuelle ou lifetime, vous

avez créé un compte sur le site de Elegantthemes. C’est sur ce site que vous avez

accès à vos clés API Divi (API Keys).

3 – Activer les mises à jour automatiques du thème


Divi
Maintenant que vous êtes en possession de votre clé API, vous allez la connecter

à votre site afin d’activer les mises à jour automatiques.

1. Allez à l’onglet Divi > Options du thème

2. Allez à l’onglet Updates

3. Saisissez votre nom d’utilisateur : celui qui vous sert à vous connecter à

votre compte ElegantThemes


4. Collez la clé API générée précédemment

5. Sauvegardez

À présent, lorsque vous vous rendrez dans l’onglet Apparence > Thèmes, le lien

pour mettre à jour Divi devrait apparaître. Vous n’aurez plus qu’à cliquer dessus

pour lancer la mise à jour.


1. Rendez-vous sur votre ​Member Area​ et saisissez vos identifiants pour vous

connecter à votre compte ElegantThemes.

2. Sélectionnez l’onglet Account.

3. Sélectionnez l’onglet Your API Key.

4. Générez une nouvelle clé en cliquant sur Add New API Key.

5. Copiez la clé ainsi générée.


5 – L’importance des mises à jour
Mettre à jour ses thèmes et ses plugins WordPress est essentiel pour la sécurité

de votre site.

Non seulement vous devez mettre WordPress à jour dès qu’une nouvelle

version est disponible mais vous devez garder l’ensemble de votre

environnement à jour : même les plugins et les thèmes qui ne sont pas activés

!!!

Il est même conseillé de supprimer les plugins et thèmes qui ne sont pas actifs et

que vous ne comptez plus activer. Une faille de sécurité peut toucher un site

même si le plugin n’est pas activé.

Si vous trouvez cela trop contraignant de vous connecter au backoffice

quotidiennement, il serait bon, alors, d’installer un plugin qui se charge de mettre

votre environnement à jour automatiquement comme ​Easy Update Manager.​

SOURCUE : Astuces Divi