Vous souhaitez intégrer des modales sur votre site web ? Malheureusement le thème Divi ne dispose pas encore de modules pour faire ça… Il existe bien un plugin payant mais parfois un tout petit peu de code suffit. 

Chez WebMarketingTuto on est généreux ! Alors je vous partage quelques éléments de codes que j’ai conçu pour un client. 🙂

Dans ce tutoriel, nous allons voir étape par étape comment créer des modales sur votre site grâce à la librairie javascript Modaal.

📖  Définition : une fenêtre “modale” est un élément initialement caché sur votre site qui va s’ouvrir au clic sur un bouton, un lien, lors de la soumission d’un formulaire,… pour présenter du contenu supplémentaire ou une information à l’utilisateur.

Pour savoir ce qui vous attend, voici un récapitulatif des 7 étapes  :

  1. Télécharger la librarie javascript “Modaal”
  2. Installation de “Modaal” dans votre thème enfant
  3. Code php à insérer dans functions.php
  4. Code javascript
  5. Code CSS
  6. Configuration du bouton qui va déclencher l’ouverture de la modale
  7. Configuration de la ligne qui va contenir votre modale
  8. Et voilà! Et oui c’est déjà fini 😉

Création de Modals avec Divi, c’est parti!

1- Télécharger la librairie “Modaal”

Modaal est une librairie javascript développée par l’agence Humaan. Elle est téléchargeable gratuitement sur le site http://www.humaan.com/modaal/.

Cliquez sur “Download from github”.

Puis une fois sur la page ci-dessous, cliquez sur le bouton vert “Clone or Download”, puis “Download ZIP”.

Un fichier nommé Modaal-master.zip est créé sur votre ordinateur.

Dézippé ce fichier. Le dossier contient les éléments suivants :

2- Installation de “Modaal” dans votre thème enfant

Dans votre espace FTP (accès via logiciel type Filezilla/CyberDuck ou via le gestionnaire de fichiers de votre Cpanel), accédez au dossier de votre thème enfant.

Note : si vous n’avez pas de thème enfant, nous vous conseillons fortement d’en créer un. Vous trouverez les explications dans notre article vidéo “Comment créer un thème enfant dans WordPress ?”.

Une fois dans votre thème enfant, il vous faut créer deux dossiers (si vous ne les avez pas déjà créés) :

  • js
  • css

Pour cela, rien de plus simple ! Cliquez sur “+ Dossier” dans le Cpanel ou faite un clique-droit sur votre logiciel FTP pour créer les deux dossiers.

Votre dossier de thème enfant devrait ressembler plus ou moins à cela (hormis le dossier “editor”):

Il vous suffit maintenant de charger le fichier suivant du dossier js de la librairie Modaal dans votre dossier js :

  • modaal.min.js

Ainsi que le fichiers suivant du dossier css de la librairie Modaal dans votre dossier css :

  • modaal.min.css

3- Code à insérer dans functions.php

Pour charger la librairie Modaal, copiez le code suivant dans votre fichier functions.php

[php]

/**
* Scripts et styles additionnels
*/
function external_scripts_and_styles() {
wp_enqueue_script( ‘modaal-js’, get_stylesheet_directory_uri() . ‘/js/modaal.min.js’, array( ‘jquery’ ) );
wp_enqueue_style(‘modaal-css’, get_stylesheet_directory_uri() . ‘/css/modaal.min.css’);

wp_register_script(‘js-custom’, get_stylesheet_directory_uri() .’/js/custom.js’, array(‘jquery’), ”, true );
wp_enqueue_script( ‘js-custom’ );
}
add_action( ‘wp_enqueue_scripts’, ‘external_scripts_and_styles’ );

[/php]

💬  Explications : ici on indique au moteur de notre site wordpress que l’on veut charger 3 nouveaux fichiers en lui indiquant où ils se trouvent dans l’arborescence des fichiers de notre thème.

4- Code javascript

Dans votre dossier js créez un fichier custom.js  et insérez le code suivants :

[javascript]

jQuery(document).ready(function($) {

$(".modal_1").modaal({
type:’inline’,
background : ‘#fff’
});
$(".modal_2").modaal({
type:’inline’,
background : ‘#fff’
});

});

[/javascript]

💬  Explications : ici on indique que les éléments avec les classes .modal_1 et .modal_2 sont des déclencheurs de modale. Il vous faudra utiliser les mêmes noms de classes et identifiants dans les modules Divi (cf partie 6 & 7). Vous pouvez en créer autant que nécessaire en les liant à un bouton de déclenchement et un ligne Divi.

5- Code CSS

[css].et_pb_row#modal_1,
.et_pb_row#modal_2{
display: none;
}
[/css]

💬  Explications : Ce petit bout de code css, permet de cacher les modales par défaut. Elle ne s’afficheront que lorsqu’on cliquera sur le bouton déclencheur. Rajoutez autant de fois que nécessaire .et_pb_row#modal_X avec le nom de classe que vous avez utilisé.

6- Configuration du bouton qui va déclencher l’ouverture de la modale

À l’aide du Divi Builder, créez un bouton et ajouter la classe “modal_1” dans l’onglet de configuration avancée.

⚠️ Attention : vous pouvez nommer vos classes comme vous voulez mais prenez garde à bien garder les mêmes noms pour les identifiants ainsi dans les code css et javascript.

Dans l’onglet “Contenu”, ajouter #modal_X (identifiant de la ligne Divi qui contiendra la modale).

7- Configuration de la ligne qui va contenir votre modale

Avec le Divi Builder, créer une ligne sous la ligne contenu votre bouton déclencheur et dans l’onglet de configuration Avancé, mettez le nom de l’identifiant correspondant à la classe du bouton.

Sauvegardez bien votre page et amusez vous à tester et à créer de nouvelles modales!

Soyez tenu au courant de la réouverture avant tout le monde!

Inscrivez-vous à notre PREMS ALERTE. Vous recevrez un email 24H avant tout le monde pour vous prévenir de la réouverture des inscriptions avec une réduction de 25% sur le prix de la formation !

Vous êtes bien inscrits à la PREM's Alerte ! =)

Share This