{"id":371569,"date":"2023-04-07T16:09:00","date_gmt":"2023-04-07T13:09:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371569"},"modified":"2023-04-07T16:17:14","modified_gmt":"2023-04-07T13:17:14","slug":"como-criar-um-fluxo-de-etapas-usando-o-widget-de-processo-elementor","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-criar-um-fluxo-de-etapas-usando-o-widget-de-processo-elementor\/","title":{"rendered":"Como criar um fluxo de etapas usando o widget de processo Elementor"},"content":{"rendered":"\n<p>Seja qual for o tipo de site que voc\u00ea tenha, \u00e9 essencial n\u00e3o apenas ter conte\u00fado de qualidade, mas tamb\u00e9m poder exibi-lo de maneira atraente. Felizmente, muitas ferramentas nos permitem <strong>compartilhar uma ampla gama de informa\u00e7\u00f5es e dados de forma criativa<\/strong>. Voc\u00ea pode <a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-adicionar-o-efeito-elementor-parallax-rapido-e-facil\/\" title=\"adicionar um efeito de paralaxe\">adicionar um efeito de paralaxe<\/a> para destacar o tom moderno do seu site, <a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-criar-alternancias-e-acordeoes-no-wordpress\/\" title=\"usar altern\u00e2ncias e acorde\u00f5es\">usar altern\u00e2ncias e acorde\u00f5es<\/a> para obter uma melhor estrutura de conte\u00fado, e os widgets de processo s\u00e3o preciosos, pois nos permitem exibir dados complexos de maneira clara, interessante e envolvente.<\/p>\n<p>Se voc\u00ea possui algum tipo de conte\u00fado que implique em exibir algum tipo de processo, \u00e9 essencial poder desmembr\u00e1-lo para seus usu\u00e1rios de forma simples, clara e concisa, mas sem perder nenhum detalhe importante relacionado a ele. As lojas on-line achar\u00e3o o widget de processo valioso, pois pode ser usado para <strong>mostrar o processo de compra on-line passo a passo, as corpora\u00e7\u00f5es podem compartilhar como o procedimento de contrata\u00e7\u00e3o se parece em sua empresa<\/strong>, os sites m\u00e9dicos podem <strong>mostrar o processo de cura por meio de etapas<\/strong>, qualquer tipo de fluxo de trabalho pode ser representado visualmente atrav\u00e9s de fases \u2013 as possibilidades s\u00e3o ilimitadas.<\/p>\n<p>Neste artigo, mostraremos como configurar e personalizar facilmente o widget de processo em seu site. Fique ligado para ler mais 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 Qi para Widget de Processo 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 for Elementor<\/a> \u00e9 uma ferramenta poderosa, vers\u00e1til e <strong>muito f\u00e1cil de usar<\/strong> que adiciona um ar de eleg\u00e2ncia al\u00e9m de funcionalidade ao seu site. No momento, esta ferramenta \u00e9 a <strong>maior cole\u00e7\u00e3o de complementos gratuitos na web e inclui 60 widgets gratuitos<\/strong> que facilitam at\u00e9 mesmo para iniciantes completos enriquecer seus sites com elementos eficazes sem nenhum conhecimento de codifica\u00e7\u00e3o necess\u00e1rio. Al\u00e9m de widgets gratuitos, voc\u00ea pode encontrar incr\u00edveis 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\">O widget de processo<\/a> inclu\u00eddo gratuitamente vem com <strong>muitas op\u00e7\u00f5es de personaliza\u00e7\u00e3o e permite que voc\u00ea crie belas exibi\u00e7\u00f5es de todos os tipos de fluxos de trabalho e processos<\/strong>, que combinam perfeitamente com as necessidades e o estilo do seu site.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Depois de arrastar o widget de processo para o lado, voc\u00ea obter\u00e1 sua visualiza\u00e7\u00e3o padr\u00e3o, que poder\u00e1 ser editada. \u00c9 importante observar que o widget utiliza as fontes utilizadas pelo seu tema, portanto, se voc\u00ea deseja uniformidade nesta parte, n\u00e3o precisar\u00e1 alter\u00e1-la.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>As op\u00e7\u00f5es para configurar o widget Processo s\u00e3o as op\u00e7\u00f5es Conte\u00fado e Estilo. Aqui <strong>escolheremos qual elemento queremos em nosso widget de processo e determinaremos como tudo ficar\u00e1 em termos de estilo<\/strong>. Existem muitas configura\u00e7\u00f5es de personaliza\u00e7\u00e3o, mas elas s\u00e3o t\u00e3o bem organizadas que voc\u00ea achar\u00e1 muito f\u00e1cil experimentar e experimentar as op\u00e7\u00f5es.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<h2>Widget de processo &#8211; op\u00e7\u00e3o de guia de conte\u00fado<\/h2>\n<p>Aqui est\u00e3o as op\u00e7\u00f5es gerais, op\u00e7\u00f5es de anima\u00e7\u00e3o, layout do processo e uma ferramenta de desenvolvedor \u00fatil, mas tamb\u00e9m <strong>ajuda, onde voc\u00ea pode encontrar instru\u00e7\u00f5es e suporte do pr\u00f3prio autor do complemento<\/strong>.<\/p>\n<h3>Op\u00e7\u00f5es gerais<\/h3>\n<p>A primeira coisa que voc\u00ea precisa \u00e9 configurar as configura\u00e7\u00f5es gerais do pr\u00f3prio widget.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Aqui n\u00f3s escolhemos o <strong>N\u00famero de Colunas e se voc\u00ea quiser que todos os seus itens fiquem em uma linha, ent\u00e3o voc\u00ea selecionar\u00e1 o n\u00famero de itens para o n\u00famero de colunas<\/strong>. Caso contr\u00e1rio, se voc\u00ea colocar menos colunas do que o item, os itens estar\u00e3o em 2 ou mais linhas, ou se voc\u00ea selecionar mais colunas do que o item, voc\u00ea ficar\u00e1 com um espa\u00e7o vazio na linha.<\/p>\n<p>Voc\u00ea provavelmente saber\u00e1 quantos itens deseja assim que come\u00e7ar a construir isso, ent\u00e3o gosto de configur\u00e1-lo imediatamente e, \u00e9 claro, voc\u00ea tamb\u00e9m pode personalizar essas configura\u00e7\u00f5es mais tarde.<\/p>\n<p>Uma configura\u00e7\u00e3o significativa \u00e9 <strong>o Columns Responsive<\/strong>, onde <strong>ajustamos a apar\u00eancia do nosso processo em dispositivos de tamanhos diferentes<\/strong>. Voc\u00ea pode selecionar Predefinido ou personalizado, a escolha \u00e9 sua.<\/p>\n<p>Com base em nossa experi\u00eancia, o tamanho de 618-768px fica melhor ao usar uma coluna, ent\u00e3o colocamos dessa forma.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p><strong>Os itens, claro, servem para adicionar um item ao processo<\/strong>. Voc\u00ea pode adicionar quantos precisar. Existe uma op\u00e7\u00e3o para <strong>copiar o item e exclu\u00ed-lo<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p><strong>Cada item \u00e9 personalizado separadamente<\/strong>, suas caracter\u00edsticas espec\u00edficas s\u00e3o inseridas e <strong>\u00e9 poss\u00edvel definir determinados itens para cada item para que cada item pare\u00e7a diferente<\/strong>. No entanto, <strong>se voc\u00ea quiser que todos os itens tenham a mesma apar\u00eancia, voc\u00ea especificar\u00e1 seu estilo nas op\u00e7\u00f5es de estilo, n\u00e3o em cada item individualmente<\/strong>. Tudo o que est\u00e1 definido nas op\u00e7\u00f5es de estilo se aplica a todos os itens de processo, exceto aqueles em que o pr\u00f3prio item \u00e9 definido de forma ligeiramente diferente em rela\u00e7\u00e3o \u00e0s configura\u00e7\u00f5es de estilo. Tudo ficar\u00e1 claro para voc\u00ea quando passarmos pelas configura\u00e7\u00f5es.<\/p>\n<p>Os campos <strong>T\u00edtulo<\/strong> e <strong>Texto s\u00e3o usados \u200b\u200bpara<\/strong> <strong>inserir o texto que acompanha uma etapa espec\u00edfica do processo<\/strong>. Claro, \u00e9 natural neste caso que cada etapa tenha um t\u00edtulo e uma descri\u00e7\u00e3o diferentes, ent\u00e3o este \u00e9 o \u00fanico lugar onde voc\u00ea pode inserir esses 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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>\u00c9 assim que fica quando substitu\u00eddo pelo nosso 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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p><strong>As op\u00e7\u00f5es de item referem-se \u00e0 parte do item que n\u00e3o \u00e9 o t\u00edtulo e a descri\u00e7\u00e3o<\/strong>. Usamos <strong>o Deslocamento de Item para posicionar um item<\/strong>. O c\u00edrculo com a unidade e a linha que leva ao pr\u00f3ximo passo fazem parte de um item e ajustando o Item Offset <strong>movemos esses elementos para baixo ou para cima<\/strong>. Como voc\u00ea pode ver na imagem, definimos algum deslocamento para o primeiro item e agora est\u00e1 um pouco abaixo do n\u00edvel do pr\u00f3ximo item.<\/p>\n<p>A op\u00e7\u00e3o de deslocamento do item tamb\u00e9m existe nas op\u00e7\u00f5es de Estilo, que como mencionamos, qualquer coisa definida ali se aplica a todos os elementos do processo. Portanto, se voc\u00ea quiser que todos os itens estejam em um plano diferente para cada item, voc\u00ea definir\u00e1 o deslocamento separadamente.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p><strong>Item Holder Size<\/strong> \u00e9 o tamanho do campo em que atualmente \u00e9 1, ou seja, o n\u00famero de passos, e depois veremos o que mais pode ser encontrado aqui. (Esta op\u00e7\u00e3o tamb\u00e9m \u00e9 encontrada nas op\u00e7\u00f5es de estilo se quisermos que todos os suportes de itens tenham o mesmo tamanho).<\/p>\n<p><strong>A tipografia do item<\/strong> refere-se \u00e0s caracter\u00edsticas tipogr\u00e1ficas do n\u00famero de etapas.<\/p>\n<p>O <strong>fundo<\/strong> serve para <strong>atribuir a cor ou fundo apropriado ao item<\/strong>. Al\u00e9m disso, podemos definir um fundo gradiente. Se quisermos que todos os itens tenham o mesmo plano de fundo, vamos ajust\u00e1-lo nas op\u00e7\u00f5es de estilo, se quisermos que o plano de fundo seja diferente para um item diferente, vamos ajust\u00e1-lo atrav\u00e9s das configura\u00e7\u00f5es do item.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Por enquanto, adicionaremos apenas a cor de fundo.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Por padr\u00e3o, os itens s\u00e3o exibidos como c\u00edrculos, mas se voc\u00ea quiser um quadrado ou uma forma com determinados \u00e2ngulos, o <strong>Raio do suporte do item<\/strong> \u00e9 onde voc\u00ea o ajustar\u00e1. <strong>Quando o valor \u00e9 0, ent\u00e3o \u00e9 o quadrado dos \u00e2ngulos retos<\/strong>. Ao adicionar valores, voc\u00ea ver\u00e1 como os \u00e2ngulos mudam. Se voc\u00ea excluir os valores, voc\u00ea obter\u00e1 um c\u00edrculo novamente. Nem todos os \u00e2ngulos precisam ser iguais, voc\u00ea pode definir um valor diferente para cada \u00e2ngulo.<\/p>\n<p><strong>Tipo de borda, Largura e Cor referem-se a itens de borda<\/strong>. Quando voc\u00ea n\u00e3o quer uma borda, ent\u00e3o Border \u00e9 Type None.<\/p>\n<p>Voc\u00ea tamb\u00e9m tem todas essas configura\u00e7\u00f5es nas op\u00e7\u00f5es de estilo, se quiser que todos os itens sejam iguais.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Acabamos de ver como alterar o deslocamento e agora temos duas op\u00e7\u00f5es que nos permitem alterar a posi\u00e7\u00e3o apenas da linha que leva ao pr\u00f3ximo processo. <strong>O deslocamento superior da linha<\/strong> \u00e9 usado para <strong>mover a posi\u00e7\u00e3o da linha (para cima\/para baixo)<\/strong> e <strong>a rota\u00e7\u00e3o da linha \u00e9 usada para gir\u00e1-la<\/strong>. Como voc\u00ea pode ver na nota abaixo, giramos a linha e ela n\u00e3o est\u00e1 mais em \u00e2ngulo reto com o item. Voc\u00ea s\u00f3 tem essas configura\u00e7\u00f5es no pr\u00f3prio item.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>O que perdemos intencionalmente no in\u00edcio \u00e9 a <strong>op\u00e7\u00e3o Tipo de \u00edcone<\/strong>, ela nos serve para <strong>adicionar um \u00edcone da Biblioteca ao item ou fazer upload do nosso \u00edcone 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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Preste aten\u00e7\u00e3o ao que acontece a seguir, <strong>o n\u00famero ordinal de etapas n\u00e3o \u00e9 mais escrito no centro do item, mas como um c\u00edrculo adicional separado<\/strong>.<\/p>\n<p>Agora a <strong>Tipografia<\/strong> do Item e <strong>a Cor do Item referem-se ao pr\u00f3prio \u00edcone<\/strong>. Aqui vamos ajustar o tamanho (na op\u00e7\u00e3o de tamanho da tipografia) e a cor de cada \u00edcone.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Outra coisa que n\u00e3o vimos com mais detalhes acima \u00e9 a imagem de fundo do item como no caso do segundo item no exemplo:<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p><strong>Cada imagem de fundo traz consigo certas configura\u00e7\u00f5es<\/strong> em rela\u00e7\u00e3o ao posicionamento da imagem, seu tamanho e se ser\u00e1 um fundo liso ou com efeito de rolagem (op\u00e7\u00e3o de anexo). Voc\u00ea ter\u00e1 todas essas op\u00e7\u00f5es quando usar uma imagem de fundo.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Depois de definir as op\u00e7\u00f5es gerais, nosso widget de processo fica assim:<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<h3>Aparecer op\u00e7\u00f5es de anima\u00e7\u00e3o<\/h3>\n<p>O widget de processo pode ter uma anima\u00e7\u00e3o \u2013 <strong>os itens s\u00e3o carregados um ap\u00f3s o outro e aparecem na mesma ordem<\/strong>, e \u00e9 aqui que vamos ajustar se queremos ou n\u00e3o.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<h3>Op\u00e7\u00f5es de layout<\/h3>\n<p>Existem duas op\u00e7\u00f5es de layout \u2013 <strong>visualiza\u00e7\u00e3o horizontal e vertical do processo<\/strong>. At\u00e9 agora, mostramos tudo horizontalmente. No entanto, se voc\u00ea optar pela exibi\u00e7\u00e3o vertical, as op\u00e7\u00f5es s\u00e3o exatamente as mesmas. <strong>A \u00fanica coisa a prestar aten\u00e7\u00e3o \u00e9 o n\u00famero de colunas<\/strong> (falamos sobre isso nas op\u00e7\u00f5es gerais). O processo vertical sempre tem uma coluna se quisermos que os itens sejam organizados um abaixo do outro em uma coluna.<\/p>\n<p>Como definimos tr\u00eas colunas para nosso exemplo porque temos 3 itens, sem alterar para uma coluna nosso widget fica assim:<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Claro, se configurarmos uma coluna, tudo ficar\u00e1 como deveria 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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<h3>Ferramentas de desenvolvimento<\/h3>\n<p>Esta op\u00e7\u00e3o nos d\u00e1 a capacidade de <strong>ver o widget em forma de shortcode,<\/strong> se precisarmos.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Como mencionamos, aqui podemos <strong>encontrar documenta\u00e7\u00e3o e ajuda do autor<\/strong> dos addons para o pr\u00f3prio 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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<h2>Widget de processo &#8211; op\u00e7\u00e3o de guia de estilo<\/h2>\n<p>A guia de estilo oferece <strong>op\u00e7\u00f5es para estilizar partes do processo<\/strong>. Como j\u00e1 mencionamos, <strong>tudo o que estiver definido aqui se aplicar\u00e1 a todos os itens do nosso processo, exceto aqueles em que algo diferente estiver definido no pr\u00f3prio item<\/strong>.<\/p>\n<h3>Op\u00e7\u00f5es de estilo<\/h3>\n<p>Aqui voc\u00ea encontra v\u00e1rias op\u00e7\u00f5es repetidas dos pr\u00f3prios itens, como as relacionadas a cores, tipografia, deslocamentos.<\/p>\n<p>A \u00fanica coisa que n\u00e3o est\u00e1 nos itens \u00e9 o <strong>Alinhamento<\/strong> que especifica <strong>como o T\u00edtulo e o Texto ser\u00e3o centralizados<\/strong>.<\/p>\n<p>Se voc\u00ea quiser que todos os itens sejam iguais, ajuste o estilo aqui. No nosso caso, ajustamos principalmente os itens porque temos diferentes cores de fundo, tamanhos e posi\u00e7\u00f5es diferentes. O que definimos aqui \u00e9 a <strong>cor do item<\/strong>, ou seja, a cor do \u00edcone que era cinza por padr\u00e3o e agora \u00e9 preto para n\u00f3s.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<h3>Op\u00e7\u00f5es de estilo de linha<\/h3>\n<p>Estiliza\u00e7\u00e3o da linha de processo \u2013 temos <strong>v\u00e1rios tipos<\/strong>, podemos ajustar a cor e a espessura.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<h3>Estilo de espa\u00e7amento<\/h3>\n<p><strong>Espa\u00e7amento, espa\u00e7o acima da legenda, acima do texto e preenchimento ao redor do texto<\/strong>. Esse preenchimento ao redor do texto de certa forma serve para &#8220;estreitar&quot; o conte\u00fado colocando o preenchimento em um campo onde n\u00e3o ser\u00e1 poss\u00edvel exibir o 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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<h3>Estilo Adicional<\/h3>\n<p>Temos essas configura\u00e7\u00f5es <strong>apenas quando nosso item cont\u00e9m um \u00edcone inserido, ou seja, quando temos esse campo adicional no qual o n\u00famero est\u00e1 localizado<\/strong>. As configura\u00e7\u00f5es referem-se a esse n\u00famero e ao campo em que est\u00e1 localizado.<\/p>\n<p><strong>Cor do Suporte Adicional<\/strong> \u00e9 a cor do campo no qual o n\u00famero e a <strong>Tipografia do Suporte Adicional<\/strong> est\u00e3o todos relacionados ao ajuste da apar\u00eancia do pr\u00f3prio n\u00famero. <strong>Tamanho de titular adicional<\/strong> \u00e9 o tamanho do campo e com a ajuda de Posi\u00e7\u00e3o de titular adicional podemos alterar a posi\u00e7\u00e3o do campo.<\/p>\n<p>Tamb\u00e9m podemos adicionar um plano de fundo para o campo de item regular, mas n\u00e3o podemos adicion\u00e1-lo para cada campo individualmente aqui, ele ser\u00e1 aplicado a todos os campos em geral. Adicionamos uma imagem de fundo.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Vamos ver se nos entendemos bem e com base na apresenta\u00e7\u00e3o podemos ver como certos processos foram feitos. Isso pode ajud\u00e1-lo a fazer o seu pr\u00f3prio e saber imediatamente onde definir o qu\u00ea.<\/p>\n<p>J\u00e1 mostramos um exemplo de horizontal. O que podemos notar \u00e0 primeira vista \u00e9 que temos 3 colunas e nelas, os itens em que s\u00e3o \u00edcones \u2013 um campo adicional com o n\u00famero nos diz que o item \u00e9 um \u00edcone e n\u00e3o uma imagem porque dissemos que s\u00f3 ent\u00e3o ele aparece .<\/p>\n<p>Como os itens possuem cores diferentes, sabemos que essas configura\u00e7\u00f5es foram feitas nos pr\u00f3prios itens, n\u00e3o em op\u00e7\u00f5es gerais.<\/p>\n<p>Tamb\u00e9m podemos notar que o deslocamento \u00e9 ajust\u00e1vel porque nem todos os itens est\u00e3o no mesmo plano.<\/p>\n<p>Todos os \u00edcones e textos t\u00eam as mesmas cores, o que nos diz que isso est\u00e1 definido nas op\u00e7\u00f5es da guia 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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>O segundo exemplo, embora pare\u00e7a mais complicado, \u00e9 ainda mais f\u00e1cil de executar. Aqui, a linha na p\u00e1gina \u00e9 dividida em duas partes. \u00c0 esquerda est\u00e1 a imagem e \u00e0 direita est\u00e1 o processo.<\/p>\n<p>O processo tem um layout vertical, o que significa que o n\u00famero de colunas desse processo \u00e9 1 e que todos os 5 itens s\u00e3o colocados um abaixo do outro.<\/p>\n<p>Todos os itens s\u00e3o organizados simetricamente um abaixo do outro, o que significa que nenhum deslocamento \u00e9 definido.<\/p>\n<p>Todos os textos t\u00eam as mesmas caracter\u00edsticas, ent\u00e3o o estilo \u00e9 definido na aba de estilo.<br \/>\nAqui podemos ver que cada item tem uma imagem de fundo (e que n\u00e3o h\u00e1 campos adicionais para o n\u00famero), mas tamb\u00e9m podemos notar que o n\u00famero n\u00e3o est\u00e1 no meio do item como \u00e9 o caso por padr\u00e3o.<\/p>\n<p>H\u00e1 um truque que voc\u00ea pode usar para ocultar o n\u00famero caso n\u00e3o queira que o n\u00famero seja exibido. Tudo o que voc\u00ea precisa fazer \u00e9 definir o Tamanho da Tipografia do Item para 0px na guia Estilo nas Op\u00e7\u00f5es Gerais. Desta forma, o n\u00famero n\u00e3o ser\u00e1 exibido.<\/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=\"Como criar um fluxo de etapas usando o widget de processo Elementor\"><\/a><\/p>\n<p>Isso pode ser \u00fatil se voc\u00ea n\u00e3o quiser mostrar o processo, mas apenas usar este widget para suas outras necessidades e incomodar exibir o n\u00famero ou as etapas.<\/p>\n<h2>Para concluir<\/h2>\n<p>Adicionar um widget de processo ao seu site com o Qi Addons for Elementor n\u00e3o \u00e9 apenas f\u00e1cil, mas tamb\u00e9m divertido e permite que voc\u00ea expresse sua criatividade tamb\u00e9m. Incentivamos voc\u00ea a continuar explorando maneiras de enriquecer o design e a funcionalidade do seu site. Se o seu site se concentra principalmente em conte\u00fado visual \u2013 voc\u00ea tamb\u00e9m pode estar curioso para saber mais sobre como <a href=\"https:\/\/themewp.inform.click\/pt-pt\/pagina-e-linha-de-largura-total-do-elementor-explicadas-em-detalhes\/\" title=\"adicionar p\u00e1gina e linha de largura total\">adicionar p\u00e1gina e linha de largura total<\/a> ao seu site WordPress, ou se voc\u00ea deseja obter uma melhor estrutura de conte\u00fado, pode estar interessado em <a href=\"https:\/\/themewp.inform.click\/pt-pt\/como-criar-abas-do-wordpress-com-qi-addons-para-elementor\/\" title=\"saber mais sobre as guias do WordPress\">saber mais sobre as guias do WordPress<\/a>. Como mencionamos, o Qi Addons vem com 60 widgets gratuitos, portanto, experimentar e experimentar novas possibilidades n\u00e3o ser\u00e1 uma amea\u00e7a ao seu or\u00e7amento, mas apenas poder\u00e1 inspir\u00e1-lo a melhorar seu site e adicionar mais recursos \u00fateis a ele.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Maneira r\u00e1pida e f\u00e1cil de adicionar o widget de processo Elementor e mostrar um fluxo de etapas em qualquer tipo de site 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":[573],"tags":[848],"class_list":["post-371569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nocoes-basicas-do-wordpress","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/371569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=371569"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/371569\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=371569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=371569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=371569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}