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 :
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é :
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.
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 ?
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.
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.
Les fenêtres pop up sont largement utilisées sur les sites WordPress depuis de nombreuses années. Elles prennent différentes formes.
Mots et acronyme incontournables pour vous y retrouver et pour discuter du Web efficacement avec votre agence de communication numérique.
Les témoignages sont des commentaires écrits sur un site Web par des personnes ayant utilisé un produit ou un service et partageant leur expérience personnelle.
Ce n’est pas évident comprendre tout le travail de création et de réflexion qui doit être investit dans la création d’un logo pour une entreprise.