Thème WordPress Divi 4 : Guide du débutant complet 2020

Thème WordPress Divi 4 : Guide du débutant complet 2020

Bienvenue sur mon guide complet pour débuter avec Divi. Ce guide est destiné à vous apprendre les bases de Divi et plus spécifiquement du « Visual Builder » ou constructeur visuel présent avec le thème Divi.

 

Les bases du visual builder ou constructeur de page Divi

Divi est un thème qui vous permet de modifier rapidement et simplement tous les aspects et contenus de votre site.

Ainsi en quelques clics vous pouvez modifier la partie « front-end » c’est à dire la partie que le visiteur pourra voir, grâce au visual builder de Divi.

Le constructeur utilise trois blocs de construction principaux : Sections, Colonnes et Modules. Leur utilisation conjointe vous permet de créer un nombre incalculable de mises en page. Les sections sont les plus grands blocs de construction, et elles abritent des groupes de rangées. Les colonnes se trouvent à l’intérieur des sections et servent à choisir le nombre de modules présent sur une seule ligne. Les modules sont placés à l’intérieur des colonnes . C’est la structure basique de Divi.

Les sections

Les sections sont les éléments de base utilisés dans la conception de pages avec Divi, elles sont la première chose que vous ajoutez à votre page. Celle-ci vous permet de créer des grands groupe de contenu. Il existe trois types de sections : Régulières, Spécialisées et Pleine largeur.

Les sections sont représentées par le cadre bleu pour les sections régulières, orange pour les sections spécialisées et violet pour les sections pleine largeur.

 

Thème WordPress Divi 4 : Guide du débutant complet 2020 22

Les colonnes

Les colonnes se trouvent donc à l’intérieur des sections, vous pouvez choisir le nombre d’élements (ou de modules) que vous souhaitez affichez sur une ligne.

Les colonnes sont représentées par les cadres vert.

Thème WordPress Divi 4 : Guide du débutant complet 2020 23

Les modules

Les modules sont les éléments de contenu qui composent votre page web (texte, image, appel d’action…). Chaque module de Divi peut s’intégrer dans n’importe quelle largeur de colonne et ils sont tous entièrement personnalisable.

Les modules sont représentés par les cadres gris.

Thème WordPress Divi 4 : Guide du débutant complet 2020 24

Les actions possibles pour chaque section, colonnes et modules :

Section :

Thème WordPress Divi 4 : Guide du débutant complet 2020 25

Dans l’ordre de gauche à droite :

  • Déplacer la section, cliquer et déplacer
  • Les paramètres de la section
  • Dupliquer la section
  • Enregistrer la section dans le librairie Divi (afin de pouvoir réutiliser cette section sur d’autres pages)
  • Supprimer la section
  • Quitter (d’ utilité assez mistérieuse)
  • Options avancées

Colonnes:

Thème WordPress Divi 4 : Guide du débutant complet 2020 26

Dans l’ordre de gauche à droite :

  • Déplacer la colonne, cliquer et déplacer
  • Les paramètres de la colonne
  • Dupliquer la colonne
  • Modifier le nombre de colonne sur une seule ligne
  • Enregistrer la section dans le librairie Divi (afin de pouvoir réutiliser cette colonne sur d’autres pages)
  • Supprimer la colonne
  • Quitter (toujours aussi mystérieux)
  • Options avancées

 

Modules:

Thème WordPress Divi 4 : Guide du débutant complet 2020 27

Dans l’ordre de gauche à droite :

  • Déplacer le module, cliquer et déplacer
  • Les paramètres de le module
  • Dupliquer le module
  • Enregistrer le module dans le librairie Divi (afin de pouvoir réutiliser cette colonne sur d’autres pages)
  • Supprimer le module
  • Quitter
  • Options avancées

Vous connaissez maintenant les base du visual builder de Divi, du moins en ce qui concerne la création interne des pages, dans la section ci-dessous je vous explique les réglages et actions générales que vous pouvez effectuer sur la page.

 

Paramétrage général de votre page Divi

Pour accéder à la barre de paramétrage générale vous pouvez cliquer sur le bouton suivant situé dans le bas de votre page, en mode visual builder activé.

Thème WordPress Divi 4 : Guide du débutant complet 2020 28

Paramètres d’affichage du visual builder

Thème WordPress Divi 4 : Guide du débutant complet 2020 29

Dans l’ordre de gauche à droite :

  • Paramètres du constructeur de page
  • Affichage en  mode Wirefrime ( utile quand certains éléments se chevauchent et sont inaccessible via l’affichage classique)
  • Zoom
  • Affichage en mode Ordinateur
  • Affichage en mode Tablette
  • Affichage en mode Smartphone

Paramètres de la page

Thème WordPress Divi 4 : Guide du débutant complet 2020 30

Dans l’ordre de gauche à droite :

  • Ajouter une autre page au contenu de celle-ci
  • Sauvegarder la mise en page dans votre blibliothèque divi
  • Supprimer la page
  • Fermer la barre d’option inférieur
  • Paramètres de la page
  • Restaurer un version antérieur de la page
  • Exporter ou importer la mise en page sur votre ordinateur

Option de sauvegarde

Thème WordPress Divi 4 : Guide du débutant complet 2020 31

Dans l’ordre de gauche à droite :

  • Effectuer une action via le mode recherche
  • Ouvre une petite fenêtre ou vous trouver votre wireframe en version fenêtré
  • Regroupe les guides disponnibles dans Divi 
  • Sauvegarder le brouillon
  • Publier la page

Comment accéder au visual builde de Divi ?

1. Connectez-vous à votre espace administrateur

Pour cela rendez-vous sur votre url d’administration et introduisez votre login et votre mot de passe.

Dans votre tableau de bord WordPress cliquez sur la petite maison en haut à gauche puis sur « aller sur le site »

Thème WordPress Divi 4 : Guide du débutant complet 2020 32

2. Choisissez la page à modifier

 Maintenant que vous êtes sur votre site en mode administrateur naviguez jusqu’a la page contenant le texte à modifier.

Ceci fait appuyez sur bouton « activez le visual builder » pour ouvir le mode édition de cette page

Thème WordPress Divi 4 : Guide du débutant complet 2020 33

Selectionner et remplacer le texte 

Selectionnez le texte en maintenant le clic gauche enfocé, et remplacez le avec votre nouveau texte.

Thème WordPress Divi 4 : Guide du débutant complet 2020 34

Ouvrir la barre de navigation du bas

Pour cela Appuez sur les icones avec 3 petits point sur le bas de votre écran.

Thème WordPress Divi 4 : Guide du débutant complet 2020 35

Enregistrez

Cliquez simplement sur le bouton vert sauvegarder pour enregistrer les modifications sur votre site.

Et voila votre texte à bien été modifié vous pouvez quitter le visual builder.

Thème WordPress Divi 4 : Guide du débutant complet 2020 36

Sélectionner et remplacer une image

Sélectionnez la page ou se trouve l’image et activé le visual builder

Thème WordPress Divi 4 : Guide du débutant complet 2020 33

Ouvir le paramétrage de l’image

Vous devez ouvrir la fenêtre de paramétrage gràce à l’icone en forme de rouage sur fond gris se trouvant sur l’image en question.

Thème WordPress Divi 4 : Guide du débutant complet 2020 38

Ouvrir la blibliothèque multimédia

Appuyer sur le bouton en forme de roue crantée

Thème WordPress Divi 4 : Guide du débutant complet 2020 39

Choisissez l’image à insérer

  • Si votre image ne se trouve pas dans votre bibliothèque multimédia téléversez la en appuyant sur l’onglet « téléverser des fichiers » comme indiquer en 1.
  • Si vous possédez déjà l’image dans votre bibliothèque multimédia, sélectionnez la et appuyez sur « charger une image » en bas à droite de l’écran comme le montre la flèche 
Thème WordPress Divi 4 : Guide du débutant complet 2020 40

Ouvrir la barre de navigation du bas

Pour cela Appuez sur les l’icone avec 3 petits point sur le bas de votre écran.

Thème WordPress Divi 4 : Guide du débutant complet 2020 35

Enregistrer

Cliquez simplement sur le bouton vert sauvegarder pour enregistrer les modifications sur votre site.

Et voila votre image a bien été modifié vous pouvez maintenant quitter le visual builder.

Thème WordPress Divi 4 : Guide du débutant complet 2020 36
Comment aligner verticalement le contenu avec Divi

Comment aligner verticalement le contenu avec Divi

Thème Divi pour WordPress – Test et avis

Thème Divi pour WordPress – Test et avis

Divi est mon thème WordPress de prédilection depuis des années. Je le recommande souvent à mes clients. Il est donc temps de présenter ce fameux thème d’un peu plus près et de vous donner mon retour d’ expérience.

Tôt ou tard, presque tous ceux qui utilisent des thèmes WordPress rencontreront Divi d’Elegant Themes. Ce test vous en dit plus sur le populaire PageBuilder, en montre les caractéristiques, en donne les avantages et en laisse un bon aperçu. Il vaut la peine de le lire, surtout pour les débutants et néophytes. Avec la mise à jour de la version 4, beaucoup de choses ont changé sur Divi. Cet article contient également des informations étendues sur Divi, afin que chacun ait une bonne vue d’ensemble après la lecture et puisse décider si Divi convient ou non à ses propres besoins.

Thème Divi pour WordPress - Test et avis 50

Qui est derrière Divi ?

Une activité professionnelle sur Internet exige une conception professionnelle et des experts qui savent s’y prendre. Souvent, une bonne conception est très coûteuse et les débutants n’ont pas le capital de départ pour investir dans ce domaine ou ne peuvent pas programmer eux-mêmes. La société Elegant Themes comble cette lacune et propose des thèmes WordPress professionnels pour un coût comparativement très faible contre une performance élevée. Actuellement, Elegant Themes compte plus de 75 thèmes WordPress dans son portfolio, et d’autres sont ajoutés chaque mois. Chaque thème offre un maximum de flexibilité. En tant que membre d’Elegant Themes, vous pouvez utiliser tous les thèmes et les utiliser pour autant de projets web que vous le souhaitez.

Que propose Divi ?

Tout le monde n’est pas capable de programmer un site web par lui-même. Si vous voulez quand même présenter votre entreprise en ligne, vous avez besoin d’un éditeur visuel. Ainsi, chacun peut créer un site web WordPress selon ses propres idées. Sans connaissance préalable du CSS ou du HTML, les débutants en WordPress peuvent créer en un rien de temps un site web moderne et de qualité. Cela semble facile et c’est le cas. Il serait certainement hors de propos de montrer toutes les fonctions et possibilités de Divi, aussi nous nous limiterons aux bases essentielles. En outre, le reste du texte fait référence à des tutoriels dans lesquels Divi est expliquée de manière détaillée. Ici, il vaut le coup de cliquer sur les liens insérés et d’y jeter un coup d’œil. Il est donc clair que presque toutes les envies peuvent prendrent forme avec Divi.

Thème Divi 4.0

Dans l’histoire d’ Elegant Theme, la quatrième version du thème est l’une des plus grosse mises à jour. Les nombreuses nouveautés feront le bonheur des fans fidèles de Divi ainsi que les débutants. La nouveauté la plus importante est le Divi Theme Builder, qu’il ne faut pas confondre avec le Divi Builder (Pagebuilder) qui est intégré depuis longtemps.

Concevez des en-têtes et des pieds de page avec Divi Theme Builder

En plus du contenu de la page, il est désormais possible de personnaliser des éléments tels que les pieds de page ou les en-têtes grâce au Visual Builder. Les utilisateurs peuvent maintenant concevoir des en-tête totalement personnalisable. Cela ne signifie rien de moins que la possibilité de concevoir un site web de manière totalement unique, de A à Z. Ce qui était auparavant réservé aux programmeurs avec l’éditeur visuel entièrement disponnible, on peut maintenant faire tout ce que l’on souhaite avec Divi.

Divi et SEO

Divi ne fait pas obstacle à l’optimisation des moteurs de recherche. C’est ce que doit faire un bon thème. Le référencement a de nombreuses facettes. Du contenu aux liens internes, à la navigation, à l’expertise, etc. Donc, tout d’abord, le référencement n’est pas défini par le thème. Un thème WordPress mal optimisé peut être la raison pour laquelle un site web n’est pas très visible dans les moteurs de recherche courants. Derrière Elegant Themes se trouve une équipe de développeurs professionnels et expérimentés, qui maîtrisent parfaitement les bases de l’optimisation des moteurs de recherche. Les utilisateurs de Divi en profitent. Chaque template offre une base idéale pour un site web bien référencé, car le layout a été développé de manière à être optimisé pour les moteurs de recherche.

En combinaison avec un plugin SEO comme Yoast ou Rankmath, vous êtes certaint d’être bien placé dans les moteurs de recherche.

Téléchargement et prix de Divi

Le template WordPress est facile à télécharger sur le site web d’Elegant Themes après être devenu membre d’Elegant Themes.

Il existe actuellement deux options : Licence d’un an ou à vie
Le paiement s’effectue exclusivement via Paypal. Si l’abonnement n’est pas renouvelé dans le cadre de la licence annuelle, les thèmes déjà téléchargés peuvent être réutilisés. Seules les mises à jour de sécurité et les nouvelles fonctionnalités ne sont plus disponibles (ce qui n’est donc pas recommandé à long terme). Les clients qui choisissent Divi peuvent choisir entre deux tarifs (licences). Il ne s’agit pas d’un achat au sens traditionnel du terme. Les utilisateurs achètent plutôt une adhésion. La réduction à deux licences seulement est très appréciée, car les clients peuvent profiter de tous les avantages offerts par le thème et n’ont plus qu’à décider quel terme choisir. Au lieu de lire de nombreuses options et tarifs et d’essayer de faire des comparaisons, Elegant Themes facilite la tâche des clients dans ce domaine et prouve que le système est bien pensé. Le client en profite et gagne du temps.

Garantie de remboursement

Il ne coûte rien de tester Divi de Elegant Themes. Si vous n’êtes pas satisfait, vous pouvez annuler dans les 30 jours et vous faire rembourser par Paypal. Un test détaillé est possible pendant cette période, afin que les utilisateurs aient la possibilité de tester l’adhésion.

Avantage : pas de limite

Quelle que soit la variante choisie par les utilisateurs. Le modèle n’offre aucune limite ou restreint la fréquence d’utilisation sur ses propres sites web. Peu importe le nombre de vos propres sites web sur lesquels vous souhaitez utiliser le modèle. Elegant Themes ne fixe aucune limite. Dans ce domaine, Elegant Themes se distingue également des autres fournisseurs, qui combinent rarement la possibilité d’utiliser le thème sur plusieurs sites.

Remarque : Elegant Themes se démarque du courant dominant dans ce domaine, facilite la prise en main pour ses clients et ne les jette pas dans une jungle d’options tarifaires ou de clauses cachées. La transparence et la clarté sont les caractéristiques du plan tarifaire et donnent un avantage à Elegant Themes.

Licence annuelle

La licence pour un an est disponible au prix de 89 $ et comprend des plugins et d’autres thèmes. La licence annuelle comprend toutes les mises à jour qui ont lieu cette année.

Licence à vie

Avec cette variante, les utilisateurs reçoivent un accès aussi longtemps que la société Elegant Themes est présente sur le marché. Cette licence à vie est disponible au prix unique de 249 $.

Utilisation des licences pour les projets de vos clients

Les agences ou les indépendants freelance dans la conception de sites web sont autorisés à utiliser leur propre compte à Elegant Themes (je l’ai demandé) pour équiper leurs projets clients. Les projets reçoivent des mises à jour via une clé API. C’est bien sûr extrêmement intéressant pour les professionnels et les clients.

Documentation et soutien sur le thème

Divi et Extra disposent d’une documentation très détaillée où l’on peut toute la documentation nécéssaire. Cette documentation décrit également en détail les nombreuses fonctions supplémentaires du thème, afin qu’aucune question ne reste sans réponse et que les utilisateurs soient pleinement informés. Pour obtenir de l’aide, une équipe de soutien est à la disposition des utilisateurs par courrier électronique ou, plus rapidement encore, par chat.

Le forum offre une aide pour toutes les questions dont les réponse ne figure pas dans la documentation.
Les utilisateurs peuvent également consulter une très grande communauté s’ils ont des problèmes ou des difficultés. Pour les débutants qui pourraient avoir des problèmes, cette communauté est toujours prête à vous donner un coup de main. Les utilisateurs particulièrement expérimentés sont heureux d’aider les débutants et de les soutenir par des conseils judicieux. L’aide apportée ici est très rapide et fiable. Les questions reçoivent une réponse après environ 15 minutes et même les problèmes liés au code peuvent être résolus rapidement.

Ce que propose Divi : un résumé

Divi a pensé à tout. Voici un résumé de ce que Divi propose.

 

  • Installation des méta-descriptions et méta-titres sans plugin
  • Intégration du code Javascipt pour le suivi, AdWord et Google Analytics
  • Installation de bannières publicitaires
  • Smooth-Scrolling
  • Intégration des médias sociaux
  • WooCommerce peut être utilisé pour les magasins
  • Polices de caractères Google
  • Responsive
  • Optimisation pour la vitesse des pages
  • Mega menu
  • Backend en français
  • Mises à jour automatiques
  • Éléments : formulaire de contact, témoignages, vidéos, onglets, curseurs, tableaux de prix, compte à rebours, e-mail optin, appel à l’action, galeries, compteurs, audio, accordéon, photos et vidéos.
  • Créateur de pages avec l’éditeur visuel
  • Et bien plus encore