Cómo crear imágenes interactivas en WordPress y por qué debería hacerlo










  • Si alguna vez ha querido usar imágenes interactivas para atraer a los visitantes de su sitio web, hoy es el día para comenzar. Es más fácil que nunca crear mapas, planos de planta e incluso infografías en los que se pueda hacer clic. Atraiga a los visitantes a cualquier imagen haciéndola interactiva en minutos.

    Si estaba desarrollando sitios web en la década de 1990, probablemente esté familiarizado con los mapas de imágenes. Son coordenadas (a menudo denominadas "puntos de acceso") trazadas en la parte superior de una imagen. Las coordenadas hicieron posible vincular a otras páginas haciendo clic en ciertas áreas de la imagen.

    Los mapas de imágenes modernos funcionan con los mismos principios básicos, pero hoy en día hay muchas más opciones disponibles. Todavía puede vincular a las páginas, pero ahora tenemos efectos de desplazamiento y ventanas emergentes que realmente potencian los mapas de imágenes.

    Usaremos el complemento Llamar la atención para crear imágenes interactivas que atraerán y entretendrán a sus visitantes.

    Instalación del complemento Dibujar atención

    Inicie sesión en su panel de administración de WordPress.

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo".

    pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo"

    En el cuadro "Buscar complementos...", ingrese "Llamar la atención".

    busque el complemento de atención de WordPress Draw

    Una vez que haya localizado el complemento, haga clic en el botón "Instalar ahora".

    haga clic para instalar el complemento de atención de WordPress Draw

    Haga clic en el botón "Activar".

    haga clic para activar el complemento de atención de WordPress Draw

    Configuración de Llamar la atención

    No se necesita configuración de complementos para crear imágenes jpg, png o gif interactivas usando Llamar la atención. Trazaremos las interacciones de la imagen y luego incluiremos la imagen en una página o publicación usando códigos abreviados.

    Cómo hacer que se pueda hacer clic en una imagen

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Llamar la atención" y haga clic en el enlace "Editar imagen".

    haga clic en el enlace "Editar imagen"

    Lo primero que haremos será darle un título a la imagen. El título será visible cuando mostramos la imagen y ayuda a administrar varias imágenes en el sistema.

    A continuación, en el cuadro "Imagen" en la columna de la derecha, seleccione una imagen. Puede elegir una imagen de su biblioteca multimedia o cargar una nueva. Vamos a subir una nueva imagen para este tutorial.

    titulo y sube la imagen

    Ahora desplácese hacia abajo hasta la sección "Áreas de puntos de acceso".

    Para dibujar nuestras primeras coordenadas, haremos clic en el enlace "Área en la que se puede hacer clic #1".

    haga clic en el enlace "Área en la que se puede hacer clic n.º 1"

    Eso agrega la imagen que subimos a la sección "Coordenadas".

    imagen en la sección "Coordenadas"

    Para simplificar esta demostración, he elegido una imagen infográfica con formas básicas para delinear. También puede delinear formas más complejas una vez que aprenda a usar el complemento.

    Para comenzar, simplemente haga clic en la imagen donde desea su primer punto. Luego haga clic en el resto de los puntos para completar la forma.

    Al hacer clic en los dos primeros puntos se crea una línea.

    primeros dos puntos crea una línea

    Al hacer clic en el tercer punto se crea el cuadro de punto de acceso.

    Luego simplemente hacemos clic en el resto de los puntos para completar la forma.

    forma de punto de acceso completada

    Si comete un error y desea eliminar un punto, mantenga presionada la tecla Ctrl y haga clic en el punto. Para eliminar todos los puntos de un punto de acceso, haga clic en el botón "Restablecer" justo debajo de la imagen.

    Por ahora, solo vamos a crear un solo punto de acceso para poder seguir todos los pasos.

    Desplácese hacia abajo hasta la sección "Título" (debajo de la imagen a la que acaba de agregar un punto de acceso) e ingrese un título. Este será el título del punto de acceso que acabamos de dibujar.

    La sección "Acción" es donde elige lo que sucede cuando un visitante hace clic en el punto de acceso de la imagen. Hay dos opciones, "Mostrar más información" e "Ir a la URL".

    elige una acción

    Mostrar más información

    Elegir "Mostrar más información" le permite ingresar texto en el campo "Descripción" y una imagen en el campo "Imagen detallada".

    Echemos un vistazo más de cerca a lo que hace esta opción.

    • Agregue un título para el punto de acceso.
    • Seleccione "Mostrar más información" como la "Acción".
    • Ingrese una "Descripción".
    • Cargue una "Imagen detallada" que queremos mostrar cuando se haga clic en el punto de acceso.

    los campos "Mostrar más información"

    los campos "Mostrar más información"

    Desplácese hacia atrás hasta la parte superior y haga clic en el botón "Actualizar".

    haga clic en el botón "Actualizar"

    Ahora haga clic en el enlace "Ver publicación".

    haga clic en el enlace "Ver publicación"

    Ahora puedes ver la imagen interactiva. Pase el mouse sobre el punto de acceso, verá la superposición y el título del punto de acceso.

    página de imagen interactiva

    Y si hace clic en el punto de acceso, la información "Mostrar más información" se muestra a la izquierda.

    página de imagen interactiva con campos "Mostrar más información"

    Personalmente, no me gusta la pantalla predeterminada. La versión paga del complemento ofrece más opciones de diseño para que se pueda mover el cuadro de información adicional. Pero algunas partes de la apariencia se pueden cambiar con CSS en la versión gratuita.

    Y, por supuesto, las páginas se muestran de manera diferente en cada tema. Sin embargo, en realidad es solo una cuestión estética subjetiva. Su experiencia puede variar.

    Ir a URL

    La otra opción de "Acción" es Ir a URL. Tracemos otro punto de acceso y veamos cómo funciona.

    Regrese a la página de edición de imágenes y desplácese hacia abajo hasta la sección "Áreas de puntos de acceso".

    Haga clic en el botón "Agregar otra área".

    haga clic en el botón "Agregar otra área"

    Traza el segundo punto de acceso.

    trazar el segundo punto de acceso

    Desplácese hacia abajo y agregue un título para el punto de acceso.

    Para la "Acción", elija "Ir a URL".

    elige "Ir a URL"

    Ingrese la URL a la que desea vincular en el campo "URL".

    Marque la casilla "Abrir en una ventana nueva" si desea que el enlace se abra en una ventana nueva.

    introducir URL

    Desplácese hacia arriba y haga clic en el botón "Actualizar" en la parte superior de la página.

    Ahora, cuando hace clic en el enlace "Ver publicación", puede ver que la imagen interactiva tiene otro punto de acceso.

    segundo punto de acceso

    Hacer clic en el punto de acceso nos lleva a la página a la que nos vinculamos.

    Marcamos la casilla "Abrir en una nueva ventana", pero no se abre una nueva ventana cuando se hace clic en el punto de acceso.

    La única forma que encontré para solucionarlo fue volver a la imagen, abrir ese punto de acceso, marcar la casilla "Abrir en una ventana nueva" (nuevamente) y luego guardar la imagen nuevamente. Eso hizo que el enlace del punto de acceso abriera una nueva ventana.

    Agregar la imagen a una página o publicación

    Hasta ahora, hemos estado previsualizando la imagen en su propia página. Entonces, ¿cómo lo agregamos a una página o publicación en el sitio?

    En la sección de edición de imágenes, desplácese hacia abajo y busque el cuadro "Copiar código abreviado" en la columna de la derecha.

    copiar código abreviado

    Copie ese shortcode, [drawatttention] , y péguelo en una página o publicación.

    insertando shortcode

    Actualice la página o la publicación y se agregará la imagen.

    imagen interactiva en la página

    Como puede ver, la pantalla sigue siendo problemática. Pero nuevamente, eso dependerá del tema, y ​​ciertos elementos se pueden modificar con cambios de CSS .

    Si no está seguro de cómo agregar CSS personalizado a un sitio de WordPress, tenemos algunos consejos para ayudarlo .

    Personalización adicional

    El esquema de color utilizado para los puntos de acceso es personalizable. Primero, en la sección "Estilo de resaltado", donde se puede cambiar el mouse sobre los colores y la opacidad.

    Sección "Resaltar estilo"

    Luego, también puede cambiarlo en la sección "Estilo del cuadro de más información", que controla la barra de información adicional que se muestra junto a la imagen.

    Sección "Estilo del cuadro de más información"

    La sección "Más información predeterminada" le permite agregar texto que se mostrará antes de cualquier interacción de punto de acceso.

    Sección "Más información predeterminada"

    La versión gratuita del complemento solo le permite crear una imagen interactiva. Eso lo convierte más en un complemento de demostración que en una herramienta útil para el día a día.

    Pero si le gusta cómo funciona, puede comprar una licencia. Eso desbloquea la capacidad de crear múltiples imágenes, así como las opciones de diseño adicionales de las que hablamos anteriormente.

    ¿Qué sucede si desinstala el complemento Draw Attention?

    Si desinstala el complemento, las páginas y las publicaciones que usaron el complemento se verán afectadas. Los problemas incluyen lo siguiente:

    • Las imágenes interactivas creadas por el complemento seguirán estando presentes, pero las funciones interactivas ya no funcionarán.
    • Los códigos cortos del complemento dejarán de funcionar, por lo que los códigos cortos en sí se mostrarán en cualquier lugar donde se hayan utilizado.

    Las imágenes interactivas han llegado a la mayoría de edad

    Los mapas de imágenes eran como una especie de magia negra en la web mundial cuando aparecieron en escena. Pero eran primitivos (ya menudo mal implementados) en comparación con lo que podemos hacer ahora.

    Has visto que crear un punto de acceso de imágenes en WordPress se puede hacer de forma rápida y sin esfuerzo. Y repasamos los pasos para crear un par de tipos diferentes de puntos de acceso y cómo implementarlos.

    Con estos componentes básicos, puede llevar sus imágenes interactivas aún más lejos. Si puedes imaginarlo, probablemente puedas hacerlo realidad.

    ¿Ha experimentado con mapas de imágenes, puntos de acceso e interacción con imágenes en su sitio? ¿Conoces algún uso interesante que no hayamos mencionado? ¡Házmelo saber en los comentarios!










  • Subir