¿Cómo crear una ventana emergente de WordPress sin complementos? (Ejemplo)

WordPress es una de las mejores plataformas del mundo, esto se debe a sus características, que permiten a sus usuarios editar lo que quieran en sus sitios web y blogs. También tiene una interfaz simple. …

WordPress es una de las mejores plataformas del mundo, esto se debe a sus características, que permiten a sus usuarios editar lo que quieran en sus sitios web y blogs. También tiene una interfaz simple. Para adquirir un poco más de conocimiento al respecto, hoy aprenderás cómo hacerlo. crear una ventana emergente WordPress sin aditivos.

Y es que si eres nuevo en este mundo del trabajo en páginas y crea tus propios blogs, Una ayuda será útil para realizar todas sus tareas. Porque aunque WordPress es muy fácil de usar, primero es necesario adaptarse al sistema que usa con códigos y complementos (una vez que le cojas el truco, incluso puedes insertar un video mp4 en una publicación o página o insertar una hoja de cálculo excel , Entre muchos otros).

Crear una ventana emergente en WordPress sin complementos

Para quienes no están familiarizados con la terminología, un POP UP es básicamente un recurso que permite colocar cuadros o mensajes que llamen la atención del lector, ya sea cuando presiona un botón determinado o después de un tiempo determinado. Lo más habitual es que aparezcan en la parte central e inferior de la pantalla del ordenador.

Para crear una ventana emergente de wordpress sin complementoshay varios procesos, unos más sencillos que otros, el primero de ellos es con código HTML.

icono de wordpress de lupa

Esto debe estar integrado o en la parte inferior de la misma. la pagina de tu blog o dentro del bloque HTML del mismo. Ponerlo en el primero permitirá que aparezca en cualquier página, en cambio si lo pones en el bloque solo aparecerá en la página de bloque. El código es:

//Inserte su código de formulario aquí, llamada a la acción o cualquier otra cosa que vaya a agregar

Código CCS para mostrar POP UP en el centro

Para crear una ventana emergente de WordPress sin complementos, también Puedes usar códigos CCS. Para agregarlos, debe ir al panel de control y luego a la sección “Apariencia” seguido por “Personalizary finalmente si “CCS adicional”cuando estes alli pega lo siguiente:

#fondo { pantalla: ninguno; posición: fija; superior: 0; abajo: 0; izquierda: 0; derecha: 0; color de fondo: rgba(0,0,0,0.7); índice z: 1111111;} #pop-up { color de fondo: blanco; ancho: 800px; posición: absoluta; arriba: 200px; izquierda: 50%; margen izquierdo: -400px; relleno: 30px; borde-radio: 10px; } #close-pop-up { posición: absoluta; superior: 0; derecha: 0; Color de fondo: transparente.

} #close-pop-up span{ display: flex; ancho: 50px; altura: 50px; color de fondo: gris; justificar-contenido: centro; alinear-contenido: centro; dirección de flexión: columna; alineación de texto: centro; color blanco; tamaño de fuente: 40px; fuente-peso: negrita; borde-radio: 1000%;

} @media (ancho máximo: 800px){ #pop-up { arriba: 0; izquierda: 0; ancho: 100%; margen: 0; abajo: 0; desbordamiento-y:desplazamiento; } }

Una vez hecho esto, programe el evento que desea que suceda y guarde los cambios. por esto lo se creará su ventana POP UPpoder poner los mensajes que quieras en tu blog.

CCS en la esquina inferior derecha

Si lo que quieres es dejar el POP a un lado para que sea menos intrusivo para el lector, también debes ir a “complemento css” como en el anterior, pero esta vez necesitas poner el siguiente código:

#fondo{ pantalla: ninguno; posición: fijo; abajo: 50px; derecha: 50px; índice z: 1111111; ancho: 400px; altura: 400px; borde-radio: 10px; relleno: 30px; color de fondo: blanco; desbordamiento-y:desplazamiento; } ventana emergente cercana { posición: absoluta; superior: 0; derecha: 0; Color de fondo: transparente.

} #close-pop-up span{ display: flex; ancho: 50px; altura: 50px; color de fondo: gris; justificar-contenido: centro; alinear-contenido: centro; dirección de flexión: columna; alineación de texto: centro; color blanco; tamaño de fuente: 40px; fuente-peso: negrita; border-radius: 1000% } @media (max-width: 460px){ #background { right: 0; ancho: 70%; } }

icono original de wordpressY eso es todo, con el último ya sabes lo necesario para poder crear una ventana emergente de wordpress sin complementossolo tienes que configurar el evento que quieres que suceda y saldrá instantáneamente con la ayuda de estos códigos.

Ahora que está familiarizado con él, puede pasar a cosas más difíciles como: incrustar videos de YouTube en WordPress con un complemento o agregar bordes alrededor de las imágenes con CSS, recuerde que el cielo es el límite.

.

Deja un comentario