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

Szukasz łatwego sposobu na stworzenie banera witryny internetowej w WordPress?

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

W tym artykule pokażemy ci, jak w prosty sposób stworzyć baner dla twojej witryny internetowej WordPress.

Czym jest baner witryny internetowej?

Baner to graficzny wyświetlacz, który rozciąga się nad górną, dolną lub boczną częścią witryny WordPress. Często zawiera nazwę marki i logo, wraz z innymi elementami projektu, w celu promowania określonego produktu, usługi lub wydarzenia.

Na przykład, jeśli sklep e-handel właśnie ogłosił wyprzedaż, może wyświetlić baner na górze swoich stron, aby poinformować nowych odwiedzających o ofertach rabatowych i zachęcić ich do dokonania zakupu.

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ć wykorzystywane do promowania produktów partnerskich, budowania tożsamości marki, budowania listy mailingowej poprzez zachęcanie odwiedzających do zapisania się do newslettera i kierowania ruchu na inne strony twojej witryny.

Możesz również użyć banerów do promowania twoich kont w mediach społecznościowych i zachęcania odwiedzających do śledzenia lub polubienia twoich stron.

Jaki jest najlepszy rozmiar banera witryny internetowej?

Idealny rozmiar banera witryny internetowej 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 Large Leaderboard, który wynosi 970 x 90.

Niektóre z innych popularnych i najczęściej używanych rozmiarów banerów obejmują:

• Średni baner: 300 x 250
• Tablica wyników: 728 x 90
• Wide Skyscraper: 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
• Półbaner: 234 x 60

Jeśli chcesz wyświetlić baner wydarzenia na panelu bocznym, możesz użyć rozmiaru banera Wide Skyscraper lub Half-Page. Podobnie, możesz również użyć rozmiaru banera Medium, aby wyświetlić baner w kształcie kwadratu na twojej 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 stworzyć baner na twojej witrynie internetowej WordPress. W tym poradniku omówimy trzy metody tworzenia banerów, a ty możesz skorzystać z poniższych odnośników, aby przejść do wybranej przez siebie metody:

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

OptinMonster to najlepsza na rynku wtyczka do tworzenia banerów WordPress, która umożliwia łatwe tworzenie pływających pasków i wyskakujących banerów dla twojej witryny internetowej.

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

Ponadto, wiele szablonów banerów OptinMonster posiada pola optin, które umożliwiają zbieranie nazwisk, adresów e-mail i numerów telefonów odwiedzających twoją witrynę internetową.

Aby uzyskać więcej informacji, zobacz naszą pełną recenzję OptinMonster.

Krok 1: Zainstaluj OptinMonster na twojej witrynie internetowej

Najpierw należy założyć konto OptinMonster. Aby to zrobić, wystarczy przejść na witrynę internetową OptinMonster i kliknąć przycisk „Pobierz OptinMonster teraz”.

Następnie należy zainstalować i włączyć darmową wtyczkę OptinMonster na twojej witrynie internetowej WordPress. Aby uzyskać szczegółowe instrukcje, warto zapoznać się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu, kreator konfiguracji OptinMonster otworzy się w twoim panelu administracyjnym WordPress.

Następnie kliknij przycisk „Połącz istniejące konto”, aby połączyć twoją witrynę WordPress z kontem OptinMonster.

Spowoduje to otwarcie nowego okna na ekranie twojego komputera.

Następnie kliknij przycisk „Połącz z WordPress”, aby przejść dalej.

Krok 2: Stwórz i dostosuj swój baner.

Po połączeniu twojego konta WordPress z OptinMonster, przejdź do strony OptinMonster ” Kampanie z panelu bocznego administratora WordPress.

Następnie kliknij przycisk „Utwórz swoją pierwszą kampanię”, aby rozpocząć tworzenie projektu banera witryny internetowej.

Spowoduje to przejście do strony „Szablony”, gdzie można rozpocząć od wyboru rodzaju kampanii.

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

Następnie należy wybrać szablon dla wybranej kampanii.

W tym poradniku wybierzemy szablon dla rodzaju kampanii „Pływający pasek”.

Następnie zostaniesz poproszony o podanie nazwy tworzonej kampanii. Wystarczy wpisać twój rodzaj nazwy i kliknąć przycisk „Rozpocznij tworzenie”, aby przejść dalej.

Spowoduje to uruchomienie na ekranie interfejsu przeciągania i upuszczania OptinMonster, w którym można rozpocząć konfigurowanie twojego banera. Z tego miejsca możesz przeciągać i upuszczać wybrane przez ciebie pola z panelu bocznego po lewej stronie na baner.

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

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

Z tego miejsca 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, obrazki, tekst lub wezwania do działania w projekcie banera witryny internetowej.

Gdy to zrobisz, musisz wybrać pozycję banera.

Domyślnie pływający pasek OptinMonster jest wyświetlany na dole ekranu twojej witryny internetowej po rozpoczęciu przewijania.

Można jednak łatwo zmienić to ustawienie, klikając ikonkę „Ustawienia” u dołu panelu bocznego po lewej stronie.

Spowoduje to otwarcie ustawień w lewej kolumnie, gdzie należy rozwinąć kartę „Floating Bar Settings”. W tym miejscu wystarczy przełączyć przełącznik „Wczytywać Floating Bar u góry strony?”, aby wyświetlić baner u góry.

Krok 3: Dodaj wyzwalacze dla twojego banera

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

Pamiętaj, że musisz przejść do tej karty tylko wtedy, gdy chcesz dodać konkretny wyzwalacz wyświetlania dla twojego banera. W przeciwnym razie możesz przejść do następnego kroku.

Na przykład, jeśli chcesz wyświetlić twój baner, gdy użytkownik ma zamiar opuścić twoją witrynę, musisz wybrać opcję „Exit Intent”.

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

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

Spowoduje to przejście do nowego ekranu. Tutaj musisz upewnić się, że opcja „Optin” jest wybrana w menu rozwijanym „Pokaż zobacz kampanię”.

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

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 poprawić.

Krok 4: Opublikuj swój baner

Możesz teraz przejść do karty „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 twojej witrynie internetowej.

Teraz przejdź na twoją witrynę internetową, aby zobaczyć baner u góry ekranu.

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

Metoda 2: Stwórz baner witryny internetowej za pomocą Canva (za darmo)

Jeśli chcesz zrobić baner witryny internetowej za darmo, to ta metoda jest dla Ciebie.

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

Krok 1: Utwórz konto Canva

Najpierw należy przejść na witrynę internetową Canva i kliknąć przycisk „Zarejestruj się”, aby utworzyć konto.

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

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

Z tego miejsca należy przejść do karty „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 Canva. Jednak niektóre z tych szablonów mogą być zablokowane, ponieważ są to funkcje płatne.

Krok 2: Zaprojektuj swój baner na witrynę internetową

Po wybraniu szablonu na ekranie zostanie uruchomiony interfejs projektowania Canva.

Z tego miejsca możesz dostosować własny baner do swoich upodobań. Możesz zmienić istniejącą treść, klikając bloki i dodając twój tekst.

Możesz nawet dodawać różne elementy graficzne, takie jak naklejki, zdjęcia i filmy, przełączając się na kartę „Elementy” w lewej kolumnie.

Po dodaniu elementu można dalej zmieniać jego animację, pozycję i przezroczystość z menu u góry.

Możesz również przesyłać pliki multimedialne z twojego komputera, przechodząc do karty „Uploads” w lewej kolumnie.

Aby dodać tekst do twojego banera, po prostu przełącz się na kartę „Pole tekstowe” z kolumny po lewej stronie.

Tam możesz użyć domyślnych stylów tekstu lub różnych kombinacji pisma, aby dodać treść do twojego banera.

Możesz nawet dodać wezwanie do działania z odnośnikiem, zaznaczając tekst za pomocą twojej myszy. Spowoduje to wyświetlenie ikonki odnośnika u góry tekstu.

Wystarczy kliknąć tę ikonkę, a następnie skopiować i wkleić odnośnik, który chcesz dodać.

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

Krok 3: Uzyskanie kodu osadzania dla banera

Gdy twój konfigurator banera będzie już satysfakcjonujący, kliknij przycisk „Udostępnij” w prawym górnym rogu ekranu.

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

Zostaniesz teraz przeniesiony do menu „Wszystkie opcje”, gdzie musisz wybrać opcję „Osadzanie”.

Gdy to zrobisz, na ekranie pojawi się nowy monit. Następnie wystarczy kliknąć przycisk „Osadzaj”.

Canva utworzy teraz kod osadzania HTML.

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

Krok 4: Dodanie kodu osadzania HTML w WordPress

Teraz możesz wyświetlić swój baner na swojej stronie WordPress, wpisie lub panelu bocznym, zgodnie z własnymi upodobaniami. W tym poradniku będziemy wyświetlać nasz baner na stronie WordPress.

Najpierw należy otworzyć stronę lub wpis, do którego chcemy dodać baner.

Następnie kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu, aby znaleźć i dodać własny blok HTML do strony.

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

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

Teraz przejdź na twoją witrynę internetową, aby zobaczyć baner WordPress w działaniu.

Metoda 3: Stwórz baner witryny internetowej przy użyciu Thrive Leads

Możesz również utworzyć baner witryny internetowej za pomocą Thrive Leads. Jest to popularna wtyczka WordPress popup używana przez ponad 114 000 witryn internetowych.

Dzięki Thrive Leads możesz projektować wysokiej jakości banery, które pomogą ci pozyskiwać leady na twojej witrynie WordPress i rozwijać listę mailingową.

Krok 1: Zainstaluj Thrive Leads na twojej witrynie internetowej WordPress

Najpierw należy przejść na witrynę internetową Thrive Themes i założyć konto. Gdy już to zrobisz, przejdź do twojego kokpitu użytkownika.

Następnie kliknij odnośnik „Pobierz i zainstaluj wtyczkę Thrive Product Manager”.

Następnie przejdź na twoją witrynę internetową WordPress, aby zainstalować i włączać wtyczkę Thrive Product Manager. Aby uzyskać szczegółowe instrukcje, warto zapoznać się z naszym przewodnikiem krok po kroku na temat instalacji wtyczki WordPress.

Po włączaniu, przejdź do karty Product Manager z kokpitu administracyjnego WordPress i kliknij przycisk „Loguj się na moje konto”.

Po wpiszeniu twoich danych uwierzytelniających, będziesz mógł zobaczyć kokpit Thrive Product Manager.

Z tego miejsca możesz wybrać produkty, które chcesz zainstalować i używać na swojej witrynie. Wystarczy wybrać wtyczkę „Thrive Leads” i kliknąć przycisk „Zainstaluj wybrane produkty”.

Krok 2: Utwórz baner witryny internetowej

Po instalacji wtyczki należy przejść na stronę kokpitu Thrive ” Thrive Leads z panelu bocznego administratora WordPress.

Gdy już się tam znajdziesz, kliknij przycisk „Utwórz nową” obok opcji „Grupy wiodące”.

Spowoduje to wyświetlenie na ekranie okna „Utwórz nową grupę potencjalnych klientów”, w którym musisz wpisać nazwę tworzonej grupy potencjalnych klientów.

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

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

Następnie utworzona grupa potencjalnych klientów zostanie dodana do ekranu. W tym miejscu kliknij przycisk „Dodaj nowy rodzaj formularza Opt-In”.

Spowoduje to wyświetlenie nowego monitu, w którym należy wybrać rodzaj banera, który ma zostać utworzony.

Możesz utworzyć baner typu slide-in, wstążkę, widżet, in-content, lightbox lub scroll mat zgodnie z twoimi upodobaniami.

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

W tym poradniku stworzymy baner wstążkowy dla naszej witryny.

Po wybraniu rodzaju projektu banera witryny internetowej podpowiedź automatycznie zniknie z ekranu.

Teraz, aby otworzyć kokpit grupy potencjalnych klientów, musisz kliknąć przycisk „Dodaj” w prawym rogu twojej karty Grupy potencjalnych klientów.

Spowoduje to przejście do kokpitu grup potencjalnych klientów, gdzie wszystkie formularze i raporty potencjalnych klientów dla twojej grupy będą wyświetlane po uruchomieniu kampanii.

Na przykład, jeśli chcesz utworzyć baner do przechwytywania adresów e-mail, wszystkie informacje o użytkownikach zebrane za pośrednictwem banera będą wyświetlane w tym miejscu.

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

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

Po utworzeniu twojego formularza zostanie on wyświetlony w kokpicie Lead Groups.

Następnie kliknij przycisk „Edytuj projekt” w prawym rogu, aby rozpocząć tworzenie twojego banera.

Krok 3: Dostosuj własny baner witryny internetowej

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

Z tego miejsca możesz zacząć od wybrania szablonu dla twojego banera z podpowiedzi „Thrive Leads Library”.

Następnie można użyć jednego z gotowych szablonów lub dostosować go za pomocą edytora wizualnego. Po dokonaniu twojego wyboru, po prostu kliknij przycisk „Wybierz szablon”, aby przejść dalej.

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

Na przykład, jeśli chcesz zmienić kolor przycisku w twoim szablonie, musisz go kliknąć, aby otworzyć jego ustawienia na panelu bocznym.

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

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

Na przykład, jeśli chcesz dodać przyciski kont mediów społecznościowych do twojego banera, będziesz musiał przeciągnąć i upuścić element Social Follow z prawego panelu bocznego.

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

Następnie musisz powrócić do twojego kokpitu Lead Groups.

Krok 4: Konfiguracja ustawień banera

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

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

Następnie kliknij przycisk „Zapisz”.

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

Spowoduje to wyświetlenie monitu „Ustawienia wyświetlania”, w którym za pomocą pokazu slajdów można określić liczbę wyświetleń banera na ekranie.

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

Jeśli chcesz dodać konkretny wyzwalacz dla twojego banera, musisz kliknąć opcję „Wyzwalacz” w wierszu formularza.

Spowoduje to wyświetlenie monitu „Ustawienia wyzwalacza”. W tym miejscu możesz wybrać wyzwalacz dla twojego banera z rozwijanego menu, np. po upływie określonego czasu lub gdy użytkownik dotrze do dolnej części strony.

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

Krok 5: Opublikuj swój baner

Po skonfigurowaniu ustawień banerów, musisz opuścić kokpit Lead Groups i wrócić do kokpitu Thrive Leads, klikając odnośnik u góry.

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

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

Tutaj możesz wybrać strony witryny internetowej, na których ma być wyświetlany baner. Na przykład, jeśli chcesz, aby baner wyświetlał się na górze wszystkich stron i wpisów, możesz zaznaczyć pole obok tych opcji.

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

Teraz użytkownik może przejść na twoją witrynę internetową, aby sprawdzić baner wyświetlany u góry strony.

Tak to wyglądało na naszej demonstracyjnej witrynie internetowej.

Bonus: Dodaj inteligentne banery aplikacji w WordPress

Jeśli posiadasz aplikację mobilną dla twojej witryny internetowej, to dobrym pomysłem jest wyświetlanie inteligentnych banerów aplikacji. Banery te będą promować twoją aplikację i zachęcać użytkowników iPhone’ów lub iPadów do jej pobrania.

Gdy odwiedzający klikną ten baner, zostaną przeniesieni do sklepu z aplikacjami, gdzie będą mogli pobrać twoją aplikację. Jeśli aplikacja jest już zainstalowana na ich urządzeniu, baner inteligentnej aplikacji poprosi ich o jej otwarcie.

Możesz łatwo dodać inteligentny baner aplikacji w WordPress z WPCode. Jest to najlepsza na rynku wtyczka do fragmentów kodu WordPress, która pozwala łatwo dodać identyfikator twojej aplikacji do witryny internetowej.

Aby uzyskać więcej informacji, zobacz nasz poradnik, jak łatwo dodać baner inteligentnej aplikacji w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo stworzyć baner witryny internetowej dla WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących, jak dostosować kolory na twojej witrynie internetowej WordPress i naszymi najlepszymi programami do projektowania stron internetowych.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.