Como montar as páginas do site com o Page Builder?
O Page Builder é o construtor de páginas do site da imobiliária. Com ele, você cria e organiza as páginas do site direto pelo sistema, montando cada uma com blocos, colunas e widgets, sem precisar de programação.
Os widgets são os conteúdos que aparecem na página: busca de imóveis, listagens, destaques, formulários, mapas, depoimentos, textos e outros recursos. Você escolhe onde cada um fica e ajusta as opções dele na própria tela.
Para abrir a aba Páginas, você precisa da permissão Site > Páginas. Cadastrar, editar e excluir páginas pedem as permissões Cadastrar, Editar e Deletar do mesmo item. Para chegar até o cartão do site, também é necessária a permissão Site > Sites.
Navegação no módulo
Rotina: Site > Sites > Editar Site (site antigo) > Páginas
A lista de páginas
A aba Páginas lista as páginas do site. Ela abre mostrando só as páginas ativas: o filtro Ativa igual a Sim já vem marcado na busca. Para ver também as inativas, remova esse filtro.
Coluna | Descrição |
|---|---|
Título | Nome da página. Clique nele para abrir a página no construtor. |
Link permanente | Endereço da página no site. Clique nele para abrir a página publicada em outra aba. |
Tipo | Finalidade da página no site, como Home, Contato ou Página Normal. |
Ativo | Mostra se a página está ativa no site (verde) ou não (vermelho). |
Mobile | Mostra se é a versão da página para celular (verde) ou a versão normal (vermelho). |
No topo da lista ficam as ações:
Ação | Descrição |
|---|---|
Cadastrar | Abre o construtor para criar uma página nova. |
Ações | Fica ativo quando você marca páginas na lista. Tem a opção Remover, que exclui as páginas marcadas depois de pedir confirmação. |
Em cada linha também ficam os ícones de editar (lápis) e excluir (lixeira).
Estrutura de uma página
A página é montada em três níveis:
Estrutura | Descrição |
|---|---|
Bloco | Faixa horizontal da página. Tem configurações próprias de largura, fundo e espaçamento. |
Coluna | Divisão interna do bloco. O formato escolhido para o bloco define quantas colunas ele tem e a largura de cada uma. |
Widget | Conteúdo colocado dentro de uma coluna, como formulário, imagem, busca, listagem ou texto. |
Para mudar a ordem dos blocos, arraste o bloco pela barra pontilhada do lado esquerdo. Para mudar um widget de lugar, arraste-o pelo título até outra coluna.
Tipos de página
O Tipo de Página define onde a página é usada no site e quais widgets ficam disponíveis no construtor.
Tipo | Descrição |
|---|---|
Home | Página inicial do site. |
Página Normal | Página institucional, como Quem Somos, ou de conteúdo geral. |
Imóvel Listar | Página com a listagem de imóveis. |
Imóvel Detalhar | Página com os detalhes de um imóvel. |
Imóvel não Disponível | Página mostrada quando o imóvel não está mais disponível. |
Condomínio Detalhar | Página com as informações de um condomínio. |
Artigo Listar | Página com a listagem dos artigos. |
Artigo Detalhar | Página com o conteúdo completo de um artigo. |
Corretor Detalhar | Página com as informações de um corretor. |
Contato | Página de contato com a imobiliária. |
Solicitação de Imóvel | Página em que o visitante pede um imóvel que não encontrou. |
Cadastro de Imóvel | Página em que o proprietário oferece um imóvel para a imobiliária. |
Indicadores Imobiliários | Página com os índices do mercado imobiliário. |
Landing Page | Página de campanha, normalmente de um empreendimento ou imóvel. |
Página Modelo | Modelo de conteúdo que pode ser usado dentro de outras páginas pelo widget Página Modelo. |
Rodapé | Conteúdo do rodapé do site. |
Carrossel para TV | Página para exibir imóveis em telas, como a TV da recepção. |
Redirecionamento | Encaminha quem acessa para outro endereço. Não tem conteúdo próprio. |
O site precisa ter pelo menos uma página ativa de cada um destes tipos: Home, Imóvel Detalhar, Contato, Artigo Listar, Artigo Detalhar e Condomínio Detalhar. Se você tentar excluir a única página ativa de um desses tipos, o sistema mostra o aviso "Você não pode excluir uma Página sem que exista outra Página do mesmo tipo e ativa." Nesse caso, crie a outra página antes.
Não é possível trocar o tipo da página enquanto ela tiver widgets que só existem no tipo atual. O sistema avisa "Você não pode trocar o Tipo de Página quando há widgets específicos para esta página, remova os widgets específicos primeiro" e restaura o tipo anterior. Remova esses widgets e troque o tipo de novo.
Preencher as informações da página
O painel Informações da Página identifica a página e define o endereço dela no site.
Campo | Descrição | Obrigatório |
|---|---|---|
Tipo de Página | Finalidade da página no site. Veja a tabela de tipos acima. | Sim |
Título | Nome da página. | Sim |
Link Permanente | Endereço da página no site. Se ficar em branco, o sistema monta o endereço a partir do título assim que você sai do campo Título. Você pode alterá-lo. | Não |
Redirecionamento | Campo Link de redirecionamento. Aparece só no tipo Redirecionamento. É o endereço completo, com https://, para onde o visitante é encaminhado. | Sim |
Palavras-chave | Campo Meta - Palavras Chaves para a Página. Palavras separadas por vírgula, para os buscadores. O próprio campo orienta a usar no máximo 56 caracteres. | Não |
Descritivo | Campo Meta - Descritivo da Página. Resumo da página que os buscadores mostram. O próprio campo orienta a usar no máximo 155 caracteres. | Não |
Ativo | Liga ou desliga a página no site. | Não |
Mobile | Marca a página como a versão para celular. Ela aparece só em celulares e pode ter o mesmo link permanente da página normal. | Não |
Atenção: Cadastre a versão Mobile depois da página normal do mesmo tipo. Ao gravar alterações numa página Mobile sem essa página normal, o sistema avisa "Para cadastrar uma página do tipo MOBILE, é necessário que já exista uma página … correspondente, mas sem a opção MOBILE selecionada."
Na página Mobile, o construtor só oferece blocos de Coluna Completa (100%). Pelo mesmo motivo, a opção Mobile fica desativada numa página que já tem blocos com mais de uma coluna.
Adicionar um bloco
Abaixo do painel de widgets, escolha o formato do bloco e clique em Adicionar um novo bloco de widgets. O bloco novo entra no fim da página e fica destacado por alguns segundos.
Formato | Divisão das colunas |
|---|---|
Coluna Completa | Uma coluna com 100% da largura. Na lista: Coluna Completa (100%). |
Lateral e Central | Uma coluna de 33% e outra de 66%. Na lista: Coluna Lateral (33%) / Coluna Central (66%). |
Central e Lateral | Uma coluna de 66% e outra de 33%. Na lista: Coluna Central (66%) / Coluna Lateral (33%). |
Três colunas | Três colunas de 33%. Na lista: Coluna Lateral (33%) / Coluna Central (33%) / Coluna Lateral (33%). |
Duas colunas | Duas colunas de 50%. Na lista: Coluna 1/2 (50%) / Coluna 2/2 (50%). |
Quatro colunas | Quatro colunas de 25%. Na lista: Coluna 1/4 (25%) / Coluna 2/4 (25%) / Coluna 3/4 (25%) / Coluna 4/4 (25%). |
Cada coluna mostra a largura dela e um botão + para adicionar widgets.
O botão de três pontos, no canto direito do bloco, abre as opções do bloco:
Opção | Descrição |
|---|---|
Duplicar | Cria uma cópia do bloco, com os widgets dele, logo acima do original. |
Configurações | Abre a janela Configurações do Bloco de Widgets. |
Excluir | Remove o bloco e todos os widgets dele, depois de pedir confirmação. |
Campo | Descrição |
|---|---|
Largura do bloco | Corpo, Fluída ou Completo. |
Cor de fundo | Cor atrás do conteúdo do bloco. |
Cor dos textos | Cor das letras dentro do bloco. |
Imagem de fundo | Imagem atrás do conteúdo do bloco. |
Cor sobre imagem | Camada de cor por cima da imagem de fundo. Ajuda a ler o texto sobre uma foto. |
Efeito | Sem Efeito ou Parallax, em que a imagem de fundo se move mais devagar que a página. |
Redimensionar | Como a imagem ocupa o fundo: Esticar, Tamanho Real ou Ajustar à Altura. |
Espaçamentos | Campos Espaçamento interno e Espaçamento externo, de 0 a 100. |
Repetir | Repete a imagem de fundo quando ela é menor que o bloco. |
Classe CSS | Campo Classe para codificação CSS, para quem cuida do visual do site com código próprio. |
O botão Salvar da janela só aplica as configurações ao bloco na tela. Para manter a mudança no site, clique em Gravar Informações no fim da página.
Adicionar widgets
Você adiciona widgets de duas formas:
Forma | Descrição |
|---|---|
Arrastar | Arraste o widget da lista do painel Widgets da Página até a coluna. |
Botão + | Clique no + ao lado do nome da coluna. Na janela Adicionando widget, clique no widget. A janela já mostra só os widgets que cabem naquela coluna. |
As duas listas têm o campo Escreva para pesquisar..., para achar o widget pelo nome. Os widgets disponíveis mudam conforme o Tipo de Página.
Atenção: Cada widget aceita só algumas larguras de coluna. Enquanto você arrasta um widget, as colunas que não o aceitam ficam bloqueadas. Se ele não entrar, use um bloco com uma coluna mais larga.
Configurar um widget
Clique no ícone de seta do widget, ou dê dois cliques no título dele, para abrir as opções. Os campos mudam conforme o widget.
Opção | Descrição |
|---|---|
Seta | Botão Minimizar/Maximizar Widget. Abre ou recolhe as opções do widget. |
X vermelho | Botão Remover Widget. Tira o widget da página, depois de pedir confirmação. |
Widget Ativo | Quando desligado, o widget continua configurado na página, mas não aparece para quem visita o site. |
Widgets disponíveis
A tabela abaixo agrupa os widgets pela finalidade, para facilitar a consulta. Alguns só aparecem em certos tipos de página.
Grupo | Exemplos |
|---|---|
Imóveis | Busca para Imóvel, Listagem de Imóveis, Slider de Destaques de Imóveis, Listagem de Condomínios, Mapa com Buscador, Lista de Bairros e Lista de Construtoras. |
Ficha do imóvel | Os widgets terminados em "do Imóvel": Características, Localização, Medidas, Valores, Detalhes, Descrição e Documentos. Também Imagem Principal do Imóvel, Mapa do Imóvel e Imóveis Relacionados. |
Mídia | Galeria de Imagens do Imóvel, Galeria de Plantas do Imóvel, Vídeos do Imóvel, Tour Virtual 360º, Youtube - Playlist e Feed do Instagram. |
Contato | Formulários de contato, Formulário Dinâmico, Atendimento via WhatsApp, Nós Ligamos para Você, Formulário de Solicitação de Imóveis, Formulário de Cadastro de Imóveis, Formulário de Visita e Propostas para o Imóvel. |
Conteúdo | Título de Página, Bloco de Conteúdo, Bloco de Código HTML, Linha Divisória, Lista de Links, FAQ, Banner, QR Code e Página Modelo. |
Artigos | Listagem de Artigos, Lista de Artigos Simples, Busca de Artigos, Categoria de Artigos, Resumos dos Artigos e Detalhar Artigo. |
Institucional | Informações da Imobiliária, Lista de Corretores, Redes Sociais, Depoimentos, Formulário de Depoimento e Índices Imobiliários. |
Temporada | Calendário de Disponibilidade, Pacotes para Temporada e Formulário de Reserva de Temporada. |
Atenção: Os widgets da ficha do imóvel dependem de um imóvel. Eles só aparecem nos tipos ligados a um imóvel, como Imóvel Detalhar e Landing Page.
Usar layouts prontos
Nos tipos Landing Page e Rodapé, o construtor mostra o painel de layouts prontos. Clique na imagem de um layout e depois em Aplicar Layout: o sistema monta os blocos e widgets do modelo, e você ajusta o conteúdo normalmente. O ícone de olho amplia a imagem do layout.
Numa página nova, ao escolher um desses tipos, o sistema já aplica um layout padrão e mostra o aviso "Layout aplicado. É necessário gravar as informações para manter sua alteração."
Atenção: Aplicar um layout troca todos os blocos e widgets da página pelos do modelo. Se a página já tem conteúdo, ele é substituído na tela. Se não quiser manter a troca, saia sem gravar.
Na Landing Page nova também aparece o botão Importar. Ele abre a janela Importar Template de Página, em que você informa título, link permanente, textos para buscadores e o imóvel, escolhe um modelo e clica em Importar. O sistema cria a página já com o conteúdo do modelo.
A Landing Page depende do plano da imobiliária. Se o plano não incluir esse recurso, o sistema não deixa gravar a página. Fale com o suporte para contratar.
Gravar a página
Tudo o que você monta no construtor fica só na tela até você clicar em Gravar Informações, no fim da página, ou usar o atalho Ctrl + S. Ao gravar, o sistema atualiza as páginas do site antigo. Para conferir o resultado, clique em Ver no Site, no topo.
Duplicar uma página
O botão Duplicar, no topo de uma página já gravada, cria uma cópia com os mesmos blocos, widgets e configurações. A janela Duplicando página pergunta "Qual será o novo link permanente?" e já sugere o endereço atual com o final -clone. Ao confirmar, o sistema abre a cópia.
A cópia não leva o imóvel vinculado da página original. Se for uma Landing Page, defina o imóvel de novo na cópia.
Vincular um imóvel à página
Na Landing Page já gravada, aparece o botão Imóvel. Ele abre a janela Definir imóvel vinculado à página, em que você escolhe o imóvel usado pelos widgets da página, como fotos, características e valores. Só imóveis ativos aparecem na busca.
Clique em Salvar na janela e depois em Gravar Informações, para manter o vínculo.
Perguntas frequentes
➜ O widget que preciso não aparece na lista. Por quê? Confira o Tipo de Página, porque os widgets disponíveis mudam conforme o tipo. Pelo botão +, confira também a largura da coluna: a janela mostra só os widgets que cabem nela.
➜ Arrastei um widget e ele não entrou na coluna. O que faço? O widget não aceita aquela largura de coluna. Use um bloco com uma coluna mais larga.
➜ Como esconder um widget sem perder a configuração? Abra o widget e desligue Widget Ativo.
➜ Gravei a página e a mudança não apareceu no site. O que faço? Confira se a opção Ativo da página está ligada e abra a página pelo botão Ver no Site. Se ainda aparecer a versão antiga, use Limpar Cache do Site, na aba Configurações do editor do site antigo.
➜ Preciso de um conteúdo que nenhum widget atenda. O que posso fazer? Use o widget Bloco de Código HTML. Se precisar de um visual próprio, use também a Classe para codificação CSS, nas configurações do bloco.