par Anne-Laure DELPECH | 3 Août 2017 | développement web, Thèmes
Dans cet article de la série Utiliser le thème DIVI d’Elegant Themes, je regarde si le système d’importation et exportation de la personnalisation, des options et des modèles du thème Divi est pratique et facile d’utilisation. La réponse est oui, et c’est très très bien fait !
Quels sont les éléments que l’on peut exporter ou importer d’un site à l’autre ?
Divi est très bien fait et on peut exporter l’ensemble des éléments qui composent un thème, ainsi que les modules Divi Builder sauvegardés dans la bibliothèque de modules :
- la personnalisation du thème telle qu’elle est définie dans le menu Apparence >> Personnalisation ;
- Les options du thème telles que réglées dans le menu Divi >> Options ;
- la personnalisation des modules, telle que définie dans le menu Divi >> Personnalisateur de module ;
- les modèles sauvegardés dans la bibliothèque (menu Divi >> bibliothèque Divi).
Le cas particulier d’un thème enfant de Divi
MAJ du 12/10/2017 :
Si on utilise un thème enfant, le processus qui suit fonctionne pour les options du thème enfant et pour la bibliothèque Divi, mais pas pour la personnalisation du thème enfant.
Avec un thème enfant de Divi, je parviens à exporter les options et la bibliothèque divi (theme enfant) mais pas la personnalisation.
L’article How To Package a Divi Child Theme for Sale indique qqu’il faut utiliser l’extension « Customizer Export/Import » de Beaver builder Team. Et ça fonctionne parfaitement, en utilisant la fonction export (onglet tout en bas de personnalisation thème).
Comment exporter les réglages du thème Divi ?
Pour les personnalisations et options, il suffit de cliquer sur un bouton « ↑↓ », comme ici dans la personnalisation du thème.
Importer et exporter des paramètres et modèles Divi
Pour les modèles, il faut cliquer sur un bouton « Importer et exporter » tout en haut de la bibliothèque.
C’est vraiment très simple. A chaque fois, cela crée un fichier Json que l’on sauvegarde avant réutilisation.
Et pour l’importation, comment ça se passe ?
On fait exactement la même chose, après avoir activé le thème Divi, on clique sur le bouton « ↑↓ » (ou « Importer et exporter » pour les modèles), et ça y est, on a importé les personnalisations, réglages ou modèles.
MAJ du 12/10/2017 : pour importer la personnalisation d’un thème enfant de Divi, on utilise l’extension « Customizer Export/Import » comme pour l’exportation (onglet tout en bas de personnalisation thème). Ca fonctionne parfaitement pour importer le fichier .dat généré par la même extension dans un autre site.
Ce qui est vraiment impressionnant, c’est que l’importateur modifie les url des images que l’on avait défini dans les options ou paramètres et place ces images dans la bibliothèque de médias du nouveau site. C’est très très bien fait !
Et c’est là qu’on est vraiment content d’avoir utilisé les couleurs par défaut plutôt que d’avoir défini à la main pour chaque item. Il me suffit de modifier ma palette de couleur par défaut, comme expliqué dans l’article « Régler la palette de couleur par défaut du thème Divi » et ça y est, on a un site différent, dont on ne va peut-être changer que la forme de page d’accueil.
Et maintenant ?
Je vais continuer à explorer ce thème Divi et l’extension Divi Builder. Rendez-vous dans d’autres articles de cette série, Utiliser le thème DIVI d’Elegant Themes !
par Anne-Laure DELPECH | 3 Août 2017 | développement web, Thèmes
Dans ce deuxième article d’une série, Utiliser le thème DIVI d’Elegant Themes, je procède aux premiers réglages du thème Divi nouvellement installé sur le site de test. C’est important de s’organiser pour perdre le moins de temps possible et je me suis rendu compte que je risquais de passer des journées à ajuster les couleurs !
Une option à régler dès le début : la palette de couleurs
Beaucoup de modules, options ou éléments de personnalisation permettent de régler des couleurs. A chaque fois, une palette pré-définie est proposée, ainsi qu’un mode défaut. J’ai donc cherché où, et comment, régler la palette par défaut.
Dans le tableau de bord WordPress, menu Divi >> Options du thème, onglet « Général », on peut définir la palette par défaut, composée de 8 couleurs.
J’ai modifié les 7 couleurs autres que le blanc.
Choisir sa palette de couleur
J’ai choisi une couleur principale Violet #843bbb puis j’ai été voir quelles étaient les couleurs associées dans color-hex. Voici ce qui s’affiche :
Palette de couleur associée au Violet #843bbb selon Color-Hex
J’ai donc décidé de mettre dans ma palette par défaut les couleurs associées en mode triadique, analogue et complémentaire – voir l’article choisir les bonnes couleurs pour un site (hexa, rgb) pour plus de précisions. Et j’ai remplacé le noir par un gris foncé #555555. Voici ma nouvelle palette par défaut :
Nouvelle palette de couleur par défaut dans Divi
Régler la palette de couleur sur « défaut »
Et maintenant, je vais personnaliser le thème (menu Apparence / personnaliser), je règle la palette de couleur sur « défaut ».
Et voilà !
Je ne perdrai pas de temps à définir les couleurs des éléments que je vais probablement créer !
Dans le prochain article de cette série Utiliser le thème DIVI d’Elegant Themes, je vais tenter d’évaluer ce thème et de décider si ça vaut vraiment le coup de l’utiliser.
par Anne-Laure DELPECH | 3 Août 2017 | développement web, Thèmes
L’hébergement Infomaniak propose gratuitement l’accès aux thèmes d’Elegant Themes et de Woocommerce. J’ai voulu essayer d’installer le fameux thème DIVI d’Elegant Themes.
Avant de commencer, sauvegarder !
J’ai fait quelques essais sur un site de test et j’ai eu des problèmes au départ (avant de comprendre ce qui suit). Je vous recommande donc de sauvegarder les fichiers et la base de données avant toute modification.
Il faut noter que Infomaniak fait une sauvegarde automatique toutes les 24 heures. Il est cependant prudent de faire une sauvegarde manuelle de la base de données au cas où, et des fichiers de wp-content si on a fait des modifications dans les dernières 24 heures.
Installer le thème DIVI sur un site WordPress existant
J’ai installé tous les sites WordPress que j’héberge via l’installateur automatique d’Infomaniak. Je crois que l’installateur de thème ne fonctionne pas si on a créé manuellement WordPress.
Aller dans le tableau de bord Infomaniak, menu « sites web » >> « Mon site WordPress » :
Tableau de bord infomaniak : menu « Mon site WordPress »
Cliquer sur le bouton « Configurer » du site à modifier, puis sur le bouton « Paramètres ».
cliquer sur « changer de thème » et choisir « DIVI » :
Installer Divi sur un site WordPress hébergé par Infomaniak
Attention, si les cases « Importer le contenu de démonstration du thème » et « activer le nouveau thème », il y a un risque de plantage du site.
Il faut donc impérativement désactiver ces deux options, comme dans la copie d’écran ci-dessus.
Lorsqu’on clique sur « valider », le thème DIVI (et l’extension Divi Builder) s’installent sur le site mais ne sont pas activés.
Et maintenant ?
Cet article est le premier d’une série sur ce thème DIVI, Utiliser le thème DIVI d’Elegant Themes. Dans le second et le troisième, j’explorerai les premiers réglages ainsi que le transfert d’options, paramètres et modèles de DIVI.
Plus tard, j’affinerai certains réglages et créerai un thème enfant pour ajouter facilement du PHP et du CSS.
Commentaires récents