Parabéns por adquirir o tema imobiliário MaxImóbi 2!
MaxImóbi 2 é um tema desenvolvido para o CMS WorkControl, voltado para o segmento imobiliário, focado em usabilidade, performance e com estratégias de alto poder de conversão.
Dedicamos toda nossa atenção para oferecer a melhor experiência e performance de uso, tornando seu projeto incrível e poderoso. Sempre focando nos padrões mais recentes de desenvolvimento de projetos web.
Se você realmente gosta do nosso trabalho, deixei sua avaliação em nosso perfil no Google Business, isso realmente nos motiva a oferecer projetos cada vez melhores.
★ ★ ★ ★ ★
Para que esse projeto continue recebendo atualizações de aprimoramento e correções, é importante que os custos dele sejam cobertos pela comercialização do mesmo.
Esperamos que respeite nosso trabalho, garantindo que somente pessoas que o adquiriram em nossa plataforma se beneficiem do uso dele.
Como forma de orientação durante o desenvolvimento, utilizamos as seguintes premissas de desenvolvimento:
Como já dito anteriormente, esse tema foi desenvolvido utilizando o Bootstrap 4.5 e também utilizamos outros plugins baseados da biblioteca jQuery. Isso nos permitiu customizar e melhorar alguns widgets pré-existentes do WorkControl. Assim, além de melhorar a experiencia do usuário nesse tema, você poderá reutilizar esses widgets em outros projetos, podendo dispensar os bots originais do WorkControl.
Os seguintes recursos foram renovados:
Os widgets que foram customizados e criados, estão com o prefixo “max_”, assim será possível distinguir mais facilmente os recursos utilizados no tema.
Mantendo a mesma essência, o sistema de comentários foi reestilizado utilizando o Bootstrap 4.5
Com isso a integração da App Comments em qualquer tema será muito mais harmoniosa, melhorando a experiencia do usuário em seus projetos.
A interação com o sistema de avaliação e com os "likes" foram modificados para melhorar a interface.
Devido a estrutura original do WorkControl, optamos por manter o padrão visual do Widget Account.
Apenas adotamos os recursos do Bootstrap 4 e também adicionamos um novo formulário de contato diretamente no painel do usuário
O widget de compartilhamento passou por atualizações, removemos o sistema de compartilhamento via Google Plus (já que o mesmo foi descontinuado) e adicionamos um botão de impressão acionado por Javascript.
Para complementar o recurso de impressão, as páginas single de artigos e imóveis foram customizadas para que a impressão não exiba outros elementos do site, entregando um conteúdo totalmente limpo, facilitando a apresentação do conteúdo e/ou compartilhamento por PDF.
No blog, conservamos a estrutura visual semelhante a padrão do WorkControl, porém cuidamos para que não houvesse erros de direcionamento na navegação do site pela URL.
A página de pesquisa do tema MaxImóbi está mais expansiva, ela agora permite buscar artigos por categoria, por autor, pelo título, pelo subtítulo e pelo conteúdo do artigo, ajudando os usuários do blog encontrar mais facilmente o conteúdo desejado.
A principal diferença da página single post do blog do tema MaxImóbi, está no Schema do post, que aprimoramos a utilização de dados estruturados para aumentar as chances de um bom posicionamento nos motores de busca.
Apenas dois aspectos foram modificados do formulário originalmente criado para o WorkControl.
O primeiro é que ele foi feito em AJAX para melhorar a usabilidade. O segundo aspecto é que é possível enviar para múltiplos destinatários, bastando acessar o arquivo Config\Client.inc.php ou o campo relacionado no painel de configuração e informar os destinatários na constante SITE_ADDR_EMAIL separados por ponto e vírgula (;) conforme a seguir:
define('SITE_ADDR_EMAIL', 'contato@worcontrol.com.br; email2@seudominio.com.br; email3@seudominio.com.br'); //E-mail de contato
Esse tema tem dois grandes diferenciais que fazem com que ele seja memorável, sendo o sistema de filtro de imóveis e o sistema de comparação de imóveis.
Para complementar esses dois recursos favorecendo o aumento de conversão, a página single de exibição de imóveis ganhou um sistema de exibição de imóveis relativos muito mais inteligente, fazendo com que o visitante encontre o imóvel certo com poucos cliques.
Iremos falar mais sobre esses recursos a seguir!
Os seguintes recursos foram criados:
Esse projeto possui basicamente dois filtros de busca, sendo, um filtro de busca básico e um filtro de busca completo. Ambos trabalham de maneira interativa, sempre exibindo somente opções válidas para o visitante do site, através de atualização dos campos em tempo real. Toda a interação com os filtros do site, é guardada em sessão, o que garante melhor qualidade e desempenho na interação com o usuário.
Esse é um filtro para um primeiro contato com o site. Ele age de maneira interativa, mudando os valores de cada campo automaticamente, de acordo com a interação do usuário.
A interação pode ser iniciada a partir de qualquer um dos campos, sem restrição, entretanto, para resetar um campo especifico, basta selecionar a opção “Resetar Campo” presente em cada campo.
Após selecionar as opções desejadas, ao clicar em buscar, o visitante do site será direcionado para a página de busca avançada, onde poderá refinar as suas buscas de acordo com as suas preferências.
Na aba seguinte, é possível realizar a busca por meio do código de referência do imóvel. Esse recurso já existia originalmente no Tema do WorkControl e mantivemos aqui.
O filtro de busca avançado tem como premissa fazer com que o usuário demore o menor tempo possível para encontrar o imóvel que deseja, sem perder tempo com buscas inválidas ou com resultados diferentes do esperado.
Para isso, o filtro foi desenvolvido para interagir com o usuário de forma a atualizar as opções de busca, de acordo com as opções existentes no banco de dados.
Se durante a interação do usuário não houver mais variações de opções, ao invés de mostrar apenas uma opção de um determinado parâmetro, ele simplesmente oculta o parâmetro em questão, por exemplo, se durante a interação com o filtro de busca avançado, todas as opções resultarem em imóveis com dois quartos, mesmo que tenha vários imóveis, o campo “Quartos” ficará oculto, pois, nesse fluxo de interação, não faz sentido deixar o campo visível para o usuário.
Se durante as interações posteriores, surgirem imóveis com mais variações de quantidades de quartos, então o campo em questão, torna a ser exibido.
Tal comportamento ocorre em praticamente todos os parâmetros do filtro de busca, com exceção do campo “Status do Imóvel”, pois, por padrão esse campo não é obrigatório no painel do WorkControl.
Outra característica que modificamos nessa versão do tema, é o tamanho dos botões para que a área clicável fique dentro do determinado pelo Google para dispositivos móveis.
Por padrão, esse parâmetro é oculto, ele somente será exibido após a escolha do parâmetro cidade e se, após a escolha da cidade houver mais de um bairro a ser exibido.
O botão Limpar filtro, limpa a sessão e recarrega a página, garantindo a integridade das buscas posteriores.
O filtro avançando é exibido na página chamada “Filtro” e na página “Imóveis”, porém toda a interação com o filtro avançado ocorrerá apenas na página “Filtro”.
Logo, caso não esteja nessa página e o filtro esteja sendo exibido, após a primeira interação, o usuário será automaticamente redirecionado para a página filtro. Esse processo ocorrerá naturalmente, sem impactar na experiência do usuário.
O tema possui um sistema de comparação de imóveis, onde permite que o usuário escolha até 4 (quatro) imóveis para ser comparados.
Para selecionar os imóveis a serem comparados, basta clicar no ícone de “coração”, no canto superior direto dos imóveis, com isso, o imóvel escolhido será adicionado em tempo real a lista de imóveis para comparação.
Esse sistema de comparação também é armazenado por sessão. Sendo possível limpar essa seleção, removendo os imóveis individualmente ou na página de comparação, na opção de “Limpar Seleção” no final da página.
Caso o usuário venha a tentar selecionar mais de quatro imóveis para comparação, será apresentada uma modal de alerta com a opção de ir para a página de comparação ou de fechar e continuar com a navegação.
A página de comparação irá exibir quase todas as características do imóvel, com exceção do campo de “Descrição”, pois nesse campo pode conter descrições demasiadamente extensas, com o risco de prejudicar a experiencia do usuário.
A página single de imóveis possui alguns aspectos estratégicos para facilitar a conversão para gerar um contato entre os clientes e corretores. Os recursos são:
A seguir, iremos apresentar alguns desses recursos:
O formulário de contato permite enviar um e-mail diretamente para o corretor responsável pelo imóvel e também para o e-mail cadastrado na constante SITE_ADDR_EMAIL, assim, nenhum contato será perdido.
O corretor e o administrador do site irão receber o e-mail com os contatos fornecidos pelos usuários e o link para o imóvel em questão.
Um aspecto importante desse projeto é que todos os formulários de contato, permitem que seja enviado e-mail para múltiplos destinatários. Para isso, atribua múltiplos e-mails na constante SITE_ADDR_EMAIL, separado por ponto e vírgula (;).
Essa seção basicamente é a box de corretor no qual foi atribuída como responsável pelo imóvel, dentro do painel do WorkControl.
Assim, os usuários poderão contatar diretamente o corretor, pelos meios de contato cadastrados no painel do WorkControl.
É comum em sites como esse, que na página single de imóveis, haja uma seção com imóveis relacionados ao imóvel principal exibido na página. Aqui nesse tema também adotamos esse recurso, mas para aumentar a taxa de conversão, resolvemos melhorar a forma como o tema escolhe os imóveis a serem apresentados.
Assim, como os demais recursos do tema, esse também responde com a interação do usuário de uma maneira diferenciada, apresentando os imóveis de forma randômica.
Em um primeiro momento, se usuário acessa o site e clica em um imóvel para ver maiores detalhes do mesmo, sem interagir com qualquer dos filtros de busca do site, essa seção irá se comportar de maneira padrão, como na maioria dos sites, buscando mostrar imóveis que são similares ao imóvel principal da página, considerando os seguintes campos:
Entretanto, caso haja interação com qualquer filtro de busca do site, a seleção de imóveis a serem exibidos passa a ser dinâmica, considerando a opção do filtro informada pelo usuário. Quando mais especifica for a interação do usuário em suas buscas, mas especifico será a seleção de imóveis apresentadas nessa seção.
Por exemplo, se o usuário escolhe apenas a opção de tipo de transação igual a “comprar”, nessa seção, irá exibir todos os imóveis disponíveis com esse tipo de transação, e, não irá considerar qualquer outra opção do imóvel. Entretanto, se o usuário escolher a opção de comprar apartamento com dois quartos, dois banheiros, uma vaga na garagem, em Florianópolis e no Bairro Campeche, então, essa seção irá considerar todas as opções fornecidas pelo usuário para apresentar outros imóveis que atendam a esses requisitos especificamente.
Se não houver imóveis compatíveis com a interação com o usuário, a seção tentará exibir imóveis com o filtro padrão. Se, ainda assim, não houver resultados a serem exibidos, então a seção inteira não será exibida.
Essa seção trabalha com um carrossel que exibe todos os corretores validos do site.
Somente serão exibidos os usuários cadastrados no site com acesso superior ou igual ao declarado na constante LEVEL_WC_IMOBI e que possuam imóveis cadastrados em seu nome, independente do status de disponibilidade do imóvel.
Essa seção somente será exibida se houver mais de um corretor válido cadastrado no site.
Devido as nossas premissas de desenvolvimento, o processo de implementação do tema é muito simples e prático, nada diferente do que já estamos acostumados com o WorkControl. Para tornar ainda mais fácil, criamos um passo a passo detalhado e um vídeo mostrando a implementação na prática, basta seguir a risca cada etapa do procedimento.
Para ter certeza de que tudo ocorrerá bem no processo de implementação do tema, preparamos esse vídeo tutorial para lhe orientar nesse processo:
Para o processo de instalação do tema MaxImóbi 2, estamos considerando a instalação padrão do WorkControl sem que haja qualquer tipo de configuração após a instalação em seu servidor local. Como esse é um produto voltado apenas para programadores licenciados do WorkControl, não mostraremos aqui como instalar o CMS, passando diretamente para o passo a passo de implementação do tema.
Logo depois que concluir a instalação padrão, é imprescindível que faça o primeiro acesso ao Painel Admin do WorkControl, antes de passar para o passo 2.
No pacote de arquivos do seu tema na área de membros em nossa WebStore, existe uma pasta chamada “MaxImobi_v2_pack”, nela contém o tema e todos os widgets que foram criados ou customizados para esse projeto. Basta copiar a pasta “_cdn” e “themes”, na pasta raiz do seu projeto.
No arquivo _app/Config/Config.inc.php
Informe o nome do tema na constante THEME com o valor maximobi2:
define('THEME', 'maximobi2'); //template do site
Mude a constante ADMIN_MODE para 3:
define('ADMIN_MODE', 3); //1 = website / 2 = e-commerce / 3 = Imobi / 4 = EAD
Desative as seguintes constantes (valor = 0): APP_EAD, APP_PRODUCTS, APP_ORDERS:
define('APP_EAD', 0); //Plataforma EAD
define('APP_PRODUCTS', 0); //Produtos
define('APP_ORDERS', 0); //Pedidos
Mude a constante IMAGE_W para 1280 e a constante IMAGE_H para 628. (OPCIONAL)
define('IMAGE_W', 1280); //Tamanho da imagem (WIDTH)
define('IMAGE_H', 628); //Tamanho da imagem (HEIGHT)
Nativamente, o WorkControl carrega alguns bots de CSS e JavaScript, além da biblioteca de ícones que não iremos utilizar em nosso tema e que poderão afetar negativamente alguns recursos do nosso projeto. Então precisaremos desabilita-los.
No arquivo index.php principal da instalação do WorkControl (na raiz), faça as modificações a seguir:
Comente ou exclua as linhas abaixo:
Algumas páginas são necessárias para o funcionamento adequado do tema, são elas:
Você pode criar as páginas manualmente, apenas garanta a correta atribuição de nomes para as mesmas, ou então, você pode utilizar o nosso pack de inicialização do tema.
Para isso acesse a pasta “MaxImobi_v2_start” e faça a importação do arquivo “maximobi_v2_start.sql” para a sua base de dados.
Após concluir a importação do arquivo sql, copie e cole o conteúdo da pasta de “uploads” para a pasta do seu projeto.
O seu projeto, já está pronto e funcional!
Sabemos que você irá precisar de um projeto pronto e populado para ser apresentado para o seu prospect ou cliente. Então criamos uma base de dados de exemplo, com usuários, slides, imóveis e posts que você poderá utilizar para popular o seu projeto e assim poder apresentar rapidamente todos os recursos que preparamos para você.
Então para utilizar nossa base de dados, caso ainda não tenha feito, acesse sua área de membros em nossa WebStore e baixe a “MaxImobi Demo.” e siga os passos abaixo:
Se você seguiu corretamente todo o passo a passo até aqui, seu projeto está pronto para ser testado e apresentado para seus prospects e clientes.
Com o objetivo de aproveitar os recursos de auto inclusão de arquivos já existente do WorkControl, utilizamos as pastas padronizadas wc_js e wc_css, para a inclusão de todos os arquivos de estilo e de javascript do tema.
Como alguns desses arquivos possuem dependências de ordem de carregamento, numeramos esses arquivos para que carreguem na ordem correta.
Como é possível observar, temos uma nova pasta chamada "scss" que contém os arquivos SASS utilizados para a personalização desse tema.
Devido a estrutura adotada aqui para a utilização do recurso de SASS, também adicionamos na pasta "_cdn" os arquivos do Bootstrap 4.5. Porém não será necessário realizar qualquer intervensão nos arquivos do Bootstrap.
A paleta de cores utilizada no tema é a paleta do Bootstrap 4.5. Fizemos dessa forma para facilitar a customização de acordo com a sua necessidade.
Consulte a paleta de cores do Bootstrap 4.5 aqui
Esse tema foi criado aproveitando as vantagens de se trabalhar com o framework Bootstrap 4.5, utilizando o SASS para processamento do CSS, logo, para mudar o padrão de cores do tema é altamente recomendável que você utilize esse recurso, mantendo assim, a alta performance do seu tema.
Para mudar o padrão de cores, recomendamos que utilize o processador SASS Scout-App, que é um aplicativo muito simples, intuitivo e autoexecutável. Acesse o site do Scout-App para baixar e utilizar em seu projeto.
Após iniciado o seu processador SASS, acesse o arquivo themes\maximobi2\scss\_setup.scss e mude os padrões de cores conforme a sua preferência.
$primary: #007BFF; $secondary: #6C757D; $success: #28A745; $danger: #DC3545; $warning: #FFC107; $info: #17A2B8; $light: #F8F9FA; $dark: #343A40; $white: #fff; $body: #494f54; $muted: #6c757d;
Caso não esteja familiarizado com o processo de utilização do SASS, criamos esse vídeo mostrando o passo a passo para personalizar as cores do seu tema rapidamente.
Versão: 2.03 (03/09/2024)
Versão: 2.02 (29/01/2022)
Versão: 2.01 (20/07/2021)
Versão: 2.00 (04/10/2020)
A primeira versão do tema foi descontinuada e não receberá novas atualizações.
Como pode ver, existem muitas novidades nesse tema. Todas elas foram exaustivamente testadas, afim de garantir a qualidade funcional, sempre tendo como foco as premissas básicas de desenvolvimento, mencionadas no início desse documento.
Mas, como todo ser dotado de inteligência, somos suscetíveis a cometer erros. Caso encontre algum erro funcional ou até mesmo alguma característica estética que não estava contemplada pela proposta desse tema, entre em contato conosco para que possamos fazer as correções o mais rápido possível.
Nosso e-mail de suporte é suporte@evertecdigital.com.br
"Os pequenos atos que se executam são melhores que todos aqueles grandes que se planejam."