Introducción
Uso de Sitely
Elementos
Cómo
Las ventanas emergentes son una herramienta valiosa para mantener la claridad de tu sitio web, ya que te permiten presentar información esencial sin saturar tus páginas cuidadosamente diseñadas. Son eficaces para tareas como mostrar formularios de contacto, promocionar ofertas especiales o crear elementos de navegación interactivos, especialmente en dispositivos móviles. Aunque algunos usuarios pueden percibir las ventanas emergentes como obstáculos intrusivos para acceder al contenido, no tiene por qué ser así. Con una implementación creativa y estratégica, las ventanas emergentes pueden mejorar la experiencia de usuario y convertirse en un activo beneficioso en tu kit de herramientas web.
Las ventanas emergentes no son más que mini páginas web que los usuarios pueden abrir y mostrar bajo demanda. También se pueden hacer aparecer automáticamente tras un periodo de tiempo predefinido. Añades una ventana emergente a tu sitio con la herramienta de popups, ya sea desde la caja de herramientas de Sitely o haciendo clic en la herramienta de popups en la esquina superior izquierda del lienzo de Sitely. La herramienta se ve así.
Cuando agregas por primera vez una ventana emergente, se verá así en el lienzo.
Es un cuadro cuadrado, centrado en el lienzo, con el fondo atenuado. Es, esencialmente, una pequeña página web en blanco con un botón de cerrar ya añadido en la esquina superior derecha. Puedes cambiar el tamaño del cuadro arrastrando los tiradores y reposicionarlo donde te resulte conveniente. El cuadro se situará por encima de cualquier contenido existente de la página web que hayas añadido; es una mini página completamente independiente y no interferirá con el contenido existente.
Puedes estilizar el cuadro como quieras desde el panel de estilos, incluyendo color de fondo, borde, redondeado y todas las demás opciones que puedes aplicar a un elemento de caja normal. Estos son los elementos de estilo básicos de una ventana emergente.
Ventana emergente normal
La primera sección te permite decidir qué tipo de ventana emergente quieres crear. Las opciones son:
La opción Modal/Lightbox es probablemente el tipo más común de ventana emergente. Normalmente crea una ventana centrada en la página con el fondo atenuado sobre la página web. El desplazamiento de la página se desactiva cuando se usa esta opción. La opción Fija en la ventana te permite colocar la ventana emergente en una posición específica dentro de la ventana del navegador y no atenúa el fondo. Este tipo de ventana permanecerá fija en su posición mientras el resto de la página se desplaza detrás. La opción Normal creará la ventana emergente y te permitirá darle una posición específica en la página donde permanecerá, incluso al desplazarse. Esta opción no atenuará el fondo de la página. Veremos estas opciones un poco más adelante.
La siguiente opción, Siempre en primer plano, simplemente le indica a Sitely que la ventana emergente siempre aparecerá por encima de cualquier otro elemento de la página web.
Abrir automáticamente te permite crear una ventana emergente que aparecerá sin intervención del usuario. Esto puede ocurrir después de un periodo de tiempo específico, cuando el ratón sale de la página, al alcanzar cierta posición de desplazamiento o puedes hacer que aparezca solo una vez, a lo largo de varias visitas al sitio.
Para ver los distintos tipos, haz clic en los botones de abajo.
También hay una opción para que la ventana emergente aparezca solo entre fechas específicas; ideal para promociones con límite de tiempo.
Cada tipo de ventana emergente tiene un uso práctico específico. Por lo general, el tipo Modal/Lightbox se usaría cuando quieras mostrar la ventana emergente de forma aislada; en otras palabras, la página deja de desplazarse hasta que se cierre la ventana. Por eso este tipo tiene el fondo atenuado: indica a los usuarios que deben cerrarla antes de seguir navegando por tu sitio.
La opción Fija en la ventana se usaría normalmente cuando quieras permitir a los usuarios seguir navegando por tu sitio mientras la ventana emergente está abierta. Permanece fija en la ventana del navegador hasta que se cierre y todo el contenido de la página se desplazará detrás de ella.
La opción Normal te permite ser realmente creativo, especialmente si quieres añadir algo como un mega menú a tu página. Por ejemplo, hacer clic en un enlace del menú principal podría abrir una ventana emergente normal con tus otras opciones de menú. Esta permanecerá abierta y fijada a tu enlace de navegación principal hasta que se cierre. Aquí tienes un ejemplo de esa opción en acción. (Haz clic en el Enlace de mega menú)
Esta es la ventana donde creas tu mega menú. Permanece fija a la barra del menú principal hasta que el usuario la cierra. Mientras tanto, la página se puede desplazar como de costumbre y la ventana emergente se mueve con la página.
Creas contenido en tus ventanas emergentes exactamente del mismo modo que creas tus páginas web normales. Simplemente añade elementos a la ventana, dale el estilo que desees y listo. Puedes añadir imágenes, botones, vídeo, texto, formularios y cualquier otra cosa que quieras incluir.
Cuando termines de editar el contenido, puedes retirar la ventana emergente del lienzo haciendo clic en el botón de cerrar en la parte superior izquierda del lienzo. Esto la oculta para que puedas seguir diseñando el resto de tu página web. Si deseas volver a editar tu ventana emergente en cualquier momento, selecciónala desde el icono de ventanas emergentes en la esquina superior izquierda del lienzo.
Para que las ventanas emergentes se muestren en tu sitio, deben activarse mediante una acción. En la mayoría de los casos, esa acción será que los usuarios hagan clic en algún tipo de enlace, ya sea un menú, un botón o un enlace de texto. La acción al hacer clic será Abrir ventana emergente. Al seleccionarla, verás una opción adicional para elegir la ventana que quieres mostrar.
Las ventanas emergentes que ya están abiertas también necesitan algún tipo de activador para descartarlas o cerrarlas. De nuevo, esto puede hacerse mediante un enlace que cierre la ventana emergente. En la mayoría de los casos, el mismo enlace puede usarse para abrir y cerrar una ventana emergente. Solo marca la casilla Cerrar cuando se haga clic de nuevo en el enlace de apertura.
Las ventanas emergentes Modal/Lightbox también pueden cerrarse haciendo clic fuera del modal (en la parte atenuada de la página). En la mayoría de los casos, la propia ventana incluirá un botón de cierre (incluido por defecto al crear una nueva ventana). Este puede sustituirse por un enlace de texto, como se ilustra en el ejemplo del mega menú anterior, o por un botón normal si lo prefieres. Sea cual sea el tipo de enlace que elijas, la acción al hacer clic siempre será Cerrar ventana emergente.
Una ventana emergente anidada es aquella que contiene enlaces/disparadores a otras ventanas emergentes. Un ejemplo puede ser una ventana que muestra un índice de archivos de imagen o vídeo, o quizá una lista de diferentes formularios de contacto para distintos departamentos. Al hacer clic en esos enlaces se abrirá otra ventana emergente en la que se haya incrustado el contenido. En el ejemplo siguiente, el enlace abrirá una ventana con dos miniaturas de imagen. Al hacer clic en las miniaturas se abrirá la imagen correspondiente en otro lightbox. Además, un segundo enlace en cada uno de los lightbox de imágenes devuelve al usuario al lightbox índice.
Este ejemplo ilustra el comportamiento predeterminado de los lightbox en Sitely. Al abrirse un lightbox, cualquier otro que esté abierto se cierra. Esto sucede porque los lightbox se tratan como grupos en los que solo un lightbox del grupo puede estar abierto al mismo tiempo. Los grupos se identifican mediante un ID de grupo como se muestra aquí; encontrarás la opción en el panel de estilos.
Si deseas anular este comportamiento, puedes asignar un ID diferente a cada lightbox. Sin embargo, hacerlo puede provocar que se abran varios lightbox simultáneamente, lo que llevaría a confusión y obligaría a los usuarios a cerrar manualmente cada lightbox. Por supuesto, puede haber casos en los que quieras mantener un lightbox abierto, quizá uno que ofrezca instrucciones. Haz clic en el enlace de abajo para verlo en acción.
Esta es una ventana emergente secundaria con un ID de grupo diferente. Permanecerá abierta hasta que se cierre manualmente, independientemente de cualquier otra actividad de lightbox en la página.
Para ver que no se ve afectada por otras ventanas emergentes, haz clic de nuevo en el botón Abrir ventana emergente. Seguirás viendo los lightbox de imágenes, pero esta permanecerá en su lugar hasta que se cierre.
Las opciones de ubicación horizontal son:
Las opciones de ubicación vertical son:
Además, la opción de ubicación vertical te permite especificar si deseas Centrar la ventana emergente verticalmente o alinearla a la parte Superior o Inferior de la ventana del navegador, nuevamente dándote la opción de establecer un margen superior o inferior.
NOTA: Todas las opciones anteriores se aplican a las ventanas emergentes de tipo Modal/Lightbox y Fija en la ventana: ambas son relativas al tamaño de la ventana del navegador. El tipo Normal no utiliza estas opciones porque las ventanas emergentes normales son relativas a la página, no al navegador. Por lo tanto, dondequiera que se coloquen en una página, ahí es donde aparecerán.
Apareció un pequeño icono a la izquierda de la pantalla. Es otra ventana emergente para indicar que hay disponible un menú deslizante. El menú también es una ventana emergente. El icono está configurado para aparecer al 90% del desplazamiento, pero una vez que aparece, permanecerá en la página. El menú lateral en sí es una ventana emergente Fija en la ventana, alineada a la izquierda de la ventana del navegador y con la altura completa del navegador. Se activa al hacer clic en el icono. Tal es la versatilidad de las ventanas emergentes de Sitely. En un sitio real probablemente querrías que el icono fuese visible desde el principio, en lugar de aparecer en una posición de desplazamiento específica, pero todo es posible.
Por favor, informa de cualquier deficiencia en esta documentación y la solucionaremos lo antes posible.
Actualizado para Sitely 6
Fija en la ventana
Lightbox modal
Haz clic en una imagen para verla más grande
Aquí puedes crear un menú lateral vertical para tu sitio web.
Observa que permanece en su lugar cuando desplazas la página y se mantiene abierto hasta que lo cierres.
Este sitio web utiliza cookies.
Consulta nuestra política de privacidad para más detalles.
