Edytuj stronę główną za pomocą Elementora: dodaj moduły (tekst, obrazy, przyciski itp.)

Nauka dodawania podstawowych modułów to kluczowa umiejętność przy projektowaniu stron za pomocą Elementora. W tej sekcji krok po kroku pokażemy, jak dodać popularne elementy, takie jak tekst, obrazy i przyciski, a także jak dostosować ich styl, aby nadać stronie głównej swój własny charakter.

Przygotowanie: przejdź do trybu edycji w Elementorze.

1. Zaloguj się do panelu administracyjnego WordPressa, przejdź do „Strony” i znajdź „Stronę główną” (lub stronę, którą chcesz edytować), a następnie kliknij „Edytuj”.
2. Aby przejść do interfejsu edytora wizualnego, należy kliknąć przycisk „Edytuj za pomocą Elementora” na samej górze strony (niebieski przycisk z ikoną Elementora).

Po wejściu interfejs jest podzielony na trzy części:

• Po lewej stronie: panel modułu.(Zawiera wszystkie elementy, które można dodać)
• Środek: obszar edycji.(Wyświetlanie efektów strony w czasie rzeczywistym)
• Po prawej stronie: panel stylów.(Po wybraniu elementu można dostosować styl szczegółów)

Krok pierwszy: dodaj moduł „Tytuł” (tytuł tekstu).

Tytuł jest „kręgosłupem” strony, który pomaga odwiedzającym zrozumieć hierarchię treści.

1. Znajdź moduł nagłówka.W panelu modułów po lewej stronie znajdź moduł „Tytuł” w kategorii „Podstawowe” (ikona „T”).
2. Przeciągnij i upuść, aby dodać do strony.Naciśnij moduł „Tytuł”, przeciągnij go do środkowej strefy edytorskiej w miejscu „+ Przeciągnij element tutaj” i puść myszkę. Wówczas na stronie pojawi się domyślny tytuł „To jest tytuł”.
3. Zmień treść nagłówka.Wybierz właśnie dodany moduł nagłówka, a po jego prawej stronie pojawi się panel edytora:
   • W sekcji „Treść” → „Tekst tytułu” usuń domyślny tekst i wprowadź swój tytuł (np. „Witaj na moim blogu”).
   • Wybierz poziom w „Poziomach nagłówków” (H1 jest najwyższy i nadaje się do nagłówków głównych, a H2 jest niższy i nadaje się do nagłówków pomocniczych – wybierz odpowiedni poziom w zależności od hierarchii treści).
4. Dostosuj styl nagłówków.Aby dostosować ustawienia, kliknij zakładkę „Styl” na prawym panelu.
   • FontyW menu rozwijanym „Czcionka” wybierz preferowaną czcionkę (np. „Microsoft Yahei”, „Arial”).
   • RozmiarPrzeciągnij suwak „Rozmiar czcionki” lub wprowadź wartość bezpośrednio (zaleca się, aby rozmiar nagłówka wynosił od 24 do 48 pikseli).
   • KolorKliknij kwadrat „Kolor tekstu”, aby wybrać kolor nagłówka (np. czarny, ciemnoniebieski).
   • Wyrównaj.Kliknij przycisk „Wyrównanie tekstu”, aby ustawić tytuł jako wyrównany do lewej, środkowej lub prawej strony (zaleca się, aby tytuł na stronie głównej był wyrównany do środka).

Krok drugi: dodaj moduł „Paragrafy” (tekst główny).

Akapity są używane do przedstawiania szczegółowych informacji, takich jak wprowadzenie, instrukcje itp.

1. Dodaj moduł akapitu.W kategorii „Podstawowe” po lewej stronie znajdź moduł „Paragrafy” (ikona w formie symbolu paragrafu) i przeciągnij go poniżej modułu „Nagłówki”.
2. Zmodyfikuj treść akapitu.Wybierz moduł „Paragrafy”, a następnie wpisz treść w sekcji „Treść” → „Tekst” po prawej stronie (np. „Tutaj dzielę się moimi przemyśleniami na temat życia i notatkami z nauki. Zapraszam do częstych wizyt i dyskusji!”).
3. Optymalizuj styl akapitów.Przejdź do zakładki „Styl”:
   • Rozmiar czcionkiZaleca się ustawić rozmiar na 16–18 pikseli (ułatwi to odczytywanie).
   • Wysokość wierszaUstaw na 1,5–1,8 razy (aby odstępy między słowami były wygodniejsze).
   • KolorWybierz kolor, który będzie się różnić od koloru nagłówka (np. ciemny szary), aby uniknąć zbyt dużego podobieństwa do koloru tła.

Krok trzeci: dodaj moduł „Obrazki” (wstaw obrazek).

Obrazy mogą ożywić stronę i zaleca się wybieranie wyraźnych, odpowiednich zdjęć (np. zdjęć osobistych, zdjęć produktów, zdjęć krajobrazów).

1. Prześlij lub wybierz zdjęcie.Na lewej stronie w kategorii „Podstawowe” znajdź moduł „Obrazy” i przeciągnij go poniżej akapitu. Wybierz moduł „Obrazy”, a następnie w sekcji „Treść” po prawej stronie kliknij „Wybierz obrazy”.
   • Jeśli zdjęcie jest już na komputerze, kliknij „Prześlij plik” → wybierz zdjęcie → kliknij „Wybierz”.
   • Jeśli przesłałeś już zdjęcie, po prostu wybierz je z biblioteki mediów.
2. Dostosuj wyświetlanie obrazów.Przejdź do zakładki „Styl”:
   • RozmiarW polu „Szerokość” należy określić proporcje obrazu w stosunku do szerokości strony (np. 100% oznacza pełną szerokość ekranu, a 80% – nieco węższą).
   • Zaokrąglone rogiPrzeciągnij suwak „Promień ramki”, aby zaokrąglić rogi obrazu (im wyższa wartość, tym bardziej wyraźne są zaokrąglenia).
   • CieńAby dodać delikatny cień do obrazu (nadając mu większą głębię), należy włączyć opcję „Cienie pudełka”.
3. Dodaj opis zdjęcia (opcjonalnie).Wpisanie opisu obrazu (np. „Moje zdjęcia z podróży”) w sekcji „Treść” → „Tekst alternatywny” ułatwi wyszukiwarkom zrozumienie zawartości obrazu i poprawi pozycję w rankingu SEO.

Krok czwarty: dodaj moduł „Przyciski” (do zachęcania do kliknięcia).

Przyciski są często wykorzystywane do nakierowania odwiedzających, na przykład „Zobacz więcej”, „Skontaktuj się ze mną” lub „Kup teraz”.

1. Moduł przycisku dodawaniaNa lewej stronie, w kategorii „Podstawowe”, znajdź moduł „Przyciski” i przeciągnij go poniżej obrazka.
2. Ustaw treść przycisku i link.Moduł przycisków wyboru w sekcji „Treść” po prawej stronie:
   • TekstWprowadź tekst przycisku (np. „Zobacz moje artykuły”).
   • link (na stronie internetowej)Kliknij w pole tekstowe obok „Aktualności”, a następnie wpisz adres linku (na przykład adres strony z listą Twoich blogów lub link zewnętrzny).
     • Jeśli chcesz dodać link do strony w witrynie, możesz kliknąć ikonę „Wybierz stronę” po prawej stronie pola wprowadzania, aby bezpośrednio wybrać docelową stronę.
3. Projektowanie stylu przyciskówPrzejdź do zakładki „Styl” i stwórz przyciągający wzrok przycisk:
   • KolorWybierz biały kolor dla „Koloru tekstu” i jakiś żywy kolor (np. niebieski lub pomarańczowy) dla „Koloru tła”, aby pasował do głównego koloru na stronie.
   • RozmiarAby ułatwić klikanie przycisków, należy wybrać opcję „Średni” lub „Duży” w ustawieniach „Rozmiaru przycisków”.
   • KształtUstaw „Promień obramowania” na 5–10 pikseli (niegroźne zaokrąglenie wygląda lepiej).
   • ** hover 效果 **：点击「hover」选项卡，设置鼠标悬停时的颜色（如颜色加深），提升交互感。

Krok piąty: dostosuj odstępy pomiędzy modułami (aby strona była bardziej przejrzysta).

Po dodaniu wielu modułów mogą wystąpić problemy z ich zbyt dużą lub zbyt małą odległością, więc konieczne jest dostosowanie układu:

1. Wybierz moduł.Kliknij na krawędź modułu (pojawi się niebieska ramka).
2. Dostosuj marginesy zewnętrzne.W panelu po prawej stronie, w zakładce „Zaawansowane” → „Marginesy zewnętrzne”, ustaw odległość między modułem a elementami powyżej i poniżej (np. „Margines górny” ustaw na 30 px, aby zwiększyć odstęp od modułu powyżej).
3. Ujednolicone wyrównanie.Naciśnij i przytrzymaj. Ctrl Klawisz (lub Command Aby wybrać wiele modułów jednocześnie, kliknij przycisk „Wyrównaj” na pasku narzędzi (np. „Wyrównaj po środku”), aby elementy były bardziej uporządkowane.

Krok szósty: zapisanie i podgląd.

1. Zapisz zmiany.Kliknij przycisk „Aktualizuj” w lewym dolnym rogu strony (zaleca się regularne zapisywanie po każdej modyfikacji).
2. Efekt podglądu.Kliknij przycisk „Podgląd” w lewym górnym rogu, a następnie wybierz „Podgląd na komputerze”, „Podgląd na tablecie” lub „Podgląd na telefonie”, aby sprawdzić, jak wygląda to na różnych urządzeniach (upewnij się, że na telefonie tekst nie jest nakładany, a obrazy nie są zniekształcone).

Wskazówki dla początkujących

• Moduły można dodawać wielokrotnie: jeśli potrzebujesz więcej akapitów lub zdjęć, po prostu przeciągnij odpowiedni moduł kilka razy.
• Usunięcie modułu: po wybraniu modułu należy nacisnąć klawisz na klawiaturze. Delete Naciśnij klawisz lub kliknij ikonę „kosza” nad modułem.
• Moduł kopiowania: Po wybraniu modułu należy kliknąć ikonę „Kopiuj”, aby szybko skopiować elementy o tym samym stylu (z dowolnymi wprowadzonymi zmianami).

Dzięki powyższym krokom opanowałeś już podstawowe umiejętności dodawania modułów w Elementorze. Następnie możesz spróbować dodać takie moduły jak „Ikony”, „Linie dzielące” i „Listy”, aby urozmaicić swoją stronę główną!