Comment créer une fenêtre pop-up dans WordPress sans plugins?
WordPress est l’une des meilleures plates-formes au monde, cela est dû à ses fonctions, qui permettent à ses utilisateurs d’éditer ce qu’ils veulent sur leurs sites Web et blogs. Il a également une interface simple. Pour en savoir un peu plus à ce sujet aujourd’hui, vous apprendrez à créer une fenêtre pop-up dans WordPress sans plugins.
Et c’est que si vous êtes nouveau dans ce monde du travail en pages et création de vos propres blogs, il vous sera utile de vous aider à réaliser toutes vos tâches. Puisque bien qu’il soit très facile d’utiliser WordPress, il faut d’abord s’adapter au système qu’il utilise avec des codes et des plugins (après l’avoir bien manipulé, vous pouvez même insérer une vidéo mp4 dans une entrée ou une page , ou insérer une feuille de calcul Excel , entre autres).
Créez une fenêtre pop-up dans WordPress sans plugins
Pour ceux qui ne connaissent pas la terminologie, un POP UP est essentiellement une ressource qui vous permet de passer des images ou des appels, qui attirent l’attention du lecteur, soit lorsqu’il appuie sur un certain bouton, soit après un certain temps. Le plus souvent, ceux-ci apparaissent au milieu et en dessous de l’écran du PC.
Pour créer une fenêtre pop-up dans WordPress sans plugins , il existe plusieurs procédures, certaines plus faciles que d’autres, la première d’entre elles est avec un code HTML.
Celui-ci doit être intégré soit dans le pied de page de votre blog, soit dans le bloc HTML de celui-ci. Le mettre dans le premier lui permettra d’apparaître sur n’importe quelle page, par contre si vous le placez dans le bloc, il n’apparaîtra que sur la page de celui-ci. Le code est:
<div id = »background»> <div id = »pop-up»> <button id = »close-pop-up»> <span> × </span> </button> // Ici vous insérez le code du formulaire , de l’appel à l’action ou tout ce que vous allez ajouter </div> </div>
Code CCS pour POP UP pour apparaître au centre
Pour créer une fenêtre contextuelle dans WordPress sans plugins, vous pouvez également utiliser des codes CCS. Pour les ajouter vous devez aller dans votre panneau de contrôle puis dans la section » Apparence «, puis dans » Personnaliser » et enfin dans «CCS Supplémentaire» , quand vous y êtes, collez ce qui suit:
#background {affichage: aucun; position: fixe; haut: 0; bas: 0; gauche: 0; droite: 0; couleur d’arrière-plan: rgba (0,0,0,0,7); z-index: 1111111;} # pop-up {couleur d’arrière-plan: blanc; largeur: 800px; position: absolue; haut: 200 px; gauche: 50%; marge gauche: -400px; rembourrage: 30px; rayon de la bordure: 10px; } # close-pop-up {position: absolue; haut: 0; droite: 0; couleur de fond: transparent;
} # span close-pop-up {affichage: flex; largeur: 50px; hauteur: 50px; couleur de fond: gris; justify-content: centre; align-content: centre; flex-direction: colonne; text-align: centre; Couleur blanche; taille de la police: 40px; poids de la police: gras; rayon de la frontière: 1000%;
} @media (max-width: 800px) {# pop-up {top: 0; gauche: 0; largeur: 100%; marge: 0; bas: 0; overflow-y: faire défiler; }}
Une fois que cela est fait, planifiez l’événement que vous souhaitez voir se produire et enregistrez les modifications. Cela créera votre fenêtre pop-up POP UP , vous permettant de placer les messages que vous souhaitez sur votre blog.
CCS dans le coin inférieur droit
Si vous souhaitez mettre le POP de côté pour qu’il soit moins invasif pour le lecteur, vous devez également vous rendre dans la section «CSS supplémentaire» comme dans la précédente, mais cette fois, vous devez placer le code suivant:
#background {affichage: aucun; position: fixe; bas: 50px; à droite: 50px; indice z: 1111111; largeur: 400px; hauteur: 400px; rayon de la bordure: 10px; rembourrage: 30px; couleur de fond: blanc; overflow-y: faire défiler; } close-pop-up {position: absolue; haut: 0; droite: 0; couleur de fond: transparent;
} # span close-pop-up {affichage: flex; largeur: 50px; hauteur: 50px; couleur de fond: gris; justify-content: centre; align-content: centre; flex-direction: colonne; text-align: centre; Couleur blanche; taille de la police: 40px; poids de la police: gras; border-radius: 1000%} @media (max-width: 460px) {#background {right: 0; largeur: 70%; }}
Et voila, avec ce dernier vous savez déjà ce qu’il faut pour créer une fenêtre pop-up dans WordPress sans plugins , il vous suffit de configurer l’événement que vous souhaitez qu’il se produise et il sortira immédiatement à l’aide de ces codes.
Maintenant que vous vous êtes un peu familiarisé, vous pouvez passer à des choses plus difficiles telles que: insérer des vidéos YouTube dans WordPress avec un plugin , ou ajouter des bordures autour des images avec CSS , rappelez-vous que le ciel est la limite.
