Cómo crear el flujo de pasos utilizando el widget del proceso de elemento elemental

Independientemente del tipo de sitio web que tenga, es esencial no solo tener contenido de calidad, sino también poder mostrarlo de manera atractiva. Afortunadamente, muchas herramientas nos permiten compartir una amplia gama de información y datos creativamente. Puede agregar un efecto de paralaje para resaltar el tono moderno de su sitio, puede usar conmutadores y acordeones para obtener una mejor estructura de contenido, y los widgets de procesamiento son preciosos, ya que nos permitimos mostrar datos complejos de una manera clara, interesante y cautivadora. . Si tiene algún tipo de contenido que implique mostrar un tipo de proceso, es esencial que pueda compartirlo con los usuarios de una manera simple, clara y concisa, pero no pierda ningún detalle importante al respecto. Las tiendas en línea encontrarán un valioso widget de proceso, ya que se puede utilizar para mostrar el proceso de compra en línea, las corporaciones pueden compartir cómo se ve el procedimiento de empleo en su empresa, los sitios web médicos pueden presentar el proceso de curación, cualquier tipo de flujo de trabajo puede ser visualmente Representado por fases: las posibilidades son ilimitadas.
En este artículo le mostraremos cómo establecer y personalizar fácilmente el widget del proceso en su sitio web. Manténgase en fase para leer más sobre:
Addons Qi para el widget de proceso Elementor
Proceso de widget: opción para la pestaña de contenido
Procesamiento de widgets – opción para la pestaña de estilo
Ejemplos

ADONS Qi para el widget de proceso de elemento
Los complementos de Qi para Elementor son un poderoso, versátil y muy fácil de usar, que agrega un aire de elegancia además de la funcionalidad de su sitio. Esta vez, esta herramienta es la mayor colección de suplementos gratuitos en la web e incluye 60 de gratis Los widgets que facilitan incluso para los principiantes enriquecen completamente sus sitios web con elementos eficientes sin el conocimiento de codificación necesario. El widget de proceso que se incluye viene con muchas opciones de personalización y le permite crear hermosas pantallas con todo tipo de trabajo y procesos, que se ajustan perfectamente a las necesidades y el estilo de su sitio. Deslice el widget del proceso en el lado, Obtendrá la vista predeterminada que puede editar. Es importante tener en cuenta que el widget usa las fuentes utilizadas por su tema, por lo que si desea uniformidad en esta parte, no tendrá que cambiarlo.

Las opciones para configurar el widget de proceso son las opciones de contenido y estilo. Aquí elegiremos qué elemento queremos en nuestro widget de proceso y determinaremos cómo se verá todo. Hay muchas configuraciones de personalización, pero están tan bien organizados que encontrará muy fácil de probar y experimentar con opciones.

widget de proceso – opción para la pestaña de contenido

Aquí hay opciones generales, opciones de animación, aspecto de proceso y una herramienta útil para los desarrolladores, pero también ayuda donde puede encontrar instrucciones y asistencia del autor del suplemento.
Opciones generales
Lo primero que necesita es configurar es la configuración general del widget.
Aquí elegimos el número de columnas y si desea que todos sus artículos estén en una fila, seleccionará el número de artículos para el número de columnas. De lo contrario, si coloca menos columnas que el elemento, los artículos estarán en 2 o más filas, o si selecciona más columnas que el artículo, permanecerá con un espacio vacío en una fila. Probablemente sabrá cuántos elementos usted Desea tan pronto como comience a construir esto, por lo que me gusta configurarlo de inmediato y, por supuesto, puede personalizar estas configuraciones más adelante. Una configuración significativa son las columnas receptivas, donde ajustamos la forma en que nuestro proceso se verá en dispositivos de diferentes tamaños. Puede seleccionar predefinidos o personalizados, es su elección basada en nuestra experiencia, el tamaño de 618-768px se ve mejor cuando usa una sola columna, por lo que lo puse.

Los elementos de curso sirven para agregar un elemento al proceso. Puede agregar todo lo que necesite. Hay una opción tanto para copiar el elemento como para eliminarlo.
Cada artículo se personaliza por separado, se introducen sus características específicas y puede establecer ciertos artículos para cada artículo para que cada elemento se vea diferente. Sin embargo, si desea que todos los artículos se vean iguales, especificará su estilo en opciones de estilo, no en todos los artículos individuales. Todo lo que se establece en opciones de estilo se aplica a todos los elementos de proceso, excepto aquellos en los que el artículo en sí es fácilmente diferente en relación con la configuración de estilo. Todo te quedará claro cuando pasemos por la configuración. Los campos de título y texto se utilizan para ingresar texto que acompaña un cierto paso del proceso. Por supuesto, es natural en este caso que cada paso tenga un título y descripción diferentes, por lo que este es el único lugar donde puede ingresar estos valores. Por lo tanto, se reemplaza con nuestro texto.

Las opciones del artículo se refieren a la parte del artículo que no es el título y la descripción. Utilizamos el elemento de compensación para colocar un elemento. El círculo con la unidad y la línea que conduce al siguiente paso es parte de un artículo y al ajustar el espacio, movemos estos elementos hacia abajo o hacia arriba. Como puede ver en la imagen, hemos establecido una compensación para el primer artículo y ahora está ligeramente por debajo del nivel del siguiente artículo. La opción de compensar el artículo también existe en opciones de estilo, que, como se mencionó, cualquier conjunto allí se aplica a todos los elementos de proceso. Por lo tanto, si desea que todos los elementos estén en un plan diferente para cada artículo, establecerá la brecha separada.

El tamaño del titular del artículo es el tamaño del campo en el que actualmente es 1, es decir, el número de pasos, y luego veremos qué se puede encontrar aquí. (Esta opción también se encuentra en opciones de estilo si queremos que todos los artículos para los artículos sean del mismo tamaño). La tipografía del artículo se refiere a las características tipográficas del número de pasos. El fondo tiene el papel de asignar el color o fondo correspondiente. También podemos establecer un fondo con gradiente. Si queremos que todos los elementos tengan los mismos antecedentes, lo ajustaremos en opciones de estilo, si queremos que los antecedentes sean diferentes para un artículo diferente, lo ajustaremos a través de la configuración del artículo. Por ahora, solo agregaremos El color de fondo.

Por defecto, los elementos se muestran como círculos, pero si desea un cuadrado o una forma con ciertos ángulos, el soporte del artículo es el lugar donde lo ajustará. Cuando el valor es 0, entonces es el cuadrado de los ángulos correctos. Al agregar valores, verá cómo cambian los ángulos. Si elimina los valores, obtenga un círculo nuevamente. No todos los ángulos deben ser los mismos, puede establecer un valor diferente para cada ángulo. El tipo de borde, ancho y color se refiere a los elementos fronterizos. Cuando no quieres un borde, entonces el borde es tipo ninguno.

También tiene todas estas configuraciones en opciones de estilo, si desea que todos los elementos sean los mismos.

Acabamos de ver cómo cambiar el desplazamiento y ahora tenemos dos opciones que nos permiten cambiar la posición de la línea que conduce al siguiente proceso. El desplazamiento superior de la línea se usa para mover la posición de la línea (arriba/abajo), y la rotación de la línea se usa para pudrirse. Como puede ver en la nota a continuación, giré la línea y ya no estoy en ángulo con el artículo. Tiene estas configuraciones solo para el elemento en sí. El que nos ha extrañado intencionalmente al principio es la opción del icono, sirve para agregar un icono de biblioteca al artículo o cargar nuestro icono SVG.

Preste atención a lo que sucede a continuación, el número ordinal de pasos ya no está escrito en el centro del artículo, sino como un círculo separado adicional. Ahora la tipografía del artículo y el color del artículo se refieren al ícono en sí. Aquí ajustaremos el tamaño (en el tamaño de la tipografía) y el color para cada icono.

Otra cosa que no analicé más detallada anteriormente es la imagen de fondo del artículo, como en el caso del segundo artículo del ejemplo:
Cada imagen de fondo lleva consigo ciertas configuraciones con respecto al posicionamiento de la imagen, su tamaño y, si será un efecto simple o con efecto de desarrollo (opción de archivo adjunto). Tendrá todas estas opciones cuando use una imagen de fondo.

Después de establecer las opciones generales, nuestro widget de proceso se ve así:

Aparecen las opciones de animación

El widget del proceso puede tener una animación: los artículos se cargan uno tras otro y aparecen en el mismo orden, y este es el lugar donde ajustaremos si lo queremos o no.

Opciones de apariencia


Hay dos aspectos de apariencia: visualización horizontal y vertical del proceso. Hasta ahora, he mostrado todo horizontalmente. Sin embargo, si opta por la pantalla vertical, las opciones son exactamente las mismas. Lo único a lo que debe prestar atención es la cantidad de columnas (hablé de ello en opciones generales). El proceso vertical siempre tiene una columna si queremos que los artículos se organicen uno debajo de la otro en una columna. Debido a que establecemos tres columnas para nuestro ejemplo, porque tenemos 3 elementos, sin ir a una sola columna, nuestro widget se ve así: por supuesto, si creamos una sola columna, todo será como debería ser:

Herramientas de desarrollo

Esta opción nos brinda la oportunidad de ver el widget en forma de shortcode si lo necesitamos.
Ayuda

Como mencionamos, aquí podemos encontrar documentación y ayuda del autor del propio widget.
Widget de procesamiento – Opción para la pestaña de estilo

La pestaña de estilo ofrece opciones para estilizar las fiestas. Como ya hemos mencionado, todo lo que se establece aquí se aplicará a todos los artículos en nuestro proceso, excepto aquellos donde algo diferente se establece en el artículo en sí.

Opciones de estilo
Aquí puede encontrar varias opciones repetidas de los artículos en sí, como las relacionadas con los colores, la tipografía, los huecos. Lo único que no está en los artículos es la alineación que especifica cómo se centrarán el título y el texto. Si desea que todos los artículos sean los mismos, ajustará el estilo aquí. En nuestro caso, hemos ajustado en gran medida los elementos, porque tenemos diferentes colores de fondo, dimensiones y diferentes posiciones. Lo que establecí aquí es el color del artículo, es decir, el color del icono que era predeterminado gris y ahora es negro para nosotros.

Estilización de la línea de proceso: tenemos varios tipos, podemos ajustar el color y el grosor.
Estilo de espaciado

Espacio, espacio sobre el subtítulo, sobre el texto y llenando alrededor del texto. Este relleno alrededor del texto de alguna manera sirve al “estrechamiento” del contenido, colocando el relleno en un campo donde el texto no será posible.
Estilo adicional
Solo tenemos estas configuraciones cuando nuestro artículo contiene un icono insertado, es decir, cuando tenemos este campo adicional en el que el número es. La configuración se refiere a ese número y al campo en el que lo están. El color del soporte adicional es el color del campo en el que el número y la tipografía del soporte adicional están relacionados con ajustar la apariencia del número en sí. El tamaño adicional del titular es el tamaño del campo y con la posición adicional del soporte podemos cambiar la posición del campo. También podemos agregar un fondo para el campo de elementos ordinarios, pero no podemos agregarlo para cada campo individual aquí, se aplicará a todos los campos en general. Agregué una imagen de fondo.
Ejemplos

Veamos si nos entendemos bien y, según la presentación, podemos ver cómo se han realizado ciertos procesos.Esto puede ayudarte a crearte y saber dónde establecer qué.Ya he mostrado un ejemplo de horizontal.Lo que podemos ver a primera vista es que tenemos 3 columnas y en ellas, los artículos en los que hay íconos: un campo adicional con el número nos dice que el artículo es un icono y no una imagen porque dije que solo aparece. .Debido a que los artículos tienen diferentes colores, sabemos que estas configuraciones se han hecho en los elementos mismos, no en las opciones generales.También podemos ver que el desplazamiento es ajustable porque no todos los artículos están en el mismo plano.Todos los íconos y textos tienen los mismos colores, lo que nos dice que esto está establecido en las opciones de estilo.
El segundo ejemplo, aunque parece más complicado, es aún más fácil de ejecutar. Aquí, la fila de la página se divide en dos partes. A la izquierda está la imagen, y a la derecha está el proceso. El proceso tiene una apariencia vertical, lo que significa que el número de columnas del proceso es 1 y que los 5 artículos se colocan uno debajo del otro. Todos los artículos están organizados simétricamente uno por el otro, lo que significa que no se establece una brecha. Todos los textos tienen las mismas características, por lo que el estilo se establece en la pestaña Estilo. Aquí podemos ver que cada artículo tiene una imagen de fondo (y que no hay campos adicionales para el número), pero también podemos ver que el número no está en el medio del artículo, como es el caso predeterminado. Hay un truco que puede usar para ocultar el número si no desea que se muestre el número. Todo lo que tiene que hacer es establecer el tamaño de la impresión del elemento en 0px en el estilo de las opciones generales. De esta manera, el número no se mostrará. Esto puede ser útil si no desea mostrar el proceso, pero solo use este widget para las otras necesidades y se molesta en mostrar el número o los pasos.

En conclusión
Agregar un widget de proceso a su sitio web con suplementos Elementor no solo es fácil, sino también divertido y le permite expresar su creatividad. Le recomendamos que continúe explorando formas en que puede enriquecer el diseño y la funcionalidad de su sitio. Si su sitio se centra principalmente en el contenido visual, también puede tener curiosidad por obtener más información sobre cómo agregar una página de ancho completa y una fila en su sitio de WordPress o si desea obtener una estructura mejor contenido, puede estar interesado en obtener más información Acerca de las pestañas de WordPress. Como mencioné, los complementos de Qi vienen con 60 widgets gratuitos, por lo que experimentar y probar nuevas posibilidades no será una amenaza para su presupuesto, pero solo puede inspirarlo a mejorar su sitio y agregar funciones más útiles. Esperamos que este artículo haya sido útil. Si le gustó, ¡no dude en consultar algunos de estos artículos!

Cómo eliminar los productos relacionados de WooCommerce
4 formas fáciles de crear botones de WordPress

Cómo configurar una barra de notificación de WordPress en unos pocos pasos