Landing Builder
Landing Builder — Twoja nowa aplikacja do tworzenia stron
Twórz responsywne i eleganckie strony w oparciu o Bootstrap 5.3 — bez znajomości kodu.
Dlaczego Landing Builder?
-
Intuicyjny kreator drag & drop
Przeciągaj komponenty, edytuj treści i styl w czasie rzeczywistym. -
Bogata biblioteka gotowych szablonów
Klasyczne strony firmowe, landing page produktu, formularze – wystarczy kliknąć. -
Elastyczna personalizacja stylów
Zmień kolory, odstępy i typografię bez skomplikowanych ustawień. -
Płynna edycja treści
Kliknij i wpisz – wszystko od razu w podglądzie. - Czysty, gotowy kod HTML
Eksportuj sformatowany kod Bootstrap 5.3 — idealny do wdrożenia lub dalszej edycji.
Jak to działa?
- Wybierz szablon z naszej galerii
- Zedytuj treści i styl bez kodowania
- Eksportuj gotowy, schludny kod HTML lub pobierz plik
.html
Dla kogo?
- Dla freelancerów i startupów chcących szybko wystartować
- Dla marketerów szukających prostego narzędzia do testowania kampanii
- Dla każdego, kto chce stworzyć landing page bez zlecania kodowania
Zalety
- Zero instalacji — działa w dowolnej przeglądarce
- Szybkość, prostota i pełna kontrola nad wyglądem strony
Wypróbuj Landing Builder za darmo – bez rejestracji!
Jak obsługiwać aplikację?
- przeciągnij wybrany komponent z lewej i upuść na pole podglądu
- kliknij na pole tekstowe na podglądzie i edytuj tekst
- kliknij na dowolne pole stylów by zmienić kolory tekstu i tła
- wygeneruj podgląd lub wyeksportuj HTML
Uwaga
Nie ma możliwości zmiany położenia już dodanych elementów. W razie pomyłki trzeba wszystko wyczyścić i dodać elementy od nowa.
Landing Builder
Komponenty
Nagłówek (Navbar)
Hero sekcja
Sekcja funkcji
Opinie klientów
Sekcja tekstowa
CTA
Tekst + Obraz
2 kolumny
Stopka
Styl sekcji
Podgląd
Kod po stronie przeglądarki
<style>
.droppable {
min-height: 400px;
border: 2px dashed #ccc;
padding: 20px;
margin-top: 20px;
}
.component {
cursor: move;
padding: 10px;
border: 1px solid #ddd;
margin-bottom: 10px;
}
.selected {
outline: 3px solid #0d6efd;
}
.style-panel input {
width: 100%;
margin-bottom: 10px;
}
[contenteditable]:focus {
outline: 2px dashed #0d6efd;
background: #e9f5ff;
color: #212529 !important;
}
</style>
<h2 class="mb-4 d-flex align-items-center">Landing Builder
<button class="btn btn-outline-primary ms-3" data-bs-toggle="modal" data-bs-target="#templateModal"><i class="bi bi-layout-text-window"></i> Wybierz szablon</button>
</h2>
<div class="row">
<div class="col-md-3">
<!-- Komponenty -->
<h4>Komponenty</h4>
<!-- NAVBAR -->
<div class="component" draggable="true" data-html='
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#" contenteditable="true"><i class="bi bi-bootstrap-fill me-1"></i> Landing Builder</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#" contenteditable="true">Strona główna</a></li>
<li class="nav-item"><a class="nav-link" href="#" contenteditable="true">Funkcje</a></li>
<li class="nav-item"><a class="nav-link" href="#" contenteditable="true">Kontakt</a></li>
</ul>
</div>
</div>
</nav>'><i class="bi bi-bootstrap-fill"></i> Nagłówek (Navbar)</div>
<!-- HERO -->
<div class="component" draggable="true" data-html='
<section class="text-center py-5">
<div class="container">
<h1 contenteditable="true"><i class="bi bi-stars me-2"></i>Twórz stronę bez kodowania</h1>
<p contenteditable="true">Zbuduj profesjonalny landing page w kilka minut</p>
<a href="#" class="btn btn-primary btn-lg mt-3"><i class="bi bi-play-circle me-1"></i> Rozpocznij teraz</a>
</div>
</section>'><i class="bi bi-stars"></i> Hero sekcja</div>
<!-- FUNKCJE 3 kolumny -->
<div class="component" draggable="true" data-html='
<section class="py-5">
<div class="container">
<div class="row text-center">
<div class="col-md-4">
<i class="bi bi-arrows-move display-4 text-primary"></i>
<h4 contenteditable="true">Drag & Drop</h4>
<p contenteditable="true">Układaj sekcje jak chcesz</p>
</div>
<div class="col-md-4">
<i class="bi bi-palette display-4 text-primary"></i>
<h4 contenteditable="true">Personalizacja</h4>
<p contenteditable="true">Zmieniaj kolory i układ</p>
</div>
<div class="col-md-4">
<i class="bi bi-file-earmark-code display-4 text-primary"></i>
<h4 contenteditable="true">Eksport HTML</h4>
<p contenteditable="true">Gotowy kod bez bałaganu</p>
</div>
</div>
</div>
</section>'><i class="bi bi-grid-3x3-gap"></i> Sekcja funkcji</div>
<!-- OPINIE -->
<div class="component" draggable="true" data-html='
<section class="py-5">
<div class="container">
<h2 class="text-center mb-4" contenteditable="true"><i class="bi bi-chat-dots me-2"></i>Opinie klientów</h2>
<div class="row">
<div class="col-md-4">
<blockquote class="blockquote">
<p contenteditable="true">"Najprostszy edytor landing page jaki znam!"</p>
<footer class="blockquote-footer">Anna, freelancerka</footer>
</blockquote>
</div>
<div class="col-md-4">
<blockquote class="blockquote">
<p contenteditable="true">"Szybko, wygodnie, bez programisty!"</p>
<footer class="blockquote-footer">Marek, startupowiec</footer>
</blockquote>
</div>
<div class="col-md-4">
<blockquote class="blockquote">
<p contenteditable="true">"Kod HTML jest czysty i gotowy do użycia."</p>
<footer class="blockquote-footer">Joanna, marketerka</footer>
</blockquote>
</div>
</div>
</div>
</section>'><i class="bi bi-chat-dots"></i> Opinie klientów</div>
<!-- SEKCJA TEKSTOWA -->
<div class="component" draggable="true" data-html='<section class="py-5"><div class="container"><h2 contenteditable="true">Nowa sekcja</h2><p contenteditable="true">Dodaj tutaj treść...</p></div></section>'><i class="bi bi-file-text"></i> Sekcja tekstowa</div>
<!-- CTA -->
<div class="component" draggable="true" data-html='<section class="text-center py-5"><div class="container"><h2 contenteditable="true">Call to Action</h2><p contenteditable="true">Zachęć użytkownika do działania!</p></div></section>'><i class="bi bi-lightning"></i> CTA</div>
<!-- TEKST + OBRAZ -->
<div class="component" draggable="true" data-html='<section class="py-5"><div class="container"><div class="row align-items-center"><div class="col-md-6"><h2 contenteditable="true">Nagłówek z obrazem</h2><p contenteditable="true">Krótki opis...</p></div><div class="col-md-6"><img src="https://placehold.co/400x250" class="img-fluid" alt="Obrazek"></div></div></div></section>'><i class="bi bi-image"></i> Tekst + Obraz</div>
<!-- 2 KOLUMNY -->
<div class="component" draggable="true" data-html='<section class="py-5"><div class="container"><div class="row"><div class="col-md-6"><p contenteditable="true">Lewa kolumna</p></div><div class="col-md-6"><p contenteditable="true">Prawa kolumna</p></div></div></div></section>'><i class="bi bi-layout-split"></i> 2 kolumny</div>
<!-- STOPKA -->
<div class="component" draggable="true" data-html='<footer class="text-center py-4"><div class="container"><p contenteditable="true">© 2025 Moja Firma – Wszystkie prawa zastrzeżone.</p></div></footer>'><i class="bi bi-box-arrow-in-down"></i> Stopka</div>
<!-- Panel stylów -->
<h4>Styl sekcji</h4>
<div class="style-panel">
<label>Tło</label>
<input type="color" id="bgColor">
<label>Kolor tekstu</label>
<input type="color" id="textColor">
<label>Padding (px)</label>
<input type="number" id="padding" min="0" max="100">
</div>
</div>
<!-- Podgląd i Styl -->
<div class="col-md-9">
<h4>Podgląd</h4>
<div id="canvas" class="droppable"></div>
<button class="btn btn-primary mt-3" onclick="generateCode()"><i class="bi bi-code-slash"></i> Wygeneruj HTML</button>
<button class="btn btn-success mt-3" onclick="exportHTML()"><i class="bi bi-download"></i> Eksportuj HTML</button>
<button class="btn btn-outline-danger mt-3" onclick="clearSite()"><i class="bi bi-trash3"></i> Wyczyść wszystko</button>
<pre id="output" class="language-html mt-3" style="height:300px; overflow:auto;"></pre>
</div>
</div>
<!-- Modal z szablonami -->
<div class="modal fade" id="templateModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Wybierz szablon</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="list-group">
<button class="list-group-item list-group-item-action" onclick="loadTemplate('template1')"><i class="bi bi-building"></i> Klasyczna strona firmowa</button>
<button class="list-group-item list-group-item-action" onclick="loadTemplate('template2')"><i class="bi bi-box-seam"></i> Landing Page produktu</button>
<button class="list-group-item list-group-item-action" onclick="loadTemplate('template3')"><i class="bi bi-envelope-paper"></i> Newsletter z formularzem</button>
</div>
</div>
</div>
</div>
</div>
<script>
const templates = {
template1: `
<header class="bg-dark text-white text-center py-5">
<div class="container">
<h1 contenteditable="true">Witamy w naszej firmie</h1>
<p contenteditable="true">Tworzymy rozwiązania przyszłości</p>
</div>
</header>
<section class="py-5">
<div class="container">
<h2 contenteditable="true">O nas</h2>
<p contenteditable="true">Jesteśmy zespołem pasjonatów tworzących nowoczesne aplikacje.</p>
</div>
</section>
<section class="bg-primary text-white text-center py-5">
<div class="container">
<h2 contenteditable="true">Zacznijmy współpracę</h2>
<p contenteditable="true">Skontaktuj się z nami już dziś</p>
</div>
</section>
<footer class="bg-dark text-white text-center py-3">
<div class="container">
<p contenteditable="true">© 2025 Moja Firma</p>
</div>
</footer>
`,
template2: `
<section class="text-center py-5">
<div class="container">
<h1 contenteditable="true">Poznaj nasz produkt</h1>
<p contenteditable="true">Nowoczesne rozwiązanie dla Twojego biznesu</p>
<img src="https://placehold.co/600x300" class="img-fluid my-4">
<p><a href="#" class="btn btn-primary btn-lg" contenteditable="false">Kup teraz</a></p>
</div>
</section>
`,
template3: `
<section class="py-5">
<div class="container text-center">
<h2 contenteditable="true">Zapisz się do newslettera</h2>
<p contenteditable="true">Otrzymuj nowości i promocje</p>
<form class="row justify-content-center mt-4">
<div class="col-md-6">
<input type="email" class="form-control" placeholder="Twój email">
</div>
<div class="col-md-3">
<button class="btn btn-success w-100" type="submit">Zapisz się</button>
</div>
</form>
</div>
</section>
`
};
function loadTemplate(name) {
const html = templates[name];
document.getElementById('canvas').innerHTML = html;
const modal = bootstrap.Modal.getInstance(document.getElementById('templateModal'));
modal.hide();
}
const components = document.querySelectorAll('.component');
const canvas = document.getElementById('canvas');
let selected = null;
components.forEach(component => {
component.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', component.dataset.html);
});
});
canvas.addEventListener('dragover', e => e.preventDefault());
canvas.addEventListener('drop', e => {
e.preventDefault();
const html = e.dataTransfer.getData('text/plain');
canvas.insertAdjacentHTML('beforeend', html);
});
canvas.addEventListener('click', e => {
const target = e.target.closest('section, footer, header, div');
if (!canvas.contains(target)) return;
if (selected) selected.classList.remove('selected');
selected = target;
selected.classList.add('selected');
// Wczytaj style
const style = getComputedStyle(selected);
document.getElementById('bgColor').value = rgbToHex(style.backgroundColor);
document.getElementById('textColor').value = rgbToHex(style.color);
document.getElementById('padding').value = parseInt(style.paddingTop);
});
// Edycja stylu
document.getElementById('bgColor').addEventListener('input', e => {
if (selected) selected.style.backgroundColor = e.target.value;
});
document.getElementById('textColor').addEventListener('input', e => {
if (selected) selected.style.color = e.target.value;
});
document.getElementById('padding').addEventListener('input', e => {
if (selected) selected.style.padding = e.target.value + "px";
});
function rgbToHex(rgb) {
const result = rgb.match(/\d+/g);
if (!result) return "#ffffff";
return "#" + result.slice(0, 3).map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
}
function escapeHTML(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
function generateCode() {
const clone = canvas.cloneNode(true);
clone.querySelectorAll('[contenteditable]').forEach(el => el.removeAttribute('contenteditable'));
if (selected) selected.classList.remove('selected');
const raw = clone.innerHTML;
const el = document.getElementById('output');
el.textContent = formatHtml(raw);
if (el.hasAttribute('data-highlighted'))
el.removeAttribute('data-highlighted');
if (el.hasAttribute('data-highlighter'))
el.removeAttribute('data-highlighter');
if (el.classList.contains('hljs'))
el.classList.remove(...Array.from(el.classList).filter(cls => cls.startsWith('hljs')));
el.innerHTML = escapeHTML(el.textContent);
hljs.highlightElement(el);
}
function clearSite() {
document.getElementById('canvas').textContent = '';
document.getElementById('output').textContent = '';
}
function formatHtml(html) {
const div = document.createElement('div');
div.innerHTML = html.trim();
return beautifyHtml(div, 0).trim();
}
function beautifyHtml(node, level) {
let output = '';
const indent = ' '.repeat(level);
for (let child of node.childNodes) {
if (child.nodeType === Node.TEXT_NODE) {
const text = child.textContent.trim();
if (text) output += indent + text + '\n';
} else if (child.nodeType === Node.ELEMENT_NODE) {
let openingTag = indent + `<${child.tagName.toLowerCase()}`;
for (let attr of child.attributes) {
openingTag += ` ${attr.name}="${attr.value}"`;
}
openingTag += '>';
output += openingTag + '\n';
// Rekurencja dla dzieci
output += beautifyHtml(child, level + 1);
const closingTag = `${indent}</${child.tagName.toLowerCase()}>\n`;
output += closingTag;
}
}
return output;
}
function exportHTML() {
const preview = document.getElementById("canvas");
preview.querySelectorAll('[contenteditable="true"]').forEach(el => {
el.removeAttribute('contenteditable');
});
const previewContent = preview.innerHTML;
// Opcjonalnie: zawijamy w pełny szablon HTML
const fullHTML = `
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strona wygenerowana</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
${previewContent}
</body>
</html>`;
const blob = new Blob([fullHTML], {
type: "text/html"
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "webpage.html";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
</script>
Kod po stronie serwera
Informacja
Aplikacja nie korzysta z kodu po stronie serwera.
Tagi
Dziękujemy!
()