Acessar ‹ Crie um **template completo de Bio Site / Landing Page estilo Linktree Premium**, desenvolvido para ser utilizado no **Elementor Pro**. O template será utilizado como modelo padrão para diversos profissionais e empresas, portanto deve possuir uma estrutura **modular, reutilizável, responsiva e facilmente personalizável**. A página deve ter aparência de um **mini site profissional**, e não de uma simples página de links. O principal objetivo é gerar contatos, acessos às redes sociais, localização, visualização dos serviços e agendamentos. — # ESTRUTURA GERAL Criar a página utilizando **Elementor Container / Flexbox Container**, evitando estruturas antigas baseadas em Sections/Columns. Utilizar uma largura máxima de aproximadamente **1140–1200px** para o conteúdo principal no desktop. No celular, o conteúdo deve ocupar aproximadamente **90–92% da largura da tela**, mantendo margens laterais confortáveis. A página deve ser **Mobile First**, pois a maior parte dos acessos será realizada através de smartphones. Criar quatro grandes blocos/seções: 1. APRESENTAÇÃO 2. PERFIL E LINKS 3. SERVIÇOS / GALERIA 4. AGENDAMENTO E um pequeno rodapé. Cada seção deve possuir uma identidade visual própria, mas todas devem manter harmonia entre si. — # 1. PRIMEIRA DOBRA — HERO / APRESENTAÇÃO Criar uma primeira dobra de aproximadamente **90–100vh no desktop** e aproximadamente **80–90vh no celular**. ### Background Utilizar uma imagem de fundo relacionada à área de atuação do profissional. O background deve ser facilmente substituível. Exemplos: * Médico → ambiente de saúde; * Dentista → consultório; * Advogado → escritório; * Fotógrafo → equipamento fotográfico; * Salão de beleza → salão; * Restaurante → gastronomia; * Imobiliária → imóveis; * Personal trainer → academia; * Psicólogo → ambiente profissional; * Arquitetura → projeto arquitetônico. Aplicar um **overlay/gradiente escuro ou translúcido** sobre a imagem para garantir contraste e legibilidade. ### Container principal Centralizar verticalmente e horizontalmente. Utilizar aproximadamente: Desktop: * Max-width: 800px * Padding vertical: 60px * Padding horizontal: 30px Tablet: * Padding: 40px 25px Mobile: * Padding: 30px 20px ### Foto Adicionar uma foto circular ou levemente arredondada do profissional. Tamanho aproximado: Desktop: 160–180px Tablet: 140–160px Mobile: 120–140px Utilizar: * Border-radius: 50%; * Borda branca ou compatível com a identidade; * Sombra suave; * Object-fit: cover. ### Nome Adicionar: **NOME DO PROFISSIONAL** Tipografia moderna, elegante e forte. Desktop: 32–42px Tablet: 28–34px Mobile: 26–32px Peso: 600–700. ### Profissão Adicionar abaixo: **PROFISSÃO / ESPECIALIDADE** Desktop: 18–20px Mobile: 16–18px ### Descrição Adicionar uma pequena frase de apresentação. Exemplo: "Especialista em transformar ideias em resultados." Máximo de 2–3 linhas no celular. — # 2. SEGUNDA DOBRA — PERFIL E REDES SOCIAIS Criar uma nova seção com background contrastante em relação à primeira. O background deve ser preferencialmente uma cor sólida ou um gradiente discreto. ### Container Max-width: 900px Alinhamento: Centralizado. Padding: Desktop: 70px 30px Mobile: 50px 20px ### Nome Exibir: **NOME DO PROFISSIONAL** Abaixo: **@instagram** O @instagram deve ser um link clicável. ### Links principais Criar três grandes elementos clicáveis: 1. WhatsApp 2. Instagram 3. Localização Utilizar ícones profissionais. Cada elemento deve funcionar visualmente como um botão, mesmo que seja construído utilizando Containers + Icon + Text. ### WhatsApp Texto: **Fale comigo no WhatsApp** Ícone: WhatsApp Este deve ser o CTA principal. ### Instagram Texto: **Siga no Instagram** Ícone: Instagram ### Localização Texto: **Como chegar** Ícone: Location / Map Pin ### Estilo Os elementos devem ter: * Largura: 100%; * Max-width: 600px; * Altura aproximada: 55–65px; * Border-radius: 12–16px; * Espaçamento entre eles: 12–16px; * Ícone de aproximadamente 22–26px; * Texto de 15–17px; * Sombra muito suave; * Transição de aproximadamente 0.3s; * Efeito hover. No celular, manter os elementos grandes o suficiente para facilitar o toque. — # 3. TERCEIRA DOBRA — SERVIÇOS E GALERIA Criar uma seção com background contrastante em relação à segunda seção. ### Título **Serviços** Subtítulo opcional: "Conheça alguns dos serviços que ofereço." ### Galeria Criar uma galeria moderna utilizando Grid. Desktop: 3 colunas. Tablet: 2 colunas. Mobile: 2 colunas ou 1 coluna dependendo do tamanho das imagens. Cada item deve conter: * Imagem; * Nome do serviço; * Pequena descrição opcional. Exemplos: **Consultoria** **Atendimento Personalizado** **Projeto Personalizado** **Serviço Especializado** ### Imagens Utilizar imagens quadradas ou aproximadamente 4:3. Border-radius: 12–16px. Adicionar efeito hover discreto. No mobile, as imagens devem manter boa proporção e carregamento rápido. Se possível, utilizar Lazy Load. ### Container Max-width: 1100–1200px. Padding: Desktop: 70px 30px Mobile: 50px 20px — # 4. QUARTA DOBRA — AGENDAMENTO Criar uma seção com background contrastante em relação à terceira. Utilizar uma composição visual limpa e focada em conversão. ### Título **Agende seu horário** ### Texto "Escolha o melhor horário para o seu atendimento." ### CTA Criar um botão grande: **AGENDAR UM HORÁRIO** O botão deve ser o principal elemento visual da seção. Estilo: * Altura: 55–65px; * Padding horizontal: 30–40px; * Border-radius: 12–16px; * Tipografia: 16–18px; * Peso: 600–700; * Ícone opcional de calendário; * Efeito hover; * Animação suave. O link do botão deve ficar preparado para receber posteriormente: * Link do sistema de agendamento; * WhatsApp; * Amelia; * Outro sistema de reservas. — # RODAPÉ Criar um rodapé extremamente simples. Texto: **Desenvolvido por: SisJJ.com** O texto "SisJJ.com" deve ser clicável. Adicionar espaço opcional para o logotipo da SisJJ. Tipografia pequena e discreta. O rodapé não deve competir visualmente com o conteúdo principal. — # SISTEMA DE CORES Não criar cores fixas excessivamente específicas. Utilizar variáveis visuais fáceis de alterar. Criar uma paleta inicial composta por: * Cor principal; * Cor secundária; * Cor de destaque; * Cor de fundo; * Cor de texto; * Cor de texto secundário. A primeira dobra pode utilizar imagem + overlay. As demais seções devem utilizar cores sólidas, gradientes ou imagens muito discretas. O template precisa permitir adaptar facilmente as cores para cada profissão. — # TIPOGRAFIA Utilizar uma fonte moderna e profissional. Sugestões: Inter, Poppins, Manrope, Montserrat. Utilizar no máximo duas famílias tipográficas. Criar hierarquia clara: H1: 32–42px H2: 28–34px H3: 20–24px Texto: 15–17px Botões: 15–17px Mobile: H1: 26–32px H2: 24–28px H3: 18–21px Texto: 14–16px — # ÍCONES Utilizar ícones simples e modernos. Tamanho: 22–26px para os links principais. Evitar excesso de ícones. Os ícones devem ter alinhamento vertical perfeito com os textos. Priorizar: WhatsApp Instagram Localização Calendário Setas — # RESPONSIVIDADE O template deve ser cuidadosamente configurado para: Desktop: 1920px 1440px 1366px Tablet: 1024px 768px Mobile: 480px 430px 390px 375px No mobile: * Reduzir tamanhos de títulos; * Reduzir espaçamentos; * Manter botões grandes; * Evitar elementos muito próximos das bordas; * Centralizar informações; * Garantir excelente legibilidade; * Evitar scroll horizontal; * Manter imagens proporcionais. — # ESTRUTURA PARA ELEMENTOR PRO Organizar o template de forma modular. Estrutura sugerida: PAGE │ ├── HERO │ └── Container Principal │ ├── Foto │ ├── Nome │ ├── Profissão │ └── Descrição │ ├── PERFIL / LINKS │ └── Container Principal │ ├── Nome │ ├── Instagram │ └── Links │ ├── WhatsApp │ ├── Instagram │ └── Localização │ ├── SERVIÇOS │ └── Container Principal │ ├── Título │ ├── Subtítulo │ └── Galeria │ ├── Serviço 1 │ ├── Serviço 2 │ ├── Serviço 3 │ └── Serviço 4 │ ├── AGENDAMENTO │ └── Container Principal │ ├── Título │ ├── Texto │ └── CTA │ └── FOOTER └── SisJJ.com — # EXPERIÊNCIA DO USUÁRIO A página deve ter navegação vertical simples e intuitiva. Não utilizar menus complexos. O visitante deve conseguir compreender quem é o profissional em poucos segundos. Priorizar nesta ordem: 1. Identidade do profissional; 2. Contato; 3. Redes sociais; 4. Serviços; 5. Agendamento. Criar uma experiência semelhante a um **Linktree Premium**, porém com aparência muito mais profissional e personalizada. — # CONVERSÃO Dar destaque principalmente para: **WhatsApp** e **Agendar um horário** Esses dois elementos devem possuir maior destaque visual. Os links devem ser facilmente substituídos posteriormente no Elementor. Preparar o template para receber links personalizados de: * WhatsApp; * Instagram; * Google Maps; * Sistema de agendamento; * Outros canais sociais. — # SEO E ACESSIBILIDADE Utilizar corretamente: * H1 para o nome/profissional; * H2 para as principais seções; * Alt text nas imagens; * Links descritivos; * Contraste adequado; * Botões e links facilmente identificáveis; * Boa experiência em dispositivos móveis. Evitar excesso de animações que possam prejudicar velocidade ou acessibilidade. — # VELOCIDADE O template deve ser leve. Evitar: * Vídeos pesados; * Animações excessivas; * Elementos desnecessários; * Scripts desnecessários. Priorizar imagens otimizadas e carregamento rápido. — # RESULTADO ESPERADO O resultado final deve parecer um **Bio Site profissional premium**, moderno, elegante, rápido e totalmente responsivo. Deve ser possível duplicar esse template para vários profissionais e alterar rapidamente: * Foto; * Nome; * Profissão; * Instagram; * WhatsApp; * Localização; * Serviços; * Imagens; * Cores; * Link de agendamento. Utilizar conteúdo fictício para demonstrar o resultado. O template deve ser totalmente editável posteriormente utilizando o **Elementor Pro**. — WordPress
Acessar
Perdeu a senha?
← Ir para Crie um **template completo de Bio Site / Landing Page estilo Linktree Premium**, desenvolvido para ser utilizado no **Elementor Pro**. O template será utilizado como modelo padrão para diversos profissionais e empresas, portanto deve possuir uma estrutura **modular, reutilizável, responsiva e facilmente personalizável**. A página deve ter aparência de um **mini site profissional**, e não de uma simples página de links. O principal objetivo é gerar contatos, acessos às redes sociais, localização, visualização dos serviços e agendamentos. — # ESTRUTURA GERAL Criar a página utilizando **Elementor Container / Flexbox Container**, evitando estruturas antigas baseadas em Sections/Columns. Utilizar uma largura máxima de aproximadamente **1140–1200px** para o conteúdo principal no desktop. No celular, o conteúdo deve ocupar aproximadamente **90–92% da largura da tela**, mantendo margens laterais confortáveis. A página deve ser **Mobile First**, pois a maior parte dos acessos será realizada através de smartphones. Criar quatro grandes blocos/seções: 1. APRESENTAÇÃO 2. PERFIL E LINKS 3. SERVIÇOS / GALERIA 4. AGENDAMENTO E um pequeno rodapé. Cada seção deve possuir uma identidade visual própria, mas todas devem manter harmonia entre si. — # 1. PRIMEIRA DOBRA — HERO / APRESENTAÇÃO Criar uma primeira dobra de aproximadamente **90–100vh no desktop** e aproximadamente **80–90vh no celular**. ### Background Utilizar uma imagem de fundo relacionada à área de atuação do profissional. O background deve ser facilmente substituível. Exemplos: * Médico → ambiente de saúde; * Dentista → consultório; * Advogado → escritório; * Fotógrafo → equipamento fotográfico; * Salão de beleza → salão; * Restaurante → gastronomia; * Imobiliária → imóveis; * Personal trainer → academia; * Psicólogo → ambiente profissional; * Arquitetura → projeto arquitetônico. Aplicar um **overlay/gradiente escuro ou translúcido** sobre a imagem para garantir contraste e legibilidade. ### Container principal Centralizar verticalmente e horizontalmente. Utilizar aproximadamente: Desktop: * Max-width: 800px * Padding vertical: 60px * Padding horizontal: 30px Tablet: * Padding: 40px 25px Mobile: * Padding: 30px 20px ### Foto Adicionar uma foto circular ou levemente arredondada do profissional. Tamanho aproximado: Desktop: 160–180px Tablet: 140–160px Mobile: 120–140px Utilizar: * Border-radius: 50%; * Borda branca ou compatível com a identidade; * Sombra suave; * Object-fit: cover. ### Nome Adicionar: **NOME DO PROFISSIONAL** Tipografia moderna, elegante e forte. Desktop: 32–42px Tablet: 28–34px Mobile: 26–32px Peso: 600–700. ### Profissão Adicionar abaixo: **PROFISSÃO / ESPECIALIDADE** Desktop: 18–20px Mobile: 16–18px ### Descrição Adicionar uma pequena frase de apresentação. Exemplo: "Especialista em transformar ideias em resultados." Máximo de 2–3 linhas no celular. — # 2. SEGUNDA DOBRA — PERFIL E REDES SOCIAIS Criar uma nova seção com background contrastante em relação à primeira. O background deve ser preferencialmente uma cor sólida ou um gradiente discreto. ### Container Max-width: 900px Alinhamento: Centralizado. Padding: Desktop: 70px 30px Mobile: 50px 20px ### Nome Exibir: **NOME DO PROFISSIONAL** Abaixo: **@instagram** O @instagram deve ser um link clicável. ### Links principais Criar três grandes elementos clicáveis: 1. WhatsApp 2. Instagram 3. Localização Utilizar ícones profissionais. Cada elemento deve funcionar visualmente como um botão, mesmo que seja construído utilizando Containers + Icon + Text. ### WhatsApp Texto: **Fale comigo no WhatsApp** Ícone: WhatsApp Este deve ser o CTA principal. ### Instagram Texto: **Siga no Instagram** Ícone: Instagram ### Localização Texto: **Como chegar** Ícone: Location / Map Pin ### Estilo Os elementos devem ter: * Largura: 100%; * Max-width: 600px; * Altura aproximada: 55–65px; * Border-radius: 12–16px; * Espaçamento entre eles: 12–16px; * Ícone de aproximadamente 22–26px; * Texto de 15–17px; * Sombra muito suave; * Transição de aproximadamente 0.3s; * Efeito hover. No celular, manter os elementos grandes o suficiente para facilitar o toque. — # 3. TERCEIRA DOBRA — SERVIÇOS E GALERIA Criar uma seção com background contrastante em relação à segunda seção. ### Título **Serviços** Subtítulo opcional: "Conheça alguns dos serviços que ofereço." ### Galeria Criar uma galeria moderna utilizando Grid. Desktop: 3 colunas. Tablet: 2 colunas. Mobile: 2 colunas ou 1 coluna dependendo do tamanho das imagens. Cada item deve conter: * Imagem; * Nome do serviço; * Pequena descrição opcional. Exemplos: **Consultoria** **Atendimento Personalizado** **Projeto Personalizado** **Serviço Especializado** ### Imagens Utilizar imagens quadradas ou aproximadamente 4:3. Border-radius: 12–16px. Adicionar efeito hover discreto. No mobile, as imagens devem manter boa proporção e carregamento rápido. Se possível, utilizar Lazy Load. ### Container Max-width: 1100–1200px. Padding: Desktop: 70px 30px Mobile: 50px 20px — # 4. QUARTA DOBRA — AGENDAMENTO Criar uma seção com background contrastante em relação à terceira. Utilizar uma composição visual limpa e focada em conversão. ### Título **Agende seu horário** ### Texto "Escolha o melhor horário para o seu atendimento." ### CTA Criar um botão grande: **AGENDAR UM HORÁRIO** O botão deve ser o principal elemento visual da seção. Estilo: * Altura: 55–65px; * Padding horizontal: 30–40px; * Border-radius: 12–16px; * Tipografia: 16–18px; * Peso: 600–700; * Ícone opcional de calendário; * Efeito hover; * Animação suave. O link do botão deve ficar preparado para receber posteriormente: * Link do sistema de agendamento; * WhatsApp; * Amelia; * Outro sistema de reservas. — # RODAPÉ Criar um rodapé extremamente simples. Texto: **Desenvolvido por: SisJJ.com** O texto "SisJJ.com" deve ser clicável. Adicionar espaço opcional para o logotipo da SisJJ. Tipografia pequena e discreta. O rodapé não deve competir visualmente com o conteúdo principal. — # SISTEMA DE CORES Não criar cores fixas excessivamente específicas. Utilizar variáveis visuais fáceis de alterar. Criar uma paleta inicial composta por: * Cor principal; * Cor secundária; * Cor de destaque; * Cor de fundo; * Cor de texto; * Cor de texto secundário. A primeira dobra pode utilizar imagem + overlay. As demais seções devem utilizar cores sólidas, gradientes ou imagens muito discretas. O template precisa permitir adaptar facilmente as cores para cada profissão. — # TIPOGRAFIA Utilizar uma fonte moderna e profissional. Sugestões: Inter, Poppins, Manrope, Montserrat. Utilizar no máximo duas famílias tipográficas. Criar hierarquia clara: H1: 32–42px H2: 28–34px H3: 20–24px Texto: 15–17px Botões: 15–17px Mobile: H1: 26–32px H2: 24–28px H3: 18–21px Texto: 14–16px — # ÍCONES Utilizar ícones simples e modernos. Tamanho: 22–26px para os links principais. Evitar excesso de ícones. Os ícones devem ter alinhamento vertical perfeito com os textos. Priorizar: WhatsApp Instagram Localização Calendário Setas — # RESPONSIVIDADE O template deve ser cuidadosamente configurado para: Desktop: 1920px 1440px 1366px Tablet: 1024px 768px Mobile: 480px 430px 390px 375px No mobile: * Reduzir tamanhos de títulos; * Reduzir espaçamentos; * Manter botões grandes; * Evitar elementos muito próximos das bordas; * Centralizar informações; * Garantir excelente legibilidade; * Evitar scroll horizontal; * Manter imagens proporcionais. — # ESTRUTURA PARA ELEMENTOR PRO Organizar o template de forma modular. Estrutura sugerida: PAGE │ ├── HERO │ └── Container Principal │ ├── Foto │ ├── Nome │ ├── Profissão │ └── Descrição │ ├── PERFIL / LINKS │ └── Container Principal │ ├── Nome │ ├── Instagram │ └── Links │ ├── WhatsApp │ ├── Instagram │ └── Localização │ ├── SERVIÇOS │ └── Container Principal │ ├── Título │ ├── Subtítulo │ └── Galeria │ ├── Serviço 1 │ ├── Serviço 2 │ ├── Serviço 3 │ └── Serviço 4 │ ├── AGENDAMENTO │ └── Container Principal │ ├── Título │ ├── Texto │ └── CTA │ └── FOOTER └── SisJJ.com — # EXPERIÊNCIA DO USUÁRIO A página deve ter navegação vertical simples e intuitiva. Não utilizar menus complexos. O visitante deve conseguir compreender quem é o profissional em poucos segundos. Priorizar nesta ordem: 1. Identidade do profissional; 2. Contato; 3. Redes sociais; 4. Serviços; 5. Agendamento. Criar uma experiência semelhante a um **Linktree Premium**, porém com aparência muito mais profissional e personalizada. — # CONVERSÃO Dar destaque principalmente para: **WhatsApp** e **Agendar um horário** Esses dois elementos devem possuir maior destaque visual. Os links devem ser facilmente substituídos posteriormente no Elementor. Preparar o template para receber links personalizados de: * WhatsApp; * Instagram; * Google Maps; * Sistema de agendamento; * Outros canais sociais. — # SEO E ACESSIBILIDADE Utilizar corretamente: * H1 para o nome/profissional; * H2 para as principais seções; * Alt text nas imagens; * Links descritivos; * Contraste adequado; * Botões e links facilmente identificáveis; * Boa experiência em dispositivos móveis. Evitar excesso de animações que possam prejudicar velocidade ou acessibilidade. — # VELOCIDADE O template deve ser leve. Evitar: * Vídeos pesados; * Animações excessivas; * Elementos desnecessários; * Scripts desnecessários. Priorizar imagens otimizadas e carregamento rápido. — # RESULTADO ESPERADO O resultado final deve parecer um **Bio Site profissional premium**, moderno, elegante, rápido e totalmente responsivo. Deve ser possível duplicar esse template para vários profissionais e alterar rapidamente: * Foto; * Nome; * Profissão; * Instagram; * WhatsApp; * Localização; * Serviços; * Imagens; * Cores; * Link de agendamento. Utilizar conteúdo fictício para demonstrar o resultado. O template deve ser totalmente editável posteriormente utilizando o **Elementor Pro**.