> For the complete documentation index, see [llms.txt](https://docs.sprinthub.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sprinthub.com/topicos/atrair/landing-page/landing-page-como-importar-seu-site-na-sprinthub.md).

# 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

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FfHrWCShlYjwbPK5z20SJ%2Fundraw_Personal_site_re_c4bp.png?alt=media&amp;token=2516006d-cab4-4f6a-9a69-ef9776170da0" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FVWsJAlz32sclL5L9v0mH%2Fimage.png?alt=media&amp;token=63c6c164-f08f-419b-bd60-4e4f37304cb9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FONH20mdgBsECrqngAjP9%2Fimage.png?alt=media&amp;token=86ae5a93-2d34-4265-9169-beacd01f8cb0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FnRjJCvL3lnCvQtppJwEY%2Fimage.png?alt=media&amp;token=0d012528-eeff-453b-a6a9-bafbcf583075" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FoQfzLedlZTqUfvX4Vt4L%2Fimage.png?alt=media&amp;token=85bc44c0-b01c-4736-8069-b0e8edfef847" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FRtol1lnzABGgsMBHYL0y%2Fimage.png?alt=media&amp;token=59518142-2965-4ebc-9025-35b0647b6180" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2F0IFBHxuoOWJ1G9HNJK0V%2Fimage.png?alt=media&amp;token=ba05b3a7-20fd-4266-985b-5d374a3df7fb" alt=""><figcaption></figcaption></figure>

#### 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:**

<pre class="language-html"><code class="lang-html"><strong>&#x3C;!DOCTYPE html>
</strong>&#x3C;html lang="en">
&#x3C;head>
    &#x3C;meta charset="UTF-8">
    &#x3C;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &#x3C;title>Minha Landing Page&#x3C;/title>
    &#x3C;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;
        }
    &#x3C;/style>
&#x3C;/head>
&#x3C;body>
    &#x3C;header id="main-header">
        &#x3C;div class="container">
            &#x3C;h1>Bem-vindo à Minha Landing Page&#x3C;/h1>
        &#x3C;/div>
    &#x3C;/header>
    &#x3C;section id="cta">
        &#x3C;div class="container">
            &#x3C;h2>Chamada para Ação&#x3C;/h2>
            &#x3C;button>Clique Aqui&#x3C;/button>
        &#x3C;/div>
    &#x3C;/section>
&#x3C;/body>
&#x3C;/html>
</code></pre>

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

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FspBG8CQk8ERTjHsfSfcj%2Fimage.png?alt=media&amp;token=d60a0e64-8550-4594-b102-9d0d36fdbc85" alt=""><figcaption></figcaption></figure>

#### 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.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FrTlG6uu8RiG3qGMhdhSL%2Fimage.png?alt=media&amp;token=71a0c47f-ba24-49b5-ae69-46708b231a01" alt=""><figcaption></figcaption></figure>

### 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!
