Cómo crear un mapa de imagen de WordPress (y por qué debería)

Cuando se trata de sitios web, puede ser cierto que una imagen vale más que mil palabras. Hoy en día, muchos consumidores en línea prefieren contenido visual en detrimento de grandes cantidades de texto. Los atractivos mapas de imágenes interactivas pueden ser una ventaja útil y cautivadora para su sitio web. La buena noticia es que no tiene que ser un diseñador web experto para crear elementos visuales útiles e interactivos. Con un complemento como WP atrae la atención y algunos pasos simples, puede estar a punto de crear un impresionante mapa de imágenes. En esta publicación, le daremos una introducción a los mapas de imágenes y cómo puede usarlos en su sitio web. Luego, explicaremos cómo agregar esta función en su sitio web de WordPress con WP Drawing Attitude. ¡Vamos!
Una introducción a los mapas de imagen Un mapa de imagen es una foto o gráfico que contiene áreas en las que se puede hacer clic. Puede usarlos para agregar elementos visuales interactivos a su sitio. Es posible que haya cumplido con los mapas de imágenes a la vez mientras navega por la web porque son una herramienta versátil. Un uso a gran escala de mapas de imágenes es proporcionar a los usuarios una mirada más cercana a un edificio o propiedad. Por ejemplo, el centro de simulación clínica en Las Vegas ofrece a los visitantes al sitio un plan interactivo de su unidad: otro ejemplo es Voltcave, que resalta las configuraciones excepcionales del juego. Al hacer clic en los componentes individuales, las nuevas ventanas se abren desde donde los usuarios pueden comprar elementos que se muestran en la foto:
Los mapas de imágenes son bien adecuados para la descomposición de procesos complicados. Las soluciones de liquidación corporativa ilustran el viaje de cierre de la casa con un diagrama interactivo e informativo: puede usar mapas de imágenes para enseñar fácilmente conceptos difíciles, para resaltar las características del producto o para liderar un recorrido virtual de una propiedad. Independientemente de lo que use su sitio web, probablemente pueda imaginar algunas formas divertidas de incluir un mapa de imágenes. Cómo crear un mapa de imagen de WordPress (en 7 pasos) ahora que ha visto cómo algunas organizaciones usan mapas de imágenes en sus sitios web, le mostraremos cómo crear uno de ellos. PAS 1: Descargar e instalar WP Draw Attenation The WP Draw Atenting Plugin le permite agregar fácilmente un mapa de imagen a su sitio web de WordPress. Los mapas de imagen que cree con esta herramienta son receptivos, amigables con la optimización del motor de búsqueda (SEO) y personalizable. Le mostraremos la versión gratuita del complemento, pero si actualiza a Premium, desbloqueará más opciones. Para instalarlo desde la placa administrativa, explore los complementos> Agregar nuevo. Luego busque “dibujar atención” y haga clic en el botón Instalar ahora:
Después de haber terminado de instalar el complemento, haga clic en el botón de activación. Esto debería llevarlo a la pantalla de edición de imágenes.

Paso 2: Seleccione una imagen para la base de su mapa, el primer paso para crear su mapa de imagen es agregar la foto o el gráfico que usará como base. Si aún no está en la pantalla, edite la imagen, puede llegar allí haciendo clic en llamar la atención sobre el menú con la izquierda WordPress: Primero, le dé a su imagen un título descriptivo. Este título será visible para los visitantes de su sitio, así que hágalo claro y descriptivo. Luego mire el área de la imagen a la derecha de la pantalla:
Si tiene el archivo de imagen almacenado en el escritorio, simplemente puede deslizarlo y colocarlo en el área de la imagen. Alternativamente, puede hacer clic en el botón de carga de la imagen, encontrar el archivo en su computadora y cargarlo.

Si su imagen ya está en su biblioteca de WordPress de medios, haga clic en el botón de la biblioteca de medios. Luego ubique y seleccione la imagen deseada y haga clic en el botón Establecer presentado:

Si cambia de opinión sobre la imagen que desea usar, siempre puede ir con el mouse sobre el área de la imagen, haga clic en el botón de eliminación de la imagen y seleccione un archivo nuevo. Paso 3: dibuje un punto de acceso de imagen El siguiente paso es designar un “punto de acceso” en su imagen. Esta es un área en la que los usuarios pueden hacer clic y con el que pueden interactuar. Cuando un visitante pasa con el mouse sobre un punto de acceso, parecerá un punto culminante para mostrar que se puede hacer clic en él.
Creará y definirá acciones para sus puntos de acceso en la sección de zonas de hotspot. Puede encontrarlo en la parte inferior de la pantalla:

Primero, haga clic en el área de menú desplegable que puede hacer clic en el n. ° 1 para abrir su imagen. Si es grande, puede ser necesario desplazarse para ver la imagen completa. Haga clic en cualquier lugar de la imagen para colocar el primer punto. Puede mover un punto haciendo clic en él y luego tirando de él. Cuando agrega un segundo punto, aparecerá una línea que conecta a los dos. Cuantos más puntos agregue, más exactamente podrá hacer su forma. Continúe agregando y manejando puntos alrededor del perímetro del área. También puede mover toda la forma en la que se puede hacer clic seleccionando el punto central y tirando de ella.
Finalmente, da un título a tu punto de acceso. Este título se mostrará cuando un usuario pase con el mouse a través del punto de acceso, por lo que querrá hacerlo relevante desde un punto de vista contextual. Para agregar múltiples puntos de acceso, haga clic en Agregar otra área en la parte inferior de la pantalla. Una vez que haya agregado más, puede usar el área que elimina el área para eliminar cualquier punto de acceso que no sea de desgotación.

Paso 4: Establezca la acción de su punto de acceso ahora que puede establecer la acción para su punto de acceso. Atraer su atención le brinda la opción de mostrar más información de imagen o abrir una URL en una nueva pestaña. Puede encontrar ambas opciones en la sección de acción:

Para dar a sus usuarios más información, seleccione Mostrar más información en el menú desplegable. Ingrese el texto deseado en el campo Descripción. Si desea mostrar una imagen adicional, puede cargarla en la sección de imagen detallada: puede repetir estos pasos para cualquier otro punto de acceso que cree. Cuando un usuario hace clic en Hotspot, verá el texto y la imagen apropiados:

Si desea que su punto de acceso abra una nueva URL al hacer clic, seleccione acceder a la URL en el menú desplegable. Luego ingrese la dirección web deseada en el campo URL. También puede verificar la casilla en la nueva ventana si prefiere abrir la página en otra pestaña del navegador:
Asegúrese de hacer clic en el botón Actualizar en el cuadro de publicación para guardar el mapa de la imagen siempre que realice cambios. Paso 5: Ajuste la configuración del mapa de imagen luego, puede ajustar algunas de las configuraciones de color de su mapa de imagen. Al manejar estas opciones, puede asegurarse de que los elementos de su mapa de imagen coincidan con la marca de su sitio web. Encontrará estas opciones en el área más información de estilo de caja:

Si su imagen es pequeña, el complemento la colocará sobre un fondo colorido. Puede cambiar este color para que coincida con el resto de su sitio haciendo clic en el botón Seleccionar color:

También puede ajustar los colores utilizados en el cuadro más información. Seleccione los colores deseados para el fondo y el texto del cuadro haciendo clic en los botones de selección de color para cada opción. Al elegir colores, tenga en cuenta la accesibilidad y asegúrese de que haya suficiente contraste para mantener el texto legible. Para ayudar a los visitantes de su sitio a comprender que su imagen es interactiva, le recomendamos que agregue texto al cuadro más información cuando no se puede seleccionar ningún área. Ingrese este contenido en el cuadro Información más predeterminada: puede usar este texto para proporcionar más información sobre su mapa de imágenes o para alentar a los usuarios a interactuar con él. Paso 6: Agregue color a sus puntos de acceso, en última instancia, puede personalizar el estilo de sus puntos de acceso. Puede hacer estos ajustes en la sección de resaltado de estilo. Similar a cómo seleccionó los colores para su cuadro de información, puede seleccionar qué color desea resaltar por sus puntos de interés. Puede ajustar la opacidad de resaltar y usar el control deslizante:

Luego puede ajustar el marco de resaltar. Nuevamente, puede elegir el color y la opacidad. También puede aumentar o disminuir el grosor del borde: