{"id":367349,"date":"2023-03-04T16:14:00","date_gmt":"2023-03-04T13:14:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367349"},"modified":"2022-10-12T12:33:36","modified_gmt":"2022-10-12T09:33:36","slug":"como-criar-alternancias-e-acordeoes-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-criar-alternancias-e-acordeoes-no-wordpress\/","title":{"rendered":"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress"},"content":{"rendered":"\n<p>Acorde\u00f5es e Altern\u00e2ncias s\u00e3o elementos \u00fateis que adicionam mais funcionalidades \u00e0 sua p\u00e1gina, permitem estruturar melhor o conte\u00fado e ajudam na organiza\u00e7\u00e3o geral do site. <strong>Adicion\u00e1-los n\u00e3o \u00e9 especialmente complicado, mas pode ser especialmente f\u00e1cil com a ferramenta certa<\/strong>.<\/p>\n<p>\u00c9 por isso que optamos pelos <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/?campaign=TogglesAccordions&#038;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Complementos Qi para Elementor<\/a>, f\u00e1ceis de usar, que incluem uma <strong>ampla variedade de op\u00e7\u00f5es de personaliza\u00e7\u00e3o e s\u00e3o incrivelmente f\u00e1ceis de usar<\/strong>. Este plugin \u00e9 atualmente a maior cole\u00e7\u00e3o de <strong>60 widgets gratuitos<\/strong> que voc\u00ea pode usar para adicionar mais funcionalidades ao seu site. Al\u00e9m disso, h\u00e1 uma incr\u00edvel cole\u00e7\u00e3o de mais de <strong>40 widgets Qi premium<\/strong>. E o que tamb\u00e9m \u00e9 muito importante \u00e9 que ele seja compat\u00edvel com todos os temas do WordPress.<\/p>\n<h2>Adicionando acorde\u00f5es e alternando widget gratuito com complementos Qi para Elementor<\/h2>\n<p>O Qi Addons permite que voc\u00ea <strong>personalize completamente os acorde\u00f5es e alterne o estilo para o tema do WordPress que voc\u00ea est\u00e1 usando<\/strong>, de fontes a cores e bordas e tudo mais.<\/p>\n<p>Para se inspirar, recomendamos verificar a <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/accordions-and-toggles\/?campaign=TogglesAccordions&#038;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e1gina de widgets<\/a>. Mostraremos como o aplicamos.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0a5ca65.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-343047-633e6f0a5ca65.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>A percep\u00e7\u00e3o b\u00e1sica de como o Elementor funciona \u00e9 tudo o que voc\u00ea precisa entender nesta se\u00e7\u00e3o. Esta \u00e9 na verdade uma linha contendo duas colunas com uma imagem na coluna da esquerda e acorde\u00f5es na coluna da direita. <strong>Claro, um acorde\u00e3o pode ocupar toda a linha ou qualquer parte da linha, conforme sua necessidade<\/strong>.<\/p>\n<p>Antes de continuarmos, vamos verificar algumas caracter\u00edsticas b\u00e1sicas de estilo que este addon vem com. Ent\u00e3o vamos come\u00e7ar pelo Comportamento. <strong>Dois tipos de comportamento s\u00e3o poss\u00edveis \u2013 Acorde\u00f5es<\/strong> onde apenas um item pode ser aberto em um ponto no tempo e <strong>Toggles<\/strong> que permite que mais de um item seja aberto ao mesmo tempo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f0d359b6.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-343047-633e6f0d359b6.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p><strong>O estilo pode ainda ser definido com bordas e v\u00e1rias op\u00e7\u00f5es est\u00e3o dispon\u00edveis:<\/strong><\/p>\n<ul>\n<li>Padr\u00e3o \u2013 sem bordas<\/li>\n<li>Em caixa \u2013 com bordas,<\/li>\n<li>Borda superior \u2013 s\u00f3 tem borda na parte superior acima do t\u00edtulo<\/li>\n<li>Border Between- tem apenas a fronteira entre o t\u00edtulo e a descri\u00e7\u00e3o<\/li>\n<\/ul>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f10ce932.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-343047-633e6f10ce932.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<h2>Como adicionar Accoridons e alternar com Qi Addons<\/h2>\n<p>Para come\u00e7ar, vamos definir a linha para ser dividida em duas colunas e adicionar uma imagem \u00e0 coluna da esquerda, apenas para tornar a se\u00e7\u00e3o mais atraente visualmente.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f143d6e6.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-343047-633e6f143d6e6.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>Depois que a imagem for adicionada, encontraremos o widget Acorde\u00f5es e altern\u00e2ncias digitando na barra de pesquisa ou rolando o menu. Quando o widget for encontrado, <strong>basta clicar nele, segur\u00e1-lo e mover para onde deseja colocar o novo elemento<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f17f28ff.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-343047-633e6f17f28ff.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>Adicionamos o widget Acorde\u00f5es e Altern\u00e2ncias ao lado direito da linha e voc\u00ea pode ver <strong>todas as configura\u00e7\u00f5es relacionadas a ele \u00e0 esquerda<\/strong>. As configura\u00e7\u00f5es padr\u00e3o do widget s\u00e3o definidas de forma que o <strong>texto e o estilo correspondam automaticamente ao tema que voc\u00ea est\u00e1 usando<\/strong>, portanto, caso voc\u00ea n\u00e3o veja necessidade de alter\u00e1-lo, basta concluir o processo aqui, o widget ficar\u00e1 como naturalmente pertencia ao tema.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1aa77cc.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-343047-633e6f1aa77cc.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>A pr\u00f3xima coisa que voc\u00ea precisa definir \u00e9 <strong>Behavior e Style<\/strong>. J\u00e1 mencionamos as op\u00e7\u00f5es de Comportamento e Estilo para que voc\u00ea possa definir aqui o que funcionar para voc\u00ea. Para o prop\u00f3sito deste artigo, selecionamos a op\u00e7\u00e3o Acorde\u00f5es no menu Comportamento e Estilo padr\u00e3o.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f1dc011b.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-343047-633e6f1dc011b.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>O que falta fazer agora, \u00e9 <strong>adicionar itens<\/strong>. Role para baixo para encontrar as <strong>op\u00e7\u00f5es de item<\/strong>. Voc\u00ea notar\u00e1 dois pequenos \u00edcones no canto superior direito da guia Itens. O primeiro \u00e9 para <strong>copiar um item existente<\/strong> e o <strong>pequeno X ao lado \u00e9 para remover um item<\/strong>. Abaixo da guia Item est\u00e1 o <strong>bot\u00e3o Adicionar Novo<\/strong> que serve para adicionar novos itens. Ao clicar para inserir um novo item, voc\u00ea precisa <strong>definir um t\u00edtulo primeiro e, em seguida, digitar o texto no campo designado abaixo<\/strong>. Voc\u00ea notar\u00e1 muitas op\u00e7\u00f5es semelhantes \u00e0s oferecidas em v\u00e1rios editores de texto para estilizar e formatar o texto. Recomendamos que voc\u00ea organize o texto e o t\u00edtulo neste momento, pois voc\u00ea ter\u00e1 imediatamente uma pr\u00e9via de como ficar\u00e1 no final.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f206ce5c.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-343047-633e6f206ce5c.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>Depois de inserir o texto, voc\u00ea pode definir a <strong>Altura do conte\u00fado<\/strong>. Esta op\u00e7\u00e3o <strong>refere-se ao tamanho do campo de altern\u00e2ncia<\/strong>. Se voc\u00ea definir a <strong>Altura do Item Mais Alto<\/strong>, cada item ter\u00e1 o mesmo tamanho que o maior. Se voc\u00ea selecionar a op\u00e7\u00e3o <strong>Altura do item individual<\/strong>, o tamanho de cada item corresponder\u00e1 ao tamanho do conte\u00fado nele.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f234b68b.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-343047-633e6f234b68b.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>Se voc\u00ea deseja <strong>alterar os \u00edcones padr\u00e3o que aparecem ao abrir e fechar o item, basta clicar no campo Abrir \u00cdcone ou Fechar \u00cdcone e duas novas op\u00e7\u00f5es ser\u00e3o exibidas<\/strong>. Um \u00e9 para adicionar novos \u00edcones da Biblioteca de \u00cdcones e o outro \u00e9 para adicionar um SVG.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f262759d.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-343047-633e6f262759d.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>Agora podemos passar para as <strong>configura\u00e7\u00f5es de estilo<\/strong>. Aqui \u00e9 onde voc\u00ea faz o ajuste fino do acorde\u00e3o e alterna o estilo do widget.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f28d995d.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-343047-633e6f28d995d.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>Voc\u00ea pode <strong>escolher o estilo do t\u00edtulo e definir a Tipografia do t\u00edtulo<\/strong>. Como mencionamos, as op\u00e7\u00f5es padr\u00e3o s\u00e3o definidas de forma que o estilo do widget corresponda ao tema que voc\u00ea est\u00e1 usando. Mas voc\u00ea sempre pode <strong>experimentar todas as outras op\u00e7\u00f5es simplesmente selecionando-as e as altera\u00e7\u00f5es ser\u00e3o imediatamente vis\u00edveis no widget do lado direito da tela<\/strong>. Explore as op\u00e7\u00f5es e veja o que funciona melhor para voc\u00ea.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f2cbed4b.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-343047-633e6f2cbed4b.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>As pr\u00f3ximas configura\u00e7\u00f5es referem-se \u00e0s mudan\u00e7as de estilo que <strong>ocorrem em um item quando ele \u00e9 fechado ou aberto<\/strong>. Voc\u00ea pode, por exemplo, definir o texto para ter uma cor diferente quando for aberto, ou o fundo pode ter uma cor diferente. H\u00e1 tamb\u00e9m a op\u00e7\u00e3o de definir um preenchimento diferente quando o item est\u00e1 ativo, ou seja, aberto.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-343047-633e6f30ee551.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-343047-633e6f30ee551.jpg\" alt=\"Como criar altern\u00e2ncias e acorde\u00f5es no WordPress\" ><\/a><\/p>\n<p>Se voc\u00ea preferir tutoriais em v\u00eddeo, d\u00ea uma olhada neste criado pelos autores de Qi:<\/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\/WDgy5sFM0vc\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Para concluir<\/h2>\n<p>\u00c0 medida que voc\u00ea se sentir mais familiarizado com o plug-in, voc\u00ea explorar\u00e1 op\u00e7\u00f5es ainda mais refinadas para ajustar o estilo do seu widget de acorde\u00e3o e altern\u00e2ncia. Esta ferramenta intuitiva \u00e9 perfeita para iniciantes, pois \u00e9 incrivelmente f\u00e1cil de usar, enquanto os usu\u00e1rios avan\u00e7ados tamb\u00e9m v\u00e3o gostar de us\u00e1-la, pois oferece uma abund\u00e2ncia de op\u00e7\u00f5es de personaliza\u00e7\u00e3o.<\/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>Aprenda a criar acorde\u00f5es no WordPress com um plugin gratuito e organize seu conte\u00fado da maneira mais f\u00e1cil de usar!<\/p>\n","protected":false},"author":1,"featured_media":364273,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[573],"tags":[848],"class_list":["post-367349","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\/367349","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=367349"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/367349\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/364273"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=367349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=367349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=367349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}