Todas las colecciones
PopUp
Diseño del contenido del PopUp.
Diseño del contenido del PopUp.

En este tutorial aprenderemos a editar el diseño de nuestro PopUp en nuestra página web de acuerdo a nuestro diseño.

R
Escrito por Rodrigo García
Actualizado hace más de una semana

Para poder realizar esto debemos ir a nuestro menú principal y dar click en la opción de "Páginas".

Aparecerá la ventana de "Páginas" donde tenemos que dar click en la opción de "Popups", y al darle click a nuestro cupón...

Aparecerá el PopUp al centro de la página junto con sus herramientas de edición, en este tutorial aprenderemos a cambiar el diseño de nuestro PopUp, comenzaremos con la posición de la imagen.

En la barra de herramientas daremos click en el botón con el icono de pincel.

Aparecerá la ventana de "DISEÑO DEL CONTENIDO DEL POPUP" donde se muestran las diferentes formas en que se puede acomodar la imagen dentro del PopUp.

"POSICIÓN  LATERAL IZQUIERDA"
Si seleccionamos esta opción la imagen se acomodara del lado izquierdo de nuestro PopUp.

NOTA:
Aparecerá un círculo azul, con el cual podemos ajustar el tamaño de la imagen, solo tenemos que dar click en el círculo y mantenerlo presionado mientras lo desplazamos hacia la derecha para que aparezca otra porción de la imagen o hacia la izquierda para ocultarla.

"POSICIÓN CENTRAL SUPERIOR"
Si seleccionamos la segunda opción, la imagen aparecerá acomodada en la parte superior, abarcando todo el ancho del PopUp.

NOTA:
Aparecerá un círculo azul, con el cual podemos ajustar el tamaño de la imagen, solo tenemos que dar click en el círculo y mantenerlo presionado mientras lo desplazamos hacia abajo para que aparezca otra porción de la imagen o hacia arriba para ocultarla.

"POSICIÓN LATERAL DERECHA"
Si seleccionamos la tercera opción, la imagen aparecerá en la parte derecha de nuestro PopUp.

NOTA:
Aparecerá un círculo azul, con el cual podemos ajustar el tamaño de la imagen, solo tenemos que dar click en el círculo y mantenerlo presionado mientras lo desplazamos hacia la izquierda para que aparezca otra porción de la imagen o hacia la derecha para ocultarla.

"POSICIÓN INFERIOR CENTRAL"
Si seleccionamos la cuarta opción, la imagen aparecerá en la parte inferior de nuestro PopUp. 

NOTA:
Aparecerá un círculo azul, con el cual podemos ajustar el tamaño de la imagen, solo tenemos que dar click en el círculo y mantenerlo presionado mientras lo desplazamos hacia abajo para que aparezca otra porción de la imagen o hacia arriba para ocultarla.

"POSICIÓN CENTRAL TOTAL"
Si seleccionamos la quinta opción, todos nuestros elementos se alinearan al centro de nuestro PopUp, con el detalle que la imagen ya no aparecerá.

Además de la posición podemos ajustar otros valores de nuestro PopUp:

"Color de fondo del PopUp (A)"
Con la ayuda del selector de color podemos modificar el color para el fondo del PopUp, podemos ingresar el número de color, los valores RGB, utilizar los colores preestablecidos y seleccionar la transparencia del mismo.

"Color de fondo Overlay (B)"
Con la ayuda del selector de color podemos modificar el color y la transparencia para el fondo de nuestro PopUp, podemos ingresar el número de color, los valores RGB, utilizar los colores preestablecidos y seleccionar la transparencia del mismo.

"Color del botón cerrar (C)"
Con la ayuda del selector de color podemos modificar el color para el botón de cerrar el PopUp (X), podemos ingresar el número de color, los valores RGB, utilizar los colores preestablecidos y seleccionar la transparencia del mismo.

"Tamaño de relleno (D)"
Usando los valores del "Tamaño de relleno" podemos modificar la altura de nuestro PopUp,  algo importante es que los elementos se reacomodarán siempre al centro, los valores van de 0 px de tamaño mínimo a 150 px como tamaño máximo. 

¿Ha quedado contestada tu pregunta?