- M\u00e9todo 1: Usando o plug-in Ultimate Blocks<\/a>
- Etapa 1: Instale o plug-in Ultimate Blocks<\/a><\/li>
- Etapa 2: Adicionar o bloco de altern\u00e2ncia de conte\u00fado<\/a><\/li>
- Etapa 3: Personalizar o bloco de altern\u00e2ncia de conte\u00fado<\/a><\/li><\/ul><\/li>
- M\u00e9todo 2: Usando o bloco de expans\u00e3o<\/a>
- Etapa 1: Adicionar o bloco de expans\u00e3o<\/a><\/li>
- Etapa 2: Adicionar conte\u00fado ao bloco<\/a><\/li>
- Etapa 3: Personalizar o bloco de expans\u00e3o<\/a><\/li><\/ul><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n
<\/div><\/div><\/div>\n\n\nM\u00e9todo 1: Usando o plug-in Ultimate Blocks<\/strong><\/h2>\n\n\n\n
Etapa 1: Instale o plug-in Ultimate Blocks<\/strong><\/h3>\n\n\n\n
Navegue at\u00e9 o painel de controle do WordPress, v\u00e1 para a se\u00e7\u00e3o \"Plugins\"<\/strong> se\u00e7\u00e3o e clique em \"Adicionar novo\".<\/strong> Tipo \"Blocos definitivos\"<\/strong> na barra de pesquisa, localize o plug-in nos resultados, clique em \"Instalar agora\"<\/strong> e depois \"Ativar\".<\/strong>
<\/p>\n\n\n\n![\"Instalar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1-5-1024x613.png\")
<\/figure>\n\n\n\nEtapa 2: Adicionar o bloco de altern\u00e2ncia de conte\u00fado<\/strong><\/h3>\n\n\n\n
Abra o post ou a p\u00e1gina em que voc\u00ea deseja adicionar conte\u00fado dobr\u00e1vel. Clique no bot\u00e3o \u00cdcone \"+\"<\/strong> no editor do WordPress para adicionar um novo bloco, procure por \"Content Toggle\" e selecione-o. <\/p>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/1.2-1024x425.png\")
<\/figure>\n\n\n\nDepois de adicionar o bloco, voc\u00ea ver\u00e1 o bloco de altern\u00e2ncia em posi\u00e7\u00e3o, mas em um formato fechado. Clique no sinal de seta para expandi-lo e coloque o t\u00edtulo de seu conte\u00fado no campo \"T\u00edtulo do painel\"<\/strong> e, posteriormente, o conte\u00fado principal no campo \"Conte\u00fado do painel\"<\/strong> caixa. <\/p>\n\n\n\n
![\"T\u00edtulo](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.2-2-1024x450.png\")
<\/figure>\n\n\n\nAgora, se voc\u00ea precisar de mais de uma se\u00e7\u00e3o expans\u00edvel ou recolh\u00edvel, clique no bot\u00e3o + bot\u00e3o<\/strong> na parte inferior do bloco para inserir uma nova altern\u00e2ncia. Da mesma forma, se voc\u00ea n\u00e3o quiser nenhuma altern\u00e2ncia espec\u00edfica, clique no bot\u00e3o x no final do bloco. <\/p>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.3-1024x423.png\")
<\/figure>\n\n\n\nEtapa 3: Personalizar o bloco de altern\u00e2ncia de conte\u00fado<\/strong><\/h3>\n\n\n\n
Depois de selecionar o bloco, o painel de configura\u00e7\u00f5es do bloco aparecer\u00e1 \u00e0 direita do painel. L\u00e1, voc\u00ea encontrar\u00e1 duas guias separadas: Configura\u00e7\u00f5es gerais e estilos.<\/strong><\/p>\n\n\n\n
No Configura\u00e7\u00f5es gerais<\/strong> voc\u00ea pode:<\/p>\n\n\n\n
- \n
- Ajuste o T\u00edtulo do painel<\/strong> para uma hierarquia adequada.<\/li>\n\n\n\n
- Defina o estado de altern\u00e2ncia para controlar se os pain\u00e9is devem ser recolhidos ou abertos quando a p\u00e1gina for carregada.<\/li>\n\n\n\n
- Ativar Esquema de perguntas frequentes<\/strong> para melhorar a visibilidade nos resultados dos mecanismos de pesquisa.<\/li>\n\n\n\n
- Uso Controle responsivo<\/strong> para ocultar ou exibir o bloco em dispositivos espec\u00edficos.<\/li>\n\n\n\n
- Adicionar um Caixa de pesquisa<\/strong> para facilitar a navega\u00e7\u00e3o nas perguntas frequentes. No entanto, esse recurso \u00e9 limitado aos usu\u00e1rios Pro.\u00a0<\/li>\n<\/ul>\n\n\n\n
![\"Configura\u00e7\u00f5es](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3.1-3-1024x519.png\")
<\/figure>\n\n\n\nAgora, se voc\u00ea mudar para o Guia Estilos<\/strong>No site, voc\u00ea pode ajustar cores, ativar bordas, definir estilos e posi\u00e7\u00f5es de \u00edcones de altern\u00e2ncia e ajustar o preenchimento e as margens.<\/p>\n\n\n\n
![\"Guia](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/3.2-2-1024x738.png\")
<\/figure>\n\n\n\nQuando estiver satisfeito, clique em \"Publish\" (Publicar) ou \"Update\" (Atualizar) para torn\u00e1-lo ativo.<\/p>\n\n\n\n
![\"Demonstra\u00e7\u00e3o](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/toggledemo-1.gif\")
<\/figure>\n\n\n<\/div><\/div><\/div>\n\n\nM\u00e9todo 2: Usando o bloco de expans\u00e3o<\/strong><\/h2>\n\n\n\n
Etapa 1: Adicionar o bloco de expans\u00e3o<\/strong><\/h3>\n\n\n\n
Navegue at\u00e9 a p\u00e1gina ou postagem em que deseja que o conte\u00fado seja dobr\u00e1vel\/expans\u00edvel. Clique no \u00edcone \"+\" novamente para adicionar um novo bloco, procure por \"Expand\" e selecione-o.\u00a0<\/p>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.1.1-1024x444.png\")
<\/figure>\n\n\n\nEtapa 2: Adicionar conte\u00fado ao bloco<\/strong><\/h3>\n\n\n\n
O bloco fornecer\u00e1 duas se\u00e7\u00f5es: uma para o conte\u00fado vis\u00edvel (mostrado inicialmente) e outra para o conte\u00fado oculto (revelado quando clicado). Adicione o conte\u00fado que deseja que fique vis\u00edvel na primeira se\u00e7\u00e3o, acima do \"Mostrar mais<\/strong>\". Coloque o restante do conte\u00fado na se\u00e7\u00e3o oculta abaixo do texto \"Mostrar mais<\/strong>\" texto. <\/p>\n\n\n\n
![\"Conte\u00fado](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.2.2-1024x468.png\")
<\/figure>\n\n\n\nClique no bot\u00e3o + sinal<\/strong> em cada bloco, selecione o bloco de sua prefer\u00eancia e, posteriormente, adicione conte\u00fado aos blocos. Voc\u00ea pode personalizar o bloco \"Mostrar mais<\/strong>\" e \"Mostrar menos\"<\/strong> textos para se adequar melhor ao seu conte\u00fado ou p\u00fablico. Basta clicar nos textos padr\u00e3o e substitu\u00ed-los pelos r\u00f3tulos desejados.<\/p>\n\n\n\n
![\"Adicionar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.1.3-1024x472.png\")
<\/figure>\n\n\n\nEtapa 3: Personalizar o bloco de expans\u00e3o<\/strong><\/h3>\n\n\n\n
A vers\u00e3o gratuita oferece personaliza\u00e7\u00e3o limitada, incluindo configura\u00e7\u00f5es de rolagem, controle responsivo e ajustes de dimens\u00e3o na guia Styles (Estilos). Mas, se voc\u00ea fizer upgrade para a vers\u00e3o profissional, poder\u00e1 escolher um efeito de esmaecimento para o conte\u00fado minimizado (dispon\u00edvel em General Settings). Voc\u00ea tamb\u00e9m pode personalizar o estilo, a cor de fundo, a borda e o raio do bot\u00e3o para obter uma apar\u00eancia mais refinada.<\/p>\n\n\n\n
\n![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.3.1-1.png\")
<\/figure>\n\n\n\n![\"Personalizar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/2.3.2-1.png\")
<\/figure>\n<\/div>\n\n\n\nQuando estiver satisfeito com o resultado, clique em \"Publish\" (Publicar) ou \"Update\" (Atualizar) para salvar e exibir as altera\u00e7\u00f5es em seu site.<\/p>\n\n\n\n
![\"Demonstra\u00e7\u00e3o](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/expanddemo-1-1.gif\")
<\/figure>\n\n\n\nConclus\u00e3o<\/strong><\/h4>\n\n\n\n
O objetivo deste artigo \u00e9 orient\u00e1-lo na cria\u00e7\u00e3o de conte\u00fado dobr\u00e1vel e expans\u00edvel no WordPress, mantendo um layout limpo e f\u00e1cil de navegar. Os Ultimate Blocks permitem que voc\u00ea fa\u00e7a isso sem a necessidade de codifica\u00e7\u00e3o e com simplicidade, tanto em termos de usabilidade quanto de design. Compreender as necessidades do seu p\u00fablico \u00e9 fundamental, pois ajuda a implementar o conte\u00fado recolh\u00edvel onde ele oferece mais valor e garante que tudo funcione sem problemas para uma experi\u00eancia de navega\u00e7\u00e3o ideal. Lembre-se de que pequenas mudan\u00e7as como essas podem transformar a maneira como os visitantes interagem com seu site.<\/p>","protected":false},"excerpt":{"rendered":"
Have you ever scrolled through a lengthy webpage, struggling to pinpoint the exact information you need? It\u2019s frustrating, isn\u2019t it? The solution lies in collapsible and expandable content, which is a simple yet effective way to organize information. This technique lets you present detailed content while keeping your pages clean and easy to navigate. Whether […]<\/p>\n","protected":false},"author":9,"featured_media":5045,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-5018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/11\/expandcollapse850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/pt\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/5018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=5018"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/5018\/revisions"}],"predecessor-version":[{"id":5047,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/5018\/revisions\/5047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/5045"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=5018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=5018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=5018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Etapa 2: Adicionar conte\u00fado ao bloco<\/a><\/li>
- Etapa 2: Adicionar o bloco de altern\u00e2ncia de conte\u00fado<\/a><\/li>
- Etapa 1: Instale o plug-in Ultimate Blocks<\/a><\/li>