Dominar Avada Popups para siempre: Crear Popups de calidad profesional con elementos modales

en el uso de Tema Avada A la hora de crear un sitio web, las ventanas emergentes son sin duda una herramienta importante para mejorar la experiencia del usuario. Ya se utilicen para mostrar formularios, imágenes, mapas o para anunciar información promocional, losElementos emergentes modales Todos ellos presentan el contenido de forma limpia y elegante. Hoy, le llevaremos a una inmersión profunda en el uso del elemento Modal de Avada y la implementación de una nueva forma de presentar el contenido a través de la funciónbotonesLos clics en menús o imágenes activan ventanas emergentes.

¿Qué son los elementos modales de Avada?

Elemento modal sea Constructor Avada Se proporciona un componente de ventana emergente de contenido. Le permite establecer un área oculta en la página que sólo aparecerá cuando sea activada por un clic. Se puede utilizar para:

• demuestreFormulario de contacto
• Mostrar detalles
• Insertar contenido de la cartera gráfica
• Anuncios emergentes, consejos, mapas, etc.

El propio modal está oculto.La única manera de llegar a la parte superior de la lista es pasar ellos tres siguientesUna de las formas se activa antes de que aparezca:

1. elemento pulsador
2. elemento del menú
3. Texto modal / Elemento de enlace HTML

Tutorial de funcionamiento

1. Acceda al modo de edición de Avada

• Inicie sesión en el backend de WordPress
• En segundo plano, haga clic en "página web", seleccione la página que desea diseñar
• Pulse "Constructor en vivo" Entrar en el modo de edición de Avada

Paso 2: Añadir el elemento modal

• Seleccione lo que desea diseñar y haga clic en "+"Añadir elementosopciones (como en la configuración de programas informáticos)

• existeLista de elementosInserta un elemento Modal.

• Abra el panel Configuración y configure sucesivamente las siguientes opciones:

Paso 3: Editar contenido modal

Avada proporciona un área de edición de contenido visual completa con soporte para añadir texto e imágenes directamente. Sin embargo, si desea implementar diseños más complejos, como gráficos y texto uno al lado del otro, columnas anidadas, etc., la práctica recomendada es:En primer lugar, cree el diseño de contenido en una página en blanco con Avada Builder, haga clic con el botón derecho del ratón para copiar el diseño correspondiente.contenedoreso columna y, a continuación, péguelo en el área de contenido del Modal.

Ejemplo de estructura de contenidos:

• columna izquierda::
  • Elementos fotográficos (gráficos promocionales)
  • Elemento de imagen (Logotipo)
  • Bloque de texto (breve descripción)

• columna derecha::
  • Elementos de formulario Avada (por ejemplo, formularios de contacto)

• Una vez construida, haga clic con el botón derecho del ratón en toda la columna anidada →. haga una copia de

• Luego vuelve al Editor de Elementos Modales, haz clic con el botón derecho y pega en el área de contenido, y listo.

resúmenes

El elemento emergente Modal de Avada proporciona una gran flexibilidad para añadir interactividad y presentación de información a los sitios web. Con el flujo de este artículo, habrá dominado el proceso completo, desde la adición de elementos Modal, la configuración de las propiedades de las ventanas emergentes, hasta la inserción de estructuras de contenido complejas. Para obtener más información sobre el funcionamiento del conocimiento del tema Avada, consulte este artículoAstra Theme Nanny TutorialContiene la importación de la plantilla del tema Avada, la configuración de la página, el encabezado y el pie de página,Configuración de la página de inicioy otros conocimientos operativos completos.