{"id":367244,"date":"2023-02-25T12:32:00","date_gmt":"2023-02-25T09:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367244"},"modified":"2023-04-13T10:25:45","modified_gmt":"2023-04-13T07:25:45","slug":"como-criar-abas-do-wordpress-com-qi-addons-para-elementor","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-criar-abas-do-wordpress-com-qi-addons-para-elementor\/","title":{"rendered":"Como criar abas do WordPress com Qi Addons para Elementor"},"content":{"rendered":"\n

A qualidade do conte\u00fado do seu site depende muito do seu conhecimento e habilidades, mas a maneira como voc\u00ea o exibe tamb\u00e9m desempenha um papel importante na forma como os outros o percebem. As abas do WordPress s\u00e3o uma \u00f3tima maneira de estruturar e organizar o conte\u00fado e torn\u00e1-lo mais f\u00e1cil de digerir<\/strong>, especialmente quando se trata de artigos longos. Manter um leitor em uma p\u00e1gina nunca foi f\u00e1cil, ent\u00e3o dificultar oferecendo conte\u00fado que n\u00e3o seja visualmente atraente simplesmente n\u00e3o \u00e9 uma coisa s\u00e1bia a se fazer.<\/p>\n

As guias ajudam voc\u00ea a dividir um artigo em se\u00e7\u00f5es de f\u00e1cil leitura e torn\u00e1-lo mais acess\u00edvel ao leitor, que pode navegar pelo texto com mais facilidade. Claro, existem muitas outras dicas de reda\u00e7\u00e3o<\/a> para ajud\u00e1-lo a tornar o conte\u00fado mais atraente, mas definir abas \u00e9 um dos essenciais. Neste artigo, mostraremos como adicionar belas guias ao seu conte\u00fado com os complementos Qi para Elementor<\/strong>.<\/p>\n

Adicionando abas com um plugin<\/h2>\n

Qi Addons for Elementor<\/a> \u00e9 uma ferramenta poderosa e gratuita que permite adicionar uma ampla variedade de elementos bonitos ao seu site com facilidade<\/strong>. Ele vem com uma interface intuitiva e amig\u00e1vel, e usu\u00e1rios iniciantes e avan\u00e7ados achar\u00e3o f\u00e1cil de usar. O que \u00e9 especialmente bom no Qi \u00e9 o foco que \u00e9 colocado no design, portanto, al\u00e9m de elementos \u00fateis, ele tamb\u00e9m oferece uma pitada de eleg\u00e2ncia contempor\u00e2nea<\/strong>.<\/p>\n

O processo de instala\u00e7\u00e3o<\/a> dos QI Addons for Elementor n\u00e3o \u00e9 diferente de qualquer outra instala\u00e7\u00e3o de plug-in. Se voc\u00ea tiver alguma d\u00favida sobre isso, verifique o link que fornecemos acima e voc\u00ea tamb\u00e9m pode escrever para n\u00f3s na se\u00e7\u00e3o de coment\u00e1rios.<\/p>\n

Como este \u00e9 um plugin Elementor, certifique-se de mudar para o editor Elementor ao criar uma nova postagem. Todos os widgets Qi Addons ser\u00e3o exibidos ordenadamente no menu de elementos do lado esquerdo<\/strong>. Basta rolar o menu para encontr\u00e1-los.<\/p>\n

\"Como<\/a><\/p>\n

Agora, n\u00e3o h\u00e1 necessidade de navegar por todos os elementos Qi. Voc\u00ea pode simplesmente inserir o que deseja adicionar<\/strong>, guia neste caso, no campo de pesquisa e ele ser\u00e1 exibido nos resultados da pesquisa. Como voc\u00ea pode ver abaixo, o Qi Addons fornece dois elementos de guia – guia horizontal<\/a> e guia vertical<\/a>.<\/p>\n

\"Como<\/a><\/p>\n

Para adicionar uma guia vertical, arraste e solte o elemento Elementor no local desejado. Quando a aba vertical for adicionada, todas as configura\u00e7\u00f5es ficar\u00e3o do lado esquerdo e dentro das abas Conte\u00fado e Estilo est\u00e3o todas as op\u00e7\u00f5es relacionadas \u00e0s abas<\/strong>. A op\u00e7\u00e3o Advanced \u00e9 na verdade o grupo padr\u00e3o do Elementor para a coluna.<\/p>\n

\"Como<\/a><\/p>\n

As primeiras configura\u00e7\u00f5es que voc\u00ea ver\u00e1 s\u00e3o as configura\u00e7\u00f5es gerais, elas incluem todas as op\u00e7\u00f5es necess\u00e1rias para ajustar seu conte\u00fado de maneira ideal<\/strong>.<\/p>\n

\"Como<\/a><\/p>\n

A op\u00e7\u00e3o Colocar conte\u00fado abaixo da guia na tela permite definir a guia vertical de acordo com o tamanho da tela de destino. Voc\u00ea pode escolher entre quatro tamanhos de tela. Por exemplo, se o tamanho da tela for menor que 480px, o t\u00edtulo da guia ser\u00e1 colocado acima e n\u00e3o ao lado do texto. Esta op\u00e7\u00e3o refere-se apenas a guias verticais. A imagem abaixo ilustra como a guia vertical \u00e9 vista na tela grande e como quando voc\u00ea define o tamanho da tela na op\u00e7\u00e3o Colocar conte\u00fado abaixo da guia na tela abaixo.<\/p>\n

\"Como<\/a><\/p>\n

Para inserir e organizar o texto na guia vertical, clique na op\u00e7\u00e3o Itens<\/strong> e o menu ser\u00e1 aberto com um campo abaixo para inserir o texto diretamente<\/strong>. Voc\u00ea tamb\u00e9m pode ajustar imediatamente as configura\u00e7\u00f5es de texto em termos de alinhamento, tipografia. N\u00e3o h\u00e1 necessidade de definir as configura\u00e7\u00f5es gerais para tipografia, pois voc\u00ea pode fazer isso posteriormente na guia Estilo. Tamb\u00e9m \u00e9 aqui que voc\u00ea define o t\u00edtulo da guia vertical<\/strong>, simplesmente digitando-o no campo T\u00edtulo. No lado direito da tela, voc\u00ea ver\u00e1 imediatamente a visualiza\u00e7\u00e3o de todas as altera\u00e7\u00f5es que fizer.<\/p>\n

\"Como<\/a><\/p>\n

Depois de inserir o texto, voc\u00ea pode continuar a estiliz\u00e1-lo com mais detalhes<\/strong>. Clique na op\u00e7\u00e3o Estilo<\/strong> ao lado da op\u00e7\u00e3o Conte\u00fado no menu para abrir todas as configura\u00e7\u00f5es de estilo.<\/p>\n

\"Como<\/a><\/p>\n

A configura\u00e7\u00e3o Title Tag permite que voc\u00ea escolha se deseja que o t\u00edtulo da guia vertical\/horizontal seja H1, H2 e assim por diante. Na foto acima, optamos pelo H1.<\/p>\n

A op\u00e7\u00e3o Title Typography<\/strong> \u00e9 muito interessante. O primeiro \u00edcone com o globo abre um menu personalizado que permite escolher o tipo de tipografia entre as fontes globais<\/strong>. Essa \u00e9 uma escolha segura se voc\u00ea quiser garantir que sua guia esteja alinhada com o estilo geral do seu site.<\/p>\n

\"Como<\/a><\/p>\n

Se voc\u00ea se sentir confiante o suficiente para definir a tipografia do t\u00edtulo sozinho ou simplesmente quiser explorar mais op\u00e7\u00f5es, clique no \u00edcone de l\u00e1pis ao lado do globo para todas as configura\u00e7\u00f5es de tipografia dispon\u00edveis<\/strong>. Voc\u00ea pode test\u00e1-los todos facilmente, pois ver\u00e1 imediatamente o efeito no lado direito da tela.<\/p>\n

\"Como<\/a><\/p>\n

A op\u00e7\u00e3o Fam\u00edlia<\/strong> permite que voc\u00ea escolha a fonte<\/strong> e todas as op\u00e7\u00f5es abaixo permitem que voc\u00ea personalize ainda mais a fonte de sua escolha<\/strong>.<\/p>\n

A configura\u00e7\u00e3o Tamanho neste menu permite que voc\u00ea defina o tamanho das letras por conta pr\u00f3pria<\/strong>, a op\u00e7\u00e3o Peso permite ajustar a largura das letras na fonte<\/strong>. A op\u00e7\u00e3o Transformar permite que voc\u00ea escolha se deseja que o texto seja apenas em mai\u00fasculas ou min\u00fasculas ou em mai\u00fasculas etc. A op\u00e7\u00e3o Decora\u00e7\u00e3o permite escolher entre estilos da mesma fonte \u2013 padr\u00e3o, normal, it\u00e1lico ou obl\u00edquo. E voc\u00ea tamb\u00e9m pode ajustar a altura da linha<\/strong> e o espa\u00e7amento das letras por conta pr\u00f3pria.<\/p>\n

As configura\u00e7\u00f5es de tipografia s\u00e3o realmente divertidas de ajustar, pois h\u00e1 muitas op\u00e7\u00f5es e voc\u00ea pode realmente definir o t\u00edtulo e o corpo do texto para parecer exatamente como voc\u00ea imaginou. Depois de dar o toque final, voc\u00ea pode prosseguir para outras configura\u00e7\u00f5es de estilo que incluem a escolha da cor da fonte, a cor do plano de fundo e as bordas, se desejar t\u00ea-las<\/strong>. Se voc\u00ea optou pelo tipo de gradiente do plano de fundo, a op\u00e7\u00e3o Localiza\u00e7\u00e3o permite ajustar o efeito de gradiente.<\/p>\n

Abaixo voc\u00ea pode ver um exemplo de como organizamos o T\u00edtulo, achamos muito interessante a op\u00e7\u00e3o Borda que permite ajustar a largura do t\u00edtulo. Usamos apenas um lado do t\u00edtulo, mas voc\u00ea pode experimentar e ver o que funciona melhor para voc\u00ea.<\/p>\n

\"Como<\/a><\/p>\n

Voc\u00ea tamb\u00e9m pode personalizar o texto em termos de cor da fonte, cor de fundo, tipografia e tipo de borda. Como voc\u00ea tem uma visualiza\u00e7\u00e3o ao vivo de todas as altera\u00e7\u00f5es que faz, tem muito espa\u00e7o para experimentar at\u00e9 encontrar o que parece \u00f3timo na p\u00e1gina.<\/p>\n

\"Como<\/a><\/p>\n

A imagem abaixo \u00e9 um exemplo de como personalizamos o texto para caber no restante do conte\u00fado da p\u00e1gina.<\/p>\n

\"Como<\/a><\/p>\n

A pr\u00f3xima configura\u00e7\u00e3o importante a ser observada neste menu \u00e9 a op\u00e7\u00e3o Active\/Hover<\/strong>. \u00c9 aqui que voc\u00ea pode definir como a guia ficar\u00e1 quando passar o mouse sobre<\/strong>. As op\u00e7\u00f5es s\u00e3o as mesmas que todas as mencionadas anteriormente, portanto, se voc\u00ea deseja que o conte\u00fado pare\u00e7a diferente ao passar o mouse, \u00e9 aqui que voc\u00ea define exatamente o qu\u00e3o diferente deseja que ele pare\u00e7a.<\/p>\n

As op\u00e7\u00f5es Sideline<\/strong> encontradas aqui s\u00e3o para adicionar efeitos de foco animados. Recomendamos que voc\u00ea experimente um pouco e veja o que ficaria melhor em suas p\u00e1ginas.<\/p>\n

\"Como<\/a><\/p>\n

Se estiver satisfeito com a configura\u00e7\u00e3o da guia at\u00e9 agora, voc\u00ea pode continuar explorando as configura\u00e7\u00f5es de estilo de espa\u00e7amento. Isso permitir\u00e1 que voc\u00ea ajuste o espa\u00e7amento do t\u00edtulo, conte\u00fado e itens usados \u200b\u200bna guia.<\/p>\n

\"Como<\/a><\/p>\n

Caso voc\u00ea precise inserir uma aba horizontal, o procedimento \u00e9 basicamente o mesmo. Voc\u00ea ter\u00e1 todas as mesmas op\u00e7\u00f5es \u00e0 sua disposi\u00e7\u00e3o, exceto Colocar conte\u00fado abaixo da guia na tela na op\u00e7\u00e3o.<\/p>\n

Para informa\u00e7\u00f5es mais detalhadas confira os pr\u00f3ximos v\u00eddeos:<\/p>\n