Cómo crear tablas y gráficos en WordPress

¿Existe una mejor manera de comprender los datos, la relación entre diferentes puntos de datos, así como el cambio de valor a lo largo del tiempo que usando tablas y gráficos? Cuando se trata de presentar algo tan seco y poco emocionante como los números, no hay nada como una elegante representación visual para hacerlo más consumible.

Los creadores de temas de WordPress lo saben, como es evidente por la variedad de temas con soporte de gráficos. Sin embargo, cuando estábamos creando nuestro complemento Qi Addons para Elementor, queríamos dar un paso más. Entonces, entre los sesenta complementos gratuitos de Elementor que obtienes con el complemento: el paquete gratuito más grande que encontrarás en línea – hay complementos de tablas y gráficos.

En este artículo, nos centraremos en el que te permite crear gráficos. Hay tantas cosas increíbles que puedes hacer con él que hemos decidido mostrar cómo crear dos hermosos gráficos que puedes ver en la página del complemento. Hemos ido tan lejos como para crear un video que detalla el proceso, aunque en un orden de presentación ligeramente diferente, y puede verlo aquí:

Pero si mirar un video no es lo tuyo y leer un artículo lo es, puedes omitir el video por completo y simplemente continuar leyendo. Lo que espera es lo siguiente:

Agregar un gráfico en WordPress

Gráficos

Antes de que pueda agregar un gráfico en WordPress usando el Complementos Qi para Elementor y su widget de gráfico, deberá instalar y activar el Creador de páginas Elementor enchufar. Puede encontrarlo fácilmente en WordPress.org o navegando a Complementos> Agregar nuevo y buscándolo. El complemento es de uso gratuito hasta el momento en que decida que necesita las funciones que solo están disponibles para los clientes que pagan. En lo que respecta a los Qi Addons, funcionarán bien con cualquiera de las versiones. Y si es completamente nuevo en Elementor, es posible que desee leer nuestra guía de Elementor.

Después de instalar ambos complementos, puede crear una nueva página o editar una existente para agregar los gráficos que ha visto en la página de inicio del complemento Graph. Hemos creado una nueva página y también hemos creado una sección de dos columnas para albergar nuestros dos gráficos.

Columnas Elementor

Después de encontrar el widget de Gráficos y moverlo a una columna libre, podrá vislumbrar algún contenido de marcador de posición. Le mostraremos cómo lo convertimos, paso a paso, en el primero de los dos gráficos que estamos usando para inspirarlo a crear sus increíbles gráficos.

Editar el contenido del gráfico de líneas

Editar gráficos

Desde el principio, notará las tres líneas que representan los conjuntos de datos. Sus opciones contienen la mayor parte de las configuraciones que puede cambiar con respecto al contenido del gráfico. Sin embargo, primero preste atención a las etiquetas de datos que se encuentran debajo del gráfico, a lo largo del eje X del gráfico. Actualmente, dicen «1 mes», «3 meses», etc.

Para cambiar esas etiquetas de datos, todo lo que necesita hacer es ingresar las nuevas en el menú General de las opciones de Contenido, justo debajo de los elementos. Sin embargo, asegúrese de separarlos con una coma. Los cambiaremos a «Uno», «Dos», «Tres», «Cuatro», «Cinco».

En relación :  Cómo reemplazar archivos de imagen y multimedia en WordPress
Etiquetas de datos de gráficos

Avanzando, podrá configurar los elementos del gráfico o agregar nuevos usando el botón Agregar elemento. Al editar los elementos, notará un par de cosas muy importantes. El primero son los valores del conjunto de datos, los valores que establecen la curvatura de la línea en este tipo de gráfico. También verá las etiquetas del conjunto de datos, que le permiten etiquetar cada elemento de una manera que será visible en una leyenda cuando lo habilite en las opciones de estilo. También notará las opciones de color, los modos de relleno, el área y los colores del área de cobertura. Algunas de estas opciones son para gráficos de líneas y algunas son solo para gráficos de barras.

Opciones de elementos de gráficos

Para obtener el tipo de gráfico que queríamos, hemos cambiado los valores del conjunto de datos a 39, 62, 64, 51 y 58. Hemos cambiado el nombre de la etiqueta del conjunto de datos a Fotografía. El color que elegimos tiene un código hexadecimal de # 888db3, y también lo usamos para el color del área. Le hemos dado a los modos de llenado un valor de +1, para colorear el área entre las líneas uno y dos. Esto es lo que obtuvimos después de todos estos cambios.

Opciones de elemento de cambio de gráficos

Pasando al segundo elemento, le hemos dado los valores del conjunto de datos de 39,59,58,44,54, la etiqueta de Dirección de arte, # c1c3c7 como color de línea y área, y también hemos establecido el modo de relleno en +1.

Segundo elemento de gráficos

Para el tercer elemento, hemos utilizado 39, 57, 55, 38 y 45 como valores de conjunto de datos, y le hemos dado la etiqueta de Diseño web. El color que elegimos fue # EDEDED99; tiene algo de transparencia y hemos configurado el modo de relleno en «origen» para obtener este efecto realmente nítido.

Gráficos tercer elemento

Con eso, hemos realizado los cambios de contenido en el primer gráfico y podemos pasar a diseñarlo.

Aplicar estilo al gráfico de líneas

Ficha Estilo de gráficos

Cuando vaya a las opciones de Estilo, lo primero que podrá elegir es el estilo de gráfico que desea crear. En este momento, le mostramos cómo hemos creado un gráfico de líneas. En un momento, le mostraremos cómo hemos creado un gráfico de barras. Podrá elegir la alineación del gráfico, su tamaño, así como el ancho del borde, el ancho de las líneas. Hemos establecido el tamaño del gráfico en 87% y el ancho del borde en 3 píxeles.

Estilo de gráficos

Las siguientes en la línea son las opciones de Estilo de leyenda. Todas esas etiquetas de conjuntos de datos que hemos estado eligiendo comenzarán a aparecer ahora. Las opciones que tiene a su disposición incluyen habilitar la leyenda del gráfico, eligiendo su posición y alineación. Hemos habilitado la leyenda en nuestro gráfico, elegimos su posición para estar en la parte inferior y nos quedamos con la alineación predeterminada.

Estilo de leyenda de gráficos

En cuanto a la barra de leyenda, podrá elegir su ancho, alto y margen. Para ancho y alto, hemos elegido 8 píxeles. Hemos establecido el margen en 40 píxeles.

En relación :  PUBG New State permite a los jugadores revivir a los enemigos derribados y reclutarlos como compañeros de equipo
Estilo de leyenda

El conjunto final de opciones de Estilo de leyenda le permite establecer el color, la fuente, el tamaño y el peso de la etiqueta. Hemos establecido el color en # 1e1e1e, la fuente en DM Sans, el tamaño de fuente en 16 píxeles y el peso de fuente en medio.

Estilo de leyenda

En el conjunto final de opciones de Estilo, el Estilo de marca, podrá establecer el valor mínimo y máximo que se muestra en el eje Y, así como el tamaño de paso que desea mostrar. Lo hemos hecho para que muestre valores de 0 a 80 en pasos de 20.

Estilo de tick de gráficos

Editar y aplicar estilo al gráfico de barras

Barra de gráficos

Ahora que ya está familiarizado con las opciones que tiene a su disposición, podemos acelerar el ritmo para mostrarle cómo crear el gráfico de barras. Después de encontrar el complemento Graphs nuevamente y arrastrarlo a la otra columna disponible, Fuimos directamente a la pestaña Estilo y cambiamos el Tipo de gráfico a Barra. Volviendo a la pestaña de estilo, hicimos un par de cambios: eliminó uno de los elementos y configuró las etiquetas de datos en «Uno», «Dos», «Tres» y «Cuatro».

Elementos de la barra de gráficos dos
Vista previa de dos elementos de la barra de gráficos

De vuelta en la pestaña Estilo, hemos cambiado el tamaño del gráfico del nuevo gráfico al 85%. Hemos establecido el Ancho del borde y el Ancho del borde flotante en cero. Hemos establecido el tamaño de la barra, que determina cuánto de su espacio asignado ocupará una sola barra, en 0,88. El Tamaño de la categoría, que determina cuánto de su espacio asignado ocupará un grupo de barras, se estableció en 0.6.

Ficha Estilo de barra de gráficos
Vista previa de la pestaña Estilo de barra de gráficos

En el estilo de leyenda, prácticamente hemos copiado los valores del gráfico anterior. Hemos habilitado la leyenda y la hemos colocado en la parte inferior. Hemos establecido el ancho y el alto de la barra en 11 píxeles y el margen en 40. El color que elegimos para la etiqueta fue # 1e1e1e, la fuente DM Sans, el tamaño de fuente 16 y el peso medio. También hemos copiado el estilo Tick, con valores de 0, 80 y 20.

Estilo de marca de barra de gráficos
Vista previa del estilo de marca de la barra de gráficos

Volviendo al contenido, es hora de configurar los elementos a sus nuevos valores. El conjunto de datos que usamos para el primer elemento es 63,38,24 y 56. La etiqueta es Fotografía y hemos usado # 888DB3 como nuestro color de elección tanto para el Color del área como para el Color del área de desplazamiento.

Elemento de barra de gráficos
Estilo de elemento de barra de gráficos

Para el segundo artículo, los valores del conjunto de datos son 45, 76, 48 y 36. Cambiamos la etiqueta a Dirección de arte y los colores del área y del área de desplazamiento a # c1c3d7. Con eso, puede obtener una vista previa y ver los resultados de su trabajo; deben coincidir estrechamente con el ejemplo que puede ver en la página del widget.

Vista previa final de gráficos

¡Vamos a envolverlo!

Si alguna vez necesita crear un cuadro o gráfico, el complemento Qi Addons para Elementor tendrá el complemento adecuado para usted. Le hemos mostrado cómo puede crear gráficos asombrosos con solo unas pocas opciones; no hay nada más fácil ni más bonito que esto. Entonces, si hay datos que necesita que se muestren visualmente, no lo dude y obtenga el paquete gratuito más grande de complementos de Elementor del mundo. Lo obtendrá para los gráficos y continuará usándolo para los 59 complementos restantes.