Cómo agregar cuadros, gráficos y tablas de datos a WordPress de forma gratuita

agregar gráficos a wordpress

Ya sea que realice encuestas, recopile datos o realice estudios estadísticos, crear cuadros y gráficos es la mejor manera de presentar información de manera efectiva en su sitio web de WordPress de manera visual. Le permite convertir conjuntos de datos y hallazgos complejos en información fácil de entender.

En esta publicación, le mostraremos cómo puede crear tablas y gráficos interactivos y dinámicos y agregarlos a su sitio web de WordPress usando la herramienta gratuita. Visualizador enchufar. Antes de comenzar, repasemos rápidamente algunas de las razones principales por las que debería crear cuadros y gráficos directamente en WordPress en lugar de utilizar creadores de gráficos o software de gráficos.

Enlaces rápidos:

Por qué debería utilizar un complemento para crear cuadros y gráficos en WordPress

Si crea cuadros y gráficos con regularidad para agregarlos a su sitio web, es probable que utilice una herramienta como Excel o Google Sheets. El problema con este enfoque es el flujo de trabajo y el proceso:

  1. Cree cuadros (o gráficos) en Excel o Google Sheets.
  2. Tome una captura de pantalla del cuadro (o gráfico).
  3. Súbelo como una imagen a tu sitio web de WordPress.

Este enfoque es excelente para cualquiera que cree gráficos ocasionalmente. Pero, ¿qué sucede si desea que sus gráficos sean nativos del sitio, tengan cierta interactividad, respondan a dispositivos móviles y tal vez incluso se actualicen desde una fuente de terceros en tiempo real? Si eso le suena familiar, entonces es una mejor idea utilizar un complemento de gráficos y tablas de WordPress, como Visualizador.

Aquí hay algunas razones más por las que debería considerar usar un complemento para crear cuadros y gráficos directamente en WordPress:

  • Le permite crear gráficos y publicarlos desde un solo lugar. Si tiene que crear cuadros y gráficos con regularidad, esto le ayudará a ahorrar mucho tiempo y mejorar su flujo de trabajo.
  • Le permite abrir fácilmente un proyecto y realizar cambios y modificaciones rápidos. Al trabajar con Excel o Google Sheets, tendría que regresar y buscar el archivo en el que estaba trabajando, realizar los cambios necesarios, tomar una nueva captura de pantalla y subirlo a su sitio web nuevamente.
  • Acceso a funciones interactivas para hacer que sus cuadros y gráficos sean más interesantes. Simplemente no puedes agregar elementos interactivos a imágenes o capturas de pantalla.
  • Facilita la colaboración con otros usuarios. Por ejemplo, si necesita que los autores o editores revisen el gráfico (y realicen cambios o adiciones), es mucho más fácil si todos pueden modificar el mismo gráfico para que no tenga varias versiones flotando.

En pocas palabras, un complemento de gráficos y tablas de WordPress ayuda a simplificar su flujo de trabajo y
viene con la mayoría de las funciones que necesitará para agregar gráficos atractivos (e interactivos) a su sitio web de WordPress.

Leer:  Consejos de SEO para aumentar el tráfico de su sitio web de WordPress

Presentamos Visualizer: Administrador de tablas y gráficos para WordPress

El pasillo Visualizador: Administrador de tablas y gráficos para WordPress es un complemento liviano que permite a los usuarios crear cuadros, gráficos y tablas directamente desde su sitio web de WordPress.

visualizador

El complemento presenta una interfaz fácil de usar que permite a los usuarios crear, administrar e incrustar imágenes interactivas en publicaciones y páginas. Desde el primer momento, Visualizer viene con ocho tipos de gráficos diferentes:

  1. Mesa
  2. Gráfico circular/anular
  3. Gráfico de linea
  4. gráfico de área
  5. gráfico geográfico
  6. Gráfico de barras
  7. Gráfico de columnas
  8. gráfico de dispersión

Podrás personalizar las tablas, cuadros y gráficos que crees cambiando sus colores, agregando u ocultando texto y usando diferentes fuentes. Además de esto, cada gráfico tiene sus propias opciones que le permiten personalizar su apariencia.

Además de esto, también puedes cambiar el tipo de gráfico que se muestra en la interfaz de tu sitio web. Por ejemplo, puede convertir fácilmente un gráfico circular en un gráfico de líneas simplemente haciendo clic en el botón Editar y eligiendo el tipo de gráfico al que desea cambiar. Las tablas, cuadros y gráficos que crea con Visualizer se representan utilizando tecnología HTML5 y SVG. En otras palabras, son totalmente responsivos y portátiles multiplataforma.

El complemento Visualizer también tiene una versión premium, Visualizador Pro, que comienza en $59 por una licencia de sitio único. La versión premium del complemento desbloquea tipos de gráficos adicionales (gráfico de indicadores, gráfico de velas japonesas, línea de tiempo, combo, área polar y gráfico de radar/araña) y ofrece funciones avanzadas que incluyen:

  • Otorgar a los usuarios permisos de edición.
  • Creación de gráficos y tablas privados.
  • Sincronice gráficos automáticamente con su archivo en línea.
  • Acceso al editor en vivo para editar datos de forma rápida y sencilla.
  • Importar datos directamente desde otros gráficos.

Ahora que sabemos qué es el complemento Visualizer y qué puede hacer con él, veamos un rápido tutorial paso a paso que explica cómo comenzar a crear cuadros y gráficos en WordPress.

Cómo crear cuadros y gráficos en WordPress usando Visualizer

Visualizer es uno de los mejores (y más intuitivos) complementos disponibles para crear tablas, cuadros y gráficos en WordPress. Aquí, lo guiaremos a través del tutorial paso a paso para crear cuadros y gráficos visualmente atractivos y mostrarlos en la interfaz de su sitio.

Paso #1: Instalar y activar el complemento

El primer paso es instalar el complemento Visualizer en su sitio web de WordPress. Dado que este es un complemento gratuito, puede hacerlo directamente desde el panel de administración dirigiéndose a Complementos > Agregar nuevo.

1 visualizador de instalación

Una vez que haya instalado el complemento, haga clic en
Activar botón. Notarás que se agrega un nuevo elemento de menú al menú de la barra lateral llamado Visualizador.

Paso 2: agregar un nuevo gráfico

Una vez que haya instalado el complemento Visualizer, haga clic en el Visualizador elemento de menú desde el panel de administración para acceder a Biblioteca del visualizador.

2 biblioteca de visualizadores

Desde aquí, haga clic en el Agregar nuevo para comenzar a crear su primer gráfico.

En la pantalla emergente, verá algunos tipos de gráficos diferentes para elegir.

3 elige el tipo de gráfico

Haga clic en el botón de opción junto al tipo de gráfico que desea agregar a su sitio web de WordPress. A los efectos de este tutorial, lo demostraremos creando un gráfico de columnas simple. Clickea en el Próximo en la parte inferior de la pantalla para continuar.

Leer:  Complementos de WordPress para Amazon

Paso 3: importar datos al gráfico

En este paso, le mostraremos cómo puede importar datos y agregarlos a su tabla, cuadro o gráfico. Visualizer agrega automáticamente datos de muestra a su gráfico para que pueda ver cómo se vería en la interfaz.

4 datos de importación

Para reemplazar los datos ficticios con los suyos propios, puede elegir uno de los siguientes métodos de importación de datos:

  • Importar datos desde un archivo
  • Importar datos desde URL
  • Importar desde otro gráfico (disponible con la versión Pro)
  • Importar desde WordPress (disponible con la versión Pro)
  • Importar desde base de datos (disponible con la versión Pro)
  • Importar datos manualmente

Para fines de demostración, importaremos un conjunto de datos desde un archivo CSV. Para hacer esto, haga clic en el Elija el archivo botón debajo del Importar datos desde un archivo opción y busque el archivo CSV en su escritorio. presione el Importar botón para continuar.

5 vista previa del gráfico de nuevos datos

En el panel izquierdo, debería poder ver una vista previa de cómo se verán los nuevos datos importados. Si necesita realizar cambios en su conjunto de datos, puede actualizar su archivo CSV y volver a importarlo.

Consejo profesional: Si no está seguro de cómo formatear los datos de su archivo CSV, puede descargar un archivo CSV de ejemplo desde el complemento. Una vez que haya seleccionado el tipo de gráfico, habrá un enlace de texto al CSV de ejemplo en el panel derecho de la ventana emergente (como se muestra arriba). Haga clic en aquí para descargar el ejemplo del archivo CSV correspondiente.

Paso #4: Personaliza el gráfico

Ahora que seleccionó un tipo de gráfico e importó su conjunto de datos, puede personalizar su tabla, cuadro o gráfico. Así es cómo:

Desde la misma pantalla, verás un enlace llamado Avanzado directamente debajo de las opciones de importación de datos. Haga clic en el enlace para revelar las opciones de personalización disponibles para el tipo de gráfico que elija.

6 configuraciones de gráficos

En términos generales, debería ver configuraciones generales (títulos de gráficos, fuentes, leyendas, información sobre herramientas y animaciones), acciones de interfaz, configuraciones manuales y configuraciones de tamaño y ubicación de gráficos. Dependiendo del tipo de gráfico que elija crear, es posible que vea opciones ligeramente diferentes debajo del Configuración del gráfico sección.

Una de las características más destacadas que obtiene con Visualizer es su capacidad de permitirle habilitar opciones de interfaz para sus gráficos. Puede acceder a estas configuraciones dirigiéndose a Configuración del gráfico > Acciones frontales > Comportamiento.

7 acciones frontales

Las opciones disponibles incluyen:

  • Imprimir. Para habilitar la impresión del gráfico o tabla.
  • CSV. Para permitir la descarga de datos como CSV directamente desde el front-end.
  • Sobresalir. Para habilitar la descarga de los datos como una hoja de cálculo de Excel.
  • Copiar. Para habilitar la copia de datos al portapapeles.

Cuando haya personalizado su gráfico y haya habilitado todas las opciones de interfaz que desea que estén disponibles, haga clic en el Crear gráfico botón.

Paso 5: agregue el código corto del gráfico a una página o publicación

Una vez que haya creado el gráfico, será redirigido automáticamente a la Biblioteca del visualizador pantalla desde la que empezó. Debería poder ver el cuadro o gráfico que acaba de crear. El siguiente paso es agregar el gráfico al front-end de su sitio. Para esto, deberá copiar el código abreviado del gráfico. Esto es lo que debes hacer:

Leer:  Cómo ver cuentas privadas de Instagram en 2024 de forma sencilla

Debería poder ver el código abreviado del gráfico en la esquina inferior izquierda del gráfico, directamente debajo de la vista previa. Simplemente cópialo en tu portapapeles.

Código corto de 8 gráficos

A continuación, cree una nueva publicación o página donde le gustaría agregar el gráfico. (Como alternativa, puede abrir una publicación o página existente). Simplemente pegue el código abreviado del gráfico donde desee mostrar el gráfico.

9 agregar código corto para publicar

Haga clic en el Avance para obtener una vista previa de su publicación o página en la interfaz de su sitio. Debería verse así:

10 tabla de vista previa

Deberías tomarte un momento para asegurarte de que todo funcione correctamente (por ejemplo, animaciones y opciones de front-end). Si todo se ve bien, puedes seguir adelante y Publicar
la publicación o página.

Sin embargo, si necesita realizar modificaciones en su tabla, cuadro o gráfico, simplemente regrese a Visualizador > Biblioteca de gráficos
desde el panel de administración y edite su gráfico. Puede personalizar aún más el gráfico, habilitar (o deshabilitar) opciones, cambiar las posiciones de la leyenda e incluso reemplazar el conjunto de datos.

Dado que el shortcode del gráfico sigue siendo el mismo incluso después de editarlo, no tendrás que volver a la publicación o página y actualizarla manualmente. Cualquier cambio que realice en el gráfico desde Visualizer se reflejará automáticamente en la interfaz de su sitio.

Ejemplos de gráficos interactivos

A continuación se muestran algunos ejemplos interactivos en vivo de tablas, cuadros y gráficos que puede crear utilizando el versión gratuita del complemento Visualizer:

Demostración de gráfico circular

Demostración de gráfico geográfico

Demostración de gráfico de columnas

Demostración de gráfico de líneas

Demostración del gráfico de áreas

Demostración de gráfico de barras

Demostración del gráfico de dispersión

Ejemplo de tabla de datos

Conclusión

Es posible que Excel o Google Sheets no sean la forma más eficiente de agregar tablas, cuadros y gráficos a su sitio web de WordPress, especialmente si necesita hacerlo con frecuencia. En su lugar, recomendamos utilizar la versión gratuita. Visualizadorcomplemento que te permite:

  • Cree, edite y administre todas sus tablas, cuadros y gráficos sin tener que salir de su sitio web de WordPress.
  • Ofrezca mejores experiencias de usuario incorporando gráficos interactivos y visualmente atractivos en sus publicaciones y páginas.
  • Personalice fácilmente los cuadros y gráficos que cree para que coincidan con la marca de su sitio.
  • Habilite opciones de interfaz que permitan a los visitantes imprimir gráficos, descargar conjuntos de datos (como archivos CSV y hojas de cálculo de Excel y copiar datos directamente a su portapapeles).

Y, cuando esté listo para llevar las cosas al siguiente nivel, puede actualizar a Visualizador Pro para desbloquear tipos de gráficos adicionales y acceder a funciones avanzadas. ¿Cuáles son algunos de los diferentes tipos de cuadros y gráficos que necesita agregar a su sitio web de WordPress? Háganos saber comentando a continuación.

Nuevas Publicaciones:

Recomendamos