Jak zrobić baner na stronę internetową (3 proste sposoby)

Opublikowany: 2023-07-07

Szukasz łatwego sposobu na zrobienie banera na swoją stronę WordPress?

Baner może podkreślać produkty, usługi lub aktualności oferowane przez Twoją witrynę. Może zwiększyć zaangażowanie użytkowników, zwiększyć współczynnik klikalności i zachęcić odwiedzających do podjęcia działań.

W tym artykule pokażemy, jak łatwo zrobić baner na swoją stronę WordPress.

Make a website banner in WordPress

Co to jest baner witryny?

Baner to graficzny wyświetlacz rozciągający się na górę, dół lub bok witryny WordPress. Często zawiera nazwę marki i logo wraz z innymi elementami wizualnymi w celu promowania określonego produktu, usługi lub wydarzenia.

Na przykład, jeśli sklep internetowy właśnie ogłosił wyprzedaż, może wyświetlić baner u góry swoich stron, aby poinformować nowych odwiedzających o promocji i zachęcić ich do zakupu.

Shop sale preview

Dobrze zaprojektowany baner może wywrzeć silne wrażenie i zachęcić odwiedzających do zapoznania się z resztą Twojej witryny. Ponadto banery mogą być również używane do promowania produktów stowarzyszonych, zwiększania świadomości marki, budowania listy e-mailowej poprzez zachęcanie odwiedzających do zapisania się na newsletter i kierowania ruchu na inne strony w Twojej witrynie.

Możesz także używać banerów do promowania swoich kont w mediach społecznościowych i zachęcania odwiedzających do obserwowania lub polubienia Twoich stron.

Jaki jest najlepszy rozmiar banera na stronie internetowej?

Idealny rozmiar banera internetowego zależy od układu i konkretnych celów marketingowych Twojego bloga WordPress.

Na przykład, jeśli chcesz wyświetlić prostokątny i cienki baner u góry ekranu, możesz użyć rozmiaru Dużej Tablicy Liderów, czyli 970 x 90.

Inne popularne i najczęściej używane rozmiary banerów to:

  • Średni baner: 300 x 250
  • Tablica wyników: 728 x 90
  • Szeroki wieżowiec: 160 x 600
  • Pół strony: 300 x 600
  • Duża tablica wyników: 970 x 90
  • Billboard: 970 x 250
  • Duży prostokąt: 326 x 280
  • Baner pionowy: 120 x 240
  • Pełny baner: 468 x 60
  • Połowa banera: 234 x 60
Banner sizes

Jeśli chcesz wyświetlić baner wydarzenia na pasku bocznym, możesz użyć rozmiaru banera Wide Skyscraper lub Half-Page. Podobnie, możesz również użyć średniego rozmiaru banera, aby wyświetlić kwadratowy baner na swojej stronie.

Jeśli chcesz wyświetlać banery reklamowe, możesz zapoznać się z naszym przewodnikiem dla początkujących na temat najskuteczniejszych rozmiarów i formatów banerów Google AdSense dla WordPress.

Powiedziawszy to, zobaczmy, jak możesz łatwo zrobić baner na swojej stronie WordPress. W tym samouczku omówimy trzy metody tworzenia banera i możesz skorzystać z poniższych linków, aby przejść do wybranej metody:

  • Metoda 1: Utwórz baner witryny za pomocą OptinMonster (zalecane)
  • Metoda 2: Utwórz baner na stronie internetowej za pomocą serwisu Canva (bezpłatny)
  • Metoda 3: Utwórz baner na stronie internetowej, korzystając z Thrive Leads

Metoda 1: Utwórz baner witryny za pomocą OptinMonster (zalecane)

OptinMonster to najlepsza na rynku wtyczka do banerów WordPress, która pozwala łatwo tworzyć pływające banery barowe i wyskakujące dla Twojej witryny.

To najlepsze narzędzie do optymalizacji konwersji i generowania leadów, które pomaga zamienić odwiedzających witrynę w subskrybentów i klientów.

Ponadto wiele szablonów banerów OptinMonster ma pola optin, które pozwalają zbierać nazwiska, adresy e-mail i numery telefonów odwiedzających witrynę.

Krok 1: Zainstaluj OptinMonster na swojej stronie internetowej

Najpierw musisz zarejestrować konto OptinMonster. Aby to zrobić, po prostu odwiedź witrynę OptinMonster i kliknij przycisk „Pobierz OptinMonster teraz”, aby założyć konto.

The OptinMonster lead generation tool

Następnie musisz zainstalować i aktywować bezpłatną wtyczkę OptinMonster na swojej stronie WordPress. Aby uzyskać szczegółowe instrukcje, możesz zapoznać się z naszym przewodnikiem dla początkujących dotyczącym instalacji wtyczki WordPress.

Po aktywacji kreator instalacji OptinMonster otworzy się w panelu administracyjnym WordPress.

Stąd musisz kliknąć przycisk „Połącz istniejące konto”, aby połączyć swoją witrynę WordPress z kontem OptinMonster.

Connect your existing account

Spowoduje to otwarcie nowego okna na ekranie komputera.

Stąd musisz kliknąć przycisk „Połącz z WordPress”, aby przejść dalej.

Connect OptinMonster to WordPress

Krok 2: Utwórz i dostosuj swój baner

Teraz, gdy połączyłeś swoje konto WordPress z OptinMonster, przejdź do strony OptinMonster »Kampanie z paska bocznego administratora WordPress.

Stąd musisz kliknąć przycisk „Utwórz swoją pierwszą kampanię”, aby rozpocząć tworzenie projektu banera witryny.

Create first OptinMonster campaign

Spowoduje to przekierowanie do strony „Szablony”, na której możesz rozpocząć od wybrania typu kampanii.

Na przykład, jeśli chcesz wyświetlać swój baner jako pasek u góry ekranu, możesz wybrać kampanię „Pływający pasek”. Podobnie możesz wybrać typ kampanii „Popup”, aby wyświetlać baner jako wyskakujące okienko.

Następnie musisz także wybrać szablon dla wybranej kampanii.

Select the floating bar template

W tym samouczku wybierzemy szablon dla typu kampanii „Pływający pasek”.

Następnie zostaniesz poproszony o podanie nazwy tworzonej kampanii.

Po prostu wpisz wybraną nazwę i kliknij przycisk „Rozpocznij budowę”, aby przejść dalej.

Click the Start Building button

Spowoduje to uruchomienie interfejsu „przeciągnij i upuść” OptinMonster na ekranie, w którym możesz rozpocząć dostosowywanie swojego banera. Stąd możesz przeciągać i upuszczać wybrane pola z paska bocznego po lewej stronie na baner.

Na przykład, jeśli chcesz dodać ikony mediów społecznościowych do swojego banera, aby zwiększyć liczbę obserwujących, możesz przeciągnąć i upuścić blok mediów społecznościowych z lewego paska bocznego.

Add blocks to the banner

Następnie wystarczy kliknąć blok, aby otworzyć jego ustawienia w lewej kolumnie.

Stąd możesz zmienić tytuł przycisku, dodać adres URL mediów społecznościowych, a nawet zmienić platformę mediów społecznościowych z menu rozwijanego.

Możesz także dodać inne bloki, aby wyświetlać filmy, obrazy, tekst lub wezwania do działania w projekcie banera witryny.

Configure block settings from the left column

Następnie musisz wybrać pozycję swojego banera.

Domyślnie pływający pasek OptinMonster jest wyświetlany u dołu ekranu Twojej witryny po rozpoczęciu przewijania.

Możesz jednak łatwo zmienić to ustawienie, klikając ikonę „Ustawienia” na dole paska bocznego po lewej stronie.

Spowoduje to otwarcie ustawień w lewej kolumnie, w której należy rozwinąć kartę „Ustawienia pływającego paska”. W tym miejscu po prostu przełącz opcję „Załadować pływający pasek u góry strony?” przełącz, aby wyświetlić baner u góry.

Toggle the switch to display the banner at the top

Krok 3: Dodaj wyzwalacze dla swojego banera

Po zaprojektowaniu banera przejdź do zakładki „Reguły wyświetlania” u góry. W tym miejscu możesz dodać reguły wyświetlania banerów.

Pamiętaj, że musisz przełączyć się na tę kartę tylko wtedy, gdy chcesz dodać określony wyzwalacz wyświetlania dla swojego banera. W przeciwnym razie możesz przejść do następnego kroku.

Na przykład, jeśli chcesz wyświetlać swój baner, gdy użytkownik ma zamiar opuścić Twoją witrynę, musisz wybrać opcję „Zamiar wyjścia”.

Choose Exit Intent option from the dropdown menu on the left

Gdy to zrobisz, po prostu wybierz opcję „Na wszystkich urządzeniach” z menu rozwijanego pośrodku. Jeśli chcesz używać tej reguły wyświetlania tylko dla urządzeń mobilnych, możesz również wybrać tę opcję.

Następnie wybierz czułość zamiaru wyjścia zgodnie z własnymi upodobaniami i kliknij przycisk „Następny krok”.

Choose exit intent technology sensitivity

Spowoduje to przejście do nowego ekranu. W tym przypadku należy upewnić się, że w menu rozwijanym „Pokaż widok kampanii” wybrana jest opcja „Opcjonalnie”.

Gdy to zrobisz, po prostu kliknij przycisk „Następny krok”.

Select the Optin option from the Then dropdown menu

Twoja reguła wyświetlania banera zostanie teraz wyświetlona na ekranie.

Jeśli chcesz coś tutaj zmienić, możesz kliknąć przycisk „Edytuj”, aby to naprawić.

Summary for display rules

Krok 4: Opublikuj swój baner

Możesz teraz przejść do zakładki „Publikuj” u góry i kliknąć przycisk „Zapisz” w prawym górnym rogu ekranu.

Następnie wystarczy kliknąć przycisk „Opublikuj”, aby wyświetlić baner na swojej stronie internetowej.

Save and publish the banner

Teraz odwiedź swoją witrynę, aby zobaczyć baner u góry ekranu.

Tak to wyglądało na naszej stronie demonstracyjnej.

Optinmonster banner preview

Metoda 2: Utwórz baner na stronie internetowej za pomocą serwisu Canva (bezpłatny)

Jeśli chcesz zrobić baner na stronę internetową za darmo, to ta metoda jest dla Ciebie.

Canva to popularne narzędzie internetowe, które umożliwia tworzenie wszelkiego rodzaju grafiki, w tym banerów, logo, plakatów, okładek książek i nie tylko. Oferuje również bezpłatną wersję, której można użyć do stworzenia projektu banera strony internetowej.

Krok 1: Utwórz konto Canva

Najpierw musisz odwiedzić witrynę Canva i kliknąć przycisk „Zarejestruj się”, aby utworzyć konto.

Jeśli masz już konto Canva, możesz po prostu się zalogować.

Create a Canva account

Po utworzeniu konta zostaniesz przeniesiony na stronę główną konta Canva.

Stąd musisz przejść do zakładki „Szablony” z lewej kolumny, a następnie wyszukać szablony banerów za pomocą pola wyszukiwania u góry.

Spowoduje to wyświetlenie wszystkich szablonów banerów dostępnych w serwisie Canva. Jednak niektóre z tych szablonów mogą być zablokowane, ponieważ są płatnymi funkcjami.

Choose a Canva template

Krok 2: Zaprojektuj baner swojej witryny

Po wybraniu szablonu na ekranie zostanie uruchomiony interfejs projektowania serwisu Canva.

Stąd możesz dostosować szablon banera do własnych upodobań. Możesz zmienić istniejącą treść w szablonie, klikając na bloki i dodając własny tekst.

Customize the Canva banner

Możesz nawet dodawać różne elementy graficzne, takie jak naklejki, zdjęcia i filmy, przechodząc do zakładki „Elementy” w lewej kolumnie.

Po dodaniu elementu możesz dalej zmieniać jego animację, położenie i przezroczystość z menu u góry.

Możesz również przesyłać pliki multimedialne z własnego komputera, przechodząc do zakładki „Przesłane” z lewej kolumny.

Add elements from the left column

Aby dodać tekst do banera, po prostu przejdź do zakładki „Pole tekstowe” z kolumny po lewej stronie.

Tam możesz użyć domyślnych stylów tekstu lub różnych kombinacji czcionek, aby dodać trochę treści do swojego banera.

Możesz nawet dodać wezwanie do działania z linkiem, zaznaczając tekst za pomocą myszy. Spowoduje to wyświetlenie ikony łącza u góry tekstu.

Click on the Link icon

Po prostu kliknij tę ikonę i skopiuj i wklej link, który chcesz dodać.

Następnie kliknij przycisk „Gotowe”, aby go zapisać.

Add link

Krok 3: Uzyskaj kod do umieszczenia na banerze

Gdy będziesz zadowolony z dostosowania banera, po prostu kliknij przycisk „Udostępnij” w prawym górnym rogu ekranu.

Spowoduje to otwarcie menu podpowiedzi, w którym należy wybrać opcję „Więcej” u dołu.

Click the More option in the Share prompt

Spowoduje to przejście do menu „Wszystkie opcje”, w którym należy wybrać opcję „Osadź”.

Gdy to zrobisz, na ekranie pojawi się nowy monit. Stąd wystarczy kliknąć przycisk „Osadź”.

Click the Embed button

Serwis Canva utworzy teraz dla Ciebie kod osadzania HTML.

Po wyświetleniu go na ekranie kliknij przycisk „Kopiuj” pod opcją „Kod osadzania HTML”.

Copy the HTML embed code

Krok 4: Dodaj kod osadzania HTML w WordPress

Możesz teraz wyświetlać swój baner na swojej stronie WordPress, poście lub pasku bocznym zgodnie z własnymi upodobaniami. W tym samouczku pokażemy nasz baner na stronie WordPress.

Najpierw musisz otworzyć stronę lub post, na którym chcesz dodać baner.

Tam kliknij przycisk „+” w lewym górnym rogu ekranu, aby znaleźć i dodać niestandardowy blok HTML do strony.

Gdy to zrobisz, po prostu wklej skopiowany kod osadzania do bloku.

Add code into the block editor

Na koniec kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby zapisać zmiany.

Teraz odwiedź swoją witrynę, aby zobaczyć baner WordPress w akcji.

Canva banner preview

Metoda 3: Utwórz baner na stronie internetowej, korzystając z Thrive Leads

Możesz także utworzyć baner na stronie internetowej za pomocą Thrive Leads. Jest to popularna wtyczka wyskakująca WordPress używana przez ponad 114 000 stron internetowych.

Dzięki Thrive Leads możesz projektować banery, które pomogą Ci zdobywać potencjalnych klientów w witrynie WordPress i rozwijać listę e-mail.

Krok 1: Zainstaluj Thrive Leads na swojej stronie WordPress

Najpierw musisz odwiedzić witrynę Thrive Themes i założyć konto. Gdy to zrobisz, przejdź do panelu członkowskiego.

Stąd śmiało kliknij link „Pobierz i zainstaluj wtyczkę Thrive Product Manager”.

Install the Thrive Product Manager plugin

Następnie musisz odwiedzić swoją witrynę WordPress, aby zainstalować i aktywować wtyczkę Thrive Product Manager. Aby uzyskać szczegółowe instrukcje, możesz zapoznać się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress.

Po aktywacji przejdź do zakładki Product Manager z pulpitu administratora WordPress i kliknij przycisk „Zaloguj się na moje konto”.

Log into the Thrive Product Manager dashboard

Po wprowadzeniu danych logowania zobaczysz pulpit menedżera produktu Thrive.

Tutaj możesz wybrać produkty, które chcesz zainstalować i używać w swojej witrynie. Po prostu wybierz wtyczkę „Thrive Leads” i kliknij przycisk „Zainstaluj wybrane produkty”.

Install the Thrive Leads plugin

Krok 2: Utwórz baner witryny

Po zainstalowaniu wtyczki musisz odwiedzić pulpit nawigacyjny Thrive »Strona Thrive Leads z paska bocznego administratora WordPress.

Gdy już tam będziesz, po prostu kliknij przycisk „Dodaj nowy” obok opcji „Grupy leadów”.

Create new lead group by clicking the Add New button

Spowoduje to wyświetlenie na ekranie wyskakującego okienka „Dodaj nową grupę leadów”, w którym musisz wpisać nazwę tworzonej grupy leadów.

Pamiętaj, aby nazwać grupę prowadzącą w sposób, który pomoże ci ją zidentyfikować.

Na przykład, jeśli tworzysz baner w celu zbudowania listy e-mailowej, możesz nazwać swoją grupę liderów „Kampania listy e-mailowej”.

Type lead group name

Następnie utworzona grupa leadów zostanie dodana do ekranu. Stąd musisz kliknąć przycisk „Dodaj nowy typ formularza zgody”.

Spowoduje to otwarcie nowego monitu, w którym musisz wybrać typ banera, który chcesz utworzyć.

Click the Add new Opt-in form button

Możesz utworzyć wsuwany baner, wstążkę, widżet, zawartość, lightbox lub przewijaną matę zgodnie z własnymi upodobaniami.

Te banery będą jak formularz, ponieważ będą zbierać dane od użytkowników, w tym adresy e-mail, numery telefonów i inne.

W tym samouczku utworzymy baner wstążkowy dla naszej witryny.

Choose an Opt-In form type

Po wybraniu typu projektu banera strony internetowej monit automatycznie zniknie z ekranu.

Teraz, aby otworzyć pulpit nawigacyjny grupy leadów, musisz kliknąć przycisk „Dodaj” w prawym rogu zakładki Lead Groups.

Click the Add button for a form

Spowoduje to przejście do pulpitu nawigacyjnego Lead Groups, gdzie po uruchomieniu kampanii zostaną wyświetlone wszystkie formularze i raporty leadów dla grupy.

Na przykład, jeśli chcesz utworzyć baner do przechwytywania adresów e-mail, wszystkie informacje o użytkowniku zebrane za pośrednictwem banera zostaną wyświetlone tutaj.

Click the Create a form button

Na razie wystarczy kliknąć przycisk „Utwórz formularz”, aby rozpocząć tworzenie banera.

Spowoduje to otwarcie nowego monitu, w którym należy podać nazwę formularza i kliknąć przycisk „Utwórz formularz”.

Provide a form name

Po utworzeniu formularza zostanie on wyświetlony na pulpicie nawigacyjnym Lead Groups.

Stąd musisz kliknąć przycisk „Edytuj projekt” w prawym rogu, aby rozpocząć tworzenie banera.

Click the Edit Design button

Krok 3: Dostosuj baner swojej witryny

Edytor wizualny Thrive zostanie teraz uruchomiony w nowej karcie na ekranie.

Od tego momentu możesz zacząć od wybrania szablonu dla swojego banera z monitu „Biblioteka potencjalnych klientów Thrive”.

Następnie możesz użyć jednego z gotowych szablonów w obecnej postaci lub dostosować go za pomocą edytora wizualnego. Po dokonaniu wyboru wystarczy kliknąć przycisk „Wybierz szablon”, aby przejść dalej.

Choose banner template

Po dodaniu szablonu banera wstążkowego możesz łatwo dostosować zawarte w nim elementy, klikając każdy z nich. Spowoduje to otwarcie ustawień elementu na pasku bocznym po lewej stronie.

Na przykład, jeśli chcesz zmienić kolor przycisku w swoim szablonie, po prostu kliknij go, aby otworzyć jego ustawienia na pasku bocznym.

Choose an element and configure its settings

Jeśli chcesz dodać zupełnie nowy element do swojego banera, możesz to również zrobić, klikając ikonę „+” w prawym rogu ekranu.

Spowoduje to otwarcie paska bocznego „Dodaj elementy” po prawej stronie, gdzie możesz przeciągać i upuszczać wybrane elementy na baner.

Na przykład, jeśli chcesz dodać przyciski konta w mediach społecznościowych do swojego banera, będziesz musiał przeciągnąć i upuścić element Obserwuj w mediach społecznościowych z prawego paska bocznego.

Add elements to the banner

Gdy będziesz zadowolony ze swojego banera, kliknij przycisk „Zapisz pracę” w lewym dolnym rogu, aby zapisać zmiany.

Następnie musisz wrócić do pulpitu Lead Groups.

Click the Save Work button

Krok 4: Skonfiguruj ustawienia banerów

Po powrocie do pulpitu nawigacyjnego możesz zmienić pozycję swojego banera, klikając opcję „Pozycja” w wierszu formularza.

Spowoduje to otwarcie monitu „Ustawienia pozycji”, w którym możesz wybrać preferowaną pozycję banera z menu rozwijanego.

Następnie kliknij przycisk „Zapisz”.

Configure banner position

Następnie, aby skonfigurować częstotliwość wyświetlania banera, kliknij opcję „Częstotliwość wyświetlania” w wierszu formularza.

Spowoduje to otwarcie okna dialogowego „Ustawienia wyświetlania”, w którym za pomocą suwaka można określić, ile razy baner powinien być wyświetlany na ekranie.

Jeśli zachowasz cyfrę 0, wtedy baner będzie wyświetlany przez cały czas. Po dokonaniu wyboru kliknij przycisk „Zapisz”, aby zapisać ustawienia.

Configure banner display settings

Jeśli chcesz dodać określony wyzwalacz do wyświetlania banera, musisz kliknąć opcję „Wyzwalacz” w wierszu formularza.

Spowoduje to wyświetlenie monitu „Ustawienia wyzwalacza”, w którym możesz wybrać wyzwalacz dla swojego banera z menu rozwijanego, na przykład po pewnym czasie lub gdy użytkownik dotrze do dołu strony.

Po zakończeniu kliknij przycisk „Zapisz”, aby zapisać ustawienia.

Add a trigger for banner display

Krok 5: Opublikuj swój baner

Po skonfigurowaniu ustawień banera musisz wyjść z pulpitu nawigacyjnego Lead Groups i wrócić do pulpitu nawigacyjnego Thrive Leads, klikając łącze u góry.

Gdy już tam będziesz, rozwiń kartę Lead Groups i przełącz przełącznik „Display On Desktop” na „On”. Jeśli chcesz również wyświetlać swój baner na urządzeniach mobilnych, możesz przełączyć przełącznik „Wyświetl na urządzeniu mobilnym” na „Wł.”.

Toggle the Display on desktop switch

Następnie kliknij ikonę koła zębatego w prawym górnym rogu karty Lead Groups, aby otworzyć ustawienia wyświetlania.

Tutaj możesz wybrać strony internetowe, na których chcesz wyświetlać baner. Na przykład, jeśli chcesz, aby baner był wyświetlany u góry wszystkich stron i postów, możesz zaznaczyć pole obok tych opcji.

Na koniec kliknij przycisk „Zapisz i zamknij”, aby zapisać zmiany.

Choose where you want to display the banner

Teraz możesz odwiedzić swoją witrynę, aby sprawdzić baner wyświetlany u góry strony.

Tak to wyglądało na naszej stronie demonstracyjnej.

Preview of banner

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo zrobić baner strony internetowej dla WordPress. Możesz także zapoznać się z naszym przewodnikiem dla początkujących dotyczącym dostosowywania kolorów w witrynie WordPress oraz naszymi najlepszymi ofertami najlepszego oprogramowania do projektowania stron internetowych.

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