Um construtor de cabeçalho e rodapé feito com blocos reais
Cabeçalhos, rodapés, barras superiores, mega menus, painéis laterais, títulos da página e seções hero são elementos que você cria no editor de blocos e depois atribui a todo o site ou a uma única página.
Atualizado em
Blocos aninhados como você espera
Um registro de cabeçalho contém um Header Root. O root contém um Container, e um Container contém Zones. Uma Zone é uma célula na linha do cabeçalho: o logo em uma, o menu na seguinte, um ícone de busca e um carrinho na última.
As zonas definem o layout
Uma zona define o que fica em cada lugar. Empurre uma para a direita, agrupe uma busca e um carrinho em um conjunto, ou deixe uma zona simples quando quiser que a marcação fique de fora.
- As zonas são reordenadas por ponto de quebra, então um único registro cobre desktop, tablet e celular
- Qualquer zona pode ser limitada a um nível de dispositivo e ficar fora da marcação nos demais
- Classes extras em uma zona, para quando você quiser acessá-la pelo seu próprio CSS
Os 22 blocos de cabeçalho
Header Root
O próprio cabeçalho. Todos os outros elementos ficam aninhados dentro dele.
Header Container
Um contêiner de largura, para que um cabeçalho possa ser limitado, ocupar a largura total ou alternar entre os dois em diferentes breakpoints.
Header Zone
Uma célula na linha do cabeçalho. Zonas contêm as partes e definem onde elas ficam.
Header Logo
Seu logotipo, com arquivos separados para os estados fixo e escuro.
Header Navigation
O menu principal, com menus suspensos e painéis de mega menu.
Header Search
Um ícone de busca que abre um campo, ou um campo que fica sempre aberto.
Header Cart
O carrinho do WooCommerce com a quantidade de itens e um resumo suspenso.
Header Social
Uma linha de ícones de redes sociais a partir dos perfis que você define uma única vez.
Header Button
Um botão de chamada para ação com as opções habituais de tamanho, estilo e link.
Header Icon Link
Um único ícone com link para qualquer destino, como um número de telefone ou uma página de conta.
Header Info
Um bloco pequeno com dados de contato, endereço ou horário de funcionamento.
Header Shop Search
Uma busca de produtos para lojas, limitada ao seu catálogo.
Header Topbar
Posiciona um registro de barra superior acima da linha do cabeçalho.
Mega Menu Column
Uma coluna dentro de um painel de mega menu, para que o painel possa ter um layout de verdade.
7 predefinições para você começar
Uma predefinição é um conjunto de configurações de layout que você aplica com um clique. Escolha o comportamento desejado e depois altere o que quiser nas configurações do bloco.
Transparente
Sem fundo, de modo que o que está atrás do cabeçalho fica visível.
Semitransparente
Um fundo translúcido, para que a imagem por trás continue visível e o texto continue legível.
Flutuante
O cabeçalho flutua dentro da página, com espaço em todas as bordas.
Semitransparente e flutuante
Flutuante, também com o fundo translúcido.
Pequeno e flutuante
Um cabeçalho flutuante com altura reduzida.
Largura total fixa
Ocupa toda a largura da janela e permanece fixo conforme a página rola.
Fixo ao rolar para cima
Deixa o topo conforme o visitante rola a página para baixo e volta quando ele rola para cima.
Barras superiores, mega menus e painéis laterais também são registros
Crie cada um uma vez, defina-o como padrão do site e depois substitua-o nas páginas que precisam de outra coisa.
Barras superiores
Uma barra superior é um registro próprio, com blocos próprios: um número de telefone, horário de funcionamento, um seletor de idioma e uma promoção. O bloco Header Topbar a posiciona acima da linha do cabeçalho. Atribua uma globalmente e substitua-a em cada página.
12 dos 88 demos trazem uma barra superior editável.
Painéis laterais
Um painel lateral é um registro que desliza a partir da borda da tela, para um menu secundário, um carrinho, um formulário de contato ou um conjunto de detalhes que sobrecarregaria o cabeçalho.
6 demos trazem um painel lateral já conectado a um gatilho.
Atribuir um registro é um campo: escolha o painel lateral padrão, a borda de onde ele surge, se ele empurra a página ou flutua sobre ela e como o gatilho aparece. Barras superiores, mega menus e rodapés são atribuídos da mesma forma.
94 campos, a maior seção em Opções do tema
As Opções do tema reúnem as configurações do cabeçalho de todo o site, que nenhum registro isolado deveria controlar. A importação de uma demo define todas para você, e você altera as que lhe interessam.
- 94 de 533 campos de Opções do tema pertencem ao cabeçalho
- Defina o cabeçalho padrão e, depois, substitua-o em qualquer página
- Comportamento fixo, altura, espaçamento e pontos de quebra para dispositivos móveis
- Todos os campos estão documentados nos artigos de referência
40 padrões de cabeçalho para começar
Insira um padrão e você recebe blocos comuns que podem ser reorganizados, renomeados e excluídos. Nada fica travado, e nada é uma captura de tela de um layout que você não consegue acessar.
- 40 padrões de cabeçalho, mais do que qualquer outra categoria
- 16 padrões de rodapé para a outra extremidade da página
- 183 padrões no total, organizados em 17 categorias
- Inserido pela aba de padrões do inseridor que você já usa
Rodapés e barras de direitos autorais são elementos separados
O rodapé funciona exatamente como o cabeçalho. Um registro Footer guarda as colunas, e um registro Copyrights guarda a faixa fina embaixo, para que você possa alterar o texto legal de todo o site sem mexer no design acima dele.
Seis blocos e 17 opções
Footer About para o texto sobre a empresa, Footer Contacts para o endereço e o telefone, Footer Instagram para um feed, Footer Widget Area para qualquer coisa que um widget faça, Widget Links para uma coluna organizada de links, e Copyrights para a barra inferior.
- Atribua um rodapé globalmente ou por página, assim como o cabeçalho
- Um registro de direitos autorais separado para a barra abaixo
- 16 padrões de rodapé para começar
- Pré-visualizado na área de edição conforme você monta a página
4 estilos, ou crie o seu próprio
A faixa abaixo do cabeçalho é uma superfície de design por si só, com 57 opções por trás dela e uma substituição por página em cada página que você publicar.
Padrão, Mini, Modelo ou Personalizado
Default é a faixa padrão. Mini é uma versão compacta para páginas internas. Template escolhe um dos layouts especializados nomeados. Custom exibe um registro de Título da página que você mesmo criou com blocos.
- Page Title, Heading, Subtitle, Breadcrumbs and Buttons blocks
- Um padrão do site inteiro que qualquer página individual pode substituir
- Fundo, altura, alinhamento e trilha de navegação são todos ajustes
Posicionado no modelo por um bloco de slot
Heroes e sliders são registros próprios, como os cabeçalhos. Um bloco de slot fica no modelo de bloco e traz o hero ou o slider atribuído à página que está sendo visualizada.
- Registros de Hero e de Slider, ambos criados a partir de blocos
- Os blocos Hero Slot e Slider Slot ficam no modelo, não no seu conteúdo
- Um modelo atende a todas as páginas, cada uma com sua própria abertura
- 12 das 88 demos incluem um slider que você pode editar
Você monta o cabeçalho onde vai vê-lo
Os blocos de slot projetam o cabeçalho, a barra superior, o título da página, o hero e o rodapé na área de edição, para que a página abra com aparência de página, e não de uma pilha de parágrafos.
Uma página no editor de blocos, com o cabeçalho e o rodapé desenhados ao redor do conteúdo pelo mesmo código que os desenha para o visitante.
Um único renderizador
O cabeçalho que você vê no canvas é desenhado pelo mesmo código que o desenha para o visitante, então não há uma prévia separada para manter fiel.
Global ou por página
Defina um cabeçalho, barra superior, título da página, hero e rodapé padrão para o site, depois substitua qualquer um deles em uma página específica, nas configurações dessa própria página.
Responsivo por design
As zonas podem ser reordenadas por ponto de quebra e restritas a uma faixa de dispositivos, então você verifica o layout do celular no editor antes que qualquer outra pessoa veja.
Preciso de um segundo cabeçalho para dispositivos móveis?
Um único cabeçalho do Canvas geralmente também funciona no celular, porque as zonas são reordenadas por ponto de quebra e cada uma pode ser limitada a uma categoria de dispositivo. Uma única configuração de cabeçalho pode colocar o logotipo no centro em um celular, remover os dados de contato e mover o menu para trás de um botão de alternância. Crie uma segunda configuração somente quando quiser um design realmente diferente, e não para corrigir um layout.
Uma página pode usar um cabeçalho diferente?
Sim, todo cabeçalho, barra superior, título da página e rodapé do Canvas tem um padrão para o site inteiro e uma substituição por página, então uma landing page pode ter um cabeçalho transparente e uma barra superior só com o logo, enquanto o restante do site mantém os seus próprios.
Um cabeçalho é uma área de widgets ou um menu?
Um cabeçalho do Canvas não é nenhuma das duas coisas: é um registro que você edita no editor de blocos, exatamente como uma página. A navegação, o logotipo, a pesquisa, o carrinho e os botões dentro dele são blocos com seus próprios painéis de configurações.
O que acontece com meu cabeçalho quando minha licença expira?
Quando uma licença do Canvas expira, seu cabeçalho e o restante do site continuam sendo exibidos exatamente como hoje. O que pausa é o serviço: atualizações, importações de demos, recursos de IA e edição de blocos premium são interrompidos até você renovar. Há um período de carência de 14 dias caso a verificação da licença não consiga acessar nossos servidores.
Ainda posso usar o Editor do site?
Sim, o Canvas é construído sobre modelos de bloco reais, então modelos e partes de modelo continuam onde o WordPress os mantém, e um registro de cabeçalho é inserido no modelo por meio de um bloco. Leia como o editor funciona.
Crie seu próximo site com o Canvas
Iniciante, freelancer ou agência, você recebe os mesmos blocos e os mesmos Demos. Comece com um site e crie quantos precisar com a mesma licença.