Draw Attention

Descripción

Nuevo en la versión 1.8: Renderización de la imagen interactiva mejorada

Hemos reescrito la visualización del plugin para usar SVG con el objetivo de conseguir un renderizado más rápido y una mejor compatibilidad del navegador

Diseño adaptable

Las imágenes interactivas cambian de tamaño para ajustarse a tu tema y al tamaño de pantalla disponible

Accesible

La información de las imágenes es accesible para todos los que visitan tu sitio, independientemente del dispositivo o las capacidades.

Progresivamente mejorado

Tus anotaciones y contenido son accesibles incluso para los usuarios que tienen JavaScript desactivado – ¡también están optimizados para SEO! Draw Attention usa elementos canvas en los navegadores modernos, y recurre a los mapas de imagen en los navegadores más antiguos.

Colores personalizables

Elige tu propio esquema de color personalizado para que case con tu sitio

Resaltar al pasar el cursor por encima

Resalta diferentes áreas de la imagen cuando el visitante del sitio mueva el ratón sobre la imagen interactiva

Fácil de dibujar

Es fácil dibujar áreas resaltables en tu imagen – ¡y también es fácil editar las formas más tarde!

Más información al hacer clic

Cuando se hace clic en un área resaltada, muestra más información. Ideal para resaltar puntos de interés en tu imagen.

Ve a una URL

Opcionalmente, envía a un visitante del sitio a otra URL al hacer clic en un área resaltable del mapa.

Actualiza a la versión Pro para obtener más características y personalización:

Múltiples imágenes interactivas (solo Pro)

¿Necesitas más de una imagen interactiva en tu sitio? La versión Pro permite áreas resaltables ilimitadas en imágenes interactivas ilimitadas

Opciones de diseño (solo Pro)

Muestra más información sobre las áreas resaltadas en el mapa varios diseños diferentes, cajas de luz y etiquetas emergentes incluidas.

20 paletas de color predefinidas (solo Pro)

Elige una de las 20 paletas de color predefinidas o usa tu propio esquema de color personalizado

¿Qué puedes hacer con Draw Attention?

  • Muestra inmuebles o nuevas promociones. Ofrece a tus visitantes un recorrido virtual donde puedan explorar planos de planta y fotos
  • Vende stands a expositores de tu feria/conferencia mostrándoles un mapa interactivo del plano de la feria
  • Haz un recorrido de producto o una gran documentación de ayuda – explica tu producto resaltando las características de una manera visual
  • Infografía interactiva – anota/marca áreas importantes en tu infografía y muestra más información sobre esos puntos de interés
  • Si estás familiarizado con los mapas de imágen HTML, te ayudamos a hacerlos de una manera moderna que es compatible con los dispositivos y navegadores actuales

Capturas

  • Dibuja tus áreas resaltables en el escritorio
  • Los visitantes del sitio pueden hacer clic para obtener más información sobre las áreas resaltadas
  • Sube un plano de planta y muestra las fotos de detalle de cada habitación
  • Personaliza los colores y la apariencia de las áreas resaltadas

Bloques

Este plugin proporciona 1 bloque.

draw-attention/image
Draw Attention Image

Instalación

  1. Navega a ‘Añadir nuevo’ en el panel de plugins
  2. Busca ‘draw attention’
  3. Haz clic en ‘Instalar ahora’
  4. Activa el plugin en el panel de plugins

Instalación manual

  1. Navega a ‘Añadir nuevo’ en el panel de plugins
  2. Navega al área ‘Subir’
  3. Selecciona draw-attention.zip en tu ordenador
  4. Haz clic en ‘Instalar ahora’
  5. Activa el plugin en el panel de plugins

Después de la instalación

  1. Verás un nuevo elemento de menú llamado Draw Attention en el menú de la izquierda
  2. Crea tu imagen interactiva. Tenemos un video tutorial que muestra cómo crear la imagen.
  3. Una vez creada la imagen, puedes incrustarla en cualquier página o entrada con el shortcode [drawattention].

Preguntas frecuentes

¿Qué se ha añadido a Draw Attention Pro?

La versión Pro incluye:

  • Capacidad para crear más de 1 imagen interactiva
  • Número ilimitado de áreas resaltables en cada imagen
  • 20 esquemas personalizados de color
  • Opciones de diseño personalizadas (cambiar la posición de la caja Más información o usar una caja de luz o una etiqueta emergente)
¿Dónde puedo encontrar documentación y aprender cómo usar el plugin?

Tenemos tutoriales, vídeos y otra información útil en la web de Draw Attention

¿Cómo dibujo mi primera imagen?

Tenemos un video tutorial en torno a la creación de tu primera imagen disponible en nuestra documentación.

Reseñas

15 de septiembre de 2019
(Pro) All I ever wanted is combined in this easy-to-use vector-based plugin: enhancing and explaining details, points of interest and complex processes given on jpgs. Installed and it works perfectly, also on small displays. Back-end is well-described and usable, just from scratch. A small issue with a sticky theme header occurred, but help was there: immediately, very friendly, 100% helpful, issue solved within an email. Just perfect. Thank you so much for this tool, love to work with it. It's definitely worth the money.
4 de septiembre de 2019
I downloaded the plugin and made the image, however the [drawattention] shortcode I inserted into the place I wanted it to be was not functioning. So I e-mailed them and they took so much time to help me get through. The image is now properly in the right place and functioning. If you find anything difficult using the plugin, I'm sure that they will give you the support you need! And the end result looks amazing. 100% recommended 🙂
30 de agosto de 2019
This plugin is a life saver for anyone in the property, development or architecture fields. So useful. Seriously considering the pro version. Thank you!
18 de agosto de 2019
I saw a quick video (the first one posted with the free plugin), installed and activated the plugin, repeated what I had learned, and BOOM! It just worked - no hickups, no learning curve, just relief that what I needed it for was done. I was a little curious about the shortcode not being specific to the interactive image I had just setup. I began to suspect that perhaps the free version was only good for one image. Yep! One one is allowed in the free version. Oh, well, it's a good thing I only needed one. The "Pro" version allows unlimited images, but can only be used for one site. For that, $74 is too pricey. Wouldn't a "professional" need to work on more than just one site? The next level is only about 40% more and has unlimited usage (at least it is implied as such). That level should be called the "Pro" version. However, if you have a single website that frequently needs new interactive images, at least you know what you are getting and that it works well.
Leer todas las 49 reseñas

Colaboradores y desarrolladores

«Draw Attention» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Draw Attention» ha sido traducido a 1 idioma local. Gracias a los traductores por sus contribuciones.

Traduce «Draw Attention» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

1.8.20

  • Fixed: Compatibility with the «lazy-load» plugin

1.8.18

  • Fixed: Prevent potential overlapping between Draw Attention and fixed elements in some themes

1.8.17

  • Fixed: Bug in Mobile Safari 12 with showing more info area

1.8.15

  • Fixed: Allow hotspots re-ordering by drag and drop
  • Improved: Better CSS support for older browsers

1.8.13

  • Improved: Increased allowed hotspots to 50 (was 20)
  • Improved: Cleaned up confusing buttons in UI

1.8.12

  • Improved: Added support for embedding Draw Attention in Visual Composer accordions

1.8.11

  • Fixed: Image too large for drawing area was overflowing, now scrolls
  • Fixed: Escape alt attributes for images and areas

1.8.10

  • Improved: User experience for changing featured image
  • Improved: Handle more cases of hash links for hotspots

1.8.9

Warning for WPML and Non-English users: please test before updating

  • Improved: Internationalization using new text domain matching plugin slug (draw-attention instead of drawattention). We made this change to allow translators to use wordpress.org’s translation system. If this breaks any existing translations for people using WPML or other approaches, please contact us at support@wpdrawattention.com so we can help you resolve it as quickly as possible.

1.8.7

  • Improved: Hide tooltips if there is no title for a hotspot
  • Fixed: Support for WMPL

1.8.6

  • Fixed: Broken URL hotspots (introduced in v1.8.5)

1.8.5

  • Improved: Add smooth scrolling for URL action to an element on the same page
  • Fixed: Unable to scroll or zoom page over image on Chrome on iOS

1.8.4

  • Improved: Add right-click to get link to hotspot for logged-in admins
  • Fixed: Unable to scroll or zoom page over image on iOS

1.8.3

  • Fixed: PHP Notice on some images

1.8.2

  • Fixed: Background color setting not applying
  • Fixed: Fixed width of URL-only images

1.8.1

  • Improved: New SVG-powered front-end rendering for better cross browser support and improved performance

1.7.7

  • Improved: Default text color on new images

1.7.6

  • Fixed: Bad reference to VML behavior in the plugin CSS
  • Fixed: Hid the Draw Attention menu item for users without permissions to create/edit

1.7.5

  • Added: Gutenberg Draw Attention block for WP 5.0

1.7.4

  • Fixed: PHP Notice

1.7.3

  • Improved: Gutenberg compatibility

1.7.2

  • Fixed: Issue with ‘Array’ text showing when first saving a Draw Attention image

1.7.1

  • Fixed: Incompatibility with Jetpack lazy load feature

1.7.0

  • Improved: Drawing tool to include handle to reposition hotspots

1.6.14

  • Fixed: Potential Undefined Index Error when first creating an image

1.6.13

  • Improved: Improve handling for Photon in recent Jetpack update

1.6.12

  • Improved: Mobile scrolling over active hotspots

1.6.11

  • Improved: Moved wpautop() on description text to a filter ‘da_description’

1.6.10

  • Fixed: Conflict with Ninja Forms that prevented users from being able to use the Ninja Forms WYSIWYG editor (Thanks Ninja Forms team!)
  • Fixed: Handle error when ‘Go to URL’ is selected but no URL is entered
  • Fixed: Undefined index error

1.6.9

  • Improved: Support for WP 4.8.x

1.6.8

  • Fixed: Strict PHP Notice when saving
  • Fixed: Missing detail images on some server environments

1.6.7

  • Fixed: Edge case with missing detail image ID

1.6.6

  • New: Added troubleshooting note for admins when there’s a theme or plugin conflict
  • New: Improved compatibility for site migrations

1.6.5

  • Fixed: Make canvas for drawing hotspots fill the available width

1.6.4

  • Fixed: Conflict with Unveil Lazy Load plugin
  • Fixed: Compatibility with popup blocking in Mobile Safari (iOS 9+)

1.6.2

  • Added: Support for interactive images to work within jQuery UI tabs
  • Improved: Window resizing and redrawing of image hotspots
  • Fixed: Safari bug when navigating back to an image with a clickable area using the URL action

1.6.1

  • Added: Support for placing Draw Attention inside Divi theme Tabs & Toggles
  • Added: Support for Visual Composer AJAX Page Transitions
  • Added: Filter to load Draw Attention scripts early & everywhere (for themes using ajax page transitions)
  • Fixed: PHP (strict mode) warning when post_type is unset

1.5.3

  • Fixed: Conflict between post ID and hotspot ID caused image to disappear when clicking hotspot

1.5.2

  • Fixed: Incompatibility with 3rd party theme/plugin javascript in the admin
  • Fixed: Scrolling issue with deep-linked hotspots on tall vertical images

1.5.1

  • Fixed: PHP warnings when WP_DEBUG was on
  • Fixed: Scrolling issue with deep-linked hotspots

1.5

  • New: Customize background color (behind image) with new color picker added to interface
  • New: Link directly to a hotspot (right-click and copy link) – area will be highlighted automatically

1.4.5

  • Fixed: Mobile/Touch events required 4 taps for areas with URL action

1.4.4

  • Fixed: «the_content» always displaying in the default more info area

1.4.3

  • Fixed: Loading more info in IE9 and IE10. Note that these browsers do not support the area highlights
  • Fixed: Clicking off a selected area will display the default placeholder text in the more info area

1.4.2

  • Fixed: Allow shortcodes in more info area, without using the_content which caused some conflicts with other plugins (ie. showing sharing buttons)

1.4.1

  • New: Ability to link an area to a URL (instead of showing more info)
  • New: Added Visual/WYSIWYG editor to area descriptions (more info box)
  • Improved: Usability on mobile phones and touch devices
  • Improved: Portuguese translation
  • Fixed: Preview not working in some cases
  • Fixed: Compatibility issue with Jetpack Photon

1.3

  • New: Easily preview your interactive image using «Preview Changes» or «View Post» in the dashboard
  • Improved: Better handling of mobile device changing orientation after interactive image is loaded
  • Fixed: Interactive features not working in older versions of Internet Explorer

1.2

  • New: Improve internationalization
  • New: Add Portuguese translation
  • Improved: Optimize detail image size (don’t load full size image for more info box)
  • Improved: Handle JS conflicts with other plugins better
  • Improved: Add warning message for old servers running PHP 5.2 (Draw Attention requires PHP 5.3+)
  • Improved: Better handling of window resizing after interactive image is loaded
  • Fixed: More info content not updating in some situations
  • Fixed: Conflict with some themes causing highlighted areas to «jump» when clicked

1.1.3

  • Fixed: Default color scheme always applying when re-editing an existing image

1.1.2

  • Fixed: PHP Warnings when PHP is in Strict Standards mode

1.1.1

  • New: Add ability «click off» highlighted areas
  • New: Add confirmation alert before deleting highlightable area in the dashboard
  • New: CPT icon in dashboard
  • New: Set a default color scheme when activating Draw Attention
  • Fixed: default layout to show More Info on Left rather than on top
  • Fixed: PHP Warnings visible with WP_Debug
  • Fixed: issues with selected highlight color not always displaying properly

1.0.2

  • Fixed: issue with saving data

1.0

  • Lanzamiento inicial