¿Cómo crear una ventana emergente pop-up en WordPress sin plugins?
Wordpress es una de las mejores plataformas del mundo, esto se debe a sus funciones, que les permiten a sus usuarios editar lo que quieran en sus sitios web y blogs. Además posee una sencilla interfaz. Para que obtengas un poco más de conocimientos sobre este hoy aprenderás a crear una ventana emergente pop-up en WordPress sin plugins.
Y es que si eres nuevo en este mundo del trabajo en páginas y creación de blogs propios, te vendrá bien una ayuda para que logres todos tus cometidos. Ya que aunque es muy sencillo utilizar Wordpress es necesario primero adaptarse al sistema que este emplea con códigos y plugins (luego de manejarlo bien podrás hasta insertar un vídeo mp4 en una entrada o pagina, o insertar una hoja de calculo excel, entre muchas cosas mas).
Crear una ventana emergente pop-up en WordPress sin plugins
Para los que no están familiarizados con la terminología, un POP UP es básicamente un recurso que permite colocar cuadros o llamadas, que obtengan la atención del lector, ya sea cuando pulsen un botón determinado o después de cierto tiempo. Lo más común es que estos salgan en el medio y debajo de la pantalla de la PC.
Para crear una ventana emergente pop-up en WordPress sin plugins, existen varios procedimientos, algunos más fáciles que otros, el primero de estos es con un código HTML.
Este debes integrarlo o en el pie de página de tu blog o dentro del bloque HTML del mismo. Ponerlo en el primero permitirá que salga en cualquier página, en cambio sí lo colocas en el bloque solo saldrá en la página del mismo. El código es:
<div id="fondo"> <div id="pop-up"> <button id="cerrar-pop-up"> <span>×</span> </button> //Aquí insertas el código del formulario, de la llamada de acción o de lo que vayas a agregar </div> </div>
Codigo CCS para que el POP UP aparezca en el centro
Para crear una ventana emergente pop-up en WordPress sin plugins, también puedes utilizar códigos CCS. Para agregarlos debes irte hacia tu panel de control y luego hacia el apartado “Apariencia” seguidamente a “Personalizar” y por último a “CCS adicional”, cuando te encuentres allí pega lo siguiente:
#fondo { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.7); z-index: 1111111;} #pop-up { background-color: white; width: 800px; position: absolute; top: 200px; left: 50%; margin-left:-400px; padding: 30px; border-radius:10px; } #cerrar-pop-up { position: absolute; top: 0; right: 0; background-color: transparent;
} #cerrar-pop-up span{ display: flex; width: 50px; height: 50px; background-color: grey; justify-content: center; align-content: center; flex-direction: column; text-align: center; color: white; font-size: 40px; font-weight: bold; border-radius: 1000%;
} @media (max-width: 800px){ #pop-up { top: 0; left: 0; width: 100%; margin: 0; bottom: 0; overflow-y: scroll; } }
Una vez hecho esto, programa el evento que quieras que ocurra y guarda los cambios. Con esto se creará tu ventana emergente POP UP, pudiendo colocar los mensajes que desees en tu blog.
CCS en la esquina inferior de la derecha
Si lo que quieres es colocar el POP a un lado para que sea menos invasivo para el lector, también debes irte al apartado “CSS adicional” como en el anterior pero esta vez debes colocar el siguiente código:
#fondo{ display: none; position: fixed; bottom: 50px; right: 50px; z-index: 1111111; width: 400px; height: 400px; border-radius: 10px; padding: 30px; background-color: white; overflow-y: scroll; } cerrar-pop-up { position: absolute; top: 0; right: 0; background-color: transparent;
} #cerrar-pop-up span{ display: flex; width: 50px; height: 50px; background-color: grey; justify-content: center; align-content: center; flex-direction: column; text-align: center; color: white; font-size: 40px; font-weight: bold; border-radius: 1000% } @media (max-width: 460px){ #fondo { right: 0; width: 70%; } }
Y listo, con esto último ya sabes lo necesario para poder crear una ventana emergente pop-up en WordPress sin plugins, solos debes configurar el evento que quieres que pase y saldrá inmediatamente con la ayuda de estos códigos.
Ahora que te has familiarizado un poco ya puedes pasar a cosas mas difíciles como: insertar vídeos de Youtube en Wordpress con plugin, o añadir bordes alrededor de las imágenes con CSS, recuerda el cielo es el limite.