Etapa 02: Agrupar o bloco<\/h3>\n\n\n\n Ao agrupar o bloco, voc\u00ea pode adicionar v\u00e1rios blocos, um a um, dentro da se\u00e7\u00e3o de grupo especificada. A maior vantagem \u00e9 que voc\u00ea pode fazer uma ampla personaliza\u00e7\u00e3o entre eles, o que n\u00e3o \u00e9 poss\u00edvel com blocos normais n\u00e3o agrupados.<\/p>\n\n\n\n
Clique no \u00edcone de tr\u00eas pontos<\/strong> na barra de ferramentas. Localizar e clique na op\u00e7\u00e3o Grupo<\/strong> na lista.<\/p>\n\n\n\nDepois que o bloco for agrupado, voc\u00ea ver\u00e1 o \u00edcone de mais (+) do Gutenberg na se\u00e7\u00e3o de grupo. Agora, voc\u00ea pode adicionar novos blocos dentro dela.<\/p>\n\n\n\nEtapa 03: Adicione uma breve descri\u00e7\u00e3o da se\u00e7\u00e3o da equipe<\/h3>\n\n\n\n A adi\u00e7\u00e3o de uma breve descri\u00e7\u00e3o da se\u00e7\u00e3o da equipe trar\u00e1 benef\u00edcios de SEO e ajudar\u00e1 os usu\u00e1rios a entender o contexto da se\u00e7\u00e3o.<\/p>\n\n\n\n
Adicionar o bloco Par\u00e1grafo<\/strong> na se\u00e7\u00e3o do grupo.<\/p>\n\n\n\nBasta escrever o que deseja descrever sobre a se\u00e7\u00e3o. Voc\u00ea pode diminuir a largura do conte\u00fado do bloco usando a op\u00e7\u00e3o de preenchimento.<\/p>\n\n\n\n
Voc\u00ea pode personalizar cada bloco imediatamente ap\u00f3s adicion\u00e1-lo. Mas faremos isso depois que o layout completo estiver pronto.<\/p>\n\n\n\nEtapa 04: Adicionar membros da equipe<\/h3>\n\n\n\n Agora, voc\u00ea precisa criar um layout separado nessa se\u00e7\u00e3o para exibir os membros da sua equipe. Voc\u00ea pode exibi-los de diferentes maneiras. At\u00e9 agora, vimos que a maioria dos sites exibe suas se\u00e7\u00f5es de equipe nos formatos de linha, coluna e caixa.<\/p>\n\n\n\n
Portanto, tamb\u00e9m apresentaremos nossa se\u00e7\u00e3o de equipe no formato de caixa de coluna. Selecione o grupo inteiro<\/strong> por clicando no \u00edcone Grupo<\/strong> na barra de ferramentas. Pressione o \u00edcone de mais (+)<\/strong>. <\/p>\n\n\n\nLocalizar e adicionar o bloco Column<\/strong>.<\/p>\n\n\n\nSelecione o n\u00famero de colunas com base no n\u00famero de membros da equipe que deseja mostrar. Como mostraremos tr\u00eas membros, estamos selecionando tr\u00eas colunas.<\/p>\n\n\n\nEmbora tenhamos mencionado tr\u00eas colunas, voc\u00ea pode se surpreender com o fato de haver apenas uma coluna depois que o bloco for adicionado. N\u00e3o se preocupe! As colunas aparecer\u00e3o ao passar o mouse alternadamente e clicar no espa\u00e7o em branco \u00e0 direita.<\/p>\n\n\n\n
Veja o v\u00eddeo abaixo.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nVoc\u00ea pode adicionar novos blocos dentro do bloco principal. V\u00e1 para a primeira coluna. Adicionar o bloco Image<\/strong> dentro dela. Depois disso, voc\u00ea pode carregar uma imagem da biblioteca de m\u00eddia ou de sua unidade local.<\/p>\n\n\n\nVoc\u00ea pode ver que j\u00e1 adicionamos uma imagem. Temos alinhado centralmente<\/strong>. Voc\u00ea pode redimensionar a imagem usando os c\u00edrculos da borda.<\/p>\n\n\n\nQuando terminar de usar a imagem, pressione o bot\u00e3o Enter em seu teclado<\/strong> para obter a nova op\u00e7\u00e3o de adi\u00e7\u00e3o de bloco. Por padr\u00e3o, o bloco de par\u00e1grafos ser\u00e1 exibido.<\/p>\n\n\n\nAdicione o nome do membro da equipe, sua designa\u00e7\u00e3o e uma breve introdu\u00e7\u00e3o sobre ele. N\u00f3s os adicionamos usando o bloco de par\u00e1grafo.<\/p>\n\n\n\nAgora vamos vincular os perfis sociais pessoais<\/strong> dos membros da equipe na mesma coluna atrav\u00e9s de blocos sociais<\/strong>. <\/p>\n\n\n\nVamos vincular quatro perfis populares aqui. Portanto, crie mais quatro colunas dentro da coluna pai usando blocos de colunas.<\/p>\n\n\n\n
Adicionar o bloco de \u00edcones sociais<\/strong> na coluna principal, abaixo do nome e da introdu\u00e7\u00e3o do membro da equipe.<\/p>\n\n\n\nO bloco Social Icon integra todas as plataformas populares de m\u00eddia social. Depois que o bloco Social Icon for adicionado, voc\u00ea ter\u00e1 a flexibilidade de escolher os blocos de sua prefer\u00eancia clicando no bot\u00e3o \u00edcone de mais (+)<\/strong>. O v\u00eddeo anexado abaixo explica o processo.<\/p>\n\n\n\n<\/video><\/figure>\n\n\n\nClique nos \u00edcones sociais <\/strong>um por um. Voc\u00ea ver\u00e1 uma caixa na qual poder\u00e1 copiar e colar os respectivos links de perfil social. Complete a se\u00e7\u00e3o social dessa forma.<\/p>\n\n\n\nSelecione a coluna pai inteira<\/strong>. Venha para o Guia Estilos<\/strong>. Remova os espa\u00e7os desnecess\u00e1rios entre os blocos que voc\u00ea adicionou horizontalmente usando o bot\u00e3o Op\u00e7\u00e3o de espa\u00e7amento de bloco<\/strong>.<\/p>\n\n\n\nAdicionar uma cor de fundo<\/strong> para a coluna do membro da equipe. Para uma melhor apar\u00eancia, adicionar preenchimento horizontal<\/strong> para adicionar algum espa\u00e7o adicional ao redor da coluna. <\/p>\n\n\n\nDa mesma forma, complete as outras duas colunas do lado direito adicionando novos membros \u00e0 equipe.<\/p>\n\n\n\nVoc\u00ea pode ver que preenchemos as tr\u00eas colunas com tr\u00eas membros da equipe e suas informa\u00e7\u00f5es.<\/p>\n\n\n\nEtapa 05: Estilize a se\u00e7\u00e3o de todos os membros da equipe<\/h3>\n\n\n\n Selecione toda a se\u00e7\u00e3o de membros da equipe<\/strong> clicando no bot\u00e3o \u00cdcone de grupo<\/strong> na barra de ferramentas. <\/p>\n\n\n\nAdicionar uma cor de fundo<\/strong> para a se\u00e7\u00e3o da equipe que lhe parecer adequada. Depois disso, voc\u00ea pode alterar a cor do texto individualmente<\/strong>selecionando os respectivos blocos de par\u00e1grafo, um a um.<\/p>\n\n\n\nPr\u00f3ximo, adicionar algum preenchimento<\/strong> tanto vertical quanto horizontalmente para criar um espa\u00e7o em branco em toda a se\u00e7\u00e3o.<\/p>\n\n\n\nPor fim, adicione um raio \u00e0 se\u00e7\u00e3o da equipe para que o canto da borda tenha uma forma semirredonda. Isso dar\u00e1 uma apar\u00eancia diferente e bonita \u00e0 se\u00e7\u00e3o.<\/p>\n\n\n\nEtapa 06: Visualize a se\u00e7\u00e3o da equipe no front-end<\/h3>\n\n\n\n Por fim, v\u00e1 para o front-end da p\u00e1gina e veja como a se\u00e7\u00e3o da equipe est\u00e1. <\/p>\n\n\n\nConclus\u00e3o<\/h2>\n\n\n\n Voc\u00ea tamb\u00e9m pode criar e personalizar a se\u00e7\u00e3o de membros da equipe de v\u00e1rias maneiras diferentes. Acabamos de apresentar aqui um processo b\u00e1sico a partir do qual voc\u00ea pode se inspirar para criar e realizar designs mais maravilhosos.<\/p>\n\n\n\n
Se voc\u00ea tiver algum problema em qualquer parte do tutorial, n\u00e3o hesite em nos informar por meio da caixa de coment\u00e1rios. Por fim, antes de sair de nosso site, reserve alguns minutos para explorar esta postagem em Como criar uma caixa de conte\u00fado no WordPress<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"A team member section is a dedicated space in a website where you can showcase talented people who make up your team and organization. It’s a place where you can highlight their expertise, achievements, and success stories. The primary purpose of a website is not only to capture attention but also to connect people. Honestly, […]<\/p>\n","protected":false},"author":1,"featured_media":2104,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[102],"class_list":["post-1967","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-web-design"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/07\/How-to-Create-a-Team-Member-Section-in-WordPress.webp","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/pt\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1967","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/comments?post=1967"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1967\/revisions"}],"predecessor-version":[{"id":8167,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/posts\/1967\/revisions\/8167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media\/2104"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/media?parent=1967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/categories?post=1967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/pt\/wp-json\/wp\/v2\/tags?post=1967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\")
<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n![\"Escreva](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/07\/Write-the-title-for-your-team-section-using-the-Paragraph-block.webp\")
<\/figure>\n\n\n\n![\"Agrupar](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/07\/Group-the-Paragraph-Block.webp\")
<\/figure>\n\n\n\n![\"Op\u00e7\u00e3o](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/07\/Gutenberg-block-adding-option-within-the-group-section.webp\")
<\/figure>\n\n\n\n![\"Adicione](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/07\/Add-a-Brief-Description-of-the-Team-Section.webp\")
<\/figure>\n\n\n\n![\"Adicione](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/07\/Add-a-description-of-the-team-section.webp\")
<\/figure>\n\n\n\n![\"Adicione](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/07\/Add-the-Column-block-to-show-the-team-members.webp\")
<\/figure>\n\n\n\n![\"Selecione](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/07\/Select-the-number-of-columns.webp\")
<\/figure>\n\n\n\n