Moduł 04 — Strona WWW · Lekcja 1/ 5

Twoja Strona Bez Ani Jednej Linijki Kodu - Pełny Przewodnik

Ebook już leży gotowy na dysku. Brakuje Ci teraz miejsca w sieci, które go sprzeda. Ktoś zapyta: po co strona, skoro mam bramkę płatności? Odpowiedź jest prosta - bramka tylko pobiera pieniądze. To strona pełni rolę sprzedawcy, który buduje przekonanie klienta, ZANIM ten sięgnie po kartę.

Masz do wyboru 3 drogi:

- WordPress + Elementor - najlepszy wybór na dłuższą metę (ok. 2 godziny pracy)

- Carrd - błyskawiczny start (mniej więcej 30 minut)

- AI + statyczny HTML - najmniej zachodu (jakieś 15 minut)

ŚCIEŻKA A: WordPress + Elementor (moja rekomendacja)

KROK 1: Domena i Hosting - Krok po Kroku

1.1 Domena na GoDaddy.com

Jak to zrobić:

1. Wejdź na GoDaddy.com

2. W polu wyszukiwania wpisz interesującą Cię nazwę (np. "spokojnySen")

3. Zdecyduj się na końcówkę .pl (29 zł/rok) albo .com (59 zł/rok)

4. Naciśnij "Add to Cart"

5. PILNUJ TEGO: wyłącz wszystkie proponowane dodatki (SSL, ochrona prywatności, skrzynka email) - są zbędne

6. Zapłać wyłącznie za samą domenę

7. Zanotuj: dane logowania do GoDaddy

Wskazówki dotyczące nazwy:

- Zwięźle (najlepiej do 10 znaków)

- Prosto do wpisania z pamięci

- Powiązana z tematem (np. lepszysen.pl, finansenastart.com)

- Odpuść sobie myślniki i liczby

1.2 Hosting na CyberFolks.pl

Jak to zrobić:

1. Otwórz CyberFolks.pl

2. Wybierz "Hosting WWW" → "Hosting Start" (4.99 zł/miesiąc)

3. Przy polu "Domena" zaznacz "Mam już domenę"

4. Wklej domenę zarejestrowaną w GoDaddy

5. Podaj dane, opłać zamówienie

6. Otrzymasz: maila z dostępami do panelu klienta

1.3 Połączenie Domeny z Hostingiem

W panelu GoDaddy:

1. Zaloguj się na GoDaddy.com

2. Przejdź do "My Products" → "DNS"

3. W bloku "Nameservers" naciśnij "Change"

4. Zaznacz "Custom"

5. Wpisz serwery nazw z CyberFolks:

- ns1.cyberfolks.pl

- ns2.cyberfolks.pl

6. Zatwierdź przyciskiem "Save"

Uzbrój się w cierpliwość na 24 godziny - tyle mniej więcej zajmuje propagacja DNS. Zarówno CyberFolks, jak i GoDaddy mają wyjątkowo pomocny support, który bez problemu przeprowadzi Cię przez podpięcie domeny do strony!

1.4 Instalacja WordPressa

W panelu CyberFolks:

1. Wejdź do panelu klienta

2. Przy swoim hostingu kliknij "Zarządzaj"

3. Przejdź do "Aplikacje" → "WordPress"

4. Naciśnij "Zainstaluj"

5. Zostaw ustawienia domyślne:

- Katalog: nic nie wpisuj (instalacja w katalogu głównym)

- Nazwa bazy: bez zmian

- Login administratora: ustaw własny (np. admin)

- Hasło: wygeneruj silne i KONIECZNIE je zapisz

6. Kliknij "Zainstaluj"

Po zakończeniu instalacji dostaniesz:

- Adres strony: https://twojadomena.pl

- Panel administracyjny: https://twojadomena.pl/wp-admin

- Login i hasło do panelu

KROK 2: Konfiguracja WordPressa - Baza Ustawień

2.1 Pierwsze Logowanie

1. Wejdź na https://twojadomena.pl/wp-admin

2. Podaj login i hasło

3. Naciśnij "Zaloguj się"

2.2 Kluczowe Ustawienia

Ustawienia → Ogólne:

- Tytuł witryny: nazwa Twojego biznesu lub produktu

- Motto: zostaw puste

- Strefa czasowa: Warszawa

Ustawienia → Odczyt:

- Strona główna: strona statyczna (dobierzemy ją za chwilę)

- Liczba wpisów na stronie: 5

Ustawienia → Stałe odnośniki:

- Zaznacz "Nazwa wpisu" (to najlepsza opcja pod SEO)

2.3 Instalacja Motywu Astra

1. Wygląd → Motywy → Dodaj nowy

2. Wyszukaj "Astra"

3. Naciśnij "Zainstaluj" → "Aktywuj"

2.4 Instalacja Elementora

1. Wtyczki → Dodaj nową

2. Wpisz w wyszukiwarce "Elementor"

3. Zainstaluj "Elementor Website Builder" (ponad 5 mln instalacji)

4. Naciśnij "Zainstaluj" → "Aktywuj"

2.5 Konfiguracja Elementora

1. Po aktywacji pokaże się ekran "Welcome to Elementor"

2. Przeklikaj wszystko przyciskiem "Skip"

3. Settings → General:

- Disable Default Colors: ON

- Disable Default Fonts: ON

4. Settings → Advanced:

- CSS Print Method: Internal Embedding

KROK 3: Odwzorowanie Struktury ebookowy.com

3.1 Rozbiór ebookowy.com - Co Warto Przejąć

Szkielet, który przenosisz do siebie:

1. SEKCJA HERO

- Główny nagłówek

- Zdanie uzupełniające

- Przycisk CTA

2. CO OTRZYMUJESZ

- Wykaz 5-7 korzyści

- Ikona przy każdym punkcie

3. BONUSY

- 3-5 dodatkowych materiałów

- Podana wartość bonusów

4. DOWÓD SPOŁECZNY

- Wypowiedzi klientów

- Konkretne liczby (ilu kupiło)

5. FAQ

- 5-8 najczęściej powracających pytań

6. OSTATNIE CTA

- Finalne zachęcenie do zakupu

- Przycisk okazalszy niż poprzednie

3.2 Budowa Strony w Elementorze

Zakładanie nowej strony:

1. Strony → Dodaj nową

2. Tytuł: "Home" albo "Strona główna"

3. Kliknij "Edytuj za pomocą Elementor"

Ustawienia strony wewnątrz Elementora:

1. Kliknij ikonę koła zębatego na dole

2. Page Layout: Full Width

3. Hide Title: ON

4. Update

3.3 Składanie Sekcji Hero

Dodaj nową sekcję:

1. Naciśnij "+", aby wstawić sekcję

2. Zdecyduj się na jedną kolumnę

3. Otwórz ustawienia sekcji

Ustawienia sekcji:

- Layout → Content Width: Full Width

- Style → Background Type: Classic

- Color: #f8f9fa (delikatna szarość)

- Advanced → Padding: 80px góra/dół, 20px boki

Wstaw nagłówek:

1. Przeciągnij widget "Heading" na sekcję

2. Content:

- Title: Twój główny nagłówek (weź układ z ebookowy.com)

- HTML Tag: H1

3. Style:

- Color: #2c3e50 (głęboki granat)

- Typography: 36px, Weight: 700

- Alignment: Center

Wstaw zdanie uzupełniające:

1. Przeciągnij widget "Text Editor"

2. Wpisz swój podtytuł

3. Style:

- Color: #7f8c8d (szarość)

- Typography: 18px, Weight: 400

- Alignment: Center

Wstaw przycisk CTA:

1. Przeciągnij widget "Button"

2. Content:

- Text: "Kup Teraz - [CENA] ZŁ"

- Link: na razie zostaw puste (uzupełnimy później)

3. Style:

- Background Color: #e74c3c (czerwień)

- Text Color: #ffffff (biel)

- Typography: 20px, Weight: 600

- Border Radius: 5px

- Padding: 15px góra/dół, 40px boki

3.4 Sekcja "Co Otrzymujesz"

Nowa sekcja:

1. Wstaw sekcję z jedną kolumną

2. Background: biel (#ffffff)

3. Padding: 60px góra/dół

Nagłówek sekcji:

1. Widget "Heading"

2. Title: "Co Otrzymujesz w [Nazwa Produktu]"

3. HTML Tag: H2

4. Style: 28px, Weight: 600, Center

Lista korzyści:

1. Widget "Icon List"

2. Wprowadź 5-7 pozycji:

- Icon: ptaszek lub strzałka

- Text: konkretna korzyść

3. Style ikony:

- Color: #27ae60 (zieleń)

- Size: 16px

4. Style tekstu:

- Color: #2c3e50

- Typography: 16px

3.5 Sekcja Bonusów

Układ:

1. Nowa sekcja z 3 kolumnami

2. W obrębie każdej kolumny:

- Image: okładka bonusu (przygotuj w Canva)

- Heading: nazwa bonusu

- Text: zwięzły opis

- Price: wartość bonusu

Ustawienia kolumn:

- Width: po 33% każda

- Gap: 20px odstępu między kolumnami

3.6 Sekcja Dowodu Społecznego

Wypowiedzi klientów:

1. Widget "Testimonial" (lub "Text Editor")

2. Wzór opinii:

"[Treść opinii]"

- [Imię], [wiek] lat, [miasto]

Przykłady wiarygodnie brzmiących opinii:

"Kompletnie nie wierzyłam, że kilka drobnych zmian wieczorem tak odmieni moje noce. Zasypiam w kwadrans i śpię aż do rana."

- Katarzyna, 38 lat, Poznań

"Od miesiąca budzę się bez bólu głowy. Nie sądziłem, że to w ogóle jest możliwe."

- Tomasz, 45 lat, Wrocław

KROK 4: Dopasowanie Do Twojej Niszy

4.1 Wymiana Tekstów - Uzupełnij Luki

Wzór nagłówka:

WERSJA WYJŚCIOWA:

"Jak Zarobiłem 41,860 zł W 76 Dni Na 43-Stronicowym PDF-ie"

TWÓJ WZÓR:

"Jak [OSIĄGNĄŁEM EFEKT] W [CZAS] [METODĄ/PRODUKTEM]"

PRZYKŁADY:

"Jak Wyciszyłam Migreny W 21 Dni Bez Silnych Tabletek"

"Jak Zaczęłam Zasypiać W 15 Minut W 10 Dni Bez Wizyty U Lekarza"

"Jak Postawiłam Dochodowy Sklep Online Za 3000 zł W 2 Miesiące"

Wzór listy korzyści:

WERSJA WYJŚCIOWA:

"• Jak wyłowić opłacalną niszę

• Jak napisać ebook z pomocą AI

• Jak zbudować stronę sprzedażową"

TWÓJ WZÓR:

"• Jak [ETAP 1 PROCESU]

• Jak [ETAP 2 PROCESU]

• Jak [ETAP 3 PROCESU]"

4.2 Gotowe Wersje Dla Konkretnych Nisz

Bezsenność u dorosłych:

Nagłówek: "Jak Zasnąć W 15 Minut I Przespać Całą Noc Już W 10 Dni Bez Tabletek"

Co otrzymujesz:

• Jak wychwycić nawyki, które rujnują Twój sen

• 4 techniki błyskawicznego wyciszenia układu nerwowego

• Wieczorny rytuał, który naprawdę usypia

• Co zrobić, gdy budzisz się o 3 nad ranem

• Plan naprawy snu rozpisany na 10 dni

Bonusy:

• Bonus #1: Lista 30 produktów wspierających sen (wartość 24 zł)

• Bonus #2: Dziennik snu do wydruku (wartość 34 zł)

• Bonus #3: Nagrania relaksacyjne przed snem (wartość 44 zł)

Migrena i napięciowe bóle głowy:

Nagłówek: "Jak Zredukowałam Migreny Z 8 Do 1 W Miesiącu Bez Mocnych Leków"

Co otrzymujesz:

• 6 sposobów na przerwanie ataku w 20 minut

• Jak namierzyć własne wyzwalacze bólu

• Jak ułożyć jadłospis, który nie prowokuje migreny

• Techniki oddechowe rozładowujące napięcie

• Plan profilaktyki na 4 tygodnie

Bonusy:

• Bonus #1: Dzienniczek migrenowy do wydruku (wartość 24 zł)

• Bonus #2: Wykaz 25 produktów-wyzwalaczy (wartość 34 zł)

• Bonus #3: Zestaw ćwiczeń na kark i barki (wartość 44 zł)

KROK 5: Szlifowanie i Ustawienia Końcowe

5.1 Wersja Mobilna (Responsywność)

1. W Elementorze naciśnij ikonę telefonu (na dole ekranu)

2. Przejrzyj każdą sekcję w widoku mobilnym

3. Najczęściej wymagane poprawki:

- Zmniejsz padding sekcji (40px zamiast 80px)

- Rozmiar nagłówka: 24px na telefonie

- Przycisk: pełna szerokość na mobile

- Kolumny: układają się jedna pod drugą (dzieje się automatycznie)

5.2 Przyspieszenie Strony

Kompresja grafik:

1. Wtyczki → Dodaj nową

2. Zainstaluj "Smush"

3. Smush → Bulk Smush → Smush All

Cache:

1. Zainstaluj "LiteSpeed Cache" (za darmo)

2. LiteSpeed Cache → General: ON

3. Cache → Page Cache: ON

Cloudflare (darmowy CDN):

1. Załóż konto na Cloudflare.com

2. Dodaj swoją domenę

3. Podmień serwery nazw na te wskazane przez Cloudflare

4. W Cloudflare: Speed → Optimization → Auto Minify: CSS + JS + HTML

5.3 Ustawienie Strony Głównej

1. Ustawienia → Odczyt

2. Strona główna wyświetla: statyczna strona

3. Strona główna: wskaż stronę, którą zbudowałeś

4. Zapisz

5.4 Podstawy SEO

1. Zainstaluj "Yoast SEO"

2. SEO → General → First-time Configuration

3. Przejdź przez kreator (zaznaczaj najprostsze opcje)

4. Na swojej stronie:

- Yoast → Focus Keyword: Twoja główna fraza

- Meta Title: maks. 60 znaków

- Meta Description: maks. 155 znaków

KROK 6: Podpięcie Naffy i Testy

6.1 Ustawienie Przycisków

1. W Elementorze kliknij na przycisk

2. Content → Link:

- URL: link z Naffy.io do Twojego produktu

- Open in New Tab: ON

3. Kliknij Update na stronie

6.2 Pełny Test Strony

Lista kontrolna:

- [ ] Strona się otwiera (sprawdź https://twojadomena.pl)

- [ ] Wersja mobilna działa (odpal na telefonie)

- [ ] Każdy przycisk kieruje do Naffy

- [ ] Naffy działa (zrób testowy zakup za 1 zł)

- [ ] Test szybkości (Google PageSpeed >70)

- [ ] Podstawy SEO (tytuł i opis uzupełnione)

Test płatności:

1. Naciśnij "Kup Teraz" na swojej stronie

2. Powinien otworzyć się Naffy z Twoim produktem

3. Przeprowadź testowy zakup (potem możesz go anulować)

4. Zobacz, czy dociera mail z potwierdzeniem

ŚCIEŻKA B: Carrd.co - Ekspresowy Setup

Dlaczego Carrd?

- ✅ Gotowe w jakieś 30 minut

- ✅ Szablony przypominające landing page

- ✅ Hosting w cenie

- ✅ Domyślnie zoptymalizowany pod mobile

- ❌ Mniejsza swoboda niż w WordPressie

- ❌ Trudniej o wysokie pozycje w Google

- ❌ Limit 3 stron w wersji darmowej

Carrd Krok Po Kroku:

1. Rejestracja i Wybór Szablonu

1. Wejdź na Carrd.co

2. Kliknij "Get Started" → "Start Building"

3. Z kategorii szablonów wybierz "Landing"

4. Poszukaj "Product Launch" albo "Sales Page"

5. Naciśnij "Use This Template"

2. Personalizacja Treści

Sekcja Hero:

1. Kliknij na nagłówek

2. Text: Twój główny headline

3. Style: Font size 48px, Weight Bold

4. Color: #2c3e50

Przycisk CTA:

1. Kliknij na przycisk

2. Text: "Kup Teraz - [CENA] ZŁ"

3. Link: URL z Naffy.io

4. Style: Background #e74c3c, Text #ffffff

Sekcja z Korzyściami:

1. Zredaguj każdy punkt listy

2. Wpisz własne korzyści

3. Icons: zostaw domyślne albo zamień na ptaszki

3. Podpięcie Własnej Domeny

1. Settings → Custom Domain

2. Wpisz swoją domenę (potrzebny Plan Pro - $19/rok)

3. DNS Settings: Carrd poda Ci dane do konfiguracji DNS

4. W GoDaddy ustaw A Record na adres IP wskazany przez Carrd

4. Publikacja

1. Settings → Publish

2. Kliknij "Publish Site"

3. URL: yoursite.carrd.co (albo Twoja domena)

ŚCIEŻKA C: AI + Statyczny HTML

Kiedy Po Nią Sięgnąć:

- Zupełnie nie chcesz grzebać w technikaliach

- Strona jest Ci potrzebna "na już"

- Budżet = 0 zł

- Ogarniasz choć trochę HTML/CSS

Setup AI + Static:

1. Wygenerowanie Kodu

1. Otwórz Claude.ai lub ChatGPT

2. Prompt:

Przygotuj kompletną stronę sprzedażową w HTML+CSS dla ebooka dotyczącego [TWOJA NISZA].

Układ:

- Sekcja hero z nagłówkiem i przyciskiem CTA

- Sekcja "Co otrzymujesz" z listą korzyści

- Bonusy (3 dodatkowe materiały)

- Opinie klientów (3 realistyczne)

- FAQ (5 pytań)

- Finalne CTA

Styl:

- Czysty, nowoczesny wygląd

- Responsywny na telefonach

- Kolorystyka: granat + biel + czerwony przycisk CTA

- Font bezszeryfowy

Nagłówek: "[TWÓJ NAGŁÓWEK]"

CTA: "Kup Teraz za [CENA] ZŁ"

2. Hosting na GitHub Pages

1. Załóż konto na GitHub.com

2. New Repository → public

3. Nazwa: twojanazwa.github.io

4. Create repository

5. Upload files → wklej kod HTML wygenerowany przez AI

6. Nazwa pliku: index.html

7. Commit changes

8. Settings → Pages → Source: Deploy from branch

9. URL: https://twojanazwa.github.io

3. Własna Domena (Opcjonalnie)

1. W repozytorium utwórz plik CNAME

2. Zawartość: twojadomena.pl

3. W GoDaddy:

- A Record: 185.199.108.153

- CNAME www: twojanazwa.github.io

Rozwiązywanie Problemów - Konkretne Recepty

Problem: "Strona wciąż się nie ładuje po 24h"

Diagnoza:

1. CMD → ping twojadomena.pl

2. Jeśli odpowiada adresem IP hostingu = DNS jest OK

3. Jeśli timeout = coś nie gra z DNS

Rozwiązanie:

1. Zajrzyj do serwerów nazw w GoDaddy

2. Powinny być: ns1.cyberfolks.pl, ns2.cyberfolks.pl

3. Jeśli są inne = popraw i odczekaj kolejne 24h

Problem: "Panel WordPress nie działa"

Możliwe źródła:

1. Zły adres: upewnij się, że to https://domena.pl/wp-admin

2. Cache: Ctrl+F5 lub okno incognito

3. Wtyczka: wyłącz wszystkie wtyczki przez FTP

Ratunek przez FTP:

1. Panel CyberFolks → File Manager

2. public_html/wp-content/plugins

3. Zmień nazwę folderu plugins na plugins-OFF

4. Spróbuj zalogować się do WP

5. Włączaj wtyczki pojedynczo

Problem: "Elementor się wykłada"

Typowe przyczyny:

1. PHP Version: wymagane minimum 7.4

2. Memory Limit: minimum 256MB

3. Max Execution Time: minimum 300s

Weryfikacja w CyberFolks:

1. Panel → PHP → Wersja: 7.4 albo 8.0

2. Zasoby → Memory Limit: 256M

3. Jeśli wartości są niższe = zmień ustawienia

Problem: "Strona wczytuje się 10+ sekund"

Diagnostyka:

1. GTmetrix.com → wklej adres strony

2. Sprawdź Page Load Time oraz Page Size

Najczęstsze przyczyny:

1. Ciężkie grafiki: powyżej 1MB każda

2. Brak cache: wtyczki nie zostały zainstalowane

3. Nadmiar wtyczek: ponad 20 aktywnych

4. Słaby hosting: przejdź na wyższy pakiet

Konkretne recepty:

1. Grafiki: kompresuj w TinyPNG.com przed wgraniem

2. Cache: LiteSpeed Cache albo WP Rocket

3. Wtyczki: skasuj wszystko, czego nie używasz

4. Hosting: awansuj do planu Pro (CyberFolks)

Problem: "Przycisk Naffy nie reaguje"

Lista kontrolna:

1. URL: skopiuj go jeszcze raz z Naffy

2. Format: musi rozpoczynać się od https://

3. Spacje: żadnych spacji przed i po adresie

4. New Tab: włączone w ustawieniach przycisku

Test URL:

1. Wklej link z Naffy wprost do przeglądarki

2. Jeśli działa = usterka jest po stronie przycisku

3. Jeśli nie = usterka jest po stronie Naffy

Dla Ambitnych - Dodatkowe Sztuczki

Custom CSS Dla Ładniejszego Wyglądu

/* Dodaj w Elementor → Settings → Custom CSS */

/* Efektowniejsze przyciski */

.elementor-button {

box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);

transition: all 0.3s ease;

}

.elementor-button:hover {

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);

}

/* Płynne przewijanie */

html {

scroll-behavior: smooth;

}

/* Poprawki na mobile */

@media (max-width: 768px) {

.elementor-heading-title {

line-height: 1.2;

}

.elementor-button {

width: 100%;

margin: 10px 0;

}

}

Konfiguracja Google Analytics

1. Analytics.google.com → utwórz konto

2. Admin → Tracking Code → skopiuj GA ID

3. WordPress: wtyczka "GA Google Analytics"

4. Wklej GA ID w ustawieniach wtyczki

Konfiguracja Facebook Pixel

1. business.facebook.com → Events Manager

2. Connect Data Sources → Web → Facebook Pixel

3. Skopiuj Pixel ID

4. WordPress: wtyczka "PixelYourSite"

5. Wklej Pixel ID w ustawieniach

Ostatnia Lista Kontrolna - Zanim Opublikujesz

Kontrola Techniczna:

- [ ] Strona otwiera się pod głównym adresem

- [ ] SSL aktywne (https:// z zieloną kłódką)

- [ ] Responsywność (test na telefonie)

- [ ] Szybkość >70 (PageSpeed Insights)

- [ ] Wszystkie odnośniki działają (szczególnie CTA)

- [ ] Formularz kontaktowy (jeśli go dodałeś)

- [ ] Skonfigurowana kopia zapasowa (UpdraftPlus)

Kontrola Treści:

- [ ] Nagłówek konkretny i chwytliwy

- [ ] Korzyści napisane językiem klienta

- [ ] CTA jasne i nasycone emocją

- [ ] Dowód społeczny brzmi wiarygodnie

- [ ] FAQ rozwiewa realne wątpliwości

- [ ] Kontakt widoczny (mail/telefon)

Kontrola Biznesowa:

- [ ] Naffy skonfigurowane i przetestowane

- [ ] Cena wyświetla się prawidłowo

- [ ] Automatyczny mail po zakupie

- [ ] Zasady zwrotów i reklamacji

- [ ] Polityka prywatności (RODO)

- [ ] Regulamin sprzedaży

I Co Teraz?

Strona stoi i działa? Brawo! Kolejne przystanki to:

1. Sekcja 2: Konfiguracja Naffy.io - dopracowanie płatności i upselli

2. Sekcja 3: Copywriting - podkręcenie tekstów pod konwersję

3. Sekcja 4: Nagłówki - testowanie A/B kolejnych wersji

4. Sekcja 5: VSL - dodanie wideo, które windują konwersję

Zapamiętaj: strona nie ma być idealna. Ma działać i sprzedawać. Ulepszać ją będziesz już w trakcie, na żywym organizmie.

Pierwsza odsłona = 80% inspiracji ebookowy.com + Twoja nisza = w zupełności wystarczy, żeby ruszyć i zdobyć pierwsze sprzedaże.