O site integrado possuí diversas possibilidades de parametrizações que podem ser configuradas de acordo com a necessidade do cliente. Neste artigo serão apresentados os componentes que compõem cada uma das página do site a fim de detalhar o nível de customização.
Classes
Card do simulador de crédito página de pesquisa de imóveis
.flip-card-credpago-pesquisa // flipcard simulador credpago pagina de pesquisa
Possibita definir tamanho do card
Possibita definir o tamanho da fonte
Possibita definir largura do card
Possibita definir arredondamento dar bordas
Possibita definir sobreamento do card
.flip-card-credpago-pesquisa .frente // parte da frente onde esta o formulário
Possibita definir a cor de preenchimento do card
.flip-card-credpago-pesquisa .frente .formCredito // div formulario
Possibita definir o a largura dos campos do formulário
.flip-card-credpago-pesquisa .frente .formCredito .logo-credpago // logo da credpago
Possibita definir o tamanho da imagem
.flip-card-credpago-pesquisa .frente .formCredito .subtitulo // subtitulo formulario
Possibita definir o tamanho da fonte
Possibita definir a cor do texto
.flip-card-credpago-pesquisa .verso // onde mostra o resultado da simulacao
.flip-card-credpago-pesquisa .verso .resultadoAprovado // simulação aprovada
Possibilita definir a cor de background
Possibilita definir a cor do texto
Possibilita definir o alinhamento dos textos
.flip-card-credpago-pesquisa .verso .resultadoReprovado // simulação reprovada
Possibilita definir a cor de background
Possibilita definir a cor do texto
Possibilita definir o alinhamento dos textos
.flip-card-credpago-pesquisa .verso .resposta // resposta da simulação
Possibilita alterar a cor e o tamanho da fonte
Banner do simulador de crédito página de pesquisa de imóveis
.banner-simulador-credpago // classe principal
.banner-simulador-credpago .coluna-textos // coluna da esquerda com os textos
.banner-simulador-credpago .coluna-textos .texto-principal // texto destaque
.banner-simulador-credpago .coluna-textos .texto-secundario // textos menores
.banner-simulador-credpago .coluna-simulador // coluna da direita com simulador
.banner-simulador-credpago .coluna-simulador .flip-simulador-credpago // card flip com simulador
.banner-simulador-credpago .coluna-simulador .frente // parte da frente do card com formulário
.banner-simulador-credpago .coluna-simulador .frente .form-simulador-credpago // formulario
.banner-simulador-credpago .coluna-simulador .frente .form-simulador-credpago .titulo // titulo acima do formulario
.banner-simulador-credpago .coluna-simulador .frente .form-simulador-credpago .p-button-card-action // botao de simular credito
.banner-simulador-credpago .coluna-simulador .verso // parte de trás com resultado simulação
.banner-simulador-credpago .coluna-simulador .verso .resultadoAprovado // caso simulação seja aprovada
.banner-simulador-credpago .coluna-simulador .verso .resultadoAprovado .imagem-resposta //
.banner-simulador-credpago .coluna-simulador .verso .resultadoAprovado .imagem-resposta .titulo // texto acima da imagem
.banner-simulador-credpago .coluna-simulador .verso .resultadoAprovado .resposta // texto de resposta aprovada
.banner-simulador-credpago .coluna-simulador .verso .resultadoAprovado .p-button-card-action // botao de ver imoveis
.banner-simulador-credpago .coluna-simulador .verso .resultadoReprovado // caso simulacao seja reprovada
.banner-simulador-credpago .coluna-simulador .verso .resultadoReprovado .imagem-resposta //
.banner-simulador-credpago .coluna-simulador .verso .resultadoReprovado .imagem-resposta .titulo // texto acima da imagem
.banner-simulador-credpago .coluna-simulador .verso .resultadoReprovado .resposta // texto de resposta reprovado
Ícone do WhatsApp
.whatsapp-button-action // botão que serve de container para imagem
.whatsapp-button-action img.whatsapp-button-image // imagem do botão
Detalhe do imóvel (mobile)
.exibir-imovel-site // container do componente
.exibir-imovel-site .modal-agendar-simular // modal com simulador ou agendar visita
.exibir-imovel-site .modal-simulador-credpago // modal mobile com formulario credpago
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito // lado formulario
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .titulo//
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .subtitulo//
.exibir-imovel-site .modal-simulador-credpago .form-simular-credito .form-simular-credito-inputs//inputs
.exibir-imovel-site .modal-simulador-credpago .p-button-card-action
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado // lado resposta aprovado
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .imagem-resposta // div com imagem e titulo
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .imagem-resposta .titulo//
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .imagem-resposta img //
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-aprovado .resposta//
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado // lado resposta reprovado
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .imagem-resposta //
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .imagem-resposta .titulo//
.exibir-imovel-site .modal-simulador-credpago .modal-simulador-reprovado .resposta//
.exibir-imovel-site .modal-agendar-visita // modal mobile com formulario agendar visita
.box-valores-mobile // caixa de custos referentes ao imóvel no mobile
.box-valores-mobile lightning-formatted-number// valores
.box-valores-mobile span // descrição do valor
Detalhe do imóvel - Flipcard do imóvel (desktop)
.flip-card-acoes-imovel // flipcard de simulação e agendamento de visita
.flip-card-acoes-imovel .frente // representa parte da frente do card onde é apresentado os valores e acoes de compartilhamento, favoritar etc
.flip-card-acoes-imovel .frente .custos-imovel // representa a parte dos custos do imovel
.flip-card-acoes-imovel .frente .custos-imovel .preco-total-imovel // texto preço total da locação
.flip-card-acoes-imovel .frente .custos-imovel .preco-total-imovel .valor-total-formatado // valor formatado
.flip-card-acoes-imovel .frente .botoes-acao // representa tanto botao de visita quanto simular credito caso haja
.flip-card-acoes-imovel .frente .favoritar-compartilhar // representa os botões de compartilhar e favoritar
.flip-card-acoes-imovel .verso // representa parte de trás do card tanto formulario de visita quanto simulacao de credito
.flip-card-acoes-imovel .titulo // titulo dos dois formularios
Detalhe do imóvel - Simulador de crédito (desktop)
.flip-card-credpago-imovel // flipcard simulador credpago pagina de imovel
.flip-card-credpago-imovel .frente // parte da frente do card onde estao os inputs e onde é mostrado o resultado da simulação
.flip-card-credpago-imovel .frente .formCredito // formulario
.flip-card-credpago-imovel .frente .resultadoAprovado // verso resultado aprovado
.flip-card-credpago-imovel .frente .resultadoReprovado // verso resultado reprovado
.flip-card-credpago-imovel .frente .titulo // titulo sobre formulario e resultado
.flip-card-credpago-imovel .frente .resposta // resposta da simulação
Página de login
loginCliente (aura)
.app-login // pagina de login
.app-login .login-cadastro // pagina de login com formularios de login e cadastro
.app-login .login-cadastro .box-form-login //formulario de login
.app-login .login-cadastro .box-form-login .titulo // titulo formulario de login
.app-login .login-cadastro .box-form-cadastro //formulario de cadastro
.app-login .login-cadastro .box-form-cadastro .titulo // titulo formulario de cadastro
.app-login .verificacao-cadastro // pagina de login com box de vericação do email
.app-login .verificacao-cadastro .box-verificacao-cadastro // box de verificacao
.app-login .verificacao-cadastro .box-verificacao-cadastro .titulo // titulo box de verificacao
Landing page de agendamento da visita
identificarUsuarioAnonimo
.form-agendar-visita
Geral
.p-button-card-action // botão primario de ação do card ex: botao agendar visita
.p-button-action // botão primario de ação ex: botao banner de cookies