/ Accueil / English
pop up wordpress

3 techniques pour ajouter un pop up sur WordPress

Un pop up c’est quoi ?

Un pop up (ou fenêtre contextuelle en français), est une fenêtre qui s’ouvre par dessus le site. Ça sert à plusieurs choses, notamment afficher de la publicité, ouvrir des fenêtres d’informations additionnelles, etc.

Il y a quelque années de ça, les pop ups ouvraient dans une nouvelle fenêtre du navigateur ou dans un nouvel onglet. Aujourd’hui, c’est plus souvent dans la même fenêtre du navigateur par dessus le site.

En apprendre plus en lisant l’article d’Émilie :

Les différentes techniques pour ajouter un pop up sur WordPress

Il existe 3 techniques pour ajouter un pop up sur votre site WordPress. Voici les avantages de chacune pour vous aider à faire un choix éclairé :

1- Avec une extension WordPress

Il existe énormément d’extensions qui permettent d’ajouter des pop ups à votre site, ce qui permet de gagner du temps plutôt que de les programmer sur mesure.

Voici une liste d’extensions populaires :

Il en existe beaucoup d’autres dans la libraire wordpress.org ou sur des sites de revente tels Yith et CodeCanyon.

Pourquoi cette option ?
Cette option est avantageuse car elle est simple, peu coûteuse (ou gratuite) et rapide.

2- Avec le thème de votre site WordPress

Certains thèmes permettent d’ajouter des pop ups via un module inclut avec le thème sans devoir installer une extension additionnelle. C’est, entre autres, le cas avec l’élément Model du thème Avada. Divi vous permet aussi d’ajouter des pop ups, mais il faudra alors installer une extension qui ajoutera un élément dans le thème permettant de créer des pop ups. La technique varie d’un thème à l’autre.

Pourquoi cette option ?
Cette option est avantageuse parce qu’elle évite de devoir ajouter une autre extension sur votre site qui en a probablement déjà trop(!). Apprenez pourquoi c’est préférable d’avoir moins d’extensions en lisant mon article Extensions WordPress : 4 impacts d’en avoir un (trop) grand nombre ?

3- Programmer votre propre pop up pour votre site WordPress

Si vous avez des aptitudes de programmation, ce qui suit est pour vous! Il existe plusieurs manières de coder un pop up, en voici une rapidement :

Avec du CSS/jQuery vous pouvez créer un pop up. Vous pourrez créer une page avec un gabarit vide que vous appellerez via Ajax ou bien vous pouvez créer un bloc dans votre page et lui assigner une classe CSS pour la masquer à l’ouverture. Dans votre code jQuery, vous exécutez la fonction show() avec la classe CSS ce qui va faire afficher le bloc. Ajoutez un bouton de fermeture et lui ajoutez une action onclick (u clic) qui fermera avec hide() associé à la classe CSS.

Voici le code pour créer la pop up en CSS/jQeury :

<script type="text/javascript">
jQuery(document).ready(function($){
     // ferme la pop up à l'ouverture
     $("#mon-popup").hide();
             
     // ouvre la pop up au clique du lien avec la classes CSS open-popup
     $("a.open-popup").on("click",function(e){
          e.preventDefault();  
          $("#mon-popup").show();
     });

     // lien dans la pop up qui ferme la po up au clique
     $("a.close-popup").on("click",function(e){
          e.preventDefault();
          $("#mon-popup").hide();
     });


     // ouverture automatique après 5 secondes
     setTimeout(function(){
          $("#mon-popup").show();
     },5000);
});
</script>

<style>
.mon-popup{
     display: flex;
     top:0;
     bottom:0;
     left:0;
     right:0;
     align-items:center;
     justify-content:center;
     background-color:rgba(0,0,0,0.6);
     position:absolute;
     z-index:9999;
}
.mon-popup .close-popup{
     position:relative;
     left:-40px;
     top:-40px;
     text-decoration: none;
     background-color:#000000;
     color: #ffffff;
     border-radius:50%;
     width:30px;
     height:30px;
     display: flex;
     align-items: center;
     justify-content: center;
}
.mon-popup > div{
     width:300px;
     height:200px;
     padding:30px;
     background-color:#ffffff;
}
</style>
<a href="#" class="open-popup">Ouvrir la pop up</a>
<div id="mon-popup">
     <div class="mon-popup">
          <div>
               <a href="#" class="close-popup">X</a>
               <div>Mon contenu</div>
          </div>
     </div>
</div>

À vous de personnaliser le reste!

Pourquoi cette option ?
Cette option est avantageuse pour la même raison que la #2 en plus de vous donner l’opportunité d’avoir 100% contrôle sur le fonctionnement du pop up et de son design.

Des conseils et de l’aide pour la mise en place d’un pop up sur WordPress

Si vous ne savez quel technique choisir ou si vous voulez que nous nous en occupions pour vous, contactez-nous! Cela nous fera plaisir de vous aider.

Auteur.e de l'article

Vincent Gaudreau

Programmeur Web
Son intérêt marqué pour l’informatique et les nouvelles technologies s’est déclaré très tôt chez Vincent. Dès sa jeune adolescence, en fait, et ce grâce à un grand frère qui étudiait l’infographie. C’est ainsi qu’il découvre l’objet de ses futures aspirations : un ordinateur. La curiosité bien aiguisée, il s’est empressé de partir à la découverte de diverses branches connexes, toutes ayant forgé le programmeur Web qu’il est devenu, diplômé depuis 2004 de l’Institut Supérieur en Informatique.

À découvrir sur notre blogue

2022-10-18

Pop up sur WordPress : avantages et inconvénients des fenêtres intempestives

Émilie Demers Moreau / Designer graphique

Les fenêtres pop up sont largement utilisées sur les sites WordPress depuis de nombreuses années. Elles prennent différentes formes.

Lire la suite
2020-02-25

10 mots et acronymes du Web à connaître et comprendre

Davyd Quintal / Directeur des solutions novatrices

Mots et acronyme incontournables pour vous y retrouver et pour discuter du Web efficacement avec votre agence de communication numérique.

Lire la suite
2023-09-12

Images SVG : pourquoi les utiliser sur le Web ?

Davyd Quintal / Directeur des solutions novatrices

Apprenez comment les images SVG peuvent aider à améliorer la qualité de votre site Web et à augmenter l’engagement des utilisateurs.

Lire la suite
2023-02-09

Menus sur Shopify : tuto création et gestion de la navigation

Marie-Michel Tremblay / Intégratrice Web, Graphiste

Sur votre boutique Shopify, il est possible d’ajouter, de modifier et de supprimer les menus.

Lire la suite

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.