Topo
Cabeçalho do site com logotipo, menu e um botão de ação. Primeira seção das páginas completas.
Nesta página
Visão geral
Cabeçalho do site com logotipos, navegação (menu customizado ou WordPress), botão de ação e estilos responsivos.
| Propriedade | Valor |
|---|---|
| Nome no editor | Topo |
| Onde encontrar | Painel de widgets do Elementor, categoria Converto |
| Identificador no Elementor | lgr-header |
| Identificador no Markdown | header |
| Papel na página | Navegação |
| Campos de conteúdo | 9 |
| Opções de estilo | 22 (2 responsivas) |
Quando usar
Situações em que este widget é indicado:
- O site precisa de um cabeçalho/header (topo).
- Há navegação principal e um CTA (botão de ação) a serem exibidos no topo.
- Por padrão, inclua este header junto com o restante da página ao gerar o Markdown completo (topo, corpo e rodapé juntos, nesta ordem).
Como adicionar
- Abra a página no editor do Elementor.
- No painel de widgets, abra a categoria Converto e arraste Topo para a página (ou clique em + em uma área vazia).
- Preencha a aba Conteúdo e ajuste a aba Estilo.
O widget também pode vir pronto em um modelo de página ou ser inserido pelo Converto Construtor.
Opções da aba Conteúdo
Logotipos
| Opção | Tipo | Detalhes |
|---|---|---|
| Logotipo | Imagem ou arquivo | |
| Logotipo / Flutuante | Imagem ou arquivo | |
| Logotipo / Responsivo | Imagem ou arquivo |
Navegação
| Opção | Tipo | Detalhes |
|---|---|---|
| Fonte do Menu | Seleção | Opções: Criar no Próprio Widget (custom), Menu do WordPress (wp_menu) · Padrão: custom |
| Selecione o Menu | Seleção | Opções: Selecione um menu (``) · Acesse Aparência > Menus para criar e gerenciar os itens. |
| Itens do Menu | Lista | |
| ↳ Título do Link | Texto | Padrão: Título de Alta Conversão |
| ↳ URL | Link |
Botão de Ação
| Opção | Tipo | Detalhes |
|---|---|---|
| Mostrar Botão? | Sim/Não | Padrão: Ligado |
| Texto | Texto | Padrão: Entrar |
| Link | Link |
Opções da aba Estilo
A aba Estilo reúne 22 opções em 7 seções (a última é Animações, comum a todos os widgets Converto).
| Seção | O que ajusta |
|---|---|
| Logotipo | Tamanho do Logotipo, Tamanho do Logotipo (Flutuante) |
| Fundo | Cor de Fundo, Cor de Fundo (Flutuante) |
| Links de Navegação | Cor dos Links (Normal), Cor dos Links no Hover (Normal), Cor dos Links (Flutuante), Cor dos Links no Hover (Flutuante) |
| Botão de Ação | Cor do Texto, Cor de Fundo, Arredondamento da Borda |
| Transparência | Aplicar transparência? |
| Responsivo | Tamanho do Logotipo, Fundo do Topo, Cor do Ícone, Tamanho do Ícone do Menu, Cor de Fundo do Menu, Cor dos Links, Cor dos Links (Hover), Tamanho dos Links, Cor do Texto do Botão, Cor do Fundo do Botão |
| Animações | Entrada de textos e de imagens e ícones: tipo, velocidade, atraso e intervalo (veja Animações de entrada) |
Comportamento responsivo
2 opções deste widget são responsivas: o Elementor permite definir valores diferentes para desktop, tablet e celular (ícones de dispositivo ao lado do campo). Para ajustes finos por largura de tela, use a sintaxe curta de media queries no campo CSS da aba Avançado.
Campos no Converto Construtor (Markdown)
Use o identificador header na linha <!-- converto:header -->. Campos de conteúdo (bloco :::content):
| Campo | Tipo | Obrigatório | Detalhes |
|---|---|---|---|
desktop_logo_white | Imagem ou arquivo | Não | Logotipo exibido no fundo branco/claro (modo normal). |
desktop_logo_black | Imagem ou arquivo | Não | Logotipo exibido no fundo escuro/transparente (modo flutuante após scroll). |
mobile_logo | Imagem ou arquivo | Não | Logotipo reduzido para dispositivos móveis. |
menu_source | Seleção | Não | Escolher entre menu customizado no widget ou menu nativo do WordPress. · Opções: custom, wp_menu |
wp_menu_select | Seleção | Não | Slug ou nome do menu WordPress (quando menu_source = wp_menu). Acesse Aparência > Menus para criar/gerenciar. |
custom_menu_items | Lista | Não | Itens do menu customizado (usado quando menu_source = custom). |
↳ menu_title | Texto | Sim | Texto do link de navegação. |
↳ menu_link | Link | Sim | URL ou âncora para o link. |
show_signup | Sim/Não | Não | Mostrar botão de ação/signup no final do menu. |
signup_text | Texto | Não | Texto do botão de ação (quando show_signup = sim). |
signup_link | Link | Não | URL para o botão de ação (quando show_signup = sim). |
Os controles da aba Estilo também podem ser usados no bloco :::style, pelos identificadores do próprio widget (campo omitido mantém o padrão). Veja a linguagem Markdown Converto.
Exemplo
<!-- converto:header -->
:::content
desktop_logo_white: https://exemplo.com/imagem.jpg
desktop_logo_black: https://exemplo.com/imagem.jpg
mobile_logo: https://exemplo.com/imagem.jpg
menu_source: custom
wp_menu_select: opcao
custom_menu_items:
- menu_title: Título de Alta Conversão
menu_link: https://exemplo.com/oferta
- menu_title: Título de Alta Conversão
menu_link: https://exemplo.com/oferta
show_signup: yes
signup_text: Entrar
signup_link: https://exemplo.com/oferta
:::Recursos comuns a todos os widgets
- Textos aceitam variáveis de página (
{{rotulo}}) e marcação de texto. - Aba Avançado: campos CSS e JS por elemento (CSS e JS personalizado).
- Seção Animações na aba Estilo (Animações de entrada).