Jak dodać obraz nagłówkowy w WordPressie (działa ze wszystkimi motywami)

Chcesz, aby Twoja witryna WordPress wyglądała bardziej profesjonalnie? Obraz nagłówka to najlepszy wybór.

Obraz hero to pierwsza rzecz, którą ludzie widzą, gdy trafiają na Twoją witrynę. Masz tylko około 3 sekund, aby przyciągnąć ich uwagę, więc ważne jest, aby zrobić to dobrze.

Budujemy strony WordPress od ponad dekady – i pamiętamy, kiedy obrazy nagłówkowe po raz pierwszy stały się czymś ważnym.

Wtedy zmagaliśmy się tak samo jak wszyscy inni. Obrazy wyglądały dziwnie – za duże na komputerze, ściśnięte na telefonie lub po prostu zepsute. Ale teraz opanowaliśmy to do perfekcji.

Pokażemy Ci najprostsze sposoby na dodanie obrazu nagłówkowego do Twojej witryny WordPress. Niezależnie od tego, czy lubisz używać kreatorów stron, czy wolisz edytor bloków, mamy coś dla Ciebie.

Najpierw najważniejsze: Przygotuj swój hero image w WordPress

Zanim dodasz obraz bohatera do swojej strony WordPress, musisz stworzyć taki, który przyciągnie uwagę odwiedzających. Świetna sekcja bohatera zaczyna się od oszałamiającego obrazu, który pokazuje, o czym jest Twoja strona.

Canva to popularne narzędzie do projektowania grafik na strony internetowe. Jest łatwe w użyciu i zawiera mnóstwo szablonów do tworzenia obrazów nagłówkowych. Jeśli nie przepadasz za Canvą, mamy listę alternatyw dla Canvy, które możesz sprawdzić, aby znaleźć coś dla siebie.

Tworząc obraz nagłówka, warto pamiętać o kilku rzeczach.

Najpierw pomyśl o rozmiarze. Główne obrazy zazwyczaj nie są zbyt wysokie i często pokrywają całą szerokość Twojej strony głównej.

Typowy rozmiar obrazu nagłówkowego w WordPress to około 1920 pikseli szerokości na 400-600 pikseli wysokości (lub czasami więcej). Ale może się to zmienić w zależności od Twojego motywu WordPress.

Następnie zastanów się, jaką wiadomość chcesz wysłać. Twój obraz nagłówkowy powinien szybko pokazać, o czym jest Twoja strona internetowa. Może to być obraz nagłówkowy produktu, fotografia reprezentująca Twoją markę, a nawet imponujące pełnoekranowe tło wideo.

Na przykład, zdecydowaliśmy się umieścić naszego założyciela, Syeda Balkhi, na głównym zdjęciu naszej strony. Pokazuje to, że za naszą marką stoi prawdziwa osoba, która jest oddana pomaganiu użytkownikom WordPress w osiąganiu sukcesów, co jest istotą WPBeginner.

Ponadto, zostaw trochę miejsca na tekst. Wiele sekcji nagłówkowych ma nagłówek lub przycisk. Upewnij się, że jest na nie miejsce i że są łatwe do odczytania.

Dobrym pomysłem jest przyjrzenie się innym stronom internetowym w Twojej branży w poszukiwaniu przykładów sekcji nagłówkowej. Może to dać Ci pomysły na własny projekt. Niektóre z przykładów w naszych przykładach stron internetowych WordPress mogą stanowić świetną inspirację.

Mając to z głowy, przyjrzyjmy się, jak faktycznie dodać obraz nagłówka.

Jak dodać obraz nagłówkowy w WordPress

Podczas badania do tego poradnika szybko zdaliśmy sobie sprawę, że dodanie obrazu nagłówkowego do klasycznych motywów WordPress nie zawsze jest proste. Proces może się znacznie różnić w zależności od motywu, ponieważ niektóre mają wbudowane sekcje nagłówkowe, a inne nie.

Weźmy na przykład motyw Sydney. Posiada on gotową sekcję hero, co znacznie ułatwia sprawę.

Jeśli próbujesz dodać nagłówek do swojej istniejącej witryny, ale Twój motyw nie ma wbudowanej funkcji do tego, może to być frustrujące.

Dla tych, którzy dopiero zaczynają i nie mają nic przeciwko wyborowi nowego motywu, zalecamy przełączenie się na taki z wbudowaną sekcją nagłówkową, ponieważ może to zaoszczędzić czas w dłuższej perspektywie.

Jeśli szukasz rekomendacji motywów, możesz zapoznać się z naszymi ekspertyzami dotyczącymi najlepszych i najpopularniejszych motywów WordPress na rynku. Co więcej, możesz użyć konstruktora stron z motywem, który ma sekcję główną, co pokażemy Ci w metodzie 3.

Przed wprowadzeniem jakichkolwiek dużych zmian zawsze sugerujemy użycie strony stagingowej do dokładnego przetestowania nowych motywów. W ten sposób możesz mieć pewność, że dokonujesz właściwego wyboru dla swojej witryny.

Jeśli nie wiesz, jak to zrobić, zapoznaj się z naszym przewodnikiem na temat jak prawidłowo zmienić motyw WordPress.

Zadowolony z obecnego klasycznego motywu? Żaden problem. Przejdź do metody 4, gdzie pokażemy Ci, jak dodać sekcję nagłówkową za pomocą wtyczki. To podejście działa z każdym motywem, dzięki czemu możesz stworzyć oszałamiający obraz nagłówkowy bez przeprojektowywania całego wyglądu swojej witryny.

Możesz użyć poniższych szybkich linków, aby przejść do preferowanej metody:

• Metoda 1: Korzystanie z narzędzia do dostosowywania motywu (tylko klasyczne motywy)
• Method 2: Using Full Site Editor (Block Themes Only)
  • Krok 1: Otwórz edytor całych witryn
  • Krok 2: Dodaj blok okładki do swojej strony/szablonu
  • Krok 3: Skonfiguruj obraz w swoim bloku nagłówka
  • Krok 4: Dodaj bloki do swojego bloku okładki
• Method 3: Using a Page Builder (Custom Landing Pages/Themes)
  • Krok 1: Konfiguracja SeedProd
  • Krok 2: Dostosuj swoją sekcję nagłówkową
  • Krok 3: Dodaj i dostosuj więcej bloków do swojej sekcji nagłówka
• Method 4: Using Hero Banner Plugin + Shortcode (All Themes)
  • Krok 1: Skonfiguruj wtyczkę Hero Banner
  • Krok 2: Znajdź selektor CSS sekcji nagłówka Twojego motywu
  • Krok 3: Dodaj swój Shortcode do WPCode
• Często zadawane pytania dotyczące obrazów nagłówków

Metoda 1: Korzystanie z narzędzia do dostosowywania motywu (tylko klasyczne motywy)

Jeśli używasz klasycznego motywu z sekcją hero, taką jak Sydney, możesz dostosować swój obraz hero za pomocą Personalizatora motywu. Po prostu przejdź do Wygląd » Dostosuj w swoim panelu WordPress, aby rozpocząć.

💡 Szybka uwaga: Jeśli dostosowywacz motywów jest brakujący w Twoim panelu, prawdopodobnie używasz motywu blokowego i powinieneś przejść do metody 2.

Pasek boczny powinien zawierać kilka opcji dostosowywania klasycznego motywu.

W Sydney opcja dostosowywania sekcji hero nazywa się „Obszar Hero”, ale to konkretne menu będzie się różnić w zależności od motywu. Kliknij ją.

Motyw Sydney ma 3 menu do tworzenia sekcji nagłówkowej: Typ nagłówka, Suwak nagłówka i Media nagłówka.

Użyjemy tylko pierwszych dwóch, ponieważ wystarczą one do dodania sekcji nagłówka do naszych celów.

Najpierw wybierz „Typ nagłówka”.

W sekcji Typ nagłówka zostaniesz poproszony o wybór rodzaju mediów, które dodasz do swojej sekcji nagłówkowej.

Możesz wybrać między pełnoekranowym suwakiem, filmem, obrazem lub brakiem nagłówka.

Wybierzemy pełnoekranowy slider dla sekcji bohatera na naszej stronie głównej i całej naszej witrynie. Powodem jest to, że pozwala nam to stworzyć slider z wieloma obrazami dla bohatera i dodać tekst oraz przycisk na wierzchu obrazów.

Teraz wróć do menu Obszar nagłówka i wybierz „Suwak nagłówka”.

Tutaj otwórz kartę „Pierwszy slajd” i kliknij przycisk „Wybierz obraz”.

Spowoduje to otwarcie biblioteki multimediów WordPress, gdzie możesz przesłać nowy obraz lub wybrać istniejący dla swojej sekcji nagłówka.

Po przesłaniu obrazu możesz przewinąć w dół i zastąpić tekst w polach tytułu i podtytułu.

Zmiany, które wprowadzisz, powinny być automatycznie odzwierciedlone w podglądzie strony.

Jeśli chcesz dodać więcej niż jeden obraz do sekcji nagłówka, możesz powtórzyć te same kroki z pozostałymi slajdami.

W przeciwnym razie możesz przewinąć w dół do menu „Przycisk suwaka”.

Tutaj możesz zmienić adres URL i tekst dla przycisku wezwania do działania.

Po tym ponownie przewiń w dół do zakładki „Ustawienia suwaka”.

Tutaj możesz dostosować prędkość suwaka, wybrać wyświetlanie tego samego tekstu na wszystkich slajdach i sprawić, by zachowanie suwaka było responsywne.

Jeśli chcesz zmienić kolor przycisku, wróć do głównego menu narzędzia dostosowywania motywu.

Następnie kliknij „Ogólne”.

Powinieneś teraz zobaczyć kilka menu do dostosowywania ogólnych ustawień Twojego motywu.

Tutaj po prostu kliknij „Przyciski”.

Teraz możesz przewinąć w dół do sekcji „Stan domyślny” i „Stan po najechaniu”, gdzie możesz zmienić kolor przycisku w zależności od jego stanu.

Aby zmodyfikować kolor, po prostu kliknij narzędzie wyboru koloru i wybierz nowy kolor.

Większość motywów WordPress pozwala również na dostosowanie kolorów i typografii projektu. Jednak zmiany, które wprowadzisz, zazwyczaj będą dotyczyć całej Twojej witryny, a nie tylko sekcji nagłówkowej, więc pamiętaj o tym.

W każdym razie, tak wygląda nasz obraz główny, stworzony za pomocą motywu Sydney:

Metoda 2: Korzystanie z edytora pełnej witryny (tylko motywy blokowe)

Jeśli używasz motywu blokowego, możesz użyć bloku Cover w Edytorze Pełnej Witryny, aby łatwo utworzyć obraz nagłówka w WordPressie. Nie potrzebujesz wtyczki.

Krok 1: Otwórz edytor całych witryn

Najpierw przejdź do Wygląd » Edytor w swoim panelu administracyjnym WordPress.

Teraz zobaczysz główne menu edytora.

Załóżmy, że chcesz dodać swój obraz hero tylko na stronę główną.

W takim przypadku po prostu kliknij podgląd motywu po prawej stronie strony.

Jeśli chcesz dodać obraz nagłówka do innej strony, niestandardowego szablonu strony lub wzorca bloków, możesz przeczytać nasz przewodnik na temat Edycji pełnej witryny WordPress, aby uzyskać więcej informacji.

Krok 2: Dodaj blok okładki do swojej strony/szablonu

Ponieważ sekcja nagłówka jest zazwyczaj umieszczana powyżej linii zgięcia (górna część strony, która pojawia się, gdy odwiedzający trafiają na stronę), musisz upewnić się, że jesteś we właściwej lokalizacji. Sekcja nagłówka znajduje się zazwyczaj tuż pod nagłówkiem.

Gdy to zrobisz, musisz albo usunąć istniejące bloki w tym miejscu, albo dodać nowy blok Grupy bezpośrednio nad tymi istniejącymi blokami.

W naszym przypadku po prostu usuniemy bloki, które już znajdowały się na naszej stronie głównej. Jeśli chcesz zrobić to samo, możesz kliknąć przycisk „Widok listy” po lewej stronie strony.

Następnie znajdź bloki, które musisz usunąć, aby zrobić miejsce na sekcję nagłówka. Po zlokalizowaniu kliknij przycisk z trzema kropkami i wybierz „Usuń”.

Teraz wybierz blok, który znajdował się bezpośrednio pod usuniętymi blokami.

Następnie kliknij przycisk z trzema kropkami i wybierz „Dodaj przed”. Spowoduje to dodanie bloku bezpośrednio nad tym blokiem i poniżej sekcji nagłówka.

Na tym etapie możesz kliknąć przycisk „+”, który pojawia się w rzekomej sekcji nagłówkowej.

Musisz dodać blok Grupa tutaj, ponieważ pozwoli to na zarządzanie obrazem nagłówkowym, tekstem, przyciskiem i innymi elementami jako pojedynczym blokiem, gdy będzie to potrzebne.

Możesz teraz wybrać kontener, do którego chcesz dodać swoje bloki.

Dla demonstracji wybraliśmy podstawowy kontener Grupa.

Następnie kliknij przycisk „+” w bloku Grupa.

Tutaj wybierz blok „Okładka”.

Następnie zobaczysz 3 opcje dodania obrazu tła dla swojego bohatera: przesłanie go z komputera, dodanie z biblioteki multimediów lub użycie obrazu wyróżnionego.

W naszym przykładzie klikniemy na „Biblioteka mediów” i wybierzemy istniejący obraz.

Jeśli przesłanie obrazu zakończy się sukcesem, od razu zobaczysz swój obraz nagłówka. Istnieją jednak pewne poprawki, które musisz wprowadzić.

Krok 3: Skonfiguruj obraz w swoim bloku nagłówka

Najpierw wybierz sam blok „Okładka”, aby jego pasek narzędzi pojawił się na górze.

Następnie kliknij przycisk „Wyrównanie” i wybierz „Pełna szerokość”.

Następnie możesz kliknąć ikonę duotonu, aby zmienić filtr duotonu zastosowany do obrazu.

Jeśli nie jesteś jego fanem, możesz go później wyłączyć, a pokażemy Ci, jak to zrobić.

Następnie możesz kliknąć ikonę pozycji treści, aby zmienić miejsce wyświetlania tekstu i przycisku na obrazie.

Zdecydowaliśmy się na lewą stronę od środka, ponieważ punkt centralny obrazu znajduje się po prawej.

Teraz kliknij ikonę „Ustawienia” i przejdź do zakładki „Blok”.

Tutaj przewiń w dół do Ustawień. Tutaj możesz opcjonalnie dodać efekt paralaksy do swojego obrazu („Stałe tło”) lub użyć powtarzającego się tła.

Możesz również przewinąć w górę i przełączyć się na ikonę stylów.

Tutaj możesz ustawić przezroczystość nakładki na 0, aby obraz nie używał żadnego filtra.

Jeśli chcesz zmienić wysokość obrazu, możesz wprowadzić liczbę w pikselach w polu „Minimalna wysokość okładki”.

Postanowiliśmy ustawić nasz obraz na 400 pikseli.

Dowolnie dostosuj inne ustawienia, takie jak obramowanie i cień, odstępy między blokami, wypełnienie i margines, typografia i tak dalej.

Krok 4: Dodaj bloki do swojego bloku okładki

Jesteśmy teraz gotowi do dodania kolejnych elementów do Twojego głównego obrazu. Powinieneś zobaczyć tekst „Napisz tytuł” na górze obrazu.

Pro tip: Zamiast dodawać nagłówek bezpośrednio, kliknij przycisk „+” i najpierw dodaj kolejny blok Grupa. Pomyśl o tym bloku Grupa jako o kontenerze na tekst i przycisk.

Umieszczenie ich w kontenerze znacznie ułatwia kontrolowanie ich wyrównania i stylizacji jako jednej całości.

Następnie wybierz pożądany kontener, tak jak w poprzednim kroku.

Gdy to zrobisz, możesz ponownie kliknąć przycisk „+”, aby dodać blok nagłówka.

Teraz możesz wstawić nagłówek swojej strony.

W zmień kolor tekstu, rozmiar i wymiary w bocznym panelu ustawień bloku, jeśli wolisz.

Po wykonaniu tej czynności możesz nacisnąć klawisz „Enter”.

Na tym etapie możesz dodać podtytuł tuż pod nagłówkiem.

Na koniec możesz dodać przycisk wezwania do działania do swojego obrazu nagłówka.

Aby to zrobić, ponownie naciśnij klawisz „Enter”, kliknij przycisk „+” i wybierz blok „Przyciski”.

Następnie po prostu wstaw tekst przycisku.

Aby dodać link do przycisku, po prostu kliknij ikonę linku na pasku narzędzi i wstaw swój adres URL w odpowiednim polu.

Następnie kliknij przycisk ze strzałką.

Jeśli potrzebujesz wskazówek i sztuczek, jak tworzyć przyciski generujące wysokie konwersje, zapoznaj się z naszym przewodnikiem na temat najlepszych praktyk dotyczących wezwań do działania.

I to w zasadzie wszystko. Możesz dodać więcej elementów do swojego obrazu nagłówkowego lub dostosować go do swoich preferencji.

Gdy będziesz zadowolony z wyglądu sekcji nagłówkowej, po prostu kliknij „Zapisz”.

Oto jak wygląda nasz blok Okładka:

Metoda 3: Korzystanie z konstruktora stron (niestandardowe strony docelowe/motywy)

Załóżmy, że jesteś na samym początku konfiguracji swojej strony internetowej. Lub szukasz sposobu na stworzenie niestandardowej strony docelowej bez ograniczeń narzuconych przez motyw. W takim przypadku zalecamy użycie konstruktora stron, który zawiera szablony z sekcjami głównymi, takie jak SeedProd.

SeedProd to kreator stron metodą przeciągnij i upuść, którego często używaliśmy do tworzenia niestandardowych stron dla WPBeginner i naszych innych marek, w tym Duplicator i OptinMonster.

Chociaż jest łatwy w użyciu, oferuje również wiele wbudowanych funkcji edycji WordPress, których domyślnie nie mają narzędzie dostosowywania motywu, edytor pełnej witryny i Gutenberg.

Dzięki temu udało nam się zaoszczędzić czas i pieniądze na instalowaniu wtyczek firm trzecich tylko po to, aby dodać specjalne funkcje do naszych motywów lub stron docelowych.

SeedProd jest dostępny w wersji darmowej i płatnej. Zdecydowanie możesz użyć darmowej wersji do stworzenia niestandardowej strony docelowej, ale opcje szablonów i bloków są dość ograniczone. Z tego powodu zalecamy przejście na płatny plan, aby uzyskać więcej funkcji, w tym generator treści AI.

Aby uzyskać więcej informacji, zapoznaj się z naszą recenzją SeedProd oraz naszym porównaniem Elementor vs. Divi vs. SeedProd, które są popularnymi kreatorami stron.

Krok 1: Konfiguracja SeedProd

Aby użyć SeedProd, musisz zainstalować wtyczkę WordPress dostępną na Twoim koncie SeedProd w obszarze administracyjnym. Po aktywacji wtyczki zostaniesz poproszony o podanie klucza licencyjnego, który możesz uzyskać ze strony swojego konta SeedProd.

Po jego wprowadzeniu kliknij przycisk „Zweryfikuj klucz”.

Z SeedProd masz 2 opcje: możesz dodać sekcję nagłówkową do strony docelowej lub do określonych stron w niestandardowym motywie.

Aby skonfigurować stronę docelową lub motyw, możesz zapoznać się z tymi przewodnikami:

• Jak stworzyć niestandardowy motyw WordPress bez kodu
• Jak stworzyć stronę docelową w WordPressie
• Jak stworzyć stronę typu Squeeze Page w WordPress, która konwertuje
• Jak stworzyć piękne strony „Wkrótce dostępne” w WordPressie

W dalszej części samouczka użyjemy szablonu Menu Sprzedaż.

Krok 2: Dostosuj swoją sekcję nagłówkową

Po wybraniu szablonu dla swojego motywu lub strony docelowej, przejdziesz do edytora SeedProd.

Interfejs edycji SeedProd składa się z podglądu strony po prawej stronie i paska bocznego po lewej, gdzie można dodawać więcej bloków, dostosowywać blok/sekcję, cofać/ponawiać zmiany, przeglądać warstwy strony i przeglądać witrynę na urządzeniach mobilnych lub tabletach.

Ponieważ motyw SeedProd już zawiera sekcję nagłówka, nasza praca jest już w połowie wykonana. Musimy tylko wymienić obraz, dostosować go i dodać więcej bloków do sekcji nagłówka, jeśli zajdzie taka potrzeba.

Alternatywnie, możesz znaleźć więcej projektów sekcji nagłówka, przełączając się z paska bocznego Bloków na pasek boczny Sekcji po lewej stronie. Następnie przejdź do „Nagłówek” i kliknij przycisk „+” przy szablonie sekcji nagłówka, który chcesz dodać do swojej strony.

SeedProd wstawi go następnie na Twoją stronę.

Najpierw zmieńmy obraz nagłówka.

Aby to zrobić, kliknij najwyższą sekcję zawierającą obraz nagłówka. Będziesz wiedzieć, że wybrałeś właściwą rzecz, gdy w lewym pasku bocznym pojawi się fioletowe pole „Edycja: Sekcja”.

Teraz najedź kursorem na obraz tła w pasku bocznym.

Następnie kliknij „Ikonę multimediów”. Następnie możesz przesłać swój obraz bohatera z komputera lub biblioteki multimediów.

Następnie musisz wybrać pozycję tła, która najlepiej pasuje do Twojego obrazu.

Uważamy, że opcja „Niestandardowa pozycja” daje nam najlepszą kontrolę nad pozycjonowaniem punktów skupienia, dlatego wybierzemy tę opcję.

Opcja Niestandardowa pozycja daje kilka sposobów konfiguracji tła.

Dla pozycji X i Y możesz zmienić sposób pozycjonowania obrazu w pionie i poziomie.

Ustawienie załącznika ma 2 opcje: Przewijanie (bez paralaksy) i Stałe (paralaksy).

Jeśli Twój obraz jest mniejszy niż sekcja nagłówkowa, ale chcesz, aby cała sekcja była wypełniona obrazem, możesz powtórzyć obraz w całej tej sekcji. W przeciwnym razie po prostu wybierz „Brak powtórzeń”.

Jeśli chodzi o rozmiar obrazu nagłówka WordPress, możesz wybrać opcję „Automatyczny”, jeśli chcesz, aby obraz automatycznie dostosowywał się do sekcji nagłówka.

Zachęcamy do eksperymentowania z tymi ustawieniami, aby zobaczyć, co najlepiej pasuje do Twojego obrazu.

Inną rzeczą, którą możesz zrobić, jest przyciemnienie obrazu tła, aby Twój tekst lepiej się wyróżniał.

Aby to zrobić, możesz przesunąć suwak „Przyciemnij tło” do pożądanego poziomu przezroczystości.

Jeśli chcesz zmienić nakładający się kolor tła, po prostu kliknij przycisk wyboru koloru „Kolor nakładki”.

Następnie po prostu wybierz preferowany kolor.

Przewińmy teraz z powrotem w górę i przełączmy się na ustawienia „Zaawansowane”. Tutaj możesz dodać wszelkiego rodzaju fajne efekty do swojej sekcji hero.

Na przykład możesz otworzyć zakładkę „Tło cząsteczkowe” i dodać animowane tło cząsteczkowe do swojego obrazu. Może to sprawić, że Twoja sekcja nagłówkowa będzie znacznie bardziej imponująca i unikalna.

Następnie możesz dodać niestandardowy separator kształtu na górze i/lub dole sekcji hero, przechodząc do menu „Separator kształtu”.

Zrobienie tego może dodać więcej wizualnego zainteresowania do Twojej sekcji hero. Ponadto, jeśli dodasz zabawny separator kształtu na dole, możesz zachęcić użytkowników do przewijania strony docelowej i dowiedzenia się więcej o Twojej ofercie.

Krok 3: Dodaj i dostosuj więcej bloków do swojej sekcji nagłówka

Mając gotowy główny obraz, dodajmy więcej bloków do sekcji głównej.

Ponieważ nasz blok nagłówka już istnieje, klikniemy na niego i dostosujemy. Po zaznaczeniu powinieneś zobaczyć, że lewy pasek boczny ma teraz pomarańczowy baner z napisem „Edycja: Nagłówek”.

Wspaniałe w SeedProd jest to, że ma wbudowany generator treści AI.

Więc jeśli nie masz pewności, jakiego nagłówka użyć, możesz kliknąć przycisk „Edytuj za pomocą AI”, aby uzyskać kilka pomysłów.

Powinieneś teraz zobaczyć okno podręczne, w którym możesz pisać swoje treści za pomocą AI.

Chcemy wygenerować zupełnie nowy nagłówek, więc klikniemy przycisk „Nowy monit”, aby to zrobić.

Następnie po prostu powiedz AI, jaki rodzaj treści ma wykonać.

Następnie kliknij przycisk „Wygeneruj tekst”.

Następnie AI wygeneruje dla Ciebie treść.

Ale nadal możesz to zmienić, zmieniając ton, upraszczając język, wydłużając lub skracając tekst, a nawet tłumacząc go na ponad 50 języków.

Gdy będziesz zadowolony z wyglądu nagłówka, po prostu kliknij „Wstaw”.

Teraz możesz przewinąć w dół lewy pasek boczny.

Tutaj możesz zmienić wyrównanie tekstu, rozmiar czcionki i tag nagłówka, aby dopasować je do swoich preferencji.

Jeśli chcesz, aby tekst jeszcze bardziej się wyróżniał, przewiń z powrotem w górę i przełącz się na zakładkę „Zaawansowane”.

W menu Style kliknij „Edytuj” w ustawieniach typografii. Tutaj możesz swobodnie zmienić rodzinę czcionek, wysokość linii, odstępy między literami i wielkość liter tekstu.

Możesz również przesunąć się nieco niżej i dodać cień tekstu do nagłówka.

Tutaj zdecydowaliśmy się stworzyć niestandardowy kolor cienia, aby tekst jeszcze bardziej się wyróżniał.

Aby dodać podtytuł poniżej nagłówka, możesz po prostu kliknąć przycisk „Bloki” na lewym pasku bocznym.

Spowoduje to przejście do biblioteki bloków.

Teraz po prostu przeciągnij i upuść blok „Tekst” bezpośrednio pod nagłówkiem.

Ustawienia bloku Tekst są bardzo podobne do bloku Nagłówek, więc możesz powtórzyć te same kroki, co wcześniej, aby utworzyć podtytuł.

Aby dodać przycisk wezwania do działania, musisz przeciągnąć i upuścić blok „Przycisk” na stronę.

Zazwyczaj znajduje się tuż pod podtytułem.

Po wykonaniu tej czynności, wpisz treść swojego przycisku w odpowiednim polu.

Możesz również dodać podtekst tuż pod głównym tekstem przycisku, aby uzyskać więcej kontekstu.

Następnie przewiń w dół i dodaj link do swojego przycisku.

Dowolnie zmień również wyrównanie i rozmiar przycisku.

Teraz wróć na górę paska bocznego i przełącz się na zakładkę „Szablony”.

Tutaj możesz zmienić styl przycisku, aby lepiej pasował do projektu WordPress.

Jeśli nie podobają Ci się domyślne projekty szablonów, przełącz się na zakładkę „Zaawansowane”.

Tutaj możesz zmienić typografię przycisku, styl, kolor, dopełnienie, efekt cienia i tak dalej.

Śmiało kontynuuj dostosowywanie swojego szablonu, aż będzie wyglądał dobrze.

Gdy będziesz zadowolony, kliknij przycisk „Zapisz” u góry i wybierz „Opublikuj”, aby strona była aktywna.

I to wszystko, jeśli chodzi o dodawanie obrazu głównego za pomocą konstruktora stron.

Oto jak wygląda sekcja hero na naszej stronie demonstracyjnej:

Metoda 4: Użycie wtyczki Hero Banner + Shortcode (Wszystkie motywy)

Ta ostatnia metoda technicznie działa ze wszystkimi motywami, ale polecamy ją najbardziej osobom korzystającym z klasycznego motywu bez wbudowanej sekcji nagłówkowej.

Aby zastosować tę metodę, musisz zainstalować wtyczkę Hero Banner Ultimate. Instrukcje krok po kroku znajdziesz w naszym przewodniku jak zainstalować wtyczkę WordPress dla początkujących.

Krok 1: Skonfiguruj wtyczkę Hero Banner

Po aktywacji wtyczki przejdź do Hero Banner » Add Hero Banner.

Następnie nadaj swojemu banerowi nagłówkowemu tytuł. Będzie on służył jako Twój nagłówek.

Po zakończeniu wstaw tekst w wizualnym edytorze klasycznym, który będzie służył jako podtytuł. Możesz swobodnie zmieniać formatowanie i kolor.

Teraz przewiń w dół do sekcji „Baner nagłówka – Ustawienia”.

Tutaj możesz wybrać układ banera. Chociaż nie możesz podglądać układu w czasie rzeczywistym w ustawieniach wtyczki, łatwo jest przełączać się między nimi później na swojej faktycznej stronie, aby znaleźć ten, który najbardziej Ci się podoba.

W naszym samouczku wybierzemy Układ 1.

Jeśli chodzi o typ banera, możesz wybrać „Obraz tła” dla obrazu nagłówkowego, ale możesz też wybrać „Wideo tła”, jeśli masz pełnoekranowe wideo do wykorzystania jako nagłówek.

Następnie nie zapomnij kliknąć „Prześlij obraz”, aby dodać swój obraz z komputera lub biblioteki multimediów.

Na tym etapie możesz ustawić rozmiar obrazu tła na „Pokrycie”, aby obraz był pełnoekranowy.

Chcesz również wybrać „Przewiń” dla załącznika obrazu tła, aby wyłączyć efekt paralaksy.

Przejdź w dół, aż dojdziesz do Ustawienia koloru banera.

Tutaj możesz zmienić kolor nagłówka (Kolor tytułu) i podtytułu (Kolor treści). Wystarczy kliknąć narzędzie do wyboru kolorów.

Dodatkowo możesz chcieć dodać kolor nakładki na obraz, co może być przydatne do dostosowania czytelności tekstu na tle obrazu.

Zdecydowaliśmy się na kolor czarny z przezroczystością 0,5.

Skonfigurujmy ustawienia wezwania do działania.

Tutaj możesz wstawić tekst i link do swojego przycisku. Możesz również zmienić kolor w opcji „Przycisk – Klasa 1”.

Wszystko, co musisz zrobić dalej, to przewinąć z powrotem do góry.

Następnie kliknij „Opublikuj”.

Przejdźmy teraz do Baner » Baner główny. Powinieneś teraz zobaczyć, że Twój obraz główny został utworzony, a wtyczka wygenerowała dla Ciebie krótki kod do jego wyświetlenia.

Zanotuj ten krótki kod, ponieważ będzie nam potrzebny później.

Krok 2: Znajdź selektor CSS sekcji nagłówka Twojego motywu

Aby wyświetlić obraz hero, musimy znaleźć konkretny „adres” sekcji nagłówka Twojego motywu.

Nazywa się to selektorem CSS i mówi naszej wtyczce dokładnie, gdzie umieścić hero image. Nie martw się, nie będziesz musiał samodzielnie pisać żadnego kodu.

Aby to zrobić, odwiedź swoją stronę internetową na froncie. Następnie kliknij prawym przyciskiem myszy na sekcję nagłówka i wybierz „Inspektuj”.

Po prawej stronie musisz znaleźć, jakiego selektora CSS używa sekcja nagłówka. Możesz najechać kursorem na wszystkie te fragmenty kodu, aż zobaczysz, że sekcja nagłówka jest podświetlona na froncie.

Oto przykład:

Jeśli cały nagłówek jest podświetlony podczas najeżdżania kursorem na kod, jesteś na właściwej drodze.

Teraz kliknij prawym przyciskiem myszy na ten fragment kodu i wybierz Kopiuj » Kopiuj selektor.

Po wykonaniu tej czynności możesz wkleić selektor w bezpiecznym miejscu, na przykład w edytorze tekstu, lub po prostu pozostawić tę kartę otwartą.

Krok 3: Dodaj swój Shortcode do WPCode

Następnym krokiem jest zainstalowanie WPCode, czyli wtyczki do fragmentów kodu.

Technicznie rzecz biorąc, nie musisz używać wtyczki do wstawiania niestandardowych fragmentów kodu do plików motywu. Ale chcieliśmy to zrobić, aby zachować bezpieczeństwo, ponieważ wklejanie kodu do pliku motywu może powodować nieoczekiwane błędy.

Uważamy, że WPCode jest niezwykle pomocny w zarządzaniu fragmentami niestandardowego kodu bez psucia witryny.

Najpierw zainstaluj wtyczkę WordPress w swoim obszarze administracyjnym. Po aktywacji wtyczki przejdź do Fragmenty kodu » + Dodaj fragment, wybierz „Dodaj własny kod (nowy fragment)” i kliknij przycisk „+ Dodaj niestandardowy fragment”.

Teraz nadaj naszemu nowemu fragmentowi kodu nazwę. Może to być coś prostego, na przykład „Krótki kod banera nagłówka”.

Następnie zmień typ kodu na „Fragment PHP”.

W polu Podgląd kodu wklej następujący fragment:

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode

Pamiętaj, aby zamienić [hbupro_banner id="XXX"] na swój własny skrócony kod Baneru Głównego, który widziałeś wcześniej.

Następnie przewiń w dół do sekcji „Wstawianie”.

Tutaj Metoda Wstawiania powinna być ustawiona na „Automatyczne wstawianie”, a Lokalizacja na „Po elemencie HTML”.

Następnie wklej selektor, który skopiowałeś wcześniej, w pole „Selektor CSS”. W naszym przypadku było to #masthead, ale będzie się to różnić w zależności od motywu.

Po wykonaniu tej czynności możesz przełączyć przycisk „Nieaktywny”, aby zmienił się na „Aktywny” i kliknąć przycisk „Zapisz fragment”.

I to wszystko!

Jeśli wyświetlisz swoją stronę internetową, powinieneś teraz zobaczyć obraz Baneru Głównego tuż pod nagłówkiem:

Często zadawane pytania dotyczące obrazów nagłówków

Oto lista niektórych często zadawanych przez naszych czytelników pytań dotyczących obrazów nagłówkowych:

Jaki jest najlepszy rozmiar dla głównego obrazu WordPress?

Świetnym punktem wyjścia dla rozmiaru obrazu nagłówka jest szerokość 1920 pikseli i wysokość od 400 do 600 pikseli. Zapewnia to ostrość na większości ekranów komputerów stacjonarnych, nie zajmując zbyt wiele miejsca w pionie.

Jednak idealny rozmiar często zależy od Twojego konkretnego motywu WordPress. Zawsze zalecamy testowanie, jak Twój obraz wygląda na urządzeniach stacjonarnych i mobilnych.

Czy mogę użyć wideo w mojej sekcji hero?

Absolutnie. Użycie wideo w tle może sprawić, że Twoja strona będzie bardziej dynamiczna i natychmiast przyciągnie uwagę odwiedzających. Większość kreatorów stron, takich jak SeedProd, oraz domyślny blok Cover w WordPress, zawiera proste opcje dodawania wideo w tle zamiast statycznego obrazu.

Jak sprawić, by mój obraz nagłówkowy był przyjazny dla urządzeń mobilnych?

Nowoczesne motywy i kreatory stron są zaprojektowane tak, aby były responsywne, więc automatycznie dostosują rozmiar Twojego głównego obrazu do mniejszych ekranów. Kluczem jest wybór obrazu, który nadal dobrze wygląda po przycięciu.

Bardzo ważne jest również, aby skompresować obraz przed przesłaniem. Zapewnia to szybkie ładowanie dla odwiedzających na wolniejszych połączeniach mobilnych.

Czy obraz nagłówkowy to to samo co slider?

Są podobne, ale nie identyczne. Obraz nagłówka to zazwyczaj pojedynczy, duży obraz banerowy na górze strony internetowej. Z drugiej strony, suwak obraca się przez wiele obrazów lub filmów. Możesz użyć suwaka w swojej sekcji nagłówkowej, tak jak pokazaliśmy w metodzie dla klasycznych motywów.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać obraz hero w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania animacji preloadera do WordPress oraz naszymi rekomendacjami najlepszych narzędzi do tworzenia i sprzedaży produktów cyfrowych.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.