Como construir um site imobiliário usando Toolset Real Estate e OceanWP

Um site imobiliário precisa ser tão estável e confiável quanto as casas que você está vendendo.

Mas construir um site imobiliário robusto que os usuários gostem de usar às vezes pode ser tão difícil quanto construir as casas que você está vendendo – se você usar o conjunto errado de ferramentas.

Felizmente, é comprovado que combinar o Toolset Real Estate com o OceanWP oferece um site imobiliário profissional com todas as funções que você pode precisar.

Neste guia, mostraremos como criar os seguintes recursos:

• Tipos de postagem personalizados para suas diferentes propriedades e agentes
• Campos personalizados para adicionar informações como o número de banheiros
• Taxonomias para separar suas propriedades com base em características (casas isoladas, bangalôs, etc.)
• Modelos para exibir suas propriedades com a mesma estrutura
• Um controle deslizante para mostrar imagens de suas propriedades
• Pós-relacionamentos para vincular os agentes imobiliários aos imóveis de que são responsáveis
• Uma pesquisa para que os usuários possam encontrar facilmente a melhor propriedade para eles
• Mapas para mostrar as localizações das propriedades e resultados da pesquisa
• Um formulário de front-end para que os usuários possam enviar suas próprias listagens de propriedades

Se você quiser realizar essas etapas à medida que as lê, pode usar seu próprio site de teste imobiliário gratuito criado pela Toolset e OceanWP.

Por que estamos usando Toolset Real Estate e OceanWP

Toolset Real Estate faz parte do Toolset, que fornece todos os recursos necessários para criar vários tipos de sites profissionais.

Especificamente, com o Toolset Real Estate você não precisará de nenhum outro plugin para adicionar os recursos que um site imobiliário precisa. Isso significa que você não precisa se preocupar com a compatibilidade do plug-in ou se o grande número de plug-ins diminuirá a velocidade do seu site.

Enquanto isso, o OceanWP é um dos temas mais populares para sites de negócios por um motivo. Os sites administrados pela OceanWP têm uma melhor taxa de conversão, tempos de carregamento mais rápidos e SEO aprimorado - para que os compradores de casas possam encontrar seu site facilmente.

Juntos, o Toolset Real Estate e o OceanWP funcionam perfeitamente juntos, o que significa que você pode criar sites robustos com ótima aparência sem preocupações.

Não se esqueça, você pode baixar sites de teste criados usando Toolset e OceanWP gratuitamente para experimentar.

O que você precisa para começar

Ao criar um site imobiliário personalizado com o Toolset, você precisará dos seguintes plug-ins do Toolset:

• Tipos de conjunto de ferramentas – para configurar tipos de postagem personalizados, campos e taxonomias, para as propriedades e agentes
• Blocos de conjunto de ferramentas – para projetar o front-end do seu site (modelos e pesquisas de propriedades, etc.)
• Mapas do conjunto de ferramentas – para adicionar recursos que permitem pesquisar e exibir propriedades em mapas
• Formulários de conjunto de ferramentas – para permitir que os agentes gerenciem propriedades por meio de formulários front-end personalizados
• Acesso ao conjunto de ferramentas – para controlar quais partes do site os visitantes, clientes e agentes podem acessar

Depois de instalar e registrar esses componentes, é hora de começar a construir seu site imobiliário!

1. Crie seu tipo de postagem personalizado

Primeiro, precisamos criar um tipo de postagem personalizado para nossa seção “Casas” para que os usuários saibam exatamente onde ir para visualizá-las.
1. Vá para Toolset → Dashboard no seu administrador do WordPress e clique em Add new post type.

2. Agora precisamos nomear nosso tipo de postagem e salvá-lo na posição em que queremos que seja exibido no menu de administração.

3. Clique em Salvar tipo de postagem.

E é isso. O tipo de postagem personalizado da sua casa está pronto.

2. Crie seus campos personalizados

Agora que temos nosso tipo de postagem personalizado, precisamos adicionar alguns campos personalizados. Nossos campos personalizados formam um modelo de seções que queremos preencher para descrever cada casa e suas características.

Por exemplo, precisaremos de seções para o número de banheiros, preço e ano em que a propriedade foi construída.

1. No painel do conjunto de ferramentas, clique em Adicionar campos personalizados ao lado do tipo de postagem personalizada “Casas” que criamos.

2. Uma caixa Adicionar novo campo aparecerá onde podemos escolher o tipo de campo personalizado que desejamos. Por exemplo, um campo personalizado para “Ano de construção” será um número.

3. Para cada campo, você precisará definir opções, como se é obrigatório inserir informações.

4. Depois de preencher todas as opções preferidas de um campo, clique em Adicionar novo campo para passar para o próximo no grupo. Depois de adicionar todos os campos para um grupo de campos, clique em Salvar grupo de campos.

Agora, cada vez que você editar um post “Casa”, você verá esses campos para preencher.

3. Crie suas taxonomias personalizadas

As taxonomias personalizadas são uma ótima maneira de separar propriedades para que os usuários possam encontrar facilmente aquelas que correspondem aos seus critérios. Por exemplo, se eles só querem ver casas que estão à venda e não para alugar.

Tomando esse exemplo, veja como criar taxonomias para diferenciar entre casas que estão à venda e casas para alugar.

1. No Painel do Conjunto de Ferramentas, clique em Adicionar taxonomia personalizada na linha Casas .
2. Digite o seguinte nas caixas
   1. Nome plural: Tipos de propriedade
   2. Nome no singular: Característica da propriedade
   3. Slug: Característica da Propriedade
3. Escolha se deseja que a taxonomia seja hierárquica ou plana. Para o propósito deste, vamos mantê-lo plano.
4. Selecione a qual tipo de postagem você deseja que a taxonomia seja associada - neste caso, será "Casas".
5. Clique em Salvar taxonomia

Agora, quando editamos ou criamos um tipo de postagem “Casas”, podemos criar e selecionar taxonomias de “Tipo de propriedade” para atribuir ao tipo de postagem.

4. Crie um modelo para exibir as propriedades

Agora temos os componentes principais que precisamos para mostrar nossas propriedades, mas uma parte importante do processo permanece – como exibi-los no front-end?

É aqui que criamos um modelo que podemos usar para exibir cada uma das nossas casas.

Para construir nosso modelo para “Casas” únicas, usaremos Toolset Blocks com o WordPress Block Editor.

Com Toolset Blocks, você pode criar modelos para seus tipos de postagem personalizados, com campos e taxonomias personalizados. Sem HTML, sem CSS, sem JavaScript e sem necessidade de PHP!

1. Vá para Toolset → Dashboard e clique no botão Create Content Template na linha Houses.
2. Use o WordPress Block Editor para criar seu modelo.
3. Escolha blocos na seção Conjunto de ferramentas para qualquer parte do modelo que exiba campos (não elementos estáticos). Por exemplo, use o bloco Heading do Toolset para qualquer título que exiba um campo. O conjunto de ferramentas adiciona a opção de exibir conteúdo dinâmico também do núcleo do WordPress e dos plugins de terceiros mais populares.
4. Habilite Fontes Dinâmicas para blocos que devem exibir campos da postagem que o modelo exibe.

Você pode modificar e estilizar seu modelo de várias maneiras. Por exemplo, você pode organizar o conteúdo em colunas, exibir partes do modelo condicionalmente, exibir uma lista de postagens relacionadas e muito mais.

5. Crie um controle deslizante dinâmico para apresentar suas imagens de propriedade

Um controle deslizante é uma ótima maneira de mostrar suas propriedades exibindo várias imagens de cada uma.

Usando o Toolset, você pode criar facilmente controles deslizantes complexos com transições sem qualquer codificação PHP complexa.

1. Depois de editar ou criar uma página, postagem ou modelo, insira o bloco View e crie uma nova View.
2. No assistente de criação de visualização, habilite a paginação e na seção Selecionar estilo de loop de visualização , escolha a opção Não formatado (último).
3. Na última etapa, selecione o tipo de postagem para o qual deseja exibir postagens.
4. Clique para finalizar o assistente e sua Visualização está pronta.

Exibição de campos de postagem e aplicação de estilo personalizado

1. Insira um bloco Container para que você possa adicionar um plano de fundo ao seu controle deslizante. Por exemplo, você pode definir o plano de fundo do slide como uma imagem dinâmica proveniente da imagem em destaque da postagem.
2. Use os blocos do conjunto de ferramentas para adicionar outros campos dinâmicos ao seu controle deslizante, como o título do post.

Com Toolset Sliders, além de exibir campos de postagem e aplicar estilos personalizados, você pode ajustar seu slider com uma variedade de outras opções, como fazer seu slide View automaticamente e alterar o estilo de paginação.

6. Crie um pós-relacionamento para conectar suas casas com seus agentes

Os relacionamentos de postagem são uma parte importante, mas subestimada, de qualquer site. Com os relacionamentos de postagem, você pode conectar diferentes tipos de conteúdo entre si.

Para saber mais sobre como eles ajudam você, confira nosso guia para criar relacionamentos de postagem usando o Toolset e o OceanWP.

No nosso site imobiliário, temos casas e agentes imobiliários. Vamos criar uma relação de postagem entre eles.

Criar o relacionamento de postagem

1. Vá para Conjunto de ferramentas → Relacionamentos e clique em Adicionar novo na parte superior.
2. O assistente de relacionamentos do conjunto de ferramentas é aberto. Para nossos agentes e propriedades, queremos um “relacionamento de um para muitos”, pois um agente será responsável por várias propriedades.
3. Selecione os tipos de postagem que formarão o relacionamento.

4. Selecione se deseja limitar o número de postagens que você pode atribuir. Por exemplo, você pode querer que cada agente tenha no máximo 20 casas atribuídas a eles.

5. Dê um nome ao seu relacionamento.

6. Revise seus relacionamentos e clique em Concluir.

Como atribuir propriedades a um agente

Agora podemos começar a criar conexões específicas entre nossas propriedades e agentes imobiliários.

1. Navegue até a página de um agente no menu de administração
2. Uma nova seção aparecerá na parte inferior da página chamada Propriedade do agente. Clique em Conectar propriedade existente e digite para localizar o nome de uma propriedade ou selecione-a na lista disponível.

3. Clique em Atualizar para salvar sua postagem. Agora, quando você visitar a página do agente, todas as propriedades que você conectou a ele serão listadas. Além disso, se você editar uma dessas páginas de propriedades, verá que o relacionamento foi exibido nas duas extremidades – o agente também será listado na página da propriedade.

Criando uma visualização para exibir seu relacionamento com a postagem

Há duas maneiras de exibir sua lista de relacionamentos de postagem:

• Exiba uma lista dos “muitos” posts relacionados em relacionamentos um-para-muitos e muitos-para-muitos.
• Em relacionamentos um-para-muitos, exiba campos que pertencem ao lado “um”.

Exibindo muitos itens relacionados

Em nosso exemplo, os agentes têm muitas propriedades, então usaremos uma View para exibi-los.

1. Navegue até o seu modelo de conteúdo "Agentes"
2. Insira um bloco de vista e crie uma nova vista
3. Selecione para exibir o tipo de postagem que você precisa (ou seja, propriedades) e, em seguida, selecione a opção para exibir Propriedades que pertencem ao Agente atual .
4. Use blocos para projetar a saída para sua View. Como a Visualização já está configurada para exibir postagens relacionadas, você não precisa selecionar a relação em blocos que usa para exibir conteúdo dinâmico.

Exibindo um item relacionado (pai)

1. Navegue até o seu modelo de conteúdo “Propriedades”.
2. Você pode usar qualquer bloco do conjunto de ferramentas para exibir as informações dos pais.
3. Nas propriedades do bloco, selecione o pai de Post Source.
4. Selecione o campo que deseja exibir.

7. Como adicionar uma pesquisa avançada para que os usuários possam encontrar facilmente suas propriedades com melhor correspondência

Uma pesquisa personalizada avançada é a melhor maneira de seus usuários encontrarem exatamente o que estão procurando. Com vários filtros, eles poderão selecionar a melhor casa com base em suas necessidades pessoais.

1. Comece inserindo um bloco de exibição em uma página.
2. No assistente de criação de exibição, ative a opção Pesquisar.

3. Na próxima página, selecione “Propriedades” em Escolher conteúdo que esta visualização exibirá .

4. Após terminar o assistente de criação de Vistas, há uma seção de Pesquisa de Vistas na área de edição da Vista. Use os botões disponíveis para adicionar um campo de pesquisa personalizado, inserir botões de envio e redefinição ou adicionar outros blocos.

Por exemplo, você pode clicar em Adicionar campo de pesquisa e usar a lista suspensa Selecionar um campo . Selecione por qual tipo de conteúdo você deseja que os usuários possam pesquisar e clique em Avançar .

5. Agora você pode usar a barra lateral direita para ajustar as opções desse campo de pesquisa. Isso inclui as principais configurações de campo, opções de rótulo e estilo.

6. Agora estamos prontos para criar a seção onde os resultados serão exibidos. Fazemos isso adicionando blocos na área View Loop do editor.

7. Clique em Adicionar bloco .

8. Escolha um bloco que deseja usar como parte dos resultados da pesquisa. Por exemplo, você pode usar o bloco Heading para exibir títulos de propriedade nos resultados da pesquisa.

8. Exiba mapas para mostrar a localização das propriedades

Os mapas são uma ótima maneira de ajudar os usuários a entender imediatamente a localização exata de uma propriedade.

1. Para começar a criar um mapa, navegue até a página ou modelo em que deseja exibir o mapa. Insira o bloco Mapa do Conjunto de Ferramentas. Se você precisar definir uma chave de API, o Google fornece instruções detalhadas sobre como fazer isso.
2. Na seção Source for the marker , habilite a opção Dynamic Source .
3. No menu suspenso Origem da postagem , selecione "Propriedade atual". Em seguida, na lista suspensa Origem , selecione qualquer campo personalizado que contenha um endereço para mostrá-lo no mapa

9. Crie um formulário de front-end para que os usuários enviem seu próprio conteúdo

Por fim, você pode querer que os usuários forneçam suas próprias listagens para anunciar em seu site imobiliário. Uma das maneiras mais fáceis de fazer isso é por meio de um formulário no front-end que apresenta todos os campos que você deseja que eles preencham.

Criar o formulário não poderia ser mais simples graças ao editor de arrastar e soltar do Toolset.

1. Vá para Toolset → Post Forms e clique em Add New.
2. Clique em Continuar no assistente de formulários e digite o nome do seu formulário.
3. Edite as configurações do seu formulário, incluindo:
   1. O tipo de postagem ao qual eles adicionarão envios
   2. O status da postagem depois de enviada
   3. O que os usuários veem depois de enviar o formulário (você também pode adicionar uma mensagem como fiz abaixo)

4. Agora você chega ao editor de arrastar e soltar onde você pode decidir quais campos vão e para onde. Aqui você também pode usar os campos CSS Editor e JS Editor para estilizar seu formulário. Há também uma série de elementos extras que você pode adicionar.

5. Na próxima página, você pode adicionar qualquer notificação por e-mail que deseja que os usuários ou editores recebam em qualquer estágio. Abaixo, adicionei um e-mail para enviar aos usuários quando sua listagem for publicada.

6. Clique em Concluir e seu formulário está pronto para ser exibido.

7. Tudo o que você precisa fazer para exibir o formulário é ir até a página na qual deseja adicionar o formulário, adicionar o bloco Toolset Form e selecionar o formulário que acabou de criar para a lista suspensa.

Próximos passos

Depois de trabalhar com essas nove etapas principais para criar seu próprio site imobiliário, você pode tornar seu site ainda mais impressionante fazendo o curso on-line imobiliário da Toolset.

Os módulos fáceis de entender compõem um guia passo a passo abrangente – cheio de vídeos úteis – que conta tudo o que você precisa saber para construir um site imobiliário notável.

Qual tem sido sua experiência na construção de um site imobiliário? Deixe-nos saber nos comentários!