Wizualnie efektowny baner jest jedną z pierwszych rzeczy, które odwiedzający zauważają, gdy trafiają na Twoją stronę. Określa ton Twojej marki, komunikuje Twoje przesłanie i zachęca do konwersji, co czyni go potężnym narzędziem do podkreślania Twoich produktów, usług lub ważnych aktualizacji.
Na przestrzeni lat używaliśmy różnych rodzajów banerów na WPBeginner do promowania naszego newslettera, podkreślania ofert Black Friday, udostępniania darmowych kursów, wyświetlania naszych profesjonalnych usług i nie tylko.
Dzięki tym kampaniom zauważyliśmy, że banery konsekwentnie przyciągają uwagę ludzi, zachęcają do klikania przycisków wezwania do działania i generują potencjalnych klientów dla naszej firmy.
W tym artykule pokażemy Ci, jak łatwo stworzyć baner dla swojej strony WordPress. W ten sposób możesz wykorzystać wszystkie te korzyści do rozwoju swojej firmy.
Czym jest baner na stronie internetowej?
Baner to graficzny element wyświetlany u góry, na dole lub z boku strony WordPress. Często zawiera nazwę marki i logo, a także inne elementy projektowe, w celu promocji konkretnego produktu, usługi lub wydarzenia.
Na przykład, jeśli sklep e-commerce 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 zrobić silne wrażenie i zachęcić odwiedzających do przeglądania reszty Twojej witryny. Ponadto banery mogą być używane do promowania produktów partnerskich, budowania tożsamości marki, tworzenia listy e-mailowej poprzez zachęcanie odwiedzających do zapisania się do Twojego newslettera i kierowania ruchu na inne strony Twojej witryny.
Możesz również używać banerów do promowania swoich kont w mediach społecznościowych i zachęcania odwiedzających do śledzenia lub polubienia Twoich stron.
Jaki jest najlepszy rozmiar banera na stronie internetowej?
Idealny rozmiar banera strony 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 na górze 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 to:
- Średni baner: 300 x 250
- Leaderboard: 728 x 90
- Szeroki Słup: 160 x 600
- Połowa strony: 300 x 600
- Duża plansza: 970 x 90
- Billboard: 970 x 250
- Duży prostokąt: 326 x 280
- Pionowy baner: 120 x 240
- Pełny baner: 468 x 60
- Połowa banera: 234 x 60
Jeśli chcesz wyświetlić baner dla wydarzenia na pasku bocznym, możesz użyć rozmiarów banerów Wide Skyscraper lub Half-Page. Podobnie możesz również użyć rozmiaru banera Medium, aby wyświetlić baner w kształcie kwadratu na swojej stronie.
Jeśli chcesz wyświetlać banery reklamowe, zapoznaj się z naszym przewodnikiem dla początkujących na temat najlepiej działających rozmiarów i formatów banerów Google AdSense dla WordPress.
Mając to na uwadze, zobaczmy, jak łatwo możesz stworzyć baner na swojej stronie WordPress. W tym samouczku omówimy trzy metody tworzenia banera, a poniższe linki możesz wykorzystać do przejścia do wybranej metody:
- Metoda 1: Utwórz baner na stronie internetowej za pomocą OptinMonster (zalecane)
- Metoda 2: Stwórz baner strony internetowej za pomocą Canva (bezpłatnie)
- Metoda 3: Utwórz baner na stronie internetowej za pomocą Thrive Leads
- Bonus: Dodaj inteligentne banery aplikacji w WordPress
Metoda 1: Utwórz baner na stronie internetowej za pomocą OptinMonster (zalecane)
OptinMonster to najlepsza wtyczka do tworzenia banerów WordPress na rynku, która pozwala łatwo tworzyć banery w formie pływającego paska i wyskakujące okienka dla Twojej witryny.
Jest to najlepsze narzędzie do optymalizacji konwersji i generowania leadów, które pomaga zamienić odwiedzających stronę internetową w subskrybentów i klientów.
Ponadto wiele szablonów banerów OptinMonster zawiera pola zapisu, które pozwalają na zbieranie imion, adresów e-mail i numerów telefonów odwiedzających Twoją witrynę.
Na przestrzeni lat kilkakrotnie korzystaliśmy z tego narzędzia do dodawania banerów i tworzenia udanych kampanii generowania leadów w WPBeginner. Więcej szczegółów znajdziesz w naszej kompletnej recenzji OptinMonster.
Krok 1: Zainstaluj OptinMonster na swojej stronie internetowej
Najpierw musisz zarejestrować konto OptinMonster. Aby to zrobić, po prostu odwiedź stronę OptinMonster i kliknij przycisk „Pobierz OptinMonster teraz”.
Następnie musisz zainstalować i aktywować darmową wtyczkę OptinMonster na swojej stronie internetowej WordPress. Szczegółowe instrukcje znajdziesz w naszym przewodniku dla początkujących na temat jak zainstalować wtyczkę WordPress.
Po aktywacji kreator konfiguracji OptinMonster otworzy się w panelu administracyjnym WordPress.
Stąd kliknij przycisk „Połącz istniejące konto”, aby połączyć swoją witrynę WordPress z kontem OptinMonster.
Otworzy to nowe okno na ekranie komputera.
Stąd kliknij przycisk „Połącz z WordPress”, aby przejść dalej.
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 kliknij przycisk „Utwórz swoją pierwszą kampanię”, aby rozpocząć projektowanie banera dla swojej witryny.
Zostaniesz przekierowany na stronę „Szablony”, gdzie możesz zacząć od wyboru typu kampanii.
Na przykład, jeśli chcesz wyświetlić 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świetlić swój baner jako wyskakujące okienko.
Następnie będziesz musiał wybrać szablon dla wybranej kampanii.
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 budowanie”, aby przejść dalej.
Spowoduje to uruchomienie interfejsu przeciągnij i upuść OptinMonster na ekranie, gdzie możesz zacząć dostosowywać swój baner. Stąd możesz przeciągać i upuszczać pola wyboru z lewego paska bocznego 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.
Następnie wystarczy kliknąć blok, aby otworzyć jego ustawienia w lewej kolumnie.
Stąd możesz zmienić tytuł przycisku, dodać adres URL swoich mediów społecznościowych, a nawet zmienić platformę mediów społecznościowych z menu rozwijanego.
Możesz również dodać inne bloki do wyświetlania filmów, obrazów, tekstu lub CTA w projekcie banera swojej strony internetowej.
Gdy to zrobisz, musisz wybrać pozycję banera.
Domyślnie pływający pasek OptinMonster jest wyświetlany na dole ekranu Twojej strony internetowej po rozpoczęciu przewijania.
Możesz jednak łatwo zmienić to ustawienie, klikając ikonę „Ustawienia” u dołu paska bocznego po lewej stronie.
Spowoduje to otwarcie ustawień w lewej kolumnie, gdzie musisz rozwinąć zakładkę „Ustawienia paska pływającego”. Stąd po prostu przełącz przełącznik „Załaduj pasek pływający u góry strony?”, aby wyświetlić baner u góry.
Krok 3: Dodaj wyzwalacze dla swojego banera
Po zaprojektowaniu banera przejdź do zakładki „Zasady wyświetlania” na górze. Stąd możesz dodać zasady wyświetlania banera.
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świetlić swój baner, gdy użytkownik zamierza opuścić Twoją witrynę, musisz wybrać opcję „Intencja wyjścia”.
Po wykonaniu tej czynności 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ść zamiaru wyjścia według własnych upodobań i kliknij przycisk „Następny krok”.
To przeniesie Cię do nowego ekranu. Tutaj musisz upewnić się, że opcja „Optin” jest zaznaczona w menu rozwijanym „Pokaż widok kampanii”.
Po wykonaniu tej czynności po prostu kliknij przycisk „Następny krok”.
Twoja reguła wyświetlania banera zostanie teraz pokazana na ekranie.
Jeśli chcesz coś tutaj zmienić, możesz kliknąć przycisk „Edytuj”, aby to naprawić.
Krok 4: Opublikuj swój baner
Możesz teraz przełączyć się na zakładkę „Publikuj” u góry i kliknąć przycisk „Zapisz” w prawym górnym rogu ekranu.
Następnie po prostu kliknij przycisk „Opublikuj”, aby wyświetlić baner na swojej stronie internetowej.
Teraz odwiedź swoją stronę internetową, aby zobaczyć baner u góry ekranu.
Tak to wyglądało na naszej stronie demonstracyjnej.
Metoda 2: Stwórz baner strony internetowej za pomocą Canva (bezpłatnie)
Jeśli chcesz stworzyć baner na stronę internetową za darmo, ta metoda jest dla Ciebie.
Canva to popularne narzędzie internetowe do tworzenia wszelkiego rodzaju grafik, w tym banerów, logotypów, plakatów, okładek książek i innych. Oferuje również darmową wersję, której możesz użyć do stworzenia projektu banera witryny.
Krok 1: Utwórz konto Canva
Najpierw odwiedź stronę Canva i kliknij przycisk „Zarejestruj się”, aby utworzyć konto.
Jeśli masz już konto Canva, możesz się po prostu zalogować.
Po utworzeniu konta zostaniesz przeniesiony na stronę główną swojego konta Canva.
Stąd musisz przełączyć się na zakładkę „Szablony” z lewej kolumny, a następnie wyszukać szablony banerów za pomocą pola wyszukiwania u góry.
Spowoduje to wyświetlenie wszystkich dostępnych szablonów banerów w Canvie. Jednak niektóre z tych szablonów mogą być zablokowane, ponieważ są to funkcje płatne.
Krok 2: Zaprojektuj baner swojej strony internetowej
Po wybraniu szablonu interfejs projektowania Canvy zostanie uruchomiony na ekranie.
Stąd możesz dostosować swój baner według własnych upodobań. Możesz zmienić istniejącą treść, klikając bloki i dodając swój tekst.
Możesz nawet dodać różne elementy graficzne, takie jak naklejki, zdjęcia i filmy, przełączając się na zakładkę „Elementy” w lewej kolumnie.
Po dodaniu elementu możesz dalej zmieniać jego animację, pozycję i przezroczystość z menu u góry.
Możesz także przesyłać pliki multimedialne z komputera, przełączając się na kartę „Przesłane” z lewej kolumny.
Aby dodać tekst do banera, przejdź do zakładki „Pole tekstowe” w kolumnie po lewej stronie.
Tam możesz użyć domyślnych stylów tekstu lub różnych kombinacji czcionek, aby dodać treść do swojego banera.
Możesz nawet dodać wezwanie do działania z linkiem, zaznaczając tekst myszą. Spowoduje to wyświetlenie ikony linku u góry tekstu.
Po prostu kliknij tę ikonę i skopiuj oraz wklej link, który chcesz dodać.
Następnie kliknij przycisk „Gotowe”, aby go zapisać.
Krok 3: Uzyskaj kod osadzania dla banera
Gdy będziesz zadowolony z personalizacji banera, po prostu kliknij przycisk „Udostępnij” w prawym górnym rogu ekranu.
Spowoduje to otwarcie menu podręcznego, w którym musisz wybrać opcję „Więcej” na dole.
Zostaniesz teraz przeniesiony do menu „Wszystkie opcje”, gdzie musisz wybrać opcję „Osadź”.
Po wykonaniu tej czynności na ekranie otworzy się nowe okno. Stąd po prostu kliknij przycisk „Osadź”.
Canva utworzy teraz dla Ciebie kod osadzania HTML.
Gdy pojawi się na ekranie, kliknij przycisk „Kopiuj” pod opcją „Kod osadzania HTML”.
Krok 4: Dodaj kod osadzania HTML w WordPress
Teraz możesz wyświetlić swój baner na stronie, wpisie lub pasku bocznym WordPress według własnego uznania. W tym samouczku pokażemy nasz baner na stronie WordPress.
Najpierw musisz otworzyć stronę lub wpis, do którego chcesz dodać baner.
Tam kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu, aby znaleźć i dodać blok Niestandardowy HTML do strony.
Po wykonaniu tej czynności po prostu wklej skopiowany kod osadzania do bloku.
Na koniec kliknij przycisk „Zaktualizuj” lub „Opublikuj”, aby zapisać zmiany.
Teraz odwiedź swoją stronę internetową, aby zobaczyć baner WordPress w akcji.
Metoda 3: Utwórz baner na stronie internetowej za pomocą Thrive Leads
Możesz również utworzyć baner na swojej stronie internetowej za pomocą Thrive Leads. Jest to popularna wtyczka popup dla WordPress, używana przez ponad 114 000+ stron internetowych.
Dzięki Thrive Leads możesz projektować wysokiej jakości banery, które pomogą Ci pozyskiwać leady na Twojej stronie WordPress i rozwijać Twoją listę e-mailową.
Dokładnie przetestowaliśmy to narzędzie w czasie rzeczywistym i uznaliśmy je za bardzo przyjazne dla początkujących, z intuicyjnym interfejsem i atrakcyjnymi szablonami. Szczegóły znajdziesz w naszej recenzji Thrive Themes Suite.
Krok 1: Zainstaluj Thrive Leads na swojej stronie WordPress
Najpierw musisz odwiedzić stronę internetową Thrive Themes i założyć konto. Po wykonaniu tej czynności przejdź do swojego panelu członkowskiego.
Stąd kliknij link „Pobierz i zainstaluj wtyczkę Thrive Product Manager”.
Następnie odwiedź swoją stronę WordPress, aby zainstalować i aktywować wtyczkę Thrive Product Manager. Szczegółowe instrukcje znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.
Po aktywacji przejdź do karty Menedżer produktów z pulpitu administracyjnego WordPress i kliknij przycisk „Zaloguj się na moje konto”.
Po wprowadzeniu danych logowania będziesz mógł zobaczyć swój panel menedżera produktów Thrive.
Stąd możesz wybrać produkty, które chcesz zainstalować i używać na swojej stronie. Po prostu wybierz wtyczkę „Thrive Leads” i kliknij przycisk „Zainstaluj wybrane produkty”.
Krok 2: Utwórz baner strony internetowej
Po zainstalowaniu wtyczki musisz przejść do strony Panel Thrive » Thrive Leads z paska bocznego administratora WordPress.
Gdy już tam będziesz, kliknij przycisk „Dodaj nowy” obok opcji „Grupy leadów”.
Spowoduje to wyświetlenie okna „Dodaj nową grupę odbiorców” na Twoim ekranie, gdzie musisz wpisać nazwę tworzonej grupy odbiorców.
Upewnij się, że nazwa grupy leadów pomoże Ci ją zidentyfikować.
Na przykład, jeśli tworzysz baner do budowania listy e-mailowej, możesz nazwać swoją grupę odbiorców „Kampania listy e-mailowej”.
Po tym grupa odbiorców, którą utworzyłeś, pojawi się na ekranie. Aby uzyskać do niej dostęp, kliknij przycisk „Dodaj nowy typ formularza zapisu”.
Spowoduje to otwarcie nowego monitu, w którym musisz wybrać typ banera, który chcesz utworzyć.
Możesz utworzyć baner typu wysuwany, wstążka, widżet, w treści, lightbox lub mata przewijana, zgodnie z własnymi upodobaniami.
Te banery będą działać jak formularz, ponieważ będą zbierać dane od użytkowników, w tym adresy e-mail, numery telefonów i inne.
W tym poradniku stworzymy baner wstążkowy dla naszej strony.
Po wybraniu typu projektu banera strony internetowej, monit automatycznie zniknie z ekranu.
Teraz, aby otworzyć pulpit grupy odbiorców, musisz kliknąć przycisk „Dodaj” w prawym rogu karty Grupy odbiorców.
To przejście do Twojego panelu grup potencjalnych klientów, gdzie wszystkie formularze i raporty dotyczące potencjalnych klientów dla grupy będą wyświetlane po uruchomieniu kampanii.
Na przykład, jeśli chcesz utworzyć baner do zbierania adresów e-mail, wszystkie informacje o użytkowniku zebrane za pomocą banera zostaną tutaj wyświetlone.
Na razie wystarczy kliknąć przycisk „Utwórz formularz”, aby rozpocząć tworzenie banera.
Spowoduje to otwarcie nowego okna, w którym musisz podać nazwę formularza i kliknąć przycisk „Utwórz formularz”.
Po utworzeniu formularza zostanie on wyświetlony w Twoim panelu grup potencjalnych klientów.
Stąd kliknij przycisk „Edytuj projekt” w prawym rogu, aby rozpocząć tworzenie banera.
Krok 3: Dostosuj baner swojej strony internetowej
Edytor wizualny Thrive zostanie teraz uruchomiony w nowej karcie na Twoim ekranie.
Stąd możesz zacząć od wybrania szablonu dla swojego banera z monitu „Biblioteka Thrive Leads”.
Następnie możesz użyć jednego z gotowych szablonów w obecnej postaci lub dalej go dostosować za pomocą edytora wizualnego. Po dokonaniu wyboru po prostu kliknij przycisk „Wybierz szablon”, aby przejść dalej.
Po dodaniu szablonu banera wstążkowego możesz łatwo dostosować jego elementy, klikając na każdy z nich. Spowoduje to otwarcie ustawień elementu w panelu po lewej stronie.
Na przykład, jeśli chcesz zmienić kolor przycisku w swoim szablonie, musisz kliknąć na niego, aby otworzyć jego ustawienia na pasku bocznym.
Jeśli chcesz dodać do swojego banera zupełnie nowy element, możesz to 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 kont mediów społecznościowych do swojego banera, musisz przeciągnąć i upuścić element Social Follow z prawego paska bocznego.
Gdy będziesz zadowolony, kliknij przycisk „Zapisz pracę” w lewym dolnym rogu, aby zapisać zmiany.
Następnie musisz wrócić do pulpitu Grupy odbiorców.
Krok 4: Konfiguracja ustawień banera
Gdy wrócisz do swojego panelu, możesz zmienić pozycję banera, klikając opcję „Pozycja” w wierszu formularza.
Spowoduje to otwarcie okna dialogowego „Ustawienia pozycji”, w którym możesz wybrać preferowaną pozycję banera z menu rozwijanego.
Następnie kliknij przycisk „Zapisz”.
Następnie, aby skonfigurować częstotliwość wyświetlania banera, kliknij opcję „Częstotliwość wyświetlania” w wierszu formularza.
Otworzy to okno dialogowe „Ustawienia wyświetlania”, w którym można użyć suwaka, aby określić, ile razy baner powinien być wyświetlany na ekranie.
Jeśli pozostawisz liczbę 0, baner będzie wyświetlany przez cały czas. Po dokonaniu wyboru kliknij przycisk „Zapisz”, aby zapisać ustawienia.
Jeśli chcesz dodać konkretny wyzwalacz do wyświetlania swojego banera, musisz kliknąć opcję „Wyzwalacz” w wierszu formularza.
Spowoduje to wyświetlenie monitu „Ustawienia wyzwalacza”. Tutaj możesz wybrać wyzwalacz dla swojego banera z menu rozwijanego, na przykład po określonym czasie lub gdy użytkownik dotrze do dołu strony.
Po zakończeniu kliknij przycisk „Zapisz”, aby zapisać ustawienia.
Krok 5: Opublikuj swój baner
Po skonfigurowaniu ustawień banera musisz wyjść z pulpitu Grupy odbiorców i wrócić do pulpitu Thrive Leads, klikając link na górze.
Gdy tam będziesz, rozwiń zakładkę Grupy Ołowiu i przełącz przełącznik „Wyświetl na komputerze” na „Włączone”. Jeśli chcesz również wyświetlać swój baner na urządzeniach mobilnych, przełącz przełącznik „Wyświetl na urządzeniach mobilnych” na „Włączone”.
Następnie kliknij ikonę zębatki w prawym górnym rogu zakładki Grup Leadów, aby otworzyć ustawienia wyświetlania.
Tutaj możesz wybrać strony internetowe, na których chcesz wyświetlić baner. Na przykład, jeśli chcesz, aby baner wyświetlał się na górze wszystkich stron i wpisów, zaznacz pole wyboru obok tych opcji.
Na koniec kliknij przycisk „Zapisz i zamknij”, aby zapisać zmiany.
Teraz możesz odwiedzić swoją stronę internetową, aby sprawdzić baner wyświetlany na górze strony.
Tak to wyglądało na naszej stronie demonstracyjnej.
Bonus: Dodaj inteligentne banery aplikacji w WordPress
Jeśli masz aplikację mobilną dla swojej strony internetowej, dobrym pomysłem jest wyświetlanie inteligentnych banerów aplikacji. Banery te będą promować Twoje aplikacje i zachęcać użytkowników iPhone'a lub iPada do ich pobrania.
Po kliknięciu na ten baner odwiedzający zostaną przekierowani do sklepu z aplikacjami, gdzie mogą pobrać Twoją aplikację. Jeśli aplikacja jest już zainstalowana na ich urządzeniu, inteligentny baner aplikacji poprosi ich o jej otwarcie.
Możesz łatwo dodać inteligentny baner aplikacji w WordPress za pomocą WPCode. Naszym zdaniem jest to najlepsza wtyczka do fragmentów kodu WordPress na rynku. Pozwala łatwo dodać identyfikator aplikacji do strony internetowej.
Więcej informacji znajdziesz w naszym poradniku na temat jak łatwo dodać inteligentny baner aplikacji w WordPressie.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo stworzyć baner na stronę WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących na temat jak dostosować kolory na swojej stronie WordPress oraz naszymi najlepszymi wyborami dotyczącymi najlepszego oprogramowania do projektowania stron internetowych.
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.
Ralph
Kiedyś tworzyłem banery jako proste pliki jpeg/png w Canvie i umieszczałem obrazy jako klikalne z linkami do miejsc, do których powinny przekierowywać. Jednak zawsze był to zły wybór. To, co wygląda dobrze na komputerze, wygląda źle na urządzeniach mobilnych i odwrotnie.
Obrazy mogą się skalować i dopasowywać do ekranu, ale nie adaptują się tak jak normalne banery zakodowane, które są znacznie lepsze. Pierwsza metoda wygląda naprawdę obiecująco i profesjonalnie, co mam nadzieję pomoże mi zwiększyć konwersje.