# Landing Page - Como importar seu site na Sprinthub

<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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sprinthub.com/topicos/atrair/landing-page/landing-page-como-importar-seu-site-na-sprinthub.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
