En la configuración de elementos onsite como Pop Up o Web layer banner, puede seleccionar la acción «Clic» y, a continuación, ajustar el elemento cuyo clic provocará la visualización de nuestro onsite. Para configurar correctamente el elemento cuyo clic provocará la visualización del onsite, debe encontrar su selector CSS.
Para seleccionar el selector adecuado del elemento, tras hacer clic en el que provocará la visualización de su Pop Up, siga estos pasos:
Inspección del elemento:
Abre las herramientas de desarrollo del navegador (normalmente disponibles al hacer clic con el botón derecho del ratón en la página y seleccionar la opción «Inspeccionar» o pulsando F12).
Busca el elemento que debe activar la ventana emergente al hacer clic. Puede ser un botón, un enlace u otro elemento interactivo.
Análisis del elemento HTML:
Una vez seleccionado el elemento en las herramientas de desarrollo, examina su HTML y atributos como el ID (id) y las clases (class).
Utiliza el identificador (ID) o la clase
Ejemplo
Supongamos que tienes un botón con el que deseas activar la ventana emergente y su HTML tiene el siguiente aspecto:
<button id="openPopup" class="btn btn-primary popup-trigger">Mostrar ventana emergente</button>
Selector ID
Por defecto, el ID de un elemento es único en la página, pero si la página está mal construida, puede que no sea así. Sin embargo, si el elemento tiene un ID, puedes usar el selector ID:
#openPopup
El selector debe pegarse en edrone de esta forma. Si quieres utilizar el ID del elemento, debes anteponer el signo «#» al texto correspondiente.
Selector de clase
Si el elemento no tiene ID, pero tiene una clase, puedes utilizar el selector de clase. Recuerda que una clase determinada puede repetirse varias veces para muchos elementos de la página, por lo que es importante que la clase de un elemento determinado también sea única. Si tienes acceso al código fuente de la página y puedes editarlo, siempre puedes añadir una clase única para un elemento concreto en HTML:.popup-trigger
El selector debe pegarse en edrone de esta forma. Si quieres utilizar la clase del elemento, debes aplicar el signo «.» antes del texto correspondiente.
Atributos y anidamiento:
En algunos casos, puede ser necesario utilizar selectores más complejos que tengan en cuenta los atributos o el anidamiento del elemento. En este caso, se requieren mayores conocimientos de HTML y CSS.
Ejemplo: «button [aria-haspopup="true"]» o «.container .popup-trigger»
¿Necesitas más ayuda?
Si tienes alguna pregunta adicional sobre la selección de elementos CSS, ponte en contacto con nosotros en hello@edrone.me.