Landing Page - How to import your website into SprintHub

Creating an efficient landing page is essential for capturing leads and increasing conversions in your business. At SprintHub, we offer a practical solution to import your custom landing page directly

Step-by-Step Guide 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 begin the process.

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

2. Use the Custom Code Component

Inside the landing page builder, you will find several components that can be dragged and dropped to build your page. Look for the "HTML" component or similar, which allows the 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 from the landing page you want to import. In the "Custom Code" component, paste that code. Make sure all necessary CSS is embedded in the HTML, as using external links for style sheets is not allowed.

Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My 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 it, view the changes on your page:

4. Preview and Adjust

After adding the code, preview your landing page to make sure 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, maintaining total 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. Happy converting!

---

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