¿Quieres diseñar una ventana emergente que cause una excelente primera impresión a los visitantes, pero también quieres hacerlo rápidamente y, lo más importante, fácilmente?
¡Pues estás de suerte! Con nuestro editor Pop-Up, crear ventanas emergentes es pan comido.
Haz clic en los enlaces que aparecen a continuación para ir directamente a la sección que te interesa o sigue leyendo para aprender todo paso a paso.
NOTA: Este artículo se refiere únicamente al editor de ventanas emergentes. Si necesitas información sobre todo el proceso de creación de ventanas emergentes, ¡HAGA CLIC AQUÍ!
Descripción general
La interfaz del editor consta de dos partes principales: la sección de contenido y configuración a la izquierda y el panel de vistas a la derecha.
Algunos datos importantes sobre nuestro editor de ventanas emergentes:
Todas las ventanas emergentes son automáticamente responsivas, pero cada versión (escritorio y móvil) puede tener diferentes ajustes. Puedes comprobar cómo se verá cada una de ellas. Para ello, haz clic en los iconos de la izquierda del panel de vista.
El editor es de tipo WYSIWYG (lo que ves es lo que obtienes). Esto significa que todos los cambios realizados en el panel de contenido y configuración se reflejan en el panel de vista en tiempo real.
Aquí encontrarás varias plantillas listas para usar que se ajustan a tu objetivo, pero no estás limitado a ellas. Todas las plantillas son totalmente configurables, por lo que también puedes adaptarlas fácilmente a tus necesidades.
Ahora que ya hemos hablado de la interfaz general, pasemos a las siguientes secciones.
Configuración general
Comencemos por la pestaña de configuración general. Aquí podrás definir la estructura general de la ventana emergente, así como algunos ajustes visuales globales.
Diseño
Puedes elegir uno de los cuatro tipos de diseño para tu ventana emergente. Estos diseños reflejan la forma en que se mostrarán las imágenes en ella.
Selecciona un diseño
Sin fondo: elige esta opción si no quieres ninguna imagen en la ventana emergente.
Con fondo: la imagen se utilizará como fondo.
Imagen a la izquierda: la imagen se colocará a la izquierda.
Foto a la derecha: la imagen se colocará a la derecha.
Añade tu foto:
Haz clic en el botón «Subir foto» para cargar la imagen desde tu dispositivo
Tamaño máximo del archivo: 2 MB
Configuración de la foto:
Selecciona el ajuste de la foto
Relleno: la imagen rellenará completamente el espacio disponible
Patrón: el tamaño no se modificará y la imagen se duplicará automáticamente en vertical y en horizontal
Centrado: la imagen se ajustará al espacio disponible, tanto en altura como en anchura
Selecciona las proporciones de la foto (50 % / 33 % / 25 %)
Mostrar la foto en dispositivos móviles (ON / OFF)
Si seleccionas ON, podrás elegir entre «encima», «debajo» y «al lado».
NOTA: El diseño refleja tu elección de la imagen principal como parte estructural de tu ventana emergente. También es posible añadir imágenes como elementos en la misma página que otros elementos, como texto y formularios.
Configuración principal de la ventana emergente
Margen interior de la ventana emergente: espacio entre el borde de toda la ventana emergente y los elementos que hay dentro.
Redondeo de la ventana emergente: deja 0 px para un ángulo recto o aumenta el valor para ángulos redondeados.
Ancho de la ventana emergente: el ancho máximo que tendrá su ventana emergente en cualquier dispositivo.
La anchura máxima para dispositivos móviles es siempre de 480 px.
Color de fondo de la ventana emergente: color de toda la sección con elementos (texto, formularios, etc.).
Selecciona un color predeterminado o defina uno propio utilizando el muestrario de colores, el código HEX o los valores RGB.
Color de fondo debajo de la ventana emergente: color y opacidad de toda el área fuera de la ventana emergente (que cubre la página).
Puede especificar la opacidad con el control deslizante situado debajo del selector de color.
Sombra de la ventana emergente: seleccione el tipo de efecto de sombra para su ventana emergente.
Ninguno
Oscuro
Claro
Ligeramente oscuro
Ligeramente claro
Rectangular
Botón de cierre
Icono del botón de cierre: seleccione el tipo de icono de cierre
Tamaño del botón de cierre: especifique el tamaño del icono de cierre
Color del botón de cierre: especifique el color del icono de cierre
Posición del icono del botón de cierre (eje X): especifique la distancia entre el icono de cierre y el borde derecho de la ventana emergente
Posición del icono del botón de cierre (eje Y): especifique la distancia entre el icono de cierre y el borde superior de la ventana emergente
NOTA: El icono de cierre siempre se colocará en la esquina superior derecha, independientemente del tipo de diseño seleccionado (foto a la izquierda, foto a la derecha, con fondo, sin fondo).
Configuración de Google Fonts
Además de las fuentes predeterminadas que están disponibles en el sistema edrone, también puede utilizar la lista predeterminada de fuentes de Google o seleccionar cualquier otra fuente disponible en Google Fonts.
Cómo importar una fuente personalizada desde Google Font
1. Ve al menú desplegable de Google Fonts y selecciona «Personalizado».
2. En una nueva pestaña, abre la página de la familia de fuentes en Google Fonts. En este ejemplo utilizamos Playfair Display.
 3. Seleccione una fuente específica de la lista. Para este ejemplo, seleccionaremos Regular 400.
4. Haz clic en el botón «View selected families» (Ver familias seleccionadas) en la esquina superior derecha de la pantalla. Se abrirá una barra lateral con más detalles.
 5. En la sección Use on the web, deja seleccionada la opción <link> y copia el código. ¡No cierres esta pestaña!
6. Vuelve al editor emergente. En la sección «Link», pega el código.
 7. Vuelve a la pestaña Google Fonts y copia el código de la sección CSS rules to specify families.
 8. Pega el código en la sección «Font Family».
 9. ¡Listo! Esta fuente personalizada de Google Fonts estará ahora disponible al crear un elemento de texto en tu ventana emergente. |
Contenido
Ahora pasemos al contenido, es decir, a todos los elementos que puedes añadir a tu ventana emergente, como texto, botones y formularios.
Todos los elementos se presentan en forma de lista, de arriba abajo. Si quieres cambiar su orden, por ejemplo, cambiar la posición de un botón, puedes hacerlo fácilmente arrastrando y soltando el elemento.
Todos los elementos se pueden eliminar haciendo clic en el icono de la papelera, y todos los elementos básicos también se pueden duplicar. Los elementos del formulario no se pueden duplicar.
Paso adicional en la ventana emergente
También puede configurar una segunda ventana emergente que se mostrará después de suscribirse al boletín. Para ello, haga clic en el paso 2 del creador:
Puedes utilizar esta ventana emergente para recopilar información sobre el número de teléfono y la fecha de nacimiento sin que el cliente tenga que volver a introducir su dirección de correo electrónico.
Cómo añadir un elemento
Para añadir un elemento, haz clic en el botón AGREGAR ELEMENTO. Verás 11 opciones, divididas en dos secciones: Agregar elementos básicos y Agregar elementos de formulario.
Elementos básicos
| Elementos del formulario
|
NOTA: Cuando añadas nuevos elementos, siempre aparecerán al final de la lista de elementos ya existente.
Configuración de los elementos básicos
Texto
Configuración del texto
Color de la fuente
Google Font
Tamaño de la fuente
Color de fondo de la fuente
Altura de línea
Negrita/cursiva
Añadir enlace
Alineación del texto
Borde
Borde alrededor del elemento
Color del borde
Estilos de borde (línea / rayado / punteado)
Redondeo de bordes
Opciones avanzadas (permite editar cada lado individualmente)
Márgenes
Margen interior del elemento (espacio vacío alrededor del elemento)
Opciones avanzadas (permite editar cada lado por separado)
Configuración general del elemento
Color de fondo del elemento (fondo del campo de texto)
Margen interno del elemento (espacio vacío alrededor del elemento)
Opciones avanzadas (permite editar cada página por separado)
Foto
Botón de envío (tamaño máximo del archivo: 2 MB)
Posición (izquierda / centrado / derecha)
Ancho de la foto (%)
Espaciado
Opciones del elemento
Altura del espaciado
Ancho del espaciado
Color del espacio
Posición (izquierda / centrado / derecha)
Configuración general
Color de fondo del pop-up (fondo del campo de texto)
Relleno general (espacio vacío alrededor del elemento)
Opciones avanzadas (permite editar cada página por separado)
Botón
Texto del elemento del botón
Color de la fuente
Familia de fuentes (seleccione «Predeterminada» para fuentes personalizadas en Google Font)
Tamaño de la fuente
Negrita/cursiva
Configuración del elemento
Color del botón
Ancho automático del botón (activado/desactivado)
Posición (izquierda / centrada / derecha)
Tipo de acción del botón
Suscripción (cambio del estado del usuario de DESCONOCIDO a SUSCRIPTOR)
Inscripción en el programa de recomendaciones (el usuario se inscribe para recibir un cupón del programa de recomendaciones Refer-a-fiend
Redireccionamiento (especifica la URL y decide si se abre en una nueva pestaña)
API (especifica la URL de la API)
Borde
Borde alrededor del elemento
Color del borde
Estilo del borde (línea / rayado / punteado)
Redondeo de bordes
Opciones avanzadas (permite editar cada página individualmente)
Márgenes
Margen interior del elemento (espacio vacío alrededor del elemento)
Opciones avanzadas (permite editar cada página por separado)
Configuración general
Color de fondo del pop-up (fondo del campo de texto)
Relleno general (espacio vacío alrededor del elemento)
Opciones avanzadas (permite editar cada página por separado)
Configuración del elemento del formulario
NOTA: todos los campos se vinculan automáticamente al perfil de cliente del usuario.
Todos los elementos del formulario tienen las siguientes opciones de configuración:
Encabezado del formulario ( texto justo encima del campo del formulario)
Configuración del formulario
Marcador de posición (texto en el campo del formulario)
Posición del texto en el centro (izquierda/centrado/derecha)
Color del texto en el campo del formulario
Color de fondo (color del campo del formulario)
Obligatorio (excepto el nombre y el apellido y la dirección de correo electrónico, que siempre son obligatorios)
Borde
Borde alrededor del elemento
Color del borde
Estilo del borde (línea / rayado / punteado)
Redondeo de los bordes
Opciones avanzadas (permite editar cada página individualmente)
Márgenes
Margen interior del elemento (espacio vacío alrededor del elemento)
Opciones avanzadas (permite editar cada página por separado)
Configuración general
Color de fondo del pop-up (fondo del campo de texto)
Relleno general (espacio vacío alrededor del elemento)
Opciones avanzadas (permite editar cada página por separado)
Además de lo anterior, algunos elementos del formulario también tienen ajustes específicos:
Género
Los sexos masculino y femenino son obligatorios, también se puede activar o desactivar la opción «No quiero especificar», «desconocido», «otro» o «unisex».
Fecha de nacimiento
El «día» y el «mes» son obligatorios, también es posible activar o desactivar el «año».
Casilla
Es posible activar o desactivar «marcado por defecto» y «altura automática».
¿Necesita ayuda adicional?
Si tienes alguna pregunta adicional relacionada con Custom Pop-up, ponte en contacto con nosotros en hello@edrone.me.