{"id":371421,"date":"2023-04-07T15:59:00","date_gmt":"2023-04-07T12:59:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371421"},"modified":"2023-04-07T15:59:32","modified_gmt":"2023-04-07T12:59:32","slug":"como-crear-un-flujo-de-pasos-usando-el-widget-de-proceso-de-elementor","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-crear-un-flujo-de-pasos-usando-el-widget-de-proceso-de-elementor\/","title":{"rendered":"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor"},"content":{"rendered":"\n<p>Cualquiera que sea el tipo de sitio web que tenga, es fundamental no solo tener contenido de calidad, sino tambi\u00e9n poder mostrarlo de manera atractiva. Afortunadamente, muchas herramientas nos permiten <strong>compartir una amplia gama de informaci\u00f3n y datos de forma creativa<\/strong>. Puede <a href=\"https:\/\/themewp.inform.click\/es\/como-agregar-el-efecto-parallax-de-elementor-rapido-y-facil\/\" title=\"agregar un efecto de paralaje\">agregar un efecto de paralaje<\/a> para resaltar el tono moderno de su sitio, <a href=\"https:\/\/themewp.inform.click\/es\/como-crear-conmutadores-y-acordeones-en-wordpress\/\" title=\"usar interruptores y acordeones\">usar interruptores y acordeones<\/a> para lograr una mejor estructura de contenido, y los widgets de proceso son valiosos ya que nos permiten mostrar datos complejos de una manera clara, interesante y atractiva.<\/p>\n<p>Si tienes alg\u00fan tipo de contenido que implique mostrar alg\u00fan tipo de proceso, es fundamental poder desglosarlo a tus usuarios de una manera simple, clara y concisa, pero sin perder ning\u00fan detalle importante relacionado con \u00e9l. Las tiendas en l\u00ednea encontrar\u00e1n valioso el widget de proceso, ya que puede usarse para <strong>mostrar el proceso de compra en l\u00ednea paso a paso, las corporaciones pueden compartir c\u00f3mo se ve el procedimiento de empleo en su empresa<\/strong>, los sitios web m\u00e9dicos pueden <strong>mostrar el proceso de curaci\u00f3n a trav\u00e9s de etapas<\/strong>, cualquier tipo de flujo de trabajo se puede representar visualmente a trav\u00e9s de fases: las posibilidades son ilimitadas.<\/p>\n<p>En este art\u00edculo, le mostraremos c\u00f3mo configurar y personalizar f\u00e1cilmente el widget de proceso en su sitio web. Est\u00e9n atentos para leer m\u00e1s sobre:<\/p>\n<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/colSjAmnAQU\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Complementos de Qi para el widget de proceso de Elementor<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Addons para Elementor<\/a> es una herramienta poderosa, vers\u00e1til y <strong>muy f\u00e1cil de usar<\/strong> que agrega un aire de elegancia adem\u00e1s de funcionalidad a su sitio web. Por el momento, esta herramienta es la <strong>colecci\u00f3n m\u00e1s grande de complementos gratuitos en la web e incluye 60 widgets gratuitos<\/strong> que facilitan incluso a los principiantes enriquecer sus sitios web con elementos efectivos sin necesidad de conocimientos de codificaci\u00f3n. Adem\u00e1s de widgets gratuitos, puedes encontrar incre\u00edbles 40+ premium.<\/p>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/process\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">El widget de proceso<\/a> que se incluye de forma gratuita viene con <strong>muchas opciones de personalizaci\u00f3n y le permite crear hermosas pantallas de todo tipo de flujos de trabajo y procesos<\/strong>, que se adaptan a la perfecci\u00f3n tanto a las necesidades como al estilo de su sitio web.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d783b50.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d783b50.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Despu\u00e9s de arrastrar el widget de proceso hacia un lado, obtendr\u00e1 su vista predeterminada que puede editar. Es importante tener en cuenta que el widget usa las fuentes que usa tu tema, por lo que si quieres uniformidad en esta parte no tendr\u00e1s que cambiarla.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d96dc04.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d96dc04.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Las opciones para configurar el widget de proceso son las opciones de contenido y estilo. Aqu\u00ed <strong>elegiremos qu\u00e9 elemento queremos en nuestro widget de proceso y determinaremos c\u00f3mo se ver\u00e1 todo en t\u00e9rminos de estilo<\/strong>. Hay muchas configuraciones de personalizaci\u00f3n, pero est\u00e1n tan bien organizadas que le resultar\u00e1 muy f\u00e1cil probar y experimentar con las opciones.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36db5fdc3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36db5fdc3.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<h2>Widget de proceso: opci\u00f3n de pesta\u00f1a de contenido<\/h2>\n<p>Aqu\u00ed est\u00e1n las opciones generales, las opciones de animaci\u00f3n, el dise\u00f1o del proceso y una \u00fatil herramienta de desarrollo, pero tambi\u00e9n <strong>la Ayuda, donde puede encontrar instrucciones y soporte del propio autor del complemento<\/strong>.<\/p>\n<h3>Opciones generales<\/h3>\n<p>Lo primero que necesitar\u00e1 es configurar la configuraci\u00f3n general del widget en s\u00ed.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36ddf0499.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36ddf0499.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Aqu\u00ed elegimos el <strong>N\u00famero de columnas y si desea que todos sus art\u00edculos est\u00e9n en una fila, entonces seleccionar\u00e1 el n\u00famero de art\u00edculos para el n\u00famero de columnas<\/strong>. De lo contrario, si pones menos columnas que el art\u00edculo, los art\u00edculos estar\u00e1n en 2 o m\u00e1s filas, o si seleccionas m\u00e1s columnas que el art\u00edculo, te quedar\u00e1 un espacio vac\u00edo en la fila.<\/p>\n<p>Probablemente sabr\u00e1 cu\u00e1ntos elementos desea tan pronto como comience a construir esto, por lo que me gusta configurarlo de inmediato y, por supuesto, tambi\u00e9n puede personalizar esta configuraci\u00f3n m\u00e1s adelante.<\/p>\n<p>Una configuraci\u00f3n significativa es <strong>Columns Responsive<\/strong>, donde <strong>ajustamos c\u00f3mo se ver\u00e1 nuestro proceso en dispositivos de diferentes tama\u00f1os<\/strong>. Puede seleccionar Predefinido o personalizado, es su elecci\u00f3n.<\/p>\n<p>Seg\u00fan nuestra experiencia, el tama\u00f1o de 618-768 px se ve mejor cuando se usa una columna, as\u00ed que lo ponemos de esa manera.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e0a9b27.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e0a9b27.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p><strong>Por supuesto, los elementos sirven para agregar un elemento al proceso<\/strong>. Puedes a\u00f1adir tantos como necesites. Hay una opci\u00f3n tanto para <strong>copiar el elemento como para eliminarlo<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e2be51a.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e2be51a.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p><strong>Cada art\u00edculo se personaliza por separado<\/strong>, se ingresan sus caracter\u00edsticas espec\u00edficas y <strong>es posible configurar ciertos art\u00edculos para cada art\u00edculo para que cada art\u00edculo se vea diferente<\/strong>. Sin embargo, <strong>si desea que todos los elementos tengan el mismo aspecto, deber\u00e1 especificar su estilo en las opciones de Estilo, no en cada elemento individualmente<\/strong>. Todo lo que se establece en las opciones de estilo se aplica a todos los elementos del proceso, excepto aquellos en los que el elemento en s\u00ed se configura de forma ligeramente diferente en relaci\u00f3n con la configuraci\u00f3n de estilo. Todo quedar\u00e1 claro para ti cuando revisemos la configuraci\u00f3n.<\/p>\n<p>Los campos <strong>T\u00edtulo<\/strong> y <strong>Texto<\/strong> se utilizan para <strong>ingresar texto que va con un paso de proceso espec\u00edfico<\/strong>. Por supuesto, es natural en este caso que cada paso tenga un t\u00edtulo y una descripci\u00f3n diferentes, por lo que este es el \u00fanico lugar donde puede ingresar estos valores.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e46aed3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e46aed3.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>As\u00ed es como se ve cuando se reemplaza con nuestro texto.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e68d676.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e68d676.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p><strong>Las opciones de elementos se refieren a la parte del elemento que no es el t\u00edtulo y la descripci\u00f3n<\/strong>. Usamos <strong>Item Offset para posicionar un elemento<\/strong>. El c\u00edrculo con la unidad y la l\u00ednea que conduce al siguiente paso son parte de un elemento y al ajustar el Desplazamiento del elemento <strong>movemos estos elementos hacia abajo o hacia arriba<\/strong>. Como puede ver en la imagen, hemos establecido un desplazamiento para el primer elemento y ahora est\u00e1 un poco por debajo del nivel del siguiente elemento.<\/p>\n<p>La opci\u00f3n de desplazamiento del elemento tambi\u00e9n existe en las opciones de Estilo, que como mencionamos, cualquier cosa establecida all\u00ed se aplica a todos los elementos del proceso. Por lo tanto, si desea que todos los elementos est\u00e9n en un plano diferente para cada elemento, establecer\u00e1 el desplazamiento por separado.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e95bd4c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e95bd4c.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p><strong>Item Holder Size<\/strong> es el tama\u00f1o del campo en el que se encuentra actualmente 1, es decir, el n\u00famero de pasos, y luego veremos qu\u00e9 m\u00e1s se puede encontrar aqu\u00ed. (Esta opci\u00f3n tambi\u00e9n se encuentra en las opciones de estilo si queremos que todos los soportes de elementos sean del mismo tama\u00f1o).<\/p>\n<p><strong>La tipograf\u00eda del art\u00edculo<\/strong> se refiere a las caracter\u00edsticas tipogr\u00e1ficas del n\u00famero de pasos.<\/p>\n<p>El <strong>fondo<\/strong> sirve para <strong>asignar el color o fondo adecuado al elemento<\/strong>. Adem\u00e1s, podemos establecer un fondo degradado. Si queremos que todos los elementos tengan el mismo fondo, lo ajustaremos en las opciones de Estilo, si queremos que el fondo sea diferente para un elemento diferente, lo ajustaremos a trav\u00e9s de la configuraci\u00f3n del elemento.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36eb93a9c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36eb93a9c.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Por ahora, solo agregaremos el color de fondo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36edc20b7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36edc20b7.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>De forma predeterminada, los elementos se muestran como c\u00edrculos, pero si desea un cuadrado o una forma con ciertos \u00e1ngulos <strong>, Radio del soporte del elemento<\/strong> es donde lo ajustar\u00e1. <strong>Cuando el valor es 0 entonces es el cuadrado de los \u00e1ngulos rectos<\/strong>. Al sumar valores ver\u00e1s como cambian los \u00e1ngulos. Si elimina los valores, obtiene un c\u00edrculo nuevamente. No todos los \u00e1ngulos tienen que ser iguales, puede establecer un valor diferente para cada \u00e1ngulo.<\/p>\n<p><strong>El tipo de borde, el ancho y el color se refieren a los elementos del borde<\/strong>. Cuando no desea un borde, el borde es Tipo Ninguno.<\/p>\n<p>Tambi\u00e9n tienes todos estos ajustes en las opciones de estilo, si quieres que todos los elementos sean iguales.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f07dd7e.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f07dd7e.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Acabamos de ver c\u00f3mo cambiar el desplazamiento y ahora tenemos dos opciones que nos permiten cambiar la posici\u00f3n de solo la l\u00ednea que lleva al siguiente proceso. <strong>El desplazamiento superior de l\u00ednea<\/strong> se usa para <strong>mover la posici\u00f3n de la l\u00ednea (hacia arriba\/abajo)<\/strong>, y <strong>la rotaci\u00f3n de l\u00ednea se usa para rotarla<\/strong>. Como puede ver en la nota a continuaci\u00f3n, hemos rotado la l\u00ednea y ya no est\u00e1 en \u00e1ngulo recto con el elemento. Solo tiene esta configuraci\u00f3n en el elemento en s\u00ed.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f3073fc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f3073fc.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Lo que echamos en falta al principio intencionadamente es la <strong>opci\u00f3n Tipo de icono<\/strong>, nos sirve para <strong>a\u00f1adir un icono de la Biblioteca al elemento o para subir nuestro icono SVG<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f658152.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f658152.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Preste atenci\u00f3n a lo que sucede a continuaci\u00f3n, <strong>el n\u00famero ordinal de pasos ya no se escribe en el centro del elemento sino como un c\u00edrculo adicional separado<\/strong>.<\/p>\n<p>Ahora <strong>la tipograf\u00eda<\/strong> y <strong>el color del elemento se refieren al icono en s\u00ed<\/strong>. Aqu\u00ed ajustaremos el tama\u00f1o (en la opci\u00f3n de tama\u00f1o de tipograf\u00eda) y el color de cada icono.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f84bdde.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f84bdde.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Otra cosa que no hemos visto con m\u00e1s detalle arriba es la imagen de fondo del elemento como en el caso del segundo elemento en el ejemplo:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fac84a2.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fac84a2.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p><strong>Cada imagen de fondo lleva consigo ciertos ajustes<\/strong> en cuanto a la posici\u00f3n de la imagen, su tama\u00f1o y si ser\u00e1 un fondo liso o con efecto de desplazamiento (opci\u00f3n de archivo adjunto). Tendr\u00e1s todas estas opciones cuando uses una imagen de fondo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fe223dd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fe223dd.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Despu\u00e9s de configurar las opciones generales, nuestro widget de proceso se ve as\u00ed:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370092b5f.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370092b5f.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<h3>Aparecen opciones de animaci\u00f3n<\/h3>\n<p>El widget de proceso puede tener una animaci\u00f3n: <strong>los elementos se cargan uno tras otro y aparecen en el mismo orden<\/strong>, y este es el lugar que ajustaremos, lo queramos o no.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37034cbd2.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37034cbd2.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<h3>Opciones de dise\u00f1o<\/h3>\n<p>Hay dos opciones de dise\u00f1o: <strong>vista horizontal y vertical del proceso<\/strong>. Hasta ahora, hemos mostrado todo horizontalmente. Sin embargo, si opta por la visualizaci\u00f3n vertical, las opciones son exactamente las mismas. <strong>Lo \u00fanico a lo que hay que prestar atenci\u00f3n es al n\u00famero de columnas<\/strong> (hablamos de esto en las opciones generales). El proceso vertical siempre tiene una columna si queremos que los elementos se organicen uno debajo del otro en una columna.<\/p>\n<p>Dado que configuramos tres columnas para nuestro ejemplo porque tenemos 3 elementos, sin cambiar a una columna, nuestro widget se ve as\u00ed:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3706c21f6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3706c21f6.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Por supuesto, si configuramos una columna, todo ser\u00e1 como debe ser:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3709b51cf.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3709b51cf.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<h3>Herramientas de desarrollo<\/h3>\n<p>Esta opci\u00f3n nos da la posibilidad de <strong>ver el widget en forma de c\u00f3digo abreviado<\/strong> si lo necesitamos.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370d32300.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370d32300.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Como mencionamos, aqu\u00ed podemos <strong>encontrar documentaci\u00f3n y ayuda del autor<\/strong> de los complementos para el propio widget.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371118542.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371118542.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<h2>Widget de proceso: opci\u00f3n de pesta\u00f1a de estilo<\/h2>\n<p>La pesta\u00f1a de estilo proporciona <strong>opciones para estilizar partes del proceso<\/strong>. Como ya hemos mencionado, <strong>todo lo que se configure aqu\u00ed se aplicar\u00e1 a todos los elementos de nuestro proceso, excepto aquellos en los que se configure algo diferente en el elemento en s\u00ed<\/strong>.<\/p>\n<h3>Opciones de estilo<\/h3>\n<p>Aqu\u00ed puede encontrar varias opciones repetidas de los elementos en s\u00ed, como las relacionadas con los colores, la tipograf\u00eda, las compensaciones.<\/p>\n<p>Lo \u00fanico que no est\u00e1 en los elementos es la <strong>Alineaci\u00f3n<\/strong> que especifica <strong>c\u00f3mo se centrar\u00e1n el T\u00edtulo y el Texto<\/strong>.<\/p>\n<p>Si desea que todos los elementos sean iguales, ajustar\u00e1 el estilo aqu\u00ed. En nuestro caso, ajustamos principalmente los elementos porque tenemos diferentes colores de fondo, diferentes tama\u00f1os y posiciones. Lo que establecemos aqu\u00ed es <strong>Item color<\/strong>, es decir, el color del \u00edcono que era gris por defecto y ahora es negro para nosotros.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371766e2b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371766e2b.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<h3>Opciones de estilo de l\u00ednea<\/h3>\n<p>Estilizaci\u00f3n de l\u00ednea de proceso: tenemos <strong>varios tipos<\/strong>, podemos ajustar el color y el grosor.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3719cdd73.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3719cdd73.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<h3>Estilo de espaciado<\/h3>\n<p><strong>Espaciado, espacio encima del subt\u00edtulo, encima del texto y relleno alrededor del texto<\/strong>. Este relleno alrededor del texto de alguna manera sirve para &quot;restringir&quot; el contenido al colocar el relleno en un campo donde no ser\u00e1 posible mostrar el texto.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371c3e0ee.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371c3e0ee.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<h3>Estilo adicional<\/h3>\n<p>Disponemos de estos ajustes <strong>\u00fanicamente cuando nuestro elemento contiene un icono insertado, es decir, cuando disponemos de este campo adicional en el que se encuentra el n\u00famero<\/strong>. Los ajustes se refieren a ese n\u00famero y al campo en el que se encuentra.<\/p>\n<p><strong>El color del titular adicional<\/strong> es el color del campo en el que el n\u00famero y <strong>la tipograf\u00eda del titular adicional<\/strong> est\u00e1n relacionados con el ajuste de la apariencia del n\u00famero en s\u00ed. <strong>Tama\u00f1o de titular adicional<\/strong> es el tama\u00f1o del campo y con la ayuda de Posici\u00f3n de titular adicional podemos cambiar la posici\u00f3n del campo.<\/p>\n<p>Tambi\u00e9n podemos agregar un fondo para el campo de elemento regular, pero no podemos agregarlo para cada campo individualmente aqu\u00ed, se aplicar\u00e1 a todos los campos en general. Agregamos una imagen de fondo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371ec0061.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371ec0061.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>A ver si nos entendemos bien y en base a la presentaci\u00f3n podemos ver como se hicieron ciertos procesos. Esto puede ayudarlo a crear el suyo propio e inmediatamente saber d\u00f3nde configurar qu\u00e9.<\/p>\n<p>Ya hemos mostrado un ejemplo de horizontal. Lo que podemos notar a simple vista es que tenemos 3 columnas y en ellas, los \u00edtems en los que se encuentran los \u00edconos \u2013 un campo adicional con el n\u00famero nos dice que el \u00edtem es un \u00edcono y no una imagen porque dijimos que solo as\u00ed aparece .<\/p>\n<p>Dado que los elementos tienen colores diferentes, sabemos que estas configuraciones se realizaron en los elementos mismos, no en las opciones generales.<\/p>\n<p>Tambi\u00e9n podemos notar que el desplazamiento es ajustable porque no todos los elementos est\u00e1n en el mismo plano.<\/p>\n<p>Todos los iconos y textos tienen los mismos colores lo que nos indica que esto est\u00e1 configurado en las opciones de la pesta\u00f1a de estilo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37205efd6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37205efd6.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>El segundo ejemplo, aunque parece m\u00e1s complicado, es a\u00fan m\u00e1s f\u00e1cil de ejecutar. Aqu\u00ed, la fila de la p\u00e1gina se divide en dos partes. A la izquierda est\u00e1 la imagen y a la derecha el proceso.<\/p>\n<p>El proceso tiene un dise\u00f1o vertical, lo que significa que el n\u00famero de columnas de ese proceso es 1 y que los 5 elementos se colocan uno debajo del otro.<\/p>\n<p>Todos los elementos est\u00e1n dispuestos sim\u00e9tricamente uno debajo del otro, lo que significa que no se establece ning\u00fan desplazamiento.<\/p>\n<p>Todos los textos tienen las mismas caracter\u00edsticas, por lo que el estilo se establece en la pesta\u00f1a de estilo.<br \/>\nAqu\u00ed podemos ver que cada art\u00edculo tiene una imagen de fondo (y que no hay campos adicionales para el n\u00famero), pero tambi\u00e9n podemos notar que el n\u00famero no est\u00e1 en el medio del art\u00edculo como es el caso por defecto.<\/p>\n<p>Hay un truco que puedes usar para ocultar el n\u00famero en caso de que no quieras que se muestre. Todo lo que necesita hacer es configurar el Tama\u00f1o de la tipograf\u00eda del elemento en 0px en la pesta\u00f1a Estilo en las Opciones generales. De esta manera, el n\u00famero no se mostrar\u00e1.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3725561cd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3725561cd.jpg\" alt=\"C\u00f3mo crear un flujo de pasos usando el widget de proceso de Elementor\"><\/a><\/p>\n<p>Esto puede ser \u00fatil si no desea mostrar el proceso, pero solo usa este widget para sus otras necesidades y le molesta mostrar el n\u00famero o los pasos.<\/p>\n<h2>En conclusi\u00f3n<\/h2>\n<p>Agregar un widget de proceso a su sitio web con Qi Addons para Elementor no solo es f\u00e1cil, sino tambi\u00e9n divertido y le permite expresar su creatividad tambi\u00e9n. Lo alentamos a seguir explorando formas en las que puede enriquecer el dise\u00f1o y la funcionalidad de su sitio web. Si su sitio web se centra principalmente en el contenido visual, tambi\u00e9n puede tener curiosidad por obtener m\u00e1s informaci\u00f3n sobre c\u00f3mo <a href=\"https:\/\/themewp.inform.click\/es\/pagina-y-fila-de-ancho-completo-de-elementor-explicadas-en-detalle\/\" title=\"agregar una p\u00e1gina y una fila de ancho completo\">agregar una p\u00e1gina y una fila de ancho completo<\/a> a su sitio web de WordPress, o si desea lograr una mejor estructura de contenido, puede interesarle <a href=\"https:\/\/themewp.inform.click\/es\/como-crear-pestanas-de-wordpress-con-qi-addons-para-elementor\/\" title=\"saber m\u00e1s sobre las pesta\u00f1as de WordPress\">saber m\u00e1s sobre las pesta\u00f1as de WordPress<\/a>. Como mencionamos, Qi Addons viene con 60 widgets gratuitos, por lo que experimentar y probar nuevas posibilidades no ser\u00e1 una amenaza para su presupuesto, sino que solo podr\u00eda inspirarlo a mejorar su sitio web y agregarle funciones m\u00e1s \u00fatiles.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una forma r\u00e1pida y f\u00e1cil de agregar el widget de proceso de Elementor y mostrar un flujo de pasos en cualquier tipo de sitio web de WordPress.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[566],"tags":[849],"class_list":["post-371421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conceptos-basicos-de-wordpress","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/371421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=371421"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/371421\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=371421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=371421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=371421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}