🔹Landing Page - Como importar seu site na Sprinthub

Criar uma landing page eficiente é essencial para captar leads e aumentar as conversões no seu negócio. Na Sprinthub, oferecemos uma solução prática para importar sua landing page personalizada direta

Passo a Passo para Importar Sua Landing Page na Sprinthub

Para importar sua landing page na Sprinthub, siga os passos abaixo:

1. Acesse o Construtor de Landing Pages

Primeiramente, faça login na sua conta da Sprinthub e navegue até a seção de criação de landing pages. Clique em "Criar Nova Página" para iniciar o processo.

Você será direcionado a uma página de configuração inicial, onde precisa adicionar o titulo e o Alias da página:

2. Utilize o Componente de Código Personalizado

Dentro do construtor de landing pages, você encontrará diversos componentes que podem ser arrastados e soltos para construir sua página. Procure pelo componente "HTML" ou similar, que permite a inserção de códigos HTML e CSS.

Após adicionar o componente, clique em cima dele e clique em editor avançado:

3. Adicione o Código HTML e CSS

Copie o código HTML e CSS da sua landing page que você deseja importar. No componente de "Código Personalizado", cole esse código. Certifique-se de que todo o código CSS necessário esteja embutido no HTML, pois não é permitido usar links externos para folhas de estilo.

Exemplo de Código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Landing Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        #main-header {
            background-color: #333;
            color: #fff;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #77aaff 3px solid;
        }
        #main-header h1 {
            text-align: center;
            text-transform: uppercase;
            margin: 0;
            font-size: 24px;
        }
        #cta {
            margin: 30px;
            text-align: center;
        }
        #cta button {
            background-color: #333;
            color: #fff;
            border: none;
            padding: 15px 20px;
            cursor: pointer;
            font-size: 18px;
        }
        #cta button:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <header id="main-header">
        <div class="container">
            <h1>Bem-vindo à Minha Landing Page</h1>
        </div>
    </header>
    <section id="cta">
        <div class="container">
            <h2>Chamada para Ação</h2>
            <button>Clique Aqui</button>
        </div>
    </section>
</body>
</html>

Após adicionar, visualize as mudanças na sua página:

4. Visualize e Ajuste

Após adicionar o código, visualize sua landing page para garantir que tudo está funcionando como esperado. Faça os ajustes necessários diretamente no código dentro do componente de "Código Personalizado".

5. Salve e Publique

Depois de confirmar que sua landing page está corretamente configurada e visualmente atrativa, salve suas alterações. Por fim, publique a página para torná-la acessível aos seus leads e visitantes.

Conclusão

Importar sua landing page na Sprinthub é um processo simples que oferece grande flexibilidade e personalização. Utilizando o componente de "Código Personalizado", você pode integrar seu HTML e CSS diretamente no construtor de landing pages, mantendo o controle total sobre o design e funcionalidades da sua página. Siga os passos mencionados e aproveite ao máximo os recursos da Sprinthub para criar landing pages eficazes e atraentes.

Se tiver qualquer dúvida ou precisar de assistência, nossa equipe de suporte está sempre à disposição para ajudar. Boas conversões!

Esperamos que este guia tenha sido útil para entender como importar sua landing page na Sprinthub. Para mais dicas e tutoriais, continue acompanhando nosso blog e fique atento às novidades!

PreviousLanding Page - Como Injetar Parâmetros de uma URL de LP em um iFrame da Mesma LP NextLanding Page - exportando e importando sites internos dentro da Sprinthub

Last updated 5 months ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minha Landing Page</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .container { width: 80%; margin: auto; overflow: hidden; } #main-header { background-color: #333; color: #fff; padding-top: 30px; min-height: 70px; border-bottom: #77aaff 3px solid; } #main-header h1 { text-align: center; text-transform: uppercase; margin: 0; font-size: 24px; } #cta { margin: 30px; text-align: center; } #cta button { background-color: #333; color: #fff; border: none; padding: 15px 20px; cursor: pointer; font-size: 18px; } #cta button:hover { background-color: #555; } </style> </head> <body> <header id="main-header"> <div class="container"> <h1>Bem-vindo à Minha Landing Page</h1> </div> </header> <section id="cta"> <div class="container"> <h2>Chamada para Ação</h2> <button>Clique Aqui</button> </div> </section> </body> </html>