Termos de Layout do WordPress Desmistificados (Referência Rápida)

Quando começamos a projetar sites com WordPress, fomos bombardeados com novos termos como "cabeçalhos", "rodapés" e "widgets". Parecia que estávamos aprendendo uma língua totalmente nova apenas para construir um site simples.

Agora, depois de ajudar milhões de usuários do WordPress nos últimos 16 anos, não só dominamos esses termos, mas também descobrimos as maneiras mais fáceis de explicá-los para iniciantes.

Se você ainda está confuso sobre o que esses termos de layout significam (e como eles funcionam juntos), não se preocupe. Você não está sozinho e está no lugar certo.

Neste guia direto, detalharemos todos os termos essenciais de layout do WordPress em explicações simples e fáceis de entender que você pode consultar a qualquer momento.

Uma Breve Observação Sobre Layout no WordPress

Ao aprender sobre layouts do WordPress, você encontrará termos diferentes dependendo de como está construindo seu site. Isso varia dependendo se você está usando temas que suportam o editor de site completo, o personalizador de um tema clássico ou plugins de construtor de páginas do WordPress.

Por exemplo, com o Editor de Site Completo, você encontrará opções de layout em Aparência » Editor:

Enquanto em temas clássicos, você usará o Personalizador de Tema em Aparência » Personalizar.

Veja como fica:

Para maior flexibilidade de design, muitos usuários optam por construtores de página como SeedProd, que oferecem interfaces de arrastar e soltar.

Eles também geralmente vêm com recursos que as ferramentas padrão do WordPress não possuem, como blocos extras e avançados para adicionar ao seu conteúdo.

Embora essas ferramentas possam usar termos e interfaces diferentes, os conceitos fundamentais de layout permanecem os mesmos. Entender esses termos principais ajudará você a criar melhores designs no WordPress e até mesmo um layout personalizado, independentemente das ferramentas que você esteja usando.

Vamos explorar esses termos essenciais de layout do WordPress e ver como eles funcionam em diferentes plataformas. Veja o que abordaremos:

• Entendendo um Layout Típico no WordPress
• Header Area
• Imagem/Cor de Fundo
• Área de Conteúdo
• Área da Barra Lateral (Opcional)
• Área do Rodapé
• Outros Componentes de um Layout WordPress
• Menu de Navegação
• Widgets (Temas Clássicos)
• Blocos
• Imagens Destacadas
• Imagens de Capa
• Padrões de Blocos
• Botões
• CSS personalizado
• Termos de Layout em Construtores de Página do WordPress
• Usando Templates em Construtores de Página do WordPress
• Módulos e Blocos em Construtores de Página do WordPress
• Usando Seções em Construtores de Página do WordPress
• Perguntas Frequentes
• Recursos Extras

Entendendo um Layout Típico no WordPress

Pense no layout de um site como uma carta amigável. Uma carta tem uma saudação no topo (o cabeçalho), a mensagem principal no meio (a área de conteúdo) e uma assinatura na parte inferior (o rodapé).

A maioria dos sites segue essa mesma estrutura simples. Ela se parece com isto:

Dependendo da página que um usuário visualiza, o layout pode diferir.

Por exemplo, uma página de blog do WordPress pode incluir uma barra lateral ao lado da área de conteúdo.

Este layout básico é preenchido com outros elementos, que discutiremos mais adiante neste artigo.

Vamos primeiro falar sobre cada uma dessas seções principais com mais detalhes.

Área do Cabeçalho

O cabeçalho em um layout do WordPress é a seção superior de qualquer página. Geralmente contém o logotipo do seu site, título, menus de navegação, um formulário de pesquisa e outros elementos importantes que você deseja que os usuários vejam primeiro.

Veja como a seção do cabeçalho aparece no WPBeginner.

Cabeçalho Personalizado em Temas WordPress

Muitos temas populares do WordPress incluem recursos adicionais para personalizar a área do cabeçalho do seu layout WordPress, que às vezes é chamado de cabeçalho personalizado.

Personalizando o Cabeçalho em um Tema de Blocos

Se você usar um tema de blocos com suporte ao editor de site, poderá alterar o cabeçalho clicando na área do cabeçalho no editor de site.

A partir daqui, você pode personalizar o cabeçalho ao seu gosto. Você pode alterar cores, ajustar o menu de navegação e adicionar blocos como pesquisa, logotipo do site, botões e muito mais.

Personalizando o Cabeçalho em um Tema Clássico

Para temas clássicos, você geralmente encontra essas configurações no personalizador de temas. Procure por uma seção chamada 'Cabeçalho', 'Opções de Cabeçalho' ou 'Identidade do Site'.

Dependendo do seu tema WordPress, você pode adicionar uma imagem de largura total ao cabeçalho com uma frase de efeito ou um botão de chamada para ação.

Alguns temas do WordPress podem permitir que você altere a posição do logotipo, os menus de navegação e as imagens do cabeçalho.

Imagem/Cor de Fundo

Alguns temas do WordPress também permitem que você altere facilmente a cor de fundo ou use uma imagem de fundo para o seu site.

Alterando o Fundo em um Tema de Bloco

Se você usar um tema com suporte ao editor de sites, poderá alterar a cor de fundo acessando 'Estilos' no editor de site completo.

Simplesmente escolha a opção 'Cores' no painel Estilos.

Depois disso, você pode clicar em 'Fundo' para escolher uma cor de fundo para o seu site.

Alterando o Fundo em um Tema Clássico

Para temas clássicos, as configurações dependerão dos recursos do seu tema.

Muitos temas clássicos vêm com suporte a fundo personalizado. Você pode encontrar essas configurações nas opções 'Cores' ou 'Imagem de Fundo' no personalizador de temas.

Frequentemente, essas opções estão ocultas dentro de outras abas, e você terá que procurar para encontrá-las.

Para mais detalhes, você pode ver estes guias relacionados para adicionar uma imagem de fundo no WordPress ou alterar a cor de fundo no WordPress.

Área de Conteúdo

A área de conteúdo está localizada logo após o cabeçalho no layout de um site. É onde o conteúdo principal da página é exibido.

Para um layout de página inicial personalizada, a seção de conteúdo pode incluir uma chamada para ação seguida por serviços ou produtos, depoimentos e outras informações importantes.

Lojas online normalmente usam esta área para promover promoções em andamento, produtos em destaque, itens mais vendidos e muito mais.

Por outro lado, um site rico em conteúdo, como um blog ou site de revista, pode usar um layout com muito conteúdo.

Ele mostrará os artigos mais recentes com trechos e imagens, exibirá um formulário de inscrição para newsletter para criar uma lista de e-mail, ou usará áreas de descoberta de conteúdo para ajudar os usuários a encontrar mais maneiras de passar tempo no site.

Veja como é o layout da página de blog do WPBeginner.

Ele exibe nosso conteúdo mais popular com uma chamada para ação para que os usuários se inscrevam em nossa lista de e-mail. (Veja: outros métodos que usamos para crescer nossa lista de e-mail)

Por padrão, o WordPress usa um layout de blog mostrando seus posts mais recentes como a página inicial do seu site.

No entanto, você pode alterar essa configuração e usar qualquer página individual como a página inicial do seu site.

Vá para a página Configurações » Leitura e selecione 'Uma página estática' na opção 'Sua página inicial exibe'.

Depois disso, você pode escolher uma página para usar como sua página inicial e outra para sua página de blog.

Para mais detalhes, veja nosso guia sobre como criar uma página separada para seus posts de blog no WordPress.

Não se esqueça de clicar no botão ‘Salvar Alterações’ para armazenar suas configurações.

Agora, você pode editar a página que escolheu como sua página inicial e criar um layout de página inicial personalizado.

Área da Barra Lateral (Opcional)

Tradicionalmente, as barras laterais aparecem no lado direito ou esquerdo da área de conteúdo.

Dito isso, muitos sites modernos agora optam por layouts mais limpos e sem barras laterais – especialmente para páginas de negócios e landing pages.

Barras laterais em temas clássicos

Em temas clássicos do WordPress, as barras laterais são áreas prontas para widgets onde você pode adicionar widgets como arquivos, formulários de inscrição de newsletter, categorias e conteúdo popular.

Você encontrará essas opções na página Aparência » Widgets.

Barras laterais em temas de blocos

Para temas de blocos, as barras laterais funcionam de forma diferente. Embora esses temas possam incluir áreas de barra lateral, eles usam blocos em vez de widgets tradicionais.

Você pode personalizá-los diretamente através do Editor do Site, oferecendo opções de design mais flexíveis.

Lembre-se de que alguns temas modernos do WordPress podem não incluir áreas de barra lateral, focando em vez disso em layouts de largura total e focados no conteúdo.

Para mais informações sobre o uso de barras laterais, você pode conferir nosso guia definitivo de truques de barra lateral do WordPress.

Área do Rodapé

A área do rodapé aparece abaixo da área de conteúdo na parte inferior do layout de uma página.

Se você usa um tema do WordPress com suporte ao editor do site, então você pode editar a área do rodapé clicando nela.

É aqui que você trabalhará com Partes de Modelo. Pense em Partes de Modelo como blocos reutilizáveis para seções como seu cabeçalho e rodapé.

A melhor parte é que você pode editá-los uma vez, e eles serão atualizados em todos os lugares do seu site.

Para editar seu rodapé, vá para Aparência » Editor para iniciar o editor do site. A partir daí, selecione 'Padrões' no menu do lado esquerdo e role para baixo até a seção 'Partes de Modelo' para encontrar e clicar no seu rodapé.

Ao editar a área do rodapé no editor do site, você pode adicionar quaisquer blocos para exibir diferentes elementos.

Por exemplo, você pode adicionar uma lista de suas páginas mais importantes, mostrar um menu de navegação, adicionar um formulário de contato e muito mais.

Se você estiver usando um tema clássico, há uma boa chance de que ele venha com uma área de widget de rodapé.

Simplesmente vá para a página Aparência » Widgets e procure por uma área de widget de rodapé.

Assim como o editor do site, você pode usar blocos para adicionar diferentes elementos aos widgets de rodapé no seu tema.

Pensando no que colocar no rodapé do seu site? Veja nossa lista de coisas para adicionar ao rodapé do seu site WordPress.

Outros Componentes de um Layout WordPress

Em seguida, veremos alguns dos componentes de um layout WordPress que você pode adicionar às seções de cabeçalho, conteúdo, barra lateral ou rodapé. Estes são os blocos de construção que ajudam você a criar um layout funcional.

Menu de Navegação

Menus de navegação ou menus são listas horizontais ou verticais de links. A maioria dos sites tem pelo menos um menu de navegação principal na área do cabeçalho.

No entanto, alguns sites usam vários menus de navegação na área do cabeçalho.

O WordPress também permite que você exiba menus de navegação como um widget. Esses menus aparecem como uma lista vertical de links, e você pode colocá-los em barras laterais ou nas áreas de widget do rodapé.

Para mais detalhes, confira nossos guias sobre como adicionar menus de navegação no WordPress e como estilizar menus de navegação do WordPress.

Widgets (Temas Clássicos)

Se o seu tema WordPress suporta widgets, então você pode usá-los para reorganizar o layout do seu site. Além disso, com widgets de bloco, seu tema agora também pode usar blocos nas áreas de widget.

Você pode adicionar widgets às áreas prontas para widgets ou barras laterais do seu site WordPress. Alguns temas WordPress vêm com várias áreas prontas para widgets para adicionar widgets ou blocos.

O WordPress vem com vários widgets e blocos integrados que você pode usar. Muitos plugins populares do WordPress também fornecem seus próprios widgets e blocos.

Por exemplo, você pode usar widgets/blocos para adicionar listas de posts populares, um formulário de contato, banners, feeds de redes sociais e mais.

Você pode ver todos esses widgets visitando a página Aparência » Widgets na área de administração do WordPress.

Observação: Se o seu tema não tiver áreas de widget, você pode não ver a página 'Widgets' na área de administração do WordPress.

Para mais detalhes, veja nosso guia sobre como adicionar e usar widgets no WordPress.

Blocos

O WordPress usa o editor de blocos para escrever conteúdo, gerenciar áreas de widget ou editar seu site. Ele usa blocos para todos os elementos comuns da web, por isso é chamado de editor de blocos.

Este editor foi projetado para ajudá-lo a criar layouts bonitos para seus posts e páginas do WordPress usando blocos.

Existem diferentes tipos de blocos para os elementos mais comuns de qualquer tipo de conteúdo. Por exemplo, você pode adicionar parágrafos, títulos, imagens, galerias, incorporações de vídeo, colunas, tabelas e mais.

Isso permite que você crie layouts diferentes para cada postagem ou página em seu site WordPress sem instalar um plugin ou alterar seu tema.

Em temas de blocos, esses mesmos blocos também podem substituir widgets tradicionais em áreas como barras laterais, cabeçalhos e rodapés.

Imagens Destacadas

Se você visitar a página inicial do WPBeginner, notará imagens em miniatura ao lado de cada título de artigo. Estas são chamadas de imagens destacadas.

O WordPress permite que você defina imagens destacadas para suas postagens e páginas. Seu tema WordPress então usa essas imagens em diferentes áreas do seu site.

Para saber mais, consulte nosso guia sobre como adicionar imagens destacadas no WordPress.

Imagens de Capa

Uma imagem de capa é geralmente uma imagem ampla usada como foto de capa para uma nova seção em uma postagem de blog ou página.

Você pode adicioná-la à sua postagem ou página usando o bloco de Capa. O bloco de Capa também permite que você use uma cor de fundo em vez de uma imagem.

Para saber mais, consulte nosso guia detalhado sobre a diferença entre a imagem de capa e a imagem destacada.

Padrões de Blocos

Padrões são coleções de blocos pré-arranjados que você pode usar para adicionar rapidamente diferentes seções aos seus layouts.

Você pode usar padrões para escrever conteúdo e editar posts e páginas.

Da mesma forma, você pode usar padrões no editor de site completo em seu tema de blocos do WordPress e layout do site.

Simplesmente inicie o editor de site e você verá padrões nas opções de ‘Design’.

Cada padrão é uma coleção de blocos arranjados em uma ordem particular para layouts comumente usados.

Seu tema do WordPress pode vir com vários padrões. Você também pode encontrar mais padrões na Biblioteca de Padrões do WordPress.

Quer salvar suas seções de design? Você salva seus próprios arranjos de blocos como padrões e os reutiliza mais tarde.

Padrões de Blocos são um recurso poderoso no WordPress, e você pode encontrar milhares de opções gratuitas no Diretório Oficial de Padrões do WordPress.

À medida que mais temas e plugins do WordPress adicionam seus próprios padrões, esta biblioteca continua a crescer.

Você pode ver nosso guia sobre como usar padrões de blocos no WordPress para saber mais.

Botões

Botões desempenham um papel importante no design e layout de sites modernos. Eles fornecem aos usuários uma chamada clara para ação, o que ajuda você a crescer seu negócio e suas conversões.

O editor de blocos padrão vem com um bloco de Botão que você pode usar em qualquer post ou página do WordPress ou dentro do editor de site.

O seu tema do WordPress também pode incluir configurações de botões de call-to-action no personalizador do tema. A maioria dos plugins populares de construtor de páginas do WordPress também inclui botões em vários estilos.

Você pode até adicionar botões de clique para ligar no WordPress com um plugin.

Para mais detalhes, veja nosso guia sobre como adicionar botões de call-to-action no WordPress.

CSS personalizado

Pense em CSS (Cascading Style Sheets) como a tinta e a decoração do seu site. É o código que controla detalhes visuais como cores, fontes e espaçamento.

O seu tema e plugins do WordPress vêm com suas próprias regras de CSS, mas você pode querer mudar pequenas coisas como a cor do texto ou o tamanho da fonte. É aqui que o CSS personalizado entra.

O WordPress torna super fácil para você salvar suas próprias regras de CSS personalizadas.

Adicionando CSS Personalizado em um Tema de Blocos

Se você está usando um tema de blocos com suporte ao editor de site, vá para a página Aparência » Editor.

No painel principal do editor, clique no ícone 'Estilos' no canto superior direito. Isso abrirá o painel 'Estilos' na coluna da direita.

A partir daqui, role para baixo e clique na aba 'CSS Adicional'. Isso mostrará uma caixa de texto onde você pode adicionar seu código CSS.

Não se esqueça de clicar no botão 'Salvar' para armazenar suas alterações quando terminar.

Adicionando CSS Personalizado em um Tema Clássico

Se você usa um tema clássico do WordPress, pode adicionar seu CSS personalizado no personalizador do tema.

Simplesmente vá para a página Aparência » Personalizar e depois clique na aba 'CSS Adicional'.

A partir daqui, você pode adicionar suas regras de CSS personalizadas e poderá vê-las aplicadas na pré-visualização ao vivo.

Adicionando CSS Personalizado no WordPress Usando um Plugin

Normalmente, se você usar os métodos padrão, seu código CSS personalizado será salvo com as configurações do seu tema. Mudar de tema desativará seu código CSS personalizado.

Uma maneira melhor de armazenar seu CSS personalizado no WordPress é usar o plugin WPCode. É o melhor plugin de snippets de código do WordPress, permitindo que você adicione facilmente snippets de código personalizados sem quebrar seu site.

Primeiro, você precisa instalar e ativar o plugin WPCode. Para detalhes, veja nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, vá para Snippets de Código » + Adicionar Novo no painel de administração do WordPress.

Em seguida, passe o mouse sobre a opção ‘Add Your Custom Code (New Snippet)’ na biblioteca de trechos de código e clique no botão ‘Use snippet’.

Em seguida, na parte superior da página, adicione um título para o seu snippet de CSS personalizado. Pode ser qualquer coisa que ajude você a identificar o código.

Depois disso, escreva ou cole seu CSS personalizado na caixa ‘Pré-visualização do Código’ e defina o ‘Tipo de Código’ escolhendo a opção ‘Snippet de CSS’ no menu suspenso.

Em seguida, role para baixo até a seção ‘Inserção’ e selecione o método ‘Auto-Inserir’ se você quiser executar o código em todo o seu site WordPress.

Você pode escolher o método ‘Shortcode’ se quiser executar o código apenas em páginas ou posts específicos.

Finalmente, retorne ao topo da página, ative o interruptor para ‘Ativo’ e clique no botão ‘Salvar Snippet’.

Isso salvará seu snippet de código CSS personalizado.

Para mais informações sobre este tópico, veja nosso guia completo sobre como adicionar CSS personalizado no WordPress.

Termos de Layout em Construtores de Página do WordPress

A maneira mais fácil de construir layouts personalizados do WordPress para suas páginas de destino é usando um construtor de páginas do WordPress.

Recomendamos o uso do SeedProd. É o plugin construtor de páginas para WordPress mais amigável para iniciantes do mercado.

Outros construtores de páginas usam termos semelhantes para ferramentas e recursos comuns.

Usando Templates em Construtores de Página do WordPress

Modelos são a maneira mais rápida de criar o layout de uma página da web. Todos os plugins populares de construtores de páginas vêm com um monte de modelos prontos para usar que você pode usar como ponto de partida.

Por exemplo, o SeedProd tem modelos para vários tipos de páginas, incluindo páginas de destino, páginas de vendas, páginas 404, páginas em breve e muito mais.

Módulos e Blocos em Construtores de Página do WordPress

Assim como os blocos no editor padrão do WordPress, os plugins construtores de páginas também usam blocos.

Alguns construtores de páginas podem chamá-los de módulos ou elementos, mas eles são essencialmente a mesma coisa.

No entanto, os plugins construtores de páginas vêm com mais blocos do que o editor padrão. Por exemplo, o SeedProd inclui blocos para depoimentos, blocos do WooCommerce, Google Maps, formulários de contato, incorporações do Facebook e muito mais.

Você pode usar blocos para criar seus próprios layouts, movê-los e experimentar para determinar o que funciona melhor para o seu negócio.

Usando Seções em Construtores de Página do WordPress

Semelhante ao recurso 'Padrões' no editor padrão, uma Seção é um conjunto de blocos agrupados para criar instantaneamente áreas comuns de um site.

Por exemplo, você pode usar tipicamente uma seção de cabeçalho, imagem de destaque, tabelas de preços e muito mais.

Plugins diferentes de construtores de páginas do WordPress podem usar termos diferentes para eles. Por exemplo, o SeedProd os chama de seções, e o Beaver Builder os chama de linhas e colunas salvas.

Perguntas Frequentes

Aqui estão algumas perguntas frequentemente feitas por nossos leitores sobre layouts do WordPress:

Qual é a diferença entre um bloco e um widget no WordPress?

Blocos são os elementos básicos de construção que você usa para criar conteúdo no editor do WordPress, como parágrafos, imagens ou botões.

Widgets eram tradicionalmente usados para adicionar módulos de conteúdo específicos a áreas fora do conteúdo principal da página, como barras laterais e rodapés.

Em temas modernos baseados em blocos, os blocos agora podem ser usados em qualquer área pronta para widgets, dando a você muito mais flexibilidade e tornando o sistema de widgets clássico menos comum.

Posso ter um layout diferente para cada página?

Sim, você absolutamente pode. O editor de blocos do WordPress permite que você crie layouts exclusivos para cada postagem e página. Você pode organizar colunas, adicionar blocos diferentes e estruturar o conteúdo como quiser em uma base de página por página.

Para ainda mais controle, plugins de construtor de páginas como SeedProd permitem que você crie páginas totalmente personalizadas do zero, que são totalmente independentes do layout padrão do seu tema.

Todos os temas do WordPress vêm com uma barra lateral?

Não, nem todos os temas incluem uma barra lateral.

Muitos designs modernos focam em um layout limpo e de largura total para uma experiência de usuário mais focada, especialmente em landing pages e sites de negócios.

No entanto, a maioria dos temas multitarefa ainda oferece uma barra lateral como uma opção que você pode ativar ou desativar através do personalizador de temas ou do editor do site.

Recursos Extras

Abaixo estão alguns recursos adicionais para iniciantes que cobrem os conceitos básicos de design do WordPress com mais detalhes:

• Como Adicionar Conteúdo Fictício para Desenvolvimento de Temas no WordPress
• Guia Rápido de Temas WordPress para Iniciantes
• Como Encontrar Quais Arquivos Editar no Tema do WordPress
• Guia para Iniciantes sobre a Hierarquia de Modelos do WordPress (Folha de Cola)
• Como Criar Facilmente um Tema Personalizado do WordPress (Sem Código)

Esperamos que este artigo tenha ajudado você a aprender sobre os termos usados nos layouts do WordPress. Você também pode querer conferir nosso guia sobre aprender WordPress grátis em uma semana ou marcar nosso Glossário do WordPress, um dicionário amigável para iniciantes de termos do WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.