Cómo crear una barra de progreso dinámica en Elemoror

Elementor tiene un widget nativo llamado Progress Bar. El widget se usa comúnmente para crear una barra que indique el nivel de experiencia en un área determinada (en porcentaje). Por ejemplo, si es diseñador y desea crear un sitio web de cartera con Elementor, puede agregar barras para permitir que sus clientes sepan qué áreas puede servir mejor. Sin embargo, no existe una regla específica sobre cómo puede usar un widget elemental. Puede usar el widget de progreso de acuerdo con lo que necesita o lo que desea. En la barra de progreso del widgets, hay tres elementos para los cuales puede establecer el contenido: título, porcentaje y texto interior. Si usa Elementor Pro, puede crear campos personalizados para completar el contenido de estos elementos dinámicamente.
Ejemplo de uso de la barra de progreso dinámico para suponer que tiene un sitio web en el que sus artículos se dividen en tres categorías principales:
Noticias
Reseñas
Tutoriales
Desea que todos los artículos de revisión se vean diferentes a las noticias y los artículos de tutoriales. También debe agregar los siguientes elementos a la sección final de cada revisión.

Elementor Pro, como probablemente sepa, viene con la función de crear el tema en el que le permite crear plantillas personalizadas para publicaciones de blog, páginas, tipos de publicaciones personalizadas y otros tipos de contenido de WordPress. En combinación con la capacidad de mostrar datos de campo personalizados, puede agregar elementos personalizados a su contenido dinámicamente, incluida la barra de progreso.
Cómo crear una barra de progreso dinámica en Elemoror Paso 1: Cree primero los campos personalizados, debe crear los campos personalizados y establecer el tipo de campo en el número. Puede usar cualquier complemento de campos personalizados que acepten el tipo de campo numérico, como ACF, Jelgine y POPS. En esta publicación, usamos ACF. Si también usa ACF, puede ir a campos personalizados -> Nuevo ADD para crear un nuevo grupo de campo personalizado. Dé un nombre a su grupo de campo personalizado y haga clic en el botón Agregar campo para agregar un nuevo campo. Puede configurar la etiqueta de campo y el nombre de campo en la etiqueta de campo y los nombres de campo. En el campo Tipo de campo, establezca en el número y establezca el valor mínimo y el valor máximo en el valor mínimo y los campos de valor máximo.

Repita los pasos anteriores para agregar más campos.

Una vez que haya terminado de agregar los campos personalizados, vaya a la sección de ubicación para establecer dónde se asignará el grupo de campo personalizado. Si desea que se asigne el grupo de campo personalizado a las publicaciones de blog, puede usar la regla predeterminada. Haga clic en el botón de publicación para publicar el grupo de campo personalizado.

Paso 2: Cree la plantilla personalizada Una vez que sus campos personalizados estén listos, puede comenzar a crear las plantillas personalizadas para los tipos de artículos a los que desea agregar el progreso dinámico. En el elemento, puede crear una plantilla personalizada para artículos basados ​​en los siguientes atributos:

Categorías de publicaciones
Publicar etiquetas
Los autores de las publicaciones
Para crear una plantilla personalizada para artículos de revisión, simplemente puede asignar las plantillas personalizadas en la categoría o etiqueta de revisión, dependiendo del atributo que desee usar. Primero, vaya a plantillas -> Builder de temas. Vaya a la publicación única y haga clic en el botón Agregar nuevo para agregar una nueva plantilla. En el cuadro de diálogo que aparece, proporcione un nombre personalizado su plantilla personalizada y haga clic en el botón Crear Teatblon.
Puede seleccionar una plantilla predeterminada de la biblioteca de plantilla. Si desea crear la plantilla desde cero, simplemente puede cerrar la ventana de la biblioteca de plantillas. Tire de los widgets necesarios que desea agregar al área de la tela y haga la configuración en consecuencia. Puede leer nuestro artículo anterior para obtener instrucciones más detalladas sobre cómo crear una plantilla de publicación personalizada.

Después de haber terminado con los widgets requeridos (publicar título, publicar contenido, imagen presentada, etc.), agregue la barra de progreso al área de lienzo. En el conjunto de configuraciones en la barra de progreso en la pestaña de contenido en el panel de configuración, establezca el título deseado (por ejemplo, diseño).

Luego haga clic en el icono dinámico en la opción porcentual y seleccione el campo Número ACF.

Haga clic en el icono de clave en el campo Número ACF y seleccione la clave (campo personalizado) que desea usar.

Si desea mostrar el valor dado del campo personalizado, puede hacer clic en el icono dinámico en la opción de texto interior y seleccionar el campo ACF.

Haga clic en el icono de clave en el campo ACF y seleccione la clave (campo personalizado) que desea mostrar.

Si desea ocultar el porcentaje, puede seleccionar Ocultar en el menú Drop -down.

Puede repetir los pasos anteriores para agregar más barras. Para ahorrar tiempo, simplemente puede duplicar la barra (que personalizó) y reemplazar el contenido.

Después de haber terminado de personalizar todos los elementos en su plantilla personalizada, haga clic en el botón de publicación en la parte inferior del panel de configuración. Agregue una condición de visualización haciendo clic en Agregar condición desde el cuadro de diálogo que aparece. Establezca donde desee que le asignen la plantilla personalizada. Por ejemplo, puede asignar plantillas personalizadas a publicaciones en la categoría de revisiones, según nuestro tribunal. Termine haciendo clic en Guardar y cerrar.

Paso 3: Cree una nueva publicación de blog una vez que todo esté listo, ahora puede crear una nueva publicación de blog. Asegúrese de agregar los valores a los campos personalizados que creó en el paso uno anterior. Los valores dados se utilizarán para establecer los rellenos de barras.