Cómo crear un gráfico circular en WordPress sin conocimientos de codificación

Mostrar un gráfico circular puede resultar útil para presentar diferentes tipos de datos en una página web. Pero si no eres codificador o no tienes suficientes habilidades de edición de CSS, podría ser un desafío.

¡Por cierto, no con ElementsKit!

Cuando tenga ElementsKit instalado en su sitio web, puede agregar fácilmente un gráfico circular a una página web simplemente arrastrando y soltando.

En esta publicación de blog, aprenderá cómo crear gráficos circulares en WordPress en unos sencillos pasos.

¿Qué es un gráfico circular?

Cuando los datos se presentan gráficamente con diferentes secciones en un círculo se le conoce como gráfico circular. Los datos y el estilo de presentación pueden variar, pero los datos estarán en un círculo gráfico. A veces puedes personalizar los datos del círculo y crear algo único.

¿Cómo crear un gráfico circular en WordPress?

Cree un gráfico circular directamente dentro de su panel de WordPress siguiendo unos sencillos pasos. Siga las pautas que he compartido aquí.

Paso 1: instale los complementos

Aquí nuestro objetivo es crear un gráfico circular en WordPress sin escribir ningún código. Entonces, usaremos los complementos más populares. Elementor Añadir Kit de elementos.

Para ello acude a tu Panel de WordPress > Complementos > Agregar nuevo. Ahora en el barra de búsqueda superior, busque Elementor. Una vez que lo encuentres, instálalo y actívalo.

Del mismo modo, instale y active ElementsKit.

Paso 2: elige la configuración del complemento

Debe establecer algunas configuraciones en el complemento ElementsKit. Para esto, vaya a su panel de WordPress y coloque el cursor sobre ElementsKit. Ahora elija 'Widgets' ya que creará el gráfico circular con el widget de gráfico circular.

En la lista de widgets, active el widget 'Gráfico circular'. Sin embargo, recomendaría activar todos los widgets para obtener la mejor experiencia en la creación de páginas web.

Paso 3: crea una nueva página

Ahora ya está todo listo para crear un gráfico en una página web. Cree una página donde desee mostrar el gráfico con sus datos personalizados. O puede seleccionar una de las páginas existentes.

Cualquiera que sea la página que seleccione para mostrar el gráfico circular, elija 'Editar con Elementor' en la parte superior derecha.

Lo redirigirá a la página del editor donde podrá utilizar todas las funciones de ElementsKit. 

Paso 4: agregar el widget de gráfico circular

En el panel lateral izquierdo, busque el widget de gráfico circular y arrástrelo y suéltelo en la página.

Si lo desea, puede crear un tipo particular de sección antes de arrastrar y soltar el widget en la página.

Para agregar una sección, haga clic en el ícono más y agregue la sección.

Paso 5: personaliza el gráfico circular

De forma predeterminada, habrá algunas configuraciones previas en el gráfico circular. Puede personalizar estas configuraciones con unos pocos clics.

En la pestaña de contenido, puede cambiar el estilo del gráfico circular, el contenido del gráfico y el porcentaje del gráfico.

Estilo de gráfico circular: Aquí puedes elegir simple o Con contenido.

Contenido del gráfico: En esta sección, puede utilizar un porcentaje o un icono para el gráfico. Si elige un ícono, mostrará múltiples opciones para personalizarlo. Cargue un ícono personalizado para mostrarlo en el gráfico.

Porcentaje: Aquí puede seleccionar y establecer el porcentaje del gráfico.

A continuación, vaya a la pestaña de estilo para aplicarle un estilo al gráfico.

Tamaño del gráfico circular: Ajuste el tamaño del gráfico circular si lo desea. Puedes anotar el tamaño o arrastrar la barra para aumentar o disminuir el tamaño.

Tamaño del borde: Establezca el tamaño del borde aquí con la barra de ajuste.

Tipo de color: Elija un color personalizado para el gráfico que desee.

Color de la barra: Agregue el color de la barra que se ajuste adecuadamente al diseño de la página.

Color de fondo de la barra: Agregue un color de fondo al gráfico circular para que se vea mejor.

Color del icono: Si ha agregado un ícono para el gráfico, aquí puede elegir un color personalizado para él.

Si desea una mayor personalización, vaya a la configuración avanzada y realice los cambios necesarios para que el gráfico sea fácil de usar.

Paso 6: personaliza la perspectiva de la página

También puedes personalizar la perspectiva de la página con Elementor. Para ello, en la parte superior de la sección, hay un botón de puntos. Haga clic en él y lo redireccionará a la pestaña de diseño.

Obtendrá todas las opciones para personalizar el diseño de la página.

Paso 7: vista previa y publicación

Finalmente, si has hecho todo correctamente, consulta la vista previa del gráfico circular. Si se ve perfecto, presione el botón publicar.

Algunos recursos adicionales que le gustaría leer:

Cómo crear el sitio web de una agencia de marketing digital [estilo sin código]

Cómo crear un sitio web empresarial de limpieza en WordPress

Cómo crear una página de carrera en su sitio web de WordPress

¿Por qué debería utilizar un gráfico circular en su sitio web?

Los gráficos circulares hacen que la información de un sitio web sea fácil de entender. Utilizan colores y formas para mostrar porcentajes y comparaciones, lo que facilita a los visitantes la comprensión de datos complejos. Al utilizar gráficos circulares, puede hacer que su sitio web sea más interesante y ayudar a las personas a comprender mejor la información.

Ultimas palabras

Crear un gráfico circular no será una tarea difícil para usted. Simplemente usa el poder. de ElementsKit. Al igual que los complementos convencionales, no es para un solo tipo de tarea. Puedes diseñar un sitio web completo solo con ElementsKit. Entonces, anímate y comienza a darle la forma perfecta a tu sitio web.