¡¿No sabe cómo utilizar los enlaces emergentes de Avada? 1 minuto para aprender a implementar activadores de ventanas emergentes con elementos Modal Text HTML Link!

en el uso de Tema Avada Cuando se construye un sitio web, las ventanas emergentes son uno de los componentes clave que mejoran la experiencia del usuario. Intentar sacar el máximo partido a su sitio web con un párrafo de texto o unimágenes¿Abrir una ventana al hacer clic en ella? Este artículo le guiará a través del uso de Avada Texto modal / Elemento de enlace HTMLuna rápida implementación de la función "clic para abrir".

¿Qué es el elemento Modal Text / HTML Link?

Texto modal / Elemento de enlace HTML es un elemento ligero pero muy útil del tema Avada:Active una ventana emergente modal predefinida con un fragmento de texto o un elemento HTML.Esto significa que puede convertir cualquier contenido de la página en una ventana emergente en la que se puede hacer clic "flip-flop (electrónica)", lo que se traduce en una experiencia de usuario más fluida y natural.

Avada ofrece tres formas de activar ventanas emergentes modales:

• elemento pulsador(Botón)
• Elemento del menú
• Texto modal / Elemento de enlace HTML

Diferencias con los botones y activadores de menú

El elemento Texto Modal / Enlace HTML es una de las tres formas en que elMayor grado de libertadÚnico en su género. Puede insertar un gráfico, un párrafo HTMLLa ventana emergente se activará siempre que el área sobre la que se haga clic contenga este elemento, incluso iconos SVG.

Ejemplos de uso

• Exposición de productos: pulse "Saber más"Texto.Detalles del producto emergente.
• Mapa de navegación: ClickIconos del mapa(matem.) géneroMapa emergente de las tiendas.
• Incrustación de formularios: pulse "Regístrese ahora"Las palabras.formulario de inscripción emergente.
• Declaración de confidencialidad: en "Estoy de acuerdo con las condiciones"en"cláusula (de contrato o ley)"Literal".Declaración política detallada emergente.

Formatos de contenido compatibles

Uno de los aspectos más destacados del elemento Texto modal / Enlace HTML es que no sólo admite texto sin formato, sino también Estructura HTML, incluyendo específicamente:

• hipervínculo, enlace <a>
• imágenes <img>
• icono (informática) o SVG
• Cualquier estilo HTML (por ejemplo <strong>y<span>anidado <div> etc.)

Esto le permite encajar perfectamente en una variedad de diseños de página sin romper el diseño general, por lo que es perfecto para sitios web de diseño fino.

Guía paso a paso

1. Acceso al modo de edición Avada

Asegúrese de que ha creado un elemento emergente modal en su página antes de hacer esto. Por ejemplo, digamos que hemos creado un elemento emergente modal llamado mapa de Modal, que se utiliza para mostrar un mapa de la dirección de la tienda. Si no sabe cómo configurar un Modal, consulte este artículo, "LosAvada theme cómo crear elementos Modal popupEl

• Inicie sesión enWordPressla zona detrás de un escenario teatral
• 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

2. Insertar texto modal / elementos de enlace HTML

• Haga clic en el contenido que desee diseñar y pulse "Añadir elemento".

• En la lista de elementos, seleccione "Elemento "Texto modal / Enlace HTML.

• Como se puede ver a continuación, en el contenido se ha añadido a laTexto modal / Elemento de enlace HTMLEn el recuadro rojo de la izquierda está la propiedad de configuración.

• "Nombre del modal" donde se establece el nombre del elemento.
• "Texto o código HTML"El código HTML se introduce normalmente en la sección
• "Clase CSS" y "CSS ID"se estableceEstilo CSSLa clasificación y el nombre del

• Introduce tu propio código para darle estilo. Por ejemplo, lo que hace este código para mí es importar el archivo<img>Enlaces de imágenes y<alt> Texto alternativo. Si no sabes cómo escribirlo, puedes hacer que la IA lo genere por ti.

3. Efectos previos

pulse Mayús + P Ir a la vista previa de la página.

• Haga clic en la imagen que acabo de crear

Texto modal / Elemento de enlace HTMLAparecerá una ventana emergente para

resúmenes

Utilizar el elemento Modal Text / HTML Link es una forma flexible y práctica de utilizar la función Tema Avada Implemente rápidamente ventanas emergentes en las que se pueda hacer clic Ya sea para mostrar mapasformulario de inscripciónofertas o detalles de productos para mejorar la experiencia interactiva de su sitio web. Si desea saber más sobre el tema Avada en acción, preste atención a la secciónRed de fluctuación de fotonesactualizado diariamente con consejos sobre WordPress y tutoriales sobre temas populares.