🔹Landing Page - How to import your site into Sprinthub

Creating an efficient landing page is essential to capture leads and increase conversions in your business. At Sprinthub, we offer a practical solution to import your custom landing page directly

Step by Step to Import Your Landing Page into Sprinthub

To import your landing page into Sprinthub, follow the steps below:

1. Access the Landing Page Builder

First, log in to your Sprinthub account and navigate to the landing page creation section. Click "Create New Page" to start the process.

You will be taken to an initial setup page, where you need to add the page title and Alias:

2. Use the Custom Code Component

Within the landing page builder, you will find several components that can be dragged and dropped to build your page. Look for the "HTML" or similar component that allows insertion of HTML and CSS code.

After adding the component, click on it and click on advanced editor:

3. Add the HTML and CSS Code

Copy the HTML and CSS code of the landing page you want to import. In the "Custom Code" component, paste that code. Make sure all necessary CSS code is embedded in the HTML, as external links to stylesheets are not allowed.

Example Code:

<!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>Welcome to My Landing Page</h1>
        </div>
    </header>
    <section id="cta">
        <div class="container">
            <h2>Call to Action</h2>
            <button>Click Here</button>
        </div>
    </section>
</body>
</html>

After adding, preview the changes on your page:

4. Preview and Adjust

After adding the code, preview your landing page to ensure everything is working as expected. Make the necessary adjustments directly in the code inside the "Custom Code" component.

5. Save and Publish

After confirming that your landing page is correctly configured and visually appealing, save your changes. Finally, publish the page to make it accessible to your leads and visitors.

Conclusion

Importing your landing page into Sprinthub is a simple process that offers great flexibility and customization. By using the "Custom Code" component, you can integrate your HTML and CSS directly into the landing page builder, keeping full control over your page's design and functionality. Follow the steps mentioned and make the most of Sprinthub's features to create effective and attractive landing pages.

If you have any questions or need assistance, our support team is always available to help. Good conversions!

We hope this guide has been helpful in understanding how to import your landing page into Sprinthub. For more tips and tutorials, keep following our blog and stay tuned for updates!

PreviousLanding Page - How to Inject Parameters from an LP URL into an iFrame on the Same LP NextLanding Page - exporting and importing internal sites within Sprinthub

Last updated 1 year ago

Was this helpful?

hashtagStep by Step to Import Your Landing Page into Sprinthub

hashtag1. Access the Landing Page Builder

hashtag2. Use the Custom Code Component

hashtag3. Add the HTML and CSS Code

hashtag4. Preview and Adjust

hashtag5. Save and Publish

hashtagConclusion