# Site

Páginas, banners e artigos do site da imobiliária.

# Páginas

Módulo detalhado de como realizar edições nas páginas de imóveis, criar landing pages e editar elas

# Como montar as páginas do site com o Page Builder?

<span style="white-space: pre-wrap;">O </span>**Page Builder**<span style="white-space: pre-wrap;"> permite criar e organizar as páginas do site diretamente pelo sistema, utilizando </span>**blocos**<span style="white-space: pre-wrap;">, </span>**colunas**<span style="white-space: pre-wrap;"> e </span>**widgets**.

Os widgets representam os conteúdos exibidos na página, como busca de imóveis, destaques, formulários, mapas, depoimentos e outros recursos. Eles podem ser posicionados e configurados visualmente, sem necessidade de programação.

---

##### **Navegação no Módulo**

[![entradasitepaginas.gif](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/entradasitepaginas.gif)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/entradasitepaginas.gif)

**Rotina:**<span style="white-space: pre-wrap;"> Site &gt; </span>**Páginas**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/IAjimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/IAjimage.png)

A listagem apresenta as principais informações das páginas cadastradas.

<table id="bkmrk-informa%C3%A7%C3%A3odescri%C3%A7%C3%A3ot"><colgroup><col></col><col style="width: 709px;"></col></colgroup><tbody><tr><th>Informação

</th><th>Descrição

</th></tr><tr><td>**Título**

</td><td>Identifica a página. Ao clicar, ela é aberta no construtor.

</td></tr><tr><td>**Link Permanente**

</td><td>Apresenta o endereço utilizado para acessar a página no site.

</td></tr><tr><td>**Tipo**

</td><td>Identifica a finalidade da página dentro do site.

</td></tr></tbody></table>

Também estão disponíveis as seguintes ações:

<table id="bkmrk-a%C3%A7%C3%A3odescri%C3%A7%C3%A3ocadastr"><colgroup><col></col><col style="width: 749px;"></col></colgroup><tbody><tr><th>Ação

</th><th>Descrição

</th></tr><tr><td>**Cadastrar**

</td><td>Permite criar uma nova página.

</td></tr><tr><td>**Editar Site**

</td><td>Abre o site em uma nova aba já autenticado no editor visual. A ação depende da permissão de configuração do site.

</td></tr></tbody></table>

---

##### **Estrutura de uma página**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/mxNimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/mxNimage.png)

A construção de uma página é organizada em três níveis.

<table id="bkmrk-estruturadescri%C3%A7%C3%A3obl"><colgroup><col></col><col style="width: 765px;"></col></colgroup><tbody><tr><th>Estrutura

</th><th>Descrição

</th></tr><tr><td>**Bloco**

</td><td>Representa uma faixa horizontal da página. Possui configurações próprias de fundo, largura e espaçamento.

</td></tr><tr><td>**Coluna**

</td><td>Representa a divisão interna de um bloco. Um bloco pode possuir diferentes configurações de colunas.

</td></tr><tr><td>**Widget**

</td><td>É o conteúdo inserido dentro de uma coluna, como formulários, imagens, buscas ou textos.

</td></tr></tbody></table>

<span style="white-space: pre-wrap;">Os blocos podem ser reordenados pela </span>**barra de alça**, enquanto os widgets podem ser movimentados entre as colunas pelo próprio título.

---

##### **Entendendo os diferentes tipos de página que existem**

<span style="white-space: pre-wrap;">O </span>**Tipo de Página**<span style="white-space: pre-wrap;"> determina onde ela será utilizada e quais widgets estarão disponíveis no construtor.</span>

<table id="bkmrk-tipodescri%C3%A7%C3%A3ohomep%C3%A1g"><colgroup><col></col><col style="width: 661px;"></col></colgroup><tbody><tr><th>Tipo

</th><th>Descrição

</th></tr><tr><td>**Home**

</td><td>Página inicial do site.

</td></tr><tr><td>**Página Normal**

</td><td>Utilizada para páginas institucionais, como Quem Somos ou conteúdos gerais.

</td></tr><tr><td>**Imóvel Listar**

</td><td>Página utilizada para apresentar a listagem de imóveis.

</td></tr><tr><td>**Imóvel Detalhar**

</td><td>Página utilizada para apresentar os detalhes de um imóvel.

</td></tr><tr><td>**Imóvel não Disponível**

</td><td>Página exibida quando um imóvel não está mais disponível.

</td></tr><tr><td>**Condomínio Detalhar**

</td><td>Apresenta as informações de um condomínio.

</td></tr><tr><td>**Artigo Listar**

</td><td>Apresenta a listagem de artigos.

</td></tr><tr><td>**Artigo Detalhar**

</td><td>Apresenta o conteúdo completo de um artigo.

</td></tr><tr><td>**Corretor Detalhar**

</td><td>Apresenta as informações relacionadas a um corretor.

</td></tr><tr><td>**Contato**

</td><td>Página utilizada para contato com a imobiliária.

</td></tr><tr><td>**Solicitação de Imóvel**

</td><td>Utilizada para solicitações relacionadas a imóveis.

</td></tr><tr><td>**Cadastro de Imóvel**

</td><td>Utilizada para cadastramento ou captação de imóveis.

</td></tr><tr><td>**Indicadores Imobiliários**

</td><td>Página destinada à apresentação de indicadores imobiliários.

</td></tr><tr><td>**Landing Page**

</td><td>Utilizada para campanhas e páginas específicas.

</td></tr><tr><td>**Página Modelo**

</td><td>Funciona como um modelo reutilizável em outras páginas.

</td></tr><tr><td>**Rodapé**

</td><td>Define o conteúdo utilizado no rodapé do site.

</td></tr><tr><td>**Carrossel para TV**

</td><td>Utilizado para exibição de conteúdos em telas.

</td></tr><tr><td>**Redirecionamento**

</td><td>Encaminha o acesso para outro endereço e não possui conteúdo próprio.

</td></tr></tbody></table>

<p class="callout warning"><span style="white-space: pre-wrap;">Alguns tipos são necessários para o funcionamento de áreas específicas do site, como </span>**Home**<span style="white-space: pre-wrap;">, </span>**Imóvel Detalhar**<span style="white-space: pre-wrap;">, </span>**Contato**<span style="white-space: pre-wrap;">, </span>**Artigo Listar**<span style="white-space: pre-wrap;">, </span>**Artigo Detalhar**<span style="white-space: pre-wrap;"> e </span>**Condomínio Detalhar**.</p>

<p class="callout warning"><span style="white-space: pre-wrap;"> O tipo da página não pode ser alterado enquanto existirem widgets exclusivos do tipo atual. Remova esses widgets antes de realizar a alteração.</span></p>

---

##### **Preenchendo as informações da página**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/xHyimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/xHyimage.png)

As informações básicas definem a identificação, endereço e exibição da página.

<table id="bkmrk-campodescri%C3%A7%C3%A3ot%C3%ADtulo"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Título**

</td><td>Define o nome da página. O preenchimento é obrigatório.

</td></tr><tr><td>**Link Permanente**

</td><td>Define o endereço da página no site. É gerado automaticamente pelo título, mas pode ser alterado.

</td></tr><tr><td>**Link de redirecionamento**

</td><td><span style="white-space: pre-wrap;">Disponível no tipo </span>

**Redirecionamento**

<span style="white-space: pre-wrap;"> e define o endereço para onde o acesso será encaminhado.</span>

</td></tr><tr><td>**Meta - Palavras Chaves**

</td><td>Permite informar palavras-chave separadas por vírgula, respeitando o limite de 56 caracteres.

</td></tr><tr><td>**Meta - Descritivo da Página**

</td><td>Define a descrição utilizada pela página, com limite de 155 caracteres.

</td></tr><tr><td>**Ativo**

</td><td>Define se a página estará disponível no site.

</td></tr><tr><td>**Mobile**

</td><td>Define que a página será utilizada especificamente para dispositivos móveis.

</td></tr></tbody></table>

<p class="callout warning">**Atenção:**<span style="white-space: pre-wrap;"> Uma página padrão e sua versão </span>**Mobile**<span style="white-space: pre-wrap;"> podem utilizar o mesmo link permanente. A versão mobile deve ser criada depois que a página correspondente sem a opção Mobile já existir.</span></p>

<p class="callout warning"><span style="white-space: pre-wrap;"> </span>**Atenção:**<span style="white-space: pre-wrap;"> Quando a opção </span>**Mobile**<span style="white-space: pre-wrap;"> estiver ativada, o construtor disponibiliza apenas blocos de coluna completa.</span></p>

---

##### **Adicionando um bloco**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/006image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/006image.png)

<span style="white-space: pre-wrap;">Selecione o formato desejado e utilize </span>**Adicionar um novo bloco de widgets**.

<table id="bkmrk-estruturadistribui%C3%A7%C3%A3"><colgroup><col style="width: 402px;"></col><col style="width: 429px;"></col></colgroup><tbody><tr><th>Estrutura

</th><th>Distribuição

</th></tr><tr><td>**Coluna Completa**

</td><td>100% da largura disponível.

</td></tr><tr style="height: 10px;"><td>**Lateral / Central**

</td><td>33% / 66%.

</td></tr><tr><td>**Central / Lateral**

</td><td>66% / 33%.

</td></tr><tr><td>**Três colunas**

</td><td>33% / 33% / 33%.

</td></tr><tr><td>**Duas colunas**

</td><td>50% / 50%.

</td></tr><tr><td>**Quatro colunas**

</td><td>25% / 25% / 25% / 25%.

</td></tr></tbody></table>

<span style="white-space: pre-wrap;">Cada coluna apresenta sua respectiva largura e uma opção </span>**+**<span style="white-space: pre-wrap;"> para adicionar widgets.</span>

---

##### **Adicionar widgets**

[![adicionandowidget.gif](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/adicionandowidget.gif)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/adicionandowidget.gif)

Os widgets podem ser adicionados de duas formas.

<table id="bkmrk-formadescri%C3%A7%C3%A3oarrast"><colgroup><col></col><col style="width: 711px;"></col></colgroup><tbody><tr><th>Forma

</th><th>Descrição

</th></tr><tr><td>**Arrastar**

</td><td>Arraste o widget disponível na parte superior diretamente para a coluna desejada.

</td></tr><tr><td>**Adicionar pelo +**

</td><td><span style="white-space: pre-wrap;">Clique no botão </span>

**+**

<span style="white-space: pre-wrap;"> da coluna e escolha o widget pela janela de seleção.</span>

</td></tr></tbody></table>

<span style="white-space: pre-wrap;">A lista de widgets possui busca e pode variar conforme o </span>**Tipo de Página**<span style="white-space: pre-wrap;"> selecionado.</span>

<p class="callout warning">**Atenção:**<span style="white-space: pre-wrap;"> Cada widget possui regras sobre os tamanhos de coluna em que pode ser utilizado. Caso um widget não seja aceito em determinada coluna, utilize uma estrutura com largura compatível.</span></p>

---

##### **Configurando um widget**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/FgJimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/FgJimage.png)

Ao clicar em um widget, suas configurações são expandidas.

Os campos apresentados variam de acordo com a finalidade do componente.

<table id="bkmrk-op%C3%A7%C3%A3odescri%C3%A7%C3%A3ominimi"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Opção

</th><th>Descrição

</th></tr><tr><td>**Minimizar/Maximizar Widget**

</td><td>Recolhe ou expande as configurações para facilitar a organização da página.

</td></tr><tr><td>**Widget Ativo**

</td><td>Define se o widget será exibido no site. Quando desativado, permanece configurado na página, mas não é apresentado ao visitante.

</td></tr><tr><td>**Remover Widget**

</td><td>Remove o componente da página.

</td></tr></tbody></table>

---

##### **Widgets disponíveis**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/TR3image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/TR3image.png)

Os widgets podem ser agrupados conforme sua finalidade.

<table id="bkmrk-categoriaexemplosim%C3%B3"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Categoria

</th><th>Exemplos

</th></tr><tr><td>**Imóveis**

</td><td>Busca para Imóvel, Listagem de Imóveis, Slider de Destaques, Listagem de Condomínios, Imóveis Relacionados e Mapas.

</td></tr><tr><td>**Ficha do imóvel**

</td><td>Características, Localização, Medidas, Valores, Detalhes, Descrição, Documentos, Imagem Principal e Mapa do Imóvel.

</td></tr><tr><td>**Mídia**

</td><td>Galeria de Imagens, Galeria de Plantas, Carrossel de Mídias, Vídeos, Tour Virtual 360º, Youtube Playlist e Feed do Instagram.

</td></tr><tr><td>**Captação de contato**

</td><td>Formulários, Atendimento via WhatsApp, Solicitação de Imóveis, Cadastro de Imóveis e Propostas.

</td></tr><tr><td>**Conteúdo**

</td><td>Título de Página, Bloco de Conteúdo, HTML, Linha Divisória, Lista de Links, FAQ, Depoimentos, QR Code e Banner.

</td></tr><tr><td>**Artigos**

</td><td>Listagem, Busca, Categoria, Resumos e Detalhar Artigo.

</td></tr><tr><td>**Institucional**

</td><td>Informações da Imobiliária, Corretores, Construtoras, Redes Sociais, Indicadores e Campos Customizados.

</td></tr><tr><td>**Temporada**

</td><td>Calendário de Disponibilidade, Pacotes para Temporada e Formulário de Reserva.

</td></tr></tbody></table>

<p class="callout warning">**Atenção:**<span style="white-space: pre-wrap;"> Alguns widgets dependem do contexto da página. Recursos relacionados aos detalhes de imóveis, por exemplo, ficam disponíveis apenas em tipos que possuem um imóvel relacionado.</span></p>

---

##### **Utilizar layouts prontos**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/Dijimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/Dijimage.png)

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/kJsimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/kJsimage.png)

<span style="white-space: pre-wrap;">Nos tipos </span>**Landing Page**<span style="white-space: pre-wrap;"> e </span>**Rodapé**, o construtor disponibiliza modelos de layout já configurados.

<span style="white-space: pre-wrap;">Após selecionar um modelo, utilize </span>**Aplicar Layout**<span style="white-space: pre-wrap;"> para montar automaticamente a estrutura de blocos e widgets. Depois disso, os conteúdos podem ser personalizados normalmente.</span>

---

##### **Duplicar uma página**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/ge4image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/ge4image.png)

<span style="white-space: pre-wrap;">A opção </span>**Duplicar**<span style="white-space: pre-wrap;"> cria uma cópia completa da página, incluindo blocos, widgets e configurações.</span>

<span style="white-space: pre-wrap;">Ao realizar a duplicação, deve ser informado um novo </span>**Link Permanente**<span style="white-space: pre-wrap;">. O sistema pode sugerir o endereço atual acompanhado do sufixo </span>**-clone**.

Esse recurso pode ser utilizado para criar páginas semelhantes ou versões alternativas de uma estrutura já existente.

---

##### **Vincular um imóvel à página**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/xyVimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/xyVimage.png)

<span style="white-space: pre-wrap;">Em páginas do tipo </span>**Landing Page**<span style="white-space: pre-wrap;">, a opção </span>**Imóvel**<span style="white-space: pre-wrap;"> permite definir qual imóvel será utilizado como referência para os widgets da página.</span>

Essa configuração possibilita que widgets como fotos, características e valores apresentem automaticamente as informações do imóvel selecionado.

<span style="white-space: pre-wrap;">Somente imóveis </span>**ativos**<span style="white-space: pre-wrap;"> são apresentados para seleção.</span>

<p class="callout warning">**Atenção:**<span style="white-space: pre-wrap;"> A página precisa estar com a opção </span>**Ativo**<span style="white-space: pre-wrap;"> habilitada para ser exibida no site. Algumas alterações também podem levar alguns instantes para aparecer devido ao cache.</span></p>

---

##### **Perguntas frequentes**

<span style="white-space: pre-wrap;">➜ </span>**Qual a diferença entre bloco, coluna e widget?**<span style="white-space: pre-wrap;"> O </span>**bloco**<span style="white-space: pre-wrap;"> é a faixa horizontal da página, a </span>**coluna**<span style="white-space: pre-wrap;"> é a divisão existente dentro dele e o </span>**widget**<span style="white-space: pre-wrap;"> é o conteúdo adicionado dentro da coluna.</span>

<span style="white-space: pre-wrap;">➜ </span>**O widget que preciso não aparece na lista.**<span style="white-space: pre-wrap;"> Verifique o </span>**Tipo de Página**. A disponibilidade dos widgets varia conforme o contexto da página.

<span style="white-space: pre-wrap;">➜ </span>**Arrastei um widget e ele não entrou na coluna.**<span style="white-space: pre-wrap;"> O widget pode exigir uma coluna com largura diferente. Tente adicioná-lo em uma coluna maior.</span>

<span style="white-space: pre-wrap;">➜ </span>**Não consigo alterar o Tipo de Página.**<span style="white-space: pre-wrap;"> Remova primeiro os widgets exclusivos do tipo atualmente utilizado.</span>

<span style="white-space: pre-wrap;">➜ </span>**Não consigo criar a versão Mobile.**<span style="white-space: pre-wrap;"> Verifique se a página correspondente sem a opção </span>**Mobile**<span style="white-space: pre-wrap;"> já foi cadastrada.</span>

<span style="white-space: pre-wrap;">➜ </span>**Quero ocultar um widget sem perder sua configuração.**<span style="white-space: pre-wrap;"> Desative a opção </span>**Widget Ativo**.

<span style="white-space: pre-wrap;">➜ </span>**O texto sobre a imagem de fundo está difícil de visualizar.**<span style="white-space: pre-wrap;"> Utilize </span>**Cor sobre imagem**<span style="white-space: pre-wrap;"> nas configurações do bloco.</span>

<span style="white-space: pre-wrap;">➜ </span>**Preciso criar uma página igual a outra.**<span style="white-space: pre-wrap;"> Utilize </span>**Duplicar**<span style="white-space: pre-wrap;"> e informe um novo Link Permanente.</span>

<span style="white-space: pre-wrap;">➜ </span>**Como criar uma página de campanha mais rapidamente?**<span style="white-space: pre-wrap;"> Utilize uma </span>**Landing Page**, aplique um dos layouts prontos e personalize o conteúdo.

<span style="white-space: pre-wrap;">➜ </span>**Gravei a página, mas a alteração ainda não apareceu no site.**<span style="white-space: pre-wrap;"> Verifique se a página está </span>**Ativa**<span style="white-space: pre-wrap;"> e considere o tempo de atualização do cache. Utilize </span>**Ver no Site**<span style="white-space: pre-wrap;"> para conferir a página.</span>

<span style="white-space: pre-wrap;">➜ </span>**Preciso adicionar um conteúdo que nenhum widget disponível atende.**<span style="white-space: pre-wrap;"> Utilize o </span>**Bloco de Código HTML**<span style="white-space: pre-wrap;"> e, quando necessário, a </span>**Classe para codificação CSS**<span style="white-space: pre-wrap;"> do bloco.</span>

# Como configurar a listagem de imóveis no site?

<span style="white-space: pre-wrap;">A </span>**Listagem de Imóveis**<span style="white-space: pre-wrap;"> é o widget mais usado do site — é ele que mostra os imóveis na página de busca, os destaques da home, os lançamentos de um bairro. E é também o que tem mais opções: formato dos cards, filtro fixo, abas de recorte e modo carrossel.</span>

Entender essas opções é o que separa uma home que mostra "os últimos imóveis cadastrados" de uma que mostra exatamente o que a imobiliária quer vender.

---

##### **Navegação no Módulo**

[![LISTADEIMOVEIS.gif](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/listadeimoveis.gif)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/listadeimoveis.gif)

**Rotina:**<span style="white-space: pre-wrap;"> Site &gt; </span>**Páginas**<span style="white-space: pre-wrap;"> &gt; abrir a página &gt; adicionar o widget </span>**Listagem de Imóveis**

O widget entra em colunas largas — central ou coluna completa. Ele não é aceito em colunas estreitas.

---

##### **O formato dos cards**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/VXfimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/VXfimage.png)

<table id="bkmrk-op%C3%A7%C3%A3odescri%C3%A7%C3%A3odescri"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Opção

</th><th>Descrição

</th></tr><tr><td>**Descrição da lista**

</td><td>O título que aparece acima da listagem no site.

</td></tr><tr><td>**Modo de Listagem**

</td><td>Como cada imóvel é apresentado:

</td></tr><tr><td>**Modo Lista Grade**

</td><td>Cards lado a lado, o formato mais comum.

</td></tr><tr><td>**Modo Lista Simples**

</td><td>Linhas compactas, com menos informação por imóvel.

</td></tr><tr><td>**Modo Lista Detalhada**

</td><td>Uma linha larga por imóvel, com mais dados.

</td></tr><tr><td>**Exibir Corretor**

</td><td><span style="white-space: pre-wrap;">Mostra no card o </span>**Responsável**<span style="white-space: pre-wrap;"> ou o </span>**Captador**<span style="white-space: pre-wrap;"> do imóvel. Deixando em branco, nenhum corretor aparece.</span>

</td></tr><tr><td>**Campos Customizados do Imóvel**

</td><td>Campos criados pela imobiliária que passam a aparecer no card. Só ficam disponíveis os campos do módulo Imóvel.

</td></tr></tbody></table>

---

##### **Quais imóveis a lista mostra**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/1X0image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/1X0image.png)

<span style="white-space: pre-wrap;">Abaixo do formato fica o bloco </span>**Opções de Filtro para esta Lista de Imóveis**, onde se define o recorte: finalidade, tipo, cidade, bairro, faixa de valor, quartos e o que mais for necessário.

<table id="bkmrk-op%C3%A7%C3%A3odescri%C3%A7%C3%A3odesati"><colgroup><col style="width: 383px;"></col><col></col></colgroup><tbody><tr><th>Opção

</th><th>Descrição

</th></tr><tr><td>**Desativar a filtragem automática nas opções de busca**

</td><td><span style="white-space: pre-wrap;">Por padrão, a listagem respeita o que o visitante pesquisou na busca do site. Ligando esta opção, a lista passa a mostrar </span>**sempre o mesmo recorte**, ignorando a pesquisa.

</td></tr></tbody></table>

---

##### **Busca por abas**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/Y5Dimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/Y5Dimage.png)

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/cnSimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/cnSimage.png)

<table id="bkmrk-op%C3%A7%C3%A3odescri%C3%A7%C3%A3outiliz"><colgroup><col style="width: 178px;"></col><col></col></colgroup><tbody><tr><th>Opção

</th><th>Descrição

</th></tr><tr><td>**Utilizar busca por Abas**

</td><td><span style="white-space: pre-wrap;">Troca o filtro único por </span>**várias abas**, cada uma com o próprio recorte de imóveis. O visitante clica na aba e a lista troca.

</td></tr></tbody></table>

É o recurso para montar, num só bloco, "Comprar | Alugar | Temporada" ou "Apartamentos | Casas | Terrenos".

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/XlEimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/XlEimage.png)

<span style="white-space: pre-wrap;">Cada aba é criada pelo botão </span>**+**<span style="white-space: pre-wrap;">, recebe uma descrição e os próprios critérios. As abas são </span>**reordenadas arrastando**, e cada uma pode ser editada ou excluída.

---

##### **Modo carrossel**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/TOYimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/TOYimage.png)

Por padrão a listagem usa paginação. Ligando o carrossel, os imóveis passam a deslizar lateralmente, arrastados com o mouse ou com o dedo.

<table id="bkmrk-op%C3%A7%C3%A3odescri%C3%A7%C3%A3omodo-d"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Opção

</th><th>Descrição

</th></tr><tr><td>**Modo de Carrossel para Desktop**<span style="white-space: pre-wrap;"> e </span>**Modo de Carrossel para Mobile**

</td><td>São independentes. Dá para usar carrossel no celular e paginação no computador.

</td></tr></tbody></table>

Ligado qualquer um dos dois, aparecem os ajustes:

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/AK2image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/AK2image.png)

<table id="bkmrk-op%C3%A7%C3%A3odescri%C3%A7%C3%A3oquanti"><colgroup><col></col><col style="width: 558px;"></col></colgroup><tbody><tr><th>Opção

</th><th>Descrição

</th></tr><tr><td>**Quantidade de linhas para o carrossel**

</td><td>De 1 a 4.

</td></tr><tr style="height: 10px;"><td>**Margem entre cada card**

</td><td>O espaçamento, em pixels.

</td></tr><tr><td>**Cards de Imóvel por linha**

</td><td>De 1 a 4.

</td></tr><tr><td>**Tempo em segundos para troca do card**

</td><td>Mínimo de 2 segundos; só vale com a troca automática ligada.

</td></tr><tr><td>**Loop no carrossel**

</td><td>Ao chegar no último card, volta ao primeiro.

</td></tr><tr><td>**Mostrar setas de navegação**

</td><td>As setas laterais.

</td></tr><tr><td>**Mostrar pontos de navegação**

</td><td>Os pontinhos abaixo do carrossel.

</td></tr><tr><td>**Reproduzir automaticamente**

</td><td>O carrossel avança sozinho, respeitando o tempo definido.

</td></tr></tbody></table>

---

##### **Quantidade por largura de tela**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/Sr2image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/Sr2image.png)

<span style="white-space: pre-wrap;">Abaixo dos ajustes do carrossel há a configuração </span>**por largura de tela**: define-se quantos imóveis aparecem a partir de cada largura — por exemplo, 3 imóveis a partir de 680 pixels e 6 a partir de 1200.

---

##### **Filtrando os imóveis pelas opções dos filtros**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/3GVimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/3GVimage.png)

Na seção Opções de Filtro para esta Lista de Imóveis, é possível definir quais imóveis serão exibidos na listagem utilizando diferentes critérios de filtro.

Os filtros podem ser combinados entre si para deixar a listagem mais específica, permitindo definir exatamente quais imóveis devem aparecer no site.

---

##### **Os widgets irmãos**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/0gPimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/0gPimage.png)

Três widgets resolvem problemas parecidos e costumam ser confundidos:

<table id="bkmrk-widgetdescri%C3%A7%C3%A3olista"><colgroup><col style="width: 226px;"></col><col></col></colgroup><tbody><tr><th>Widget

</th><th>Descrição

</th></tr><tr><td>**Listagem de Imóveis**

</td><td>A lista completa, com paginação ou carrossel. É a que este manual descreve.

</td></tr><tr><td>**Slider de Destaques de Imóveis**

</td><td><span style="white-space: pre-wrap;">Pensado para vitrine. Tem </span>**Somente Imóveis em Destaque**<span style="white-space: pre-wrap;"> e </span>**Modelos de Slides**: Carrossel, Galeria de Imagens, Vertical, Único, TV e Post. Aceita de 2 a 40 imóveis no slide.

</td></tr><tr><td>**Listagem de Condomínios**

</td><td>A mesma mecânica, para condomínios e lançamentos, com a opção de mostrar apenas o condomínio do imóvel que está sendo visto.

</td></tr></tbody></table>

<span style="white-space: pre-wrap;">E ainda a </span>**Busca para Imóvel**, que é o formulário de pesquisa — não a lista. Nele se escolhe quais campos aparecem na busca e em que ordem.

---

##### **Casos de uso das listagens**

<table id="bkmrk-caso-de-usoconfigura"><colgroup><col style="width: 192px;"></col><col></col></colgroup><tbody><tr><th>Caso de uso

</th><th>Configuração

</th></tr><tr><td>**Página de busca:**

</td><td><span style="white-space: pre-wrap;">Filtragem automática </span>**ligada**, modo grade, sem carrossel, com o widget de Busca para Imóvel acima.

</td></tr><tr><td>**Faixa de destaques na home:**

</td><td><span style="white-space: pre-wrap;">Filtragem automática </span>**desativada**, recorte fixo no filtro, carrossel ligado no desktop e no mobile, configuração por largura de tela.

</td></tr><tr><td>**Bloco com abas:**

</td><td><span style="white-space: pre-wrap;">Filtragem automática </span>**desativada**, busca por abas ligada, uma aba para cada finalidade.

</td></tr><tr><td>**Imóveis do corretor:**

</td><td><span style="white-space: pre-wrap;">Na página de Corretor Detalhar aparece o campo </span>**Imóveis do Corretor**, que filtra por Responsável ou Captador. Sem escolher, considera os dois.

</td></tr></tbody></table>

---

##### **Perguntas frequentes**

<span style="white-space: pre-wrap;">➜ </span>**O visitante pesquisa e a lista não muda.**<span style="white-space: pre-wrap;"> A </span>**filtragem automática**<span style="white-space: pre-wrap;"> está desativada nesse widget. Ligue-a nas páginas de busca.</span>

<span style="white-space: pre-wrap;">➜ </span>**Meu bloco de destaques muda quando alguém pesquisa.**<span style="white-space: pre-wrap;"> É o contrário do caso anterior: desative a filtragem automática nesse widget.</span>

<span style="white-space: pre-wrap;">➜ </span>**Não consigo arrastar o widget para a coluna.**<span style="white-space: pre-wrap;"> A Listagem de Imóveis só entra em coluna central ou completa. Use uma coluna mais larga.</span>

<span style="white-space: pre-wrap;">➜ </span>**Quero "Comprar | Alugar" no mesmo bloco.**<span style="white-space: pre-wrap;"> Ligue </span>**Utilizar busca por Abas**<span style="white-space: pre-wrap;"> e crie uma aba para cada finalidade.</span>

<span style="white-space: pre-wrap;">➜ </span>**Em que ordem as abas aparecem?**<span style="white-space: pre-wrap;"> Na ordem da lista no widget — arraste para reordenar. A primeira é a que abre.</span>

<span style="white-space: pre-wrap;">➜ </span>**Liguei o carrossel e o campo de cards por linha ficou bloqueado.**<span style="white-space: pre-wrap;"> A configuração por largura de tela está ligada e substitui esse campo.</span>

<span style="white-space: pre-wrap;">➜ </span>**No celular aparecem imóveis demais lado a lado.**<span style="white-space: pre-wrap;"> Use a configuração por largura de tela e defina menos imóveis nas larguras pequenas.</span>

<span style="white-space: pre-wrap;">➜ </span>**O carrossel não anda sozinho.**<span style="white-space: pre-wrap;"> Ligue </span>**Reproduzir automaticamente**<span style="white-space: pre-wrap;"> e confira o tempo de troca, que tem mínimo de 2 segundos.</span>

<span style="white-space: pre-wrap;">➜ </span>**Qual a diferença entre Listagem de Imóveis e Slider de Destaques?**<span style="white-space: pre-wrap;"> A listagem recorta por critério e pagina; o slider é vitrine e já filtra os imóveis marcados como destaque.</span>

<span style="white-space: pre-wrap;">➜ </span>**Quero mostrar o corretor no card.**<span style="white-space: pre-wrap;"> Use </span>**Exibir Corretor**<span style="white-space: pre-wrap;"> e escolha Responsável ou Captador.</span>

<span style="white-space: pre-wrap;">➜ </span>**Um campo que criei no imóvel não aparece no card.**<span style="white-space: pre-wrap;"> Selecione-o em </span>**Campos Customizados do Imóvel**. Só campos do módulo Imóvel estão disponíveis.

# Banners

Módulo especifico para você tirar todas as suas dúvidas de como funcionam a estrutura de banners no sistema e como você usa elas.

# Como funcionam os grupos de banners

<span style="white-space: pre-wrap;">O grupo de banners representa </span>**o espaço que os banners ocupam no site**. Ele não funciona apenas como uma pasta de organização, pois também define onde as peças serão exibidas, qual será a altura desse espaço e quais banners irão se alternar nele.

<span style="white-space: pre-wrap;">A lógica funciona da seguinte forma: o </span>**widget**<span style="white-space: pre-wrap;"> de uma página aponta para um </span>**grupo de banners**<span style="white-space: pre-wrap;">; o grupo define o espaço e suas dimensões; e os </span>**banners**<span style="white-space: pre-wrap;"> vinculados a esse grupo são exibidos conforme a ordem e o intervalo configurados.</span>

---

##### **Navegação no Módulo**

[![grupodebanner.gif](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/grupodebanner.gif)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/grupodebanner.gif)

**Rotina:** <span style="white-space: pre-wrap;">Site &gt; Banners &gt; </span>**Grupos de Banners**

---

##### **Por que o grupo existe**

Os grupos de banners servem para reunir uma quantidade de banners e posicioná-los em um espaço específico do site através dos widgets configurados nas páginas.

Na prática, isso permite criar um grupo para cada área em que os banners deverão aparecer, como o topo da página inicial, uma faixa no meio da página, o rodapé ou um popup promocional.

Cada grupo possui suas próprias configurações e pode conter vários banners que serão exibidos alternadamente dentro daquele espaço.

<p class="callout warning">Como o grupo representa o espaço de exibição, alterar sua altura afeta todos os banners relacionados a ele. Caso as imagens tenham sido preparadas para uma determinada proporção e a altura seja modificada, os banners poderão aparecer cortados ou distorcidos.</p>

---

##### **Cadastrar um grupo**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/T69image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/T69image.png)

Ao cadastrar um grupo de banners, são apresentados os seguintes campos:

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/ZvWimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/ZvWimage.png)

<table id="bkmrk-campodescri%C3%A7%C3%A3odescri"><colgroup><col></col><col style="width: 686px;"></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Descrição do grupo**

</td><td><span style="white-space: pre-wrap;">Campo obrigatório. Define o nome utilizado para identificar o espaço, como </span> **Topo da home**<span style="white-space: pre-wrap;"> ou F</span>**aixa promocional**<span style="white-space: pre-wrap;"> .</span>

</td></tr><tr><td>**Altura**

</td><td><span style="white-space: pre-wrap;">Campo obrigatório, informado em pixels. Aceita valores entre </span> **50 e 500 px**<span style="white-space: pre-wrap;"> , sendo </span> **300 px**<span style="white-space: pre-wrap;"> o valor padrão. Define a altura máxima dos banners relacionados ao grupo.</span>

</td></tr></tbody></table>

---

##### **Banner popup**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/SeWimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/SeWimage.png)

O grupo também pode ser configurado para funcionar como um popup, fazendo com que o banner seja exibido sobre o conteúdo do site.

<table id="bkmrk-campodescri%C3%A7%C3%A3opopupq"><colgroup><col style="width: 104px;"></col><col></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Popup**

</td><td>Quando habilitado, faz com que o grupo seja utilizado para exibição de banners em formato de popup.

</td></tr><tr><td>**Largura**

</td><td><span style="white-space: pre-wrap;">Campo exibido somente quando o popup está habilitado. É obrigatório nesse caso, informado em pixels e aceita valores entre </span> **150 e 700 px**<span style="white-space: pre-wrap;"> , sendo </span>**400 px**o valor padrão.

</td></tr></tbody></table>

O banner popup é exibido à frente do conteúdo da página e possui uma opção para que o visitante possa fechá-lo.

<p class="callout info">A configuração de largura é utilizada somente nos grupos definidos como popup. Nos grupos comuns, a largura do banner é determinada pelo espaço ocupado pelo widget na página, enquanto a altura é definida pelo próprio grupo.</p>

Ao gravar ou excluir um grupo de banners, o sistema atualiza as informações utilizadas pelo site e a relação de grupos disponíveis para configuração nos widgets das páginas.

---

##### **A listagem dos grupos**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/Zd4image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/Zd4image.png)

A listagem apresenta as principais informações dos grupos cadastrados:

<table id="bkmrk-informa%C3%A7%C3%A3odescri%C3%A7%C3%A3od"><colgroup><col></col><col style="width: 706px;"></col></colgroup><tbody><tr><th>Informação

</th><th>Descrição

</th></tr><tr><td>**Descrição**

</td><td>Apresenta o nome utilizado para identificar o grupo.

</td></tr><tr><td>**Altura do banner**

</td><td>Apresenta a altura configurada para o espaço do grupo.

</td></tr><tr><td>**Situação**

</td><td>Indica se o grupo está ativo ou inativo.

</td></tr><tr><td>**Data de criação**

</td><td>Apresenta quando o grupo foi cadastrado.

</td></tr><tr><td>**Data de alteração**

</td><td>Apresenta quando ocorreu a última alteração no cadastro.

</td></tr></tbody></table>

<span style="white-space: pre-wrap;">Ao selecionar vários grupos, fica disponível a ação </span>**Remover**.

---

##### **A ordem de montagem**

Para que um banner seja exibido corretamente no site, três elementos precisam estar configurados:

<table id="bkmrk-elementodescri%C3%A7%C3%A3ogru"><colgroup><col></col><col style="width: 705px;"></col></colgroup><tbody><tr><th>Elemento

</th><th>Descrição

</th></tr><tr><td>**Grupo**

</td><td>Define o espaço onde os banners serão exibidos e configura suas dimensões.

</td></tr><tr><td>**Banner**

</td><td>É a peça visual cadastrada e vinculada ao grupo correspondente.

</td></tr><tr><td>**Widget na página**

</td><td>Define em qual página e posição do site aquele grupo será exibido.

</td></tr></tbody></table>

O fluxo funciona da seguinte forma:

**Grupo → Banner → Widget da página**

<p class="callout info">Se qualquer uma dessas configurações estiver faltando, o banner não será exibido no site. Esse é um dos principais pontos a verificar quando um banner foi cadastrado, mas não aparece na página.</p>

---

##### **Perguntas frequentes**

<span style="white-space: pre-wrap;">➜ </span>**Qual a diferença entre grupo e banner?**<span style="white-space: pre-wrap;"> O grupo representa o espaço utilizado no site para exibição das peças, enquanto o banner é a imagem ou conteúdo exibido dentro desse espaço.</span>

<span style="white-space: pre-wrap;">➜ </span>**Preciso criar um grupo para cada banner?**<span style="white-space: pre-wrap;"> Não. Um mesmo grupo pode conter vários banners, que podem se alternar dentro do mesmo espaço.</span>

<span style="white-space: pre-wrap;">➜ </span>**Onde defino em qual página o grupo aparece?**<span style="white-space: pre-wrap;"> Essa configuração é realizada nas </span>**Páginas do Site**, através do widget de banner apontando para o grupo desejado.

<span style="white-space: pre-wrap;">➜ </span>**Posso mudar a altura depois?**<span style="white-space: pre-wrap;"> Sim. Porém, a alteração afeta todos os banners relacionados ao grupo e pode fazer com que imagens preparadas para outra proporção apareçam cortadas ou distorcidas.</span>

<span style="white-space: pre-wrap;">➜ </span>**Para que serve a largura?**<span style="white-space: pre-wrap;"> A largura é configurada somente nos grupos utilizados como popup. Nos grupos comuns, a largura é determinada pelo espaço ocupado pelo widget na página.</span>

<span style="white-space: pre-wrap;">➜ </span>**O que acontece ao excluir um grupo com banners?**<span style="white-space: pre-wrap;"> Como o grupo é uma informação obrigatória no cadastro dos banners, antes de realizar a exclusão é importante verificar quais banners estão relacionados a ele.</span>

<span style="white-space: pre-wrap;">➜ </span>**Criei o grupo e o banner, mas nada aparece no site.**<span style="white-space: pre-wrap;"> Verifique se existe um widget de banner configurado na página e apontando para o grupo correspondente. Sem essa configuração, o banner não será exibido.</span>

# Como funcionam os banners

O banner é a peça visual exibida em um espaço do site, como a imagem principal da página inicial, a chamada de um lançamento ou o anúncio de um parceiro.

Ele pode direcionar o visitante para um imóvel, uma página do próprio site ou um endereço externo. Também pode ter um período definido para entrar e sair do ar automaticamente.

---

##### **Navegação no Módulo**

[![banners.gif](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/banners.gif)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/banners.gif)

**Rotina:** <span style="white-space: pre-wrap;">Site &gt; Banners &gt; </span>**Banners**

---

##### **Antes de cadastrar: o grupo**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/Ilgimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/Ilgimage.png)

<span style="white-space: pre-wrap;">Todo banner precisa estar relacionado a um </span>**grupo de banners**.

<span style="white-space: pre-wrap;">O grupo é obrigatório e define </span>**onde o banner será exibido no site**<span style="white-space: pre-wrap;"> e </span>**qual será a altura do espaço utilizado**.

<p class="callout info">Sem um grupo previamente cadastrado, não é possível criar o banner.</p>

<p class="callout info"><span style="white-space: pre-wrap;">O passo a passo dessa configuração está disponível na página </span>**Como funcionam os grupos de banners?**</p>

---

##### **Cadastrando um novo banner - A Identificação**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/JZ4image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/JZ4image.png)

<table id="bkmrk-campodescri%C3%A7%C3%A3odescri"><colgroup><col style="width: 125px;"></col><col></col></colgroup><tbody><tr style="height: 10px;"><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Descrição**

</td><td>Informação de uso interno. Não é exibida publicamente e serve para facilitar a identificação do banner na listagem.

</td></tr><tr><td>**Grupo de banners**

</td><td>Campo obrigatório. Define o grupo e, consequentemente, o espaço do site em que o banner será apresentado.

</td></tr><tr><td>**Ação do clique**

</td><td><span style="white-space: pre-wrap;">Define se o destino do banner será aberto na </span> **mesma página**<span style="white-space: pre-wrap;"> ou em uma </span> **nova aba**<span style="white-space: pre-wrap;"> .</span>

</td></tr><tr><td>**Tempo de troca**

</td><td><span style="white-space: pre-wrap;">Define por quantos segundos o banner permanece visível antes da exibição do próximo banner do grupo. Aceita valores entre </span> **2 e 32 segundos**<span style="white-space: pre-wrap;"> .</span>

</td></tr><tr><td>**Ordenação**

</td><td>Define a posição do banner na ordenação. Quanto maior o valor, mais acima ele será apresentado.

</td></tr></tbody></table>

---

##### **As imagens**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/JBIimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/JBIimage.png)

<table id="bkmrk-campodescri%C3%A7%C3%A3oimagem"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Imagem**

</td><td><span style="white-space: pre-wrap;">Campo obrigatório. As resoluções mínimas recomendadas variam de acordo com o tamanho do banner: </span>

**2560 × 1080**<span style="white-space: pre-wrap;"> para banner de 500 px, </span> **2560 × 1440**<span style="white-space: pre-wrap;"> para banner de 70% e </span>**2560 × 1600**<span style="white-space: pre-wrap;"> para banner de 100%.</span>

</td></tr><tr><td>**Imagem Mobile**

</td><td>Versão do banner preparada para dispositivos móveis. O preenchimento é opcional.

</td></tr></tbody></table>

<p class="callout warning">A imagem mobile é importante principalmente quando o banner possui textos ou elementos posicionados para telas largas. Sem uma versão adaptada, partes importantes da arte podem ficar cortadas em dispositivos móveis.</p>

---

##### **Para onde o banner leva**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/5joimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/5joimage.png)

O banner pode possuir diferentes tipos de redirecionamento:

<table id="bkmrk-tipodescri%C3%A7%C3%A3ourlperm"><colgroup><col></col><col style="width: 668px;"></col></colgroup><tbody><tr><th>Tipo

</th><th>Descrição

</th></tr><tr><td>**URL**

</td><td>Permite informar um endereço externo completo, incluindo o protocolo.

</td></tr><tr><td>**Página**

</td><td>Permite selecionar uma página cadastrada no próprio site.

</td></tr><tr><td>**Imóvel**

</td><td>Permite selecionar um imóvel da carteira. O sistema utiliza o link público correspondente ao imóvel.

</td></tr><tr><td>**Sem redirecionamento**

</td><td>O banner é exibido normalmente, mas não possui ação de clique.

</td></tr></tbody></table>

Ao selecionar um tipo de redirecionamento, o campo de destino é ajustado automaticamente conforme a opção escolhida.

<p class="callout warning">Ao trocar o tipo de redirecionamento, o sistema limpa automaticamente o destino informado anteriormente. Esse comportamento evita que um link incompatível permaneça gravado no banner.</p>

---

##### **Quando o banner aparece**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/xO2image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/xO2image.png)

<span style="white-space: pre-wrap;">O campo </span>**Quando mostrar**<span style="white-space: pre-wrap;"> define como será controlada a exibição do banner.</span>

<table id="bkmrk-op%C3%A7%C3%A3odescri%C3%A7%C3%A3obanner"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Opção

</th><th>Descrição

</th></tr><tr><td>**Banner sempre será apresentado**

</td><td>Mantém o banner disponível enquanto ele estiver ativo.

</td></tr><tr><td>**Banner será apresentado somente entre as datas iniciais e finais informadas**

</td><td>Controla automaticamente o período de exibição conforme as datas definidas.

</td></tr></tbody></table>

Quando o controle por período é selecionado, são apresentados os seguintes campos:

<table id="bkmrk-campodescri%C3%A7%C3%A3odata-i"><colgroup><col></col><col style="width: 744px;"></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Data inicial**

</td><td>Define a partir de quando o banner poderá ser exibido.

</td></tr><tr><td>**Data final**

</td><td>Define até quando o banner permanecerá disponível.

</td></tr></tbody></table>

<p class="callout info">O controle por período permite programar antecipadamente a entrada e a retirada do banner do site, sem necessidade de ativação ou remoção manual no início e no fim da campanha.</p>

---

##### **Textos sobre o banner**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/SaDimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/SaDimage.png)

É possível adicionar textos diretamente sobre a imagem utilizada no banner:

<table id="bkmrk-campodescri%C3%A7%C3%A3o1%C2%AA-lin"><colgroup><col></col><col style="width: 573px;"></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**1ª linha - Descrição no banner**

</td><td>Define uma linha de apoio exibida sobre a imagem.

</td></tr><tr><td>**Título principal - Descrição no banner**

</td><td>Define o texto principal que será exibido em destaque sobre o banner.

</td></tr></tbody></table>

Esses campos permitem alterar a chamada apresentada ao visitante sem a necessidade de editar novamente a imagem utilizada no banner.

---

##### **Vídeo do YouTube sobre o banner**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/rsAimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/rsAimage.png)

Também é possível utilizar um vídeo do YouTube sobre o banner.

<table id="bkmrk-campodescri%C3%A7%C3%A3osobrep"><colgroup><col style="width: 280px;"></col><col></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Sobrepor banner com vídeo do YouTube**

</td><td>Permite informar o link de um vídeo que será apresentado sobre o banner. Essa configuração é utilizada na versão desktop.

</td></tr><tr><td>**Segundo início**

</td><td>Define em qual segundo do vídeo a reprodução deve começar.

</td></tr><tr><td>**Segundo final do vídeo**

</td><td>Define em qual segundo a reprodução deve terminar. O tempo é considerado a partir do início total do vídeo.

</td></tr><tr><td>**Sobrepor banner com vídeo em telas mobile**

</td><td>Permite configurar uma versão de vídeo para dispositivos móveis, utilizando também os controles de início e fim.

</td></tr></tbody></table>

Para dispositivos móveis, a recomendação é utilizar vídeos gravados na vertical, adequados ao formato da tela.

**⚠️ Atenção:**<span style="white-space: pre-wrap;"> O vídeo é apresentado em apenas um dos banners, evitando impacto excessivo na performance do site. Configurar vídeos em vários banners do mesmo grupo não fará com que todos sejam reproduzidos simultaneamente. </span>

Ao gravar ou excluir um banner, o sistema atualiza as informações utilizadas pelo site para refletir a alteração.

---

##### **A listagem dos banners**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/DH7image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/DH7image.png)

A listagem apresenta as principais informações dos banners cadastrados:

<table id="bkmrk-informa%C3%A7%C3%A3odescri%C3%A7%C3%A3oi"><colgroup><col></col><col style="width: 695px;"></col></colgroup><tbody><tr><th>Informação

</th><th>Descrição

</th></tr><tr><td>**Imagem**

</td><td>Apresenta uma prévia da imagem utilizada no banner.

</td></tr><tr><td>**Grupo**

</td><td>Indica a qual grupo o banner está relacionado.

</td></tr><tr><td>**Descrição**

</td><td>Apresenta a identificação interna do banner.

</td></tr><tr><td>**Tipo de controle**

</td><td>Indica se o banner possui exibição contínua ou controlada por período.

</td></tr><tr><td>**Data inicial**

</td><td>Apresenta a data de início quando houver controle por período.

</td></tr><tr><td>**Data final**

</td><td>Apresenta a data de término quando houver controle por período.

</td></tr><tr><td>**Redirecionamento**

</td><td>Informa qual tipo de destino está configurado.

</td></tr><tr><td>**Link**

</td><td>Apresenta o destino relacionado ao banner, quando houver.

</td></tr><tr><td>**Situação**

</td><td>Indica se o banner está ativo ou inativo.

</td></tr></tbody></table>

<span style="white-space: pre-wrap;">Quando o controle estiver definido para exibição contínua, as colunas de data apresentam </span>**Sempre**.

<span style="white-space: pre-wrap;">Quando nenhum tipo de redirecionamento estiver configurado, a listagem apresenta </span>**Sem redirecionamento**. Os filtros permitem localizar banners por situação, imóvel, página, grupo, período de exibição e descrição.

---

##### **Perguntas frequentes**

<span style="white-space: pre-wrap;">➜ </span>**O banner não aparece no site. O que verificar?**<span style="white-space: pre-wrap;"> Confirme se o banner está </span>**Ativo**<span style="white-space: pre-wrap;">, se o período de exibição já começou quando houver controle por data, se o </span>**grupo de banners**<span style="white-space: pre-wrap;"> está ativo e se existe um widget de página utilizando esse grupo.</span>

<span style="white-space: pre-wrap;">➜ </span>**Em que ordem os banners aparecem?**<span style="white-space: pre-wrap;"> A posição é definida pelo campo </span>**Ordenação**. Quanto maior o valor informado, mais acima o banner será apresentado.

<span style="white-space: pre-wrap;">➜ </span>**Preciso da imagem mobile?**<span style="white-space: pre-wrap;"> Não é obrigatória, mas é recomendada principalmente quando o banner possui textos ou elementos que podem ser cortados em telas menores.</span>

<span style="white-space: pre-wrap;">➜ </span>**Como faço o banner sair do ar automaticamente?**<span style="white-space: pre-wrap;"> Utilize a opção de exibição por período e informe uma </span>**Data final**.

<span style="white-space: pre-wrap;">➜ </span>**Posso colocar vídeo em todos os banners?**<span style="white-space: pre-wrap;"> É possível configurar, porém apenas um dos banners terá o vídeo apresentado, evitando impacto excessivo na performance do site.</span>

<span style="white-space: pre-wrap;">➜ </span>**A descrição aparece no site?**<span style="white-space: pre-wrap;"> Não. A </span>**Descrição**<span style="white-space: pre-wrap;"> é utilizada somente para identificação interna. Os textos visíveis sobre o banner são configurados nos campos de descrição e título apresentados sobre a imagem.</span>

<span style="white-space: pre-wrap;">➜ </span>**Troquei o tipo de redirecionamento e o destino sumiu.**<span style="white-space: pre-wrap;"> Esse é o comportamento esperado. Ao alterar o tipo de redirecionamento, o destino anterior é removido automaticamente para evitar a gravação de um link incompatível.</span>

# Artigos

Módulo especifico de como adicionar um blog ao seu site e fazer a gestão de artigos dentro do seu site.

# Como categorizar os artigos

<span style="white-space: pre-wrap;">A categoria é a classificação utilizada para organizar os artigos do site, como </span>**Mercado imobiliário**<span style="white-space: pre-wrap;">, </span>**Dicas para inquilinos**<span style="white-space: pre-wrap;"> ou </span>**Notícias da imobiliária**.

Ela facilita a organização do conteúdo e ajuda o visitante a encontrar assuntos de interesse sem precisar percorrer todos os artigos publicados.

---

##### **Navegação no Módulo**

[![classificacaodeartigos.gif](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/classificacaodeartigos.gif)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/classificacaodeartigos.gif)

**Rotina:** <span style="white-space: pre-wrap;">Site &gt; Artigos &gt; </span>**Categorias para Artigos**

---

##### **Cadastrar uma categoria**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/wxGimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/wxGimage.png)

O cadastro de categorias é simples e possui apenas um campo:

<table id="bkmrk-campodescri%C3%A7%C3%A3odescri"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Descrição da Categoria**

</td><td>Campo obrigatório. Define o nome da categoria que será utilizado para identificar e organizar os artigos no site.

</td></tr></tbody></table>

Não existem outros campos ou opção de ativação. A categoria possui como função principal agrupar e organizar os artigos publicados.

---

##### **A listagem**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/jMIimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/jMIimage.png)

A listagem apresenta as principais informações das categorias cadastradas:

<table id="bkmrk-informa%C3%A7%C3%A3odescri%C3%A7%C3%A3od"><colgroup><col></col><col style="width: 718px;"></col></colgroup><tbody><tr><th>Informação

</th><th>Descrição

</th></tr><tr><td>**Descrição**

</td><td>Apresenta o nome da categoria cadastrada.

</td></tr><tr><td>**Data de criação**

</td><td>Informa quando a categoria foi criada.

</td></tr></tbody></table>

Também é possível localizar categorias através da busca por descrição.

<span style="white-space: pre-wrap;">Ao selecionar várias categorias, fica disponível a ação </span>**Remover** no menu de Ações.

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/lM0image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/lM0image.png)

---

##### **Como a categoria se liga ao artigo**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/GgLimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/GgLimage.png)

<span style="white-space: pre-wrap;">A relação entre a categoria e o conteúdo é realizada diretamente no </span>**cadastro do artigo.** <span style="white-space: pre-wrap;">No artigo, o campo </span>**Categorias**<span style="white-space: pre-wrap;"> permite selecionar uma ou mais categorias para classificar o conteúdo.</span>

<p class="callout warning"><span style="white-space: pre-wrap;">Um mesmo artigo pode pertencer a várias categorias ao mesmo tempo. Por exemplo, um conteúdo sobre reajuste de aluguel pode estar relacionado tanto à categoria </span>**Mercado imobiliário**<span style="white-space: pre-wrap;"> quanto à categoria </span>**Dicas para inquilinos**, ficando disponível nas duas classificações do site.</p>

---

##### **Como planejar as categorias**

Como o cadastro não possui um limite de categorias, é importante manter uma estrutura organizada e fácil de entender.

<table id="bkmrk-recomenda%C3%A7%C3%A3odescri%C3%A7%C3%A3"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Recomendação

</th><th>Descrição

</th></tr><tr><td>**Poucas e claras**

</td><td>Evite criar uma quantidade muito grande de categorias. Muitas categorias podem fragmentar o conteúdo e fazer com que cada uma tenha poucos artigos.

</td></tr><tr><td>**Pensadas pelo visitante**

</td><td><span style="white-space: pre-wrap;">Utilize nomes que deixem claro para o visitante qual tipo de conteúdo será encontrado. Por exemplo, </span> **Dicas para quem vai alugar**<span style="white-space: pre-wrap;"> pode ser mais explicativo do que apenas </span>**Locação**

.

</td></tr></tbody></table>

---

##### **Perguntas frequentes**

<span style="white-space: pre-wrap;">➜ </span>**Como vinculo um artigo a uma categoria?**<span style="white-space: pre-wrap;"> No cadastro do artigo, através do campo </span>**Categorias**.

<span style="white-space: pre-wrap;">➜ </span>**Um artigo pode ter mais de uma categoria?**<span style="white-space: pre-wrap;"> Sim. O mesmo artigo pode ser relacionado a várias categorias.</span>

<span style="white-space: pre-wrap;">➜ </span>**A categoria possui status ativo?**<span style="white-space: pre-wrap;"> Não. O cadastro possui apenas o campo </span>**Descrição da Categoria**.

<span style="white-space: pre-wrap;">➜ </span>**O que acontece ao excluir uma categoria usada por artigos?**<span style="white-space: pre-wrap;"> A categoria deixa de existir e os artigos relacionados perdem aquela classificação. Antes de excluir, é recomendado verificar quais artigos utilizam a categoria.</span>

<span style="white-space: pre-wrap;">➜ </span>**Onde as categorias aparecem no site?**<span style="white-space: pre-wrap;"> Elas podem ser utilizadas pelos widgets de artigos configurados nas </span>**Páginas do Site**, permitindo exibir ou filtrar conteúdos por categoria.

<span style="white-space: pre-wrap;">➜ </span>**Consigo renomear uma categoria?**<span style="white-space: pre-wrap;"> Sim. Ao alterar a descrição da categoria, o novo nome passa a ser utilizado pelos artigos que já estão relacionados a ela.</span>

# Como criar artigos para o site

O artigo é o conteúdo publicado no site da imobiliária, como notícias, dicas para quem vai alugar, análises de bairros ou novidades do mercado.

Ele serve tanto para informar quem já está navegando no site quanto para atrair novos visitantes através dos mecanismos de busca.

---

##### **Navegação no Módulo**

[![artigos.gif](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/artigos.gif)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/artigos.gif)

**Rotina:** <span style="white-space: pre-wrap;">Site &gt; Artigos &gt; </span>**Artigos**

---

##### **Identificação do artigo**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/5ABimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/5ABimage.png)

<table id="bkmrk-campodescri%C3%A7%C3%A3ot%C3%ADtulo"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Título**

</td><td>Campo obrigatório. Define o título exibido no site e utilizado nos resultados de busca.

</td></tr><tr><td>**Categorias**

</td><td>Permite relacionar o artigo a uma ou mais categorias, facilitando sua organização no site.

</td></tr><tr><td>**Fonte do artigo**

</td><td>Permite informar a origem do conteúdo quando ele tiver sido obtido de outra fonte.

</td></tr><tr><td>**Publicar em**

</td><td>Define a data e a hora em que o artigo será disponibilizado no site. Por padrão, vem preenchido com a data e a hora atuais.

</td></tr></tbody></table>

---

##### **Resumo e SEO**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/lLWimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/lLWimage.png)

<table id="bkmrk-campodescri%C3%A7%C3%A3ometa-p"><colgroup><col></col><col></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Meta palavras chaves**

</td><td>Permite informar palavras relacionadas ao conteúdo, separadas por vírgula, para auxiliar na identificação do assunto pelos buscadores.

</td></tr><tr><td>**Meta descrição**

</td><td>Define o texto utilizado para apresentar o artigo nos resultados dos mecanismos de busca.

</td></tr><tr><td>**Resumo**

</td><td>Define o texto resumido utilizado nos widgets e chamadas do artigo dentro do site.

</td></tr></tbody></table>

<p class="callout warning"><span style="white-space: pre-wrap;">O </span>**Resumo**<span style="white-space: pre-wrap;"> e a </span>**Meta descrição**<span style="white-space: pre-wrap;"> possuem funções diferentes. O resumo é utilizado dentro do próprio site para apresentar o conteúdo ao visitante, enquanto a meta descrição é utilizada nos resultados dos mecanismos de busca.</span></p>

---

##### **Imagem e autoria**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/Kimimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/Kimimage.png)

<table id="bkmrk-campodescri%C3%A7%C3%A3oimagem"><colgroup><col></col><col style="width: 707px;"></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Imagem destaque**

</td><td><span style="white-space: pre-wrap;">Define a imagem principal utilizada no artigo. Para publicações, utilize imagens com resolução superior a </span>

**200 × 200 pixels**<span style="white-space: pre-wrap;"> .</span>

</td></tr><tr style="height: 10px;"><td>**Autor**

</td><td>É preenchido automaticamente com o usuário responsável pela criação do artigo, mas pode ser alterado.

</td></tr><tr><td>**Exibir Autor**

</td><td>Define se o nome do autor será apresentado no site. A opção vem habilitada por padrão.

</td></tr></tbody></table>

---

##### **O texto**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/M6Yimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/M6Yimage.png)

<table id="bkmrk-campodescri%C3%A7%C3%A3otextoc"><colgroup><col style="width: 92px;"></col><col></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Texto**

</td><td>Campo obrigatório. Corresponde ao conteúdo principal do artigo e pode conter formatações, imagens e links através do editor.

</td></tr></tbody></table>

---

##### **Publicar ou guardar**

<table id="bkmrk-campodescri%C3%A7%C3%A3oativod"><colgroup><col></col><col style="width: 778px;"></col></colgroup><tbody><tr><th>Campo

</th><th>Descrição

</th></tr><tr><td>**Ativo**

</td><td>Define se o artigo está habilitado para publicação no site. A opção vem ativada por padrão.

</td></tr></tbody></table>

<span style="white-space: pre-wrap;">A publicação também considera o campo </span>**Publicar em**.

Um artigo pode permanecer ativo e possuir uma data futura de publicação. Nesse caso, ele fica preparado para ser disponibilizado automaticamente quando a data configurada for atingida.

<p class="callout warning"><span style="white-space: pre-wrap;">Ao gravar ou excluir um artigo, o sistema atualiza o cache utilizado pelo site. Caso o conteúdo ainda não seja exibido, verifique se o artigo está </span>**Ativo**<span style="white-space: pre-wrap;"> e se a data definida em </span>**Publicar em**<span style="white-space: pre-wrap;"> já foi atingida.</span></p>

---

##### **A listagem dos artigos**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/CAhimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/CAhimage.png)

A listagem apresenta as principais informações dos artigos cadastrados:

<table id="bkmrk-informa%C3%A7%C3%A3odescri%C3%A7%C3%A3oi"><colgroup><col style="width: 323px;"></col><col style="width: 689px;"></col></colgroup><tbody><tr><th>Informação

</th><th>Descrição

</th></tr><tr><td>**Imagem**

</td><td>Apresenta a imagem relacionada ao artigo.

</td></tr><tr><td>**Título**

</td><td>Exibe o título do conteúdo.

</td></tr><tr><td>**Situação**

</td><td>Indica se o artigo está ativo ou inativo.

</td></tr><tr><td>**Resumo**

</td><td>Apresenta o resumo cadastrado para o artigo.

</td></tr><tr><td>**Categorias**

</td><td>Exibe as categorias relacionadas ao conteúdo.

</td></tr><tr><td>**Autor**

</td><td>Apresenta o responsável informado no artigo.

</td></tr><tr><td>**Data de publicação**

</td><td><span style="white-space: pre-wrap;">Informa a data configurada no campo </span>

**Publicar em**

.

</td></tr><tr><td>**Data de criação**

</td><td>Informa quando o artigo foi cadastrado.

</td></tr></tbody></table>

Os filtros disponíveis permitem localizar artigos através da busca inteligente, situação, categoria, autor, título e data de criação. Por padrão, a tela abre apresentando os artigos ativos.

<span style="white-space: pre-wrap;">Ao selecionar vários artigos, fica disponível a ação </span>**Remover**.

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/Rg0image.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/Rg0image.png)

---

##### **Onde o artigo aparece no site**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/scaled-1680-/q3rimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-09/q3rimage.png)

O artigo não define diretamente em qual página será apresentado.

<span style="white-space: pre-wrap;">Depois de publicado, ele fica disponível para utilização no site, enquanto os </span>**widgets das Páginas do Site**<span style="white-space: pre-wrap;"> definem onde as listas de artigos serão exibidas e qual formato será utilizado.</span>

Por esse motivo, as configurações das páginas são responsáveis por determinar em quais áreas do site os conteúdos publicados serão apresentados.

---

##### **Perguntas frequentes**

<span style="white-space: pre-wrap;">➜ </span>**Publiquei o artigo e ele não aparece no site.**<span style="white-space: pre-wrap;"> Verifique se o artigo está </span>**Ativo**<span style="white-space: pre-wrap;">, se a data definida em </span>**Publicar em**<span style="white-space: pre-wrap;"> já foi atingida e se existe um widget de artigos configurado em alguma página do site.</span>

<span style="white-space: pre-wrap;">➜ </span>**Qual a diferença entre Resumo e Meta descrição?**<span style="white-space: pre-wrap;"> O </span>**Resumo**<span style="white-space: pre-wrap;"> é utilizado nas chamadas do artigo dentro do site, enquanto a </span>**Meta descrição**<span style="white-space: pre-wrap;"> é utilizada nos resultados dos mecanismos de busca.</span>

<span style="white-space: pre-wrap;">➜ </span>**Posso programar a publicação?**<span style="white-space: pre-wrap;"> Sim. Informe uma data futura no campo </span>**Publicar em**<span style="white-space: pre-wrap;"> e mantenha o artigo ativo.</span>

<span style="white-space: pre-wrap;">➜ </span>**Um artigo pode ter mais de uma categoria?**<span style="white-space: pre-wrap;"> Sim. O campo </span>**Categorias**<span style="white-space: pre-wrap;"> permite relacionar o mesmo artigo a várias categorias.</span>

<span style="white-space: pre-wrap;">➜ </span>**Preciso preencher as palavras-chave?**<span style="white-space: pre-wrap;"> Não é obrigatório, mas elas podem ajudar a identificar o assunto relacionado ao conteúdo.</span>

<span style="white-space: pre-wrap;">➜ </span>**Como escondo o nome do autor?**<span style="white-space: pre-wrap;"> Desative a opção </span>**Exibir Autor**<span style="white-space: pre-wrap;"> no cadastro do artigo.</span>

<span style="white-space: pre-wrap;">➜ </span>**Onde crio as categorias?**<span style="white-space: pre-wrap;"> Acesse </span>**Site &gt; Artigos &gt; Categorias para Artigos**.

# Configurações do Site

# Como adicionar uma tag Body e Head

O módulo de configurações do site permite gerenciar seu site, incluindo a adição de códigos de integração externos, como ferramentas de análise, pixels de conversão, chats ao vivo e outras soluções que exigem a inserção de scripts no cabeçalho ou no corpo do site. Com esse recurso, você não precisa de ajuda técnica para configurar essas integrações.

No dia a dia, essa funcionalidade é usada para adicionar scripts de rastreamento (como Google Tag Manager, Facebook Pixel, RD Station, entre outros), tags de verificação de propriedade de domínio e qualquer outro código fornecido por serviços externos que precisam ser inseridos em partes específicas do HTML do site.

A configuração é feita dentro de cada página individualmente. Se você precisar que um script apareça em todas as páginas do site, repita o processo em cada uma delas, ou utilize a página principal como referência.

---

#### **Navegação no módulo**

[![codigosdosite.gif](https://ajuda.apresenta.me/uploads/images/gallery/2026-10/codigosdosite.gif)](https://ajuda.apresenta.me/uploads/images/gallery/2026-05/YDZimage.png)

**Rotina:**<span style="white-space: pre-wrap;"> Site &gt; Páginas &gt; Editar site &gt; Códigos</span>

---

#### **Como funciona**

A tela inicial exibe todas as páginas cadastradas no seu site. Cada linha mostra o título da página, o link permanente e o tipo. Para adicionar um script de integração, localize a página desejada na lista e clique nela para abrir o formulário de edição.

<p class="callout info">Se você quer que o script seja carregado em todo o site, o ideal é configurá-lo na página principal (geralmente chamada "Home") e nas demais páginas de alto tráfego. Consulte a documentação do serviço que você está integrando para saber em quais páginas o script deve estar presente.</p>

---

#### **Entendendo os campos de script: Head, Body e Noscript**

[![image.png](https://ajuda.apresenta.me/uploads/images/gallery/2026-10/scaled-1680-/XZpimage.png)](https://ajuda.apresenta.me/uploads/images/gallery/2026-10/XZpimage.png)

Dentro do formulário de edição de uma página, você encontra campos específicos para inserir códigos de integração. Esses campos correspondem a partes distintas da estrutura de uma página web. Entender a diferença entre eles é essencial para que o script funcione corretamente.

<table id="bkmrk-campo-descri%C3%A7%C3%A3o-obri" style="width: 100%; table-layout: fixed;"><colgroup><col style="width: 160px;"></col><col></col></colgroup><tbody><tr><th style="width: 160px; white-space: nowrap;">Campo

</th><th>Descrição

</th></tr><tr><td>Head (Cabeçalho)

</td><td><span style="white-space: pre-wrap;">Código inserido na seção de cabeçalho da página, antes do conteúdo visível ser carregado. É aqui que entram tags de verificação de domínio (como as do Google Search Console), metatags personalizadas e scripts que precisam ser inicializados com prioridade. Exemplo de uso: </span>

`<span class="editor-theme-code"><meta name="google-site-verification" content="SEU_CÓDIGO" /></span>`

</td></tr><tr><td>Script (Corpo superior)

</td><td><span style="white-space: pre-wrap;">Código JavaScript inserido logo após a abertura da seção de conteúdo da página. Ferramentas como Google Tag Manager e Facebook Pixel geralmente fornecem um trecho de código para ser colocado aqui, o mais alto possível. Exemplo de uso: o código </span>

`<span class="editor-theme-code"><script>...</script></span>`

<span style="white-space: pre-wrap;"> fornecido pelo GTM para ser inserido após a tag de abertura do corpo da página.</span>

</td></tr><tr><td>Noscript (Corpo alternativo)

</td><td><span style="white-space: pre-wrap;">Código de fallback exibido apenas para visitantes que têm JavaScript desativado no navegador. O Google Tag Manager, por exemplo, fornece um trecho </span>

`<span class="editor-theme-code"><noscript></span>`

<span style="white-space: pre-wrap;"> com um iframe para garantir que o rastreamento funcione mesmo sem JavaScript. Esse trecho deve ser inserido neste campo. Exemplo: </span>

`<span class="editor-theme-code"><noscript><iframe src="..."></iframe></noscript></span>`

</td></tr></tbody></table>

<p class="callout warning"><span style="white-space: pre-wrap;">Cole o código exatamente como fornecido pelo serviço externo, incluindo as tags </span>`<span class="editor-theme-code"><script></span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code"><meta></span>`<span style="white-space: pre-wrap;"> ou </span>`<span class="editor-theme-code"><noscript></span>`. Não remova ou altere o conteúdo fornecido, pois qualquer modificação pode fazer a integração parar de funcionar.</p>

---

#### **Exemplo prático: adicionando o Google Tag Manager**

O Google Tag Manager é um dos serviços mais comuns que exigem inserção de código em múltiplos pontos da página. Ao criar um contêiner no GTM, o serviço fornece dois trechos de código distintos. Veja onde cada um deve ser inserido:

<table id="bkmrk-trecho-fornecido-pel" style="width: 100%; table-layout: fixed;"><colgroup><col style="width: 206px;"></col><col></col><col style="width: 110px;"></col></colgroup><tbody><tr><th style="width: 160px; white-space: nowrap;">Trecho fornecido pelo GTM

</th><th>Onde inserir na página

</th><th class="align-center" style="width: 110px; white-space: nowrap; text-align: center;">Campo

</th></tr><tr><td>Primeiro trecho (JavaScript)

</td><td><span style="white-space: pre-wrap;">Cole no campo </span>**Head**<span style="white-space: pre-wrap;"> ou </span>**Script**<span style="white-space: pre-wrap;">, conforme indicado pelo GTM. Esse trecho começa com </span>`<span class="editor-theme-code"><script></span>`<span style="white-space: pre-wrap;"> e contém o código de carregamento do contêiner.</span>

</td><td class="align-center" style="text-align: center;">Head ou Script

</td></tr><tr><td>Segundo trecho (Noscript)

</td><td><span style="white-space: pre-wrap;">Cole no campo </span>**Noscript**<span style="white-space: pre-wrap;">. Esse trecho começa com </span>`<span class="editor-theme-code"><noscript></span>`<span style="white-space: pre-wrap;"> e contém um iframe de fallback para navegadores sem JavaScript.</span>

</td><td class="align-center" style="text-align: center;">Noscript

</td></tr></tbody></table>

<p class="callout success">A mesma lógica se aplica a outros serviços, como Facebook Pixel, RD Station, Hotjar e Google Analytics. Sempre consulte a documentação do serviço para saber qual trecho vai no cabeçalho e qual vai no corpo da página.</p>

---

#### **Salvando as alterações**

<span style="white-space: pre-wrap;">Após colar os códigos nos campos correspondentes, role até o final do formulário e clique em </span>**Salvar**. As alterações entram em vigor imediatamente no site. Para verificar se o script foi aplicado corretamente, acesse a página no navegador e use as ferramentas de desenvolvedor do seu navegador (tecla F12) para inspecionar o código-fonte da página.

<p class="callout info">Caso utilize o Google Tag Manager, você também pode usar a extensão "Tag Assistant" do Google Chrome para confirmar que o contêiner está disparando corretamente na página.</p>

---

#### **Perguntas frequentes**

**Qual a diferença entre colocar o código no Head e no Body (Script)?**  
<span style="white-space: pre-wrap;">O campo </span>**Head**<span style="white-space: pre-wrap;"> insere o código antes de qualquer conteúdo visível ser carregado, ideal para metatags e scripts de inicialização prioritária. O campo </span>**Script**<span style="white-space: pre-wrap;"> insere o código no início da área de conteúdo da página, que é onde a maioria dos serviços de rastreamento, como GTM e Facebook Pixel, recomenda inserir o JavaScript principal.</span>

**Para que serve o campo Noscript?**  
<span style="white-space: pre-wrap;">Ele garante que parte da integração funcione mesmo em navegadores com JavaScript desativado. O Google Tag Manager, por exemplo, usa esse campo para inserir um iframe alternativo que mantém o rastreamento ativo mesmo sem JavaScript. Se o serviço que você está configurando não fornecer um trecho </span>`<span class="editor-theme-code"><noscript></span>`, deixe esse campo em branco.

**Preciso repetir o processo em todas as páginas do site?**  
Sim, os campos de script são configurados individualmente por página. Se o serviço que você está integrando exige que o script esteja em todas as páginas, você precisará adicionar o código em cada uma delas. Uma alternativa é usar o Google Tag Manager para centralizar todos os scripts em um único lugar e adicionar apenas o código do GTM nas páginas.

**Posso adicionar mais de um script no mesmo campo?**  
Sim. Você pode colar múltiplos trechos de código no mesmo campo, um abaixo do outro. Certifique-se de que cada trecho está completo, com suas tags de abertura e fechamento, antes de adicionar o próximo.

**O que acontece se eu colar o código no campo errado?**  
O script pode não funcionar corretamente ou apresentar erros. Alguns serviços são tolerantes à posição do código, mas outros exigem o posicionamento exato. Sempre siga as instruções fornecidas pelo serviço que você está integrando para garantir o funcionamento adequado.