Des astuces pour vos projets avec le thème Divi

Le thème Divi est très populaire et est apprécié des utilisateurs pour ses nombreuses possibilités de personnalisation ainsi que pour sa souplesse de modification. Nous avions déjà fait la présentation de ce thème lors de la sortie de sa version 3.0. À présent, je souhaite partager avec vous quelques astuces pour Divi qui pourraient bien être utiles à certains de vos projets WordPress...

Divi WordPress Theme

 

1. Utiliser une mise en page pré-faite

Savez-vous que vous n'êtes pas obligé de construire votre site de A à Z avec Divi et que vous pouvez utiliser des mises en pages (layouts) déjà faits ? Voyons comment cela fonctionne :

  1. Rendez-vous sur un site où sont disponibles des layouts à télécharger gratuitement (comme DiviExamples)... certains sont payants sur d'autres sites.
  2. Choisissez une mise en page qui correspond à votre projet.
  3. Téléchargez le package sur votre ordinateur et décompressez-le. Vous devriez y trouver un (ou plusieurs) fichier.json
  4. Importez le layout depuis le backoffice de votre site WordPress dont le thème Divi est déjà installé et activé : aller à l'onglet Divi > Bibliothèque Divi (1) > cliquez sur Importer et Exporter (2) > positionnez-vous sur l'onglet Importer (3) de la popup qui vient de s'ouvrir > choisissez votre fichier.json (4) > validez en cliquant sur Importer mises en page constructeur Divi (5) Importer un layout Divi
  5. Le nouveau layout est apparu dans la bibliothèque Divi (6).
  6. Pour l'utiliser, vous devrez créer une page (la page d'accueil par exemple), cliquez sur Charger à partir de la bibliothèque > onglet Ajouter de la bibliothèque > Charger > terminez par la sauvegarde de votre page. Utiliser un layout importé - astuces pour Divi

 

Et voilà, votre page s'est construite en un clin d'œil ! Vous n'aurez plus qu'à changer les photos, textes et autres éléments afin de vous approprier le design. Notez qu'il existe de nombreux layouts, cela peut-être des mises en page, des modules, des boutons et même des réglages de thème, d'options, de CSS etc.

Pour une explication visuelle, voici une vidéo :

 

Notez également que vous pouvez importer, certes, mais aussi exporter des layouts que vous avez conçus vous-même. Cela peut-être un gain de temps lors de lancements de projets. Pour ce faire, vous utiliserez la même technique mais en choisissant le mode Export plutôt que l'Import.

 

2. Transformer le menu principal en Mega Menu

Dans le menu principal de votre site utilisant Divi, les sous-pages vont apparaître, par défaut, les unes sous les autres. Toutefois, vous pouvez obtenir l'apparence d'un "mega menu" sans avoir de plugin à rajouter :

  1. Rendez-vous dans l'onglet Apparence > Menu
  2. En haut, à droite de votre écran, ouvrez l'onglet Option de l'écran
  3. Cochez Classes CSS : cela va ajouter le champ Classes CSS (facultative) dans chaque élément de votre menu
  4. Ouvrez l'élément parent de votre menu pour lequel vous désirez obtenir l'effet "mega menu"
  5. Affectez à cet élément la classe "mega-menu"
  6. Enregistrez votre menu
  7. En front-end (du côté visiteur), rafraîchissez la page : vous devriez voir apparaître votre menu à la façon d'un méga menu.

Méga Menu avec Divi

 

3. Modifier n'importe quel icône

Le thème Divi est facile à personnaliser car de nombreuses options sont customisables depuis le backoffice. Dans le module Résumé par exemple, on peut facilement attribuer un icône dans les options. Toutefois, certains modules ne permettent pas de changer l'icône pré-attribué comme le module Témoignage par exemple dont l'icône "guillemet" n'est pas personnalisable... En fait, si, il l'est ! Regardez plutôt :

  1. Vous allez d'abord vous rendre sur la page web qui affiche tous les icônes disponibles dans Divi.
  2. Vous verrez qu'un code est attribué à chaque icône et se présente de la manière suivante : &#x e0b0; (c'est le code pour l'icône de WordPress),
  3. Sélectionnez les codes des icônes qui vous intéressent,
  4. De retour dans votre page Divi, insérez le module Témoignage,
  5. Renseignez ce module avec un titre, une image etc...
  6. Toujours dans la configuration du module, allez dans l'onglet Avancé Personnaliser CSS > Avant : > et insérez content: "\e0b0;"
  7. Terminez par l'enregistrement de votre page

Vous noterez que chaque icône est affiché avec le code "&#x e0b0;" mais pour l'utiliser en CSS, vous devrez remplacer "&#x" par un "\" (dans l'exemple, le code "&#x e0b0;" devient "\e0b0;")

 

4. Ajouter un icône de réseau social dans le footer

Dans les options du thème Divi, vous pouvez décider de faire apparaitre les icônes de vos réseaux sociaux dans le footer de votre site, par contre les icônes proposés sont restreints : seuls Facebook, Twitter, Google+ et l'icône du flux Rss peuvent être renseignés. Si le contenu de votre site ne se prête pas à ces réseaux sociaux et qu'il se tourne plutôt vers des réseaux de type Pinterest, YouTube ou Instagram, cela pose un problème. Voici comment ajouter des icônes à votre footer :

  1. Vous devez d'abord créer un thème enfant
  2. Dans les fichiers de votre dossier de thème Divi (le thème parent), copiez l'ensemble du dossier nommé Includes
  3. Collez ce dossier dans votre thème enfant
  4. Avec un éditeur de texte, ouvrez le fichier nommé social_icons.php contenu dans le dossier Includes
  5. À la fin du fichier, avant la balise de fermeture de la liste (</ul>) ajoutez autant d'icônes que vous le souhaitez à l'aide de ce code :
<!-- ajout icones sociaux --> 
<li class="et-social-icon et-social-linkedin"> 
<a href="https://fr.linkedin.com/in/votre-profil" class="icon"> <span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span> </a> 
</li> 
<!-- fin ajout icones sociaux -->

 

Ajouter des icones dans le footer - astuces pour Divi

N'oubliez pas de remplacer les éléments notés en rouge par vos propres informations. Pour cet exemple, j'ai ajouté l'icône de Linkedin, mais vous pouvez ajouter n'importe quel icône en remplaçant "et-social-linkedin" par :

  • et-social-pinterest pour Pinterest
  • et-social-tumblr pour Tumblr
  • et-social-instagram pour Instagram
  • et-social-skype pour Skype
  • et-social-flikr pour Flikr
  • et-social-myspace pour MySpace
  • et-social-dribbble pour Dribbble
  • et-social-youtube pour YouTube
  • et-social-vimeo pour Viméo

 

5. Ouvrir les icônes des réseaux sociaux en target _blank

On vient de parler justement des icônes qui relient votre site à vos réseaux sociaux dans le footer... Vous avez certainement remarqué que ceux-ci s'ouvrent dans le même onglet, c'est à dire en target _self. Cela signifie que l'internaute qui visite votre site et qui souhaite accéder à votre page Facebook ou votre profil Twitter quitte votre site instantanément et n'y reviendra peut-être pas... Le thème Divi ne propose pas l'option d'ouvrir les réseaux sociaux dans un nouvel onglet de votre navigateur, c'est à dire en target _blank. Voyons comment remédier à cela :

  1. Dans le backoffice de votre site WordPress, aller à Divi > Options du thème > onglet Intégration
  2. Activez le code d'entête
  3. Dans le champ "Ajouter ligne de code à la < head > de votre blog", copiez ce bout de code puis sauvegardez :
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".et-social-icon a").attr('target', '_blank');
});
</script>

Ouvrir les icones en target blank - astuces pour Divi

À présent, si vous cliquez sur les icônes du footer de votre site, ils devraient s'ouvrir dans un nouvel onglet de votre navigateur.

 

Divi, quelle souplesse !

Alors, qu'en dites-vous, c'est plutôt facile ? Ces petites astuces pour Divi vont-elles vous servir ? N'hésitez pas à poster un commentaire si vous avez des astuces à partager ou même si vous avez besoin d'autres astuces, cela pourrait donner naissance à un second article à ce sujet...

Des astuces pour vos projets avec le thème Divi
4.5 pour 37 votes

A propos de l'auteur...

Lycia Diaz

Freelance WordPress, Rédactrice Web et Webdesigner, je suis passionnée par le monde du web et de l’environnement Apple… Je tiens également un blog qui traite de ces sujets. J’adore découvrir, tester et partager mes expériences mais aussi créer et réaliser de nouveaux projets ! Je suis auteure d’un guide complet sur WordPress.

3 commentaires pertinents à ce jour ;)

  • fxbenard dit :

    Merci pour ces astuces. Pour une traduction française complète et de qualité maintenue depuis +2 ans, jetez un œil à l’extension Divi French : https://fxbenard.com/traductions/divi-french/

  • Alban OUEDRAOGO dit :

    Bel article. Divi est-il payant?

  • WPFormation dit :

    @Alban oui, DIVI est un thème premium de chez Elegantthemes

WP Formation ne peut malheureusement pas répondre à toutes vos demandes de support
mais si vous aimez nos contenus, merci de liker notre page Facebook ;)

Vous pouvez laisser votre commentaire ci-dessous et même vous abonner aux commentaires de l'article.
Nota: pour le champ "Site Web", seuls les liens vers vos réseaux sociaux sont autorisés.

Likez, Tweetez, Commentez, Partagez !

83 Partages
Partagez45
Tweetez20
Partagez3
Buffer15