Tworzenie strony internetowej kiedyś wydawało się projektem, na który trzeba było zatrudnić kogoś z zewnątrz. Już nie.
Korzystam z Hostinger Website Builder, a w tym przewodniku przeprowadzę Cię przez cały proces krok po kroku – od momentu logowania aż do opublikowania Twojej strony w sieci.
Zaczynajmy.
Czym jest Hostinger Website Builder?
Hostinger Website Builder to wsparty AI kreator stron z funkcją przeciągnij-i-upuść, wbudowany bezpośrednio w Twoje konto Hostinger.
Nie musisz nic instalować, nie musisz znać się na kodowaniu ani mieć doświadczenia w projektowaniu. Opisz, czego potrzebujesz, AI stworzy całą stronę, a Ty dostosujesz ją do swojej marki.
To jeden z najszybszych sposobów na stworzenie profesjonalnie wyglądającej, w pełni działającej strony od zera.
Krok 1: Zaloguj się i przejdź do kreatora
Po zalogowaniu się na konto Hostinger trafiasz do hPanelu. To główny pulpit Hostinger, w którym zarządzasz wszystkim: stronami, domenami, pocztą i rozliczeniami.
W lewym pasku bocznym zobaczysz listę opcji nawigacyjnych. Kliknij Websites. Pojawi się rozwijane menu z dwiema opcjami: Websites list i Migrations. Kliknij Websites list.
Jesteś teraz na stronie lista stron (Websites list), gdzie widoczne są wszystkie strony podpięte do Twojego konta.
W prawym górnym rogu strony zobaczysz fioletowy przycisk + Add website. Kliknij go.
Pojawi się małe menu z czterema opcjami:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Strona w PHP/HTML według własnego projektu
Musisz kliknąć Hostinger Website Builder, opisany jako „wsparty AI kreator stron z funkcją przeciągnij-i-upuść”.
Krok 2: Opisz swoją stronę AI
Po wybraniu Hostinger Website Builder zostaniesz przeniesiony na ekran konfiguracji zatytułowany „Let AI create your online presence.”
To tutaj informujesz AI, jaką stronę chcesz stworzyć.
Zobaczysz duże pole tekstowe z podpowiedzią „Describe your website or business”. To jest pole na Twój prompt, a to, co tu wpiszesz, zdeterminuje wszystko, co AI dla Ciebie wygeneruje. Im więcej szczegółów, tym lepszy efekt.
Pod polem tekstowym znajduje się wiersz szybkich sugestii: „Create a business website”, „Create an online store”, „Design a portfolio”, „Launch an appointments website”, „Start a blog”, „Launch a restaurant website” i „Create a one pager website.”
Kliknięcie dowolnej z nich wypełni pole startowym promptem, który możesz edytować i rozbudować.
Na dole ekranu znajdziesz dwa dodatkowe linki: Pre-made templates i Link in bio website.
Jeśli wolisz pominąć AI i przejrzeć gotowe szablony, kliknij Pre-made templates.
Jeśli potrzebujesz prostej, jednostronicowej strony na swoje profile społecznościowe, opcja Link in bio może być strzałem w dziesiątkę.
Dla większości osób tworzących prawdziwą stronę jednak pole z promptem AI to najlepszy punkt startowy.
Jak napisać dobry prompt AI
To najważniejsza część całego procesu. Traktuj prompt AI jak brief, który dajesz projektantowi. Im wyraźniej zakomunikujesz swoją wizję, tym bliższy oczekiwań będzie rezultat.
Oto prompt, którego użyłem w tym przewodniku. Tworzyłem stronę dla agencji kreatywnej:
“Build a modern, professional website for a creative agency that offers branding, graphic design, web design, and digital marketing services. The website should feel creative, bold, and trustworthy while staying clean and easy to navigate. Use a modern layout with strong visuals, good spacing, and stylish typography. Include the following pages: Home, About, Services, Portfolio, Blog, and Contact. On the Home page, add a hero section with a powerful headline, short value-focused description, and a clear call-to-action button like ‘Start Your Project’ or ‘Get a Quote.’ Write simple, persuasive copy that explains what we do, who we help, and the results we deliver. Make the website mobile-friendly, fast-loading, and optimized for basic SEO.”
Zwróć uwagę, jak bardzo to konkretne. Uwzględnia branżę, ton, styl układu, wymagane strony, strukturę strony głównej i cele treści. Taki poziom szczegółowości daje AI solidne podstawy do działania.
Gdy wpiszesz opis, pojawi się przycisk „Improve description” w prawym górnym rogu pola tekstowego.
Zalecam kliknięcie go przed wysłaniem. AI rozbuduje i dopracuje Twój prompt, często dodając elementy, których sam mogłeś nie uwzględnić.
Gdy będziesz gotowy, kliknij fioletową strzałkę (ikonę wyślij) w prawym dolnym rogu pola, aby przesłać prompt i rozpocząć generowanie.
Krok 3: Poczekaj, aż AI zbuduje Twoją stronę
Po przesłaniu promptu AI od razu rozpoczyna pracę. Zobaczysz pełnoekranową animację ładowania na głębokim fioletowym tle z komunikatem „Looking for matching pictures…” i paskiem postępu.
Ten etap zazwyczaj trwa od 30 do 60 sekund. W tym czasie AI:
- generuje układy stron,
- pisze teksty,
- dobiera pasujące obrazy ze stockowej biblioteki,
- buduje nawigację,
- i strukturyzuje całą witrynę zgodnie z Twoim promptem.
Nie zamykaj zakładki podczas ładowania. Po prostu poczekaj.
Krok 4: Przejrzyj efekt pracy AI
Kiedy AI skończy, zobaczysz podgląd nowej strony. To ekran podsumowania i naprawdę ekscytujące jest zobaczyć wygenerowany projekt.
Po lewej stronie ekranu jest podgląd na żywo Twojej strony. Po prawej panel zatytułowany „Your idea summary,” w którym znajdziesz podsumowanie promptu i przycisk „Edit idea”, jeśli chcesz wprowadzić zmiany i wygenerować stronę ponownie.
W moim przypadku AI nazwało stronę „BoldCraft Studio” i stworzyło stronę główną z nagłówkiem „Crafting Bold Brands That Shine”, krótkim opisem i dwoma przyciskami CTA: „Start Now” i „Get Quote.”
Menu nawigacyjne zawierało wszystkie sześć stron, o które prosiłem: Home, About, Services, Portfolio, Blog i Contact.
W lewym górnym rogu podglądu znajdują się przyciski „Previous versions”, które pozwalają przełączać się między alternatywnymi wersjami generowanymi przez AI, oraz „Rate site”, gdzie możesz ocenić rezultat.
W prawym górnym rogu podglądu są ikony przełączania między widokiem desktopowym i mobilnym. Sprawdź wczesnym etapie, jak wygląda strona na telefonie.
Jeśli jesteś zadowolony, kliknij fioletowy „Continue” po prawej stronie panelu. Zostaniesz przeniesiony do edytora, gdzie możesz zacząć dostosowywać stronę.
Jeśli rezultat Cię nie satysfakcjonuje, kliknij „Edit idea”, popraw prompt i wygeneruj stronę ponownie. Możesz to robić tyle razy, ile potrzebujesz.
Krok 5: Zapoznaj się z edytorem
Edytor to miejsce, w którym spędzisz większość czasu. Po wejściu poświęć chwilę, aby zrozumieć jego układ, zanim zaczniesz klikać.
Edytor składa się z dwóch głównych obszarów:
- Duży centralny obszar to płótno strony, gdzie widzisz i edytujesz stronę w czasie rzeczywistym.
- Wąski pionowy pasek boczny po lewej to panel sterowania z wszystkimi narzędziami.
Oto, co oznaczają poszczególne ikony w pasku bocznym:
- Setup – podstawowe ustawienia strony, podpięta domena i informacje o planie.
- Elements – panel przeciągnij-i-upuść z blokami treści, które możesz dodać na stronę. Omówię to szerzej za chwilę.
- Pages – lista wszystkich stron. Możesz przełączać się między nimi, dodawać nowe, zmieniać nazwy, kolejność lub usuwać niepotrzebne.
- Styles – globalny wygląd: czcionki, paleta kolorów i style przycisków. Zmiany tutaj dotyczą całej witryny, więc to dobre miejsce na decyzje designerskie.
- AI tools – narzędzia pisania i generowania treści wspierane przez AI. Możesz tu przepisywać fragmenty, tworzyć nowe teksty i więcej.
- Blog – zarządzanie wpisami blogowymi, jeśli Twoja strona ma sekcję blogową.
- Store – ustawienia sklepu internetowego, jeśli sprzedajesz produkty. Funkcje e-commerce wymagają planu Business lub wyższego.
- SEO – wbudowany menedżer SEO do ustawiania tytułów meta, opisów i innych parametrów optymalizacji dla każdej strony.
- More – rozwija drugie menu z dodatkowymi narzędziami takimi jak Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress oraz Help and Resources.
Na górze edytora znajdziesz główny pasek narzędzi: przełącznik między widokiem desktopowym a mobilnym, przyciski cofnij/powtórz, Connect domain, Preview oraz zielony Go live.
Krok 6: Edytuj swoją zawartość
Teraz nadszedł czas, by nadać stronie indywidualny charakter. Kliknij w dowolne miejsce na płótnie strony, aby rozpocząć edycję.
Gdy najedziesz kursorem na dowolny fragment strony, pojawi się niebieska etykieta w lewym górnym rogu sekcji informująca, czy to „Section” czy „Header”. Pojawi się także pływający pasek narzędzi.
Na pasku znajdziesz kolejno: Edit section – otwiera ustawienia sekcji, gdzie możesz zmienić tło (obraz lub kolor), ustawić odstępy i opcje układu.
Obok jest Generate image, które otwiera AI generator obrazów.
Dalej są ikony Duplikuj, Pokaż/Ukryj, Usuń oraz strzałki do przenoszenia sekcji w górę i w dół, a także menu z trzema kropkami z dodatkowymi opcjami.
Aby edytować tekst, po prostu kliknij w niego i zacznij pisać. Pojawią się narzędzia edycji, w których zmienisz rozmiar czcionki, jej styl, wyrównanie i kolor.
Aby zmienić obraz, kliknij na niego. Zobaczysz opcje zastąpienia go plikiem z Twojego komputera, wybór ze stocku lub wygenerowania nowego przy pomocy AI.
Najpierw przepracuj stronę główną, a potem przejdź do kolejnych stron, wybierając je w panelu Pages i edytując po kolei.
Krok 7: Skorzystaj z AI generatora obrazów
Jedną z funkcji wartą uwagi jest AI image generator, bo przydaje się, gdy nie masz własnych profesjonalnych zdjęć.
Aby się do niego dostać, najedź kursorem na sekcję strony i kliknij Generate image w pływającym pasku narzędzi. Po prawej stronie ekranu wysunie się panel.
W panelu znajdziesz pole Image description. Wpisz opis obrazu, który chcesz stworzyć.
Im bardziej szczegółowy i obrazowy opis, tym lepszy efekt. Limit to 3000 znaków, a wskaźnik jakości na bieżąco pokazuje, czy opis jest wystarczająco dobry.
Na przykład, gdy wpisałem „A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office,” panel pokazał „Great description!” i pełne wskaźniki jakości.
Gdy będziesz gotowy, kliknij Create images. AI wygeneruje kilka obrazów do wyboru.
Uwaga: generator obrazów wymaga planu Business lub wyższego. Na planie Premium zobaczysz wezwanie do aktualizacji.
Krok 8: Dodaj nowe elementy na dowolną stronę
Jeśli chcesz dodać blok treści, którego nie ma jeszcze na stronie, kliknij Elements w lewym pasku bocznym. Otworzy się panel Add elements.
Zobaczysz siatkę wszystkich dostępnych elementów: Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed i Contact form. Przeciągnij dowolny element na płótno w wybrane miejsce.
Po dodaniu kliknij go, aby otworzyć ustawienia i opcje stylizacji.
Dzięki przeciągnij-i-upuść nigdy nie jesteś skazany na układ wygenerowany przez AI. Możesz dowolnie dodawać, usuwać i przesuwać elementy.
Krok 9: Zarządzaj stronami
Kliknij Pages w lewym pasku bocznym, aby zobaczyć listę wszystkich stron. Kliknij nazwę, by przejść do edycji danej strony.
Aby dodać nową stronę, użyj przycisku plus. Aby zmienić kolejność stron w menu, przeciągnij je w górę lub w dół na liście.
Jeśli AI wygenerowało strony, których nie potrzebujesz, możesz je stąd usunąć. Jeśli potrzebujesz nowych stron, np. Testimonials lub Pricing, dodaj je tutaj i rozbuduj za pomocą panelu Elements.
Krok 10: Skonfiguruj SEO
Zanim opublikujesz, musisz zadbać o SEO. To krok, który wielu pomija, a to błąd.
Poświęcenie 15 minut na poprawne wypełnienie ustawień SEO może zdecydowanie wpłynąć na to, czy ludzie znajdą Twoją stronę w Google.
Kliknij SEO w pasku bocznym, aby otworzyć panel zatytułowany „Let’s be found on Google (SEO).”
Panel dzieli się na dwie części. Po lewej lista wszystkich stron. Po prawej Website overview, gdzie znajdziesz nazwę firmy i język witryny. Kliknij Edit, aby je poprawić.
Poniżej jest sekcja „Some pages require your attention.” Strony wymagające uzupełnienia oznaczone są pomarańczową ikoną ostrzeżenia. Kliknij każdą stronę z lewej, aby otworzyć jej ustawienia SEO i wpisać tytuł meta oraz opis meta.
Przejdź przez wszystkie strony. Dobry tytuł meta jest zwięzły, zawiera główne słowo kluczowe i mieści się w 60 znakach. Dobry opis meta podsumowuje stronę i ma do 160 znaków. To fragmenty, które widzą użytkownicy w wynikach wyszukiwania, więc warto poświęcić im chwilę.
Krok 11: Podłącz domenę
Jeśli jeszcze nie podłączyłeś własnej domeny, teraz jest na to czas. Kliknij przycisk Connect domain na górnym pasku edytora.
Masz dwie opcje. Jeśli masz własną domenę, podłącz ją, aktualizując rekordy DNS na serwery Hostinger. Jeśli jej nie masz, możesz ją kupić bezpośrednio w Hostinger na tym samym ekranie.
Dopóki nie podłączysz domeny, strona będzie dostępna pod tymczasowym subdomeną Hostinger, np. yoursite.builder-preview.com. Do testów to wystarczy, ale przed publicznym udostępnieniem warto mieć własną domenę.
Krok 12: Podejrzyj stronę i opublikuj
Już prawie gotowe. Przed publikacją kliknij przycisk Preview w prawym górnym rogu edytora.
Otworzy się pełnoekranowy podgląd strony tak, jak zobaczą ją odwiedzający. Przełączaj między widokiem desktopowym i mobilnym, korzystając z ikon u góry podglądu, i sprawdź, czy wszystko wygląda poprawnie.
Zwróć uwagę na sekcję hero na stronie głównej w widoku mobilnym, na to, jak działa menu i czy obrazy nie są niechcąco przycięte.
Gdy wszystko będzie zgodne z oczekiwaniami, wróć do edytora i kliknij zielony Go live w prawym górnym rogu. Twoja strona zostanie opublikowana i udostępniona online.
Krok 13: Poznaj integracje
Gdy strona jest już live, warto przyjrzeć się integracjom. Przejdź do More > Integrations w lewym pasku bocznym.
Panel Integrations pozwala połączyć witrynę z zewnętrznymi narzędziami i usługami. Obecnie dostępne są m.in. Shippo do generowania etykiet i zarządzania wysyłką, Printful do tworzenia i sprzedaży produktów na zamówienie, Hostinger Reach do email marketingu i newsletterów, Google Ads do kampanii reklamowych oraz Custom code, jeśli chcesz dodać własny HTML, CSS lub JavaScript.
Aby aktywować integrację, kliknij Get started przy wybranym narzędziu, postępuj zgodnie z instrukcjami i opublikuj stronę ponownie.
Wskazówki, jak w pełni wykorzystać Hostinger Website Builder
Bądź szczodry w prompt AI. Dwuzdaniowy prompt da ogólnikowy efekt. Szczegółowy prompt uwzględniający branżę, odbiorców, preferencje wizualne, strukturę stron i ton głosu da rezultat bliższy Twoim oczekiwaniom. Poświęć 5 minut na dobry brief, a zaoszczędzisz godziny edycji.
Używaj przycisku Improve description za każdym razem. Łatwo go przeoczyć, ale naprawdę pomaga. AI często wychwytuje niejasności i zamienia je na konkretne instrukcje projektowe i treści.
Dokładnie przejrzyj swoje teksty. AI tworzy przyzwoite teksty tymczasowe, ale nie zna Twojego biznesu tak jak Ty. Przejrzyj każdą stronę i napisz teksty od nowa, odzwierciedlając swoją ofertę i styl.
Sprawdź widok mobilny przed publikacją. Hostinger automatycznie dostosuje responsywność, ale obrazy i odstępy czasem trzeba poprawić. Zawsze testuj na urządzeniach mobilnych.
Wypełnij SEO dla każdej strony. Nie tylko strony głównej. Każda podstrona zasługuje na tytuł meta i opis meta. To kilka minut pracy, a znacząco poprawia widoczność w wynikach wyszukiwania.
Używaj Media library, żeby być zorganizowanym. W More > Media library możesz zarządzać wszystkimi obrazami w jednym miejscu. Łatwiej je potem ponownie wykorzystać i zachować spójność witryny.
Wracaj i udoskonalaj z czasem. Publikacja to dopiero początek. Regularnie aktualizuj treści, dodawaj wpisy blogowe i rozwijaj stronę wraz z rozwojem działalności.
Hostinger Website Builder usuwa niemal wszystkie bariery, które kiedyś stały między Tobą a profesjonalną stroną. AI wykonuje większość pracy projektowej i tekstowej, edytor umożliwia łatwe dostosowywanie, a wbudowane narzędzia SEO i integracje dają wszystko, czego potrzeba w jednym miejscu.
Postępując zgodnie z tym przewodnikiem, w mniej niż godzinę możesz mieć gotową, dopracowaną stronę w sieci.
