Przełącz menu

Jak tworzyć nagłówki i stopki za pomocą motywu Beaver

Opublikowany: 2024-10-03

25% zniżki na wszystkie produkty Beaver Builder... Pośpiesz się, wyprzedaż wkrótce się skończy! Dowiedz się więcej

how to create headers and footers using beaver themer
  • Motyw bobra

Jak tworzyć nagłówki i stopki za pomocą motywu Beaver

Narzędzia do tworzenia stron doskonale nadają się do tworzenia pięknych stron, ale często nie obejmują dostosowywania nagłówków i stopek. To ograniczenie może prowadzić do niespójności wizualnych, które negatywnie wpływają na doświadczenie użytkownika (UX) i spójność marki.

Na szczęście nasza wtyczka do tworzenia motywów Beaver Themer umożliwia łatwe projektowanie niestandardowych nagłówków i stopek, zapewniając spójność wizualną całej witryny.

W tym przewodniku omówimy cztery proste kroki tworzenia nagłówków i stopek za pomocą Beaver Themer. Zanurzmy się!

Spis treści

  • Wprowadzenie do motywu bobra
  • Jak tworzyć nagłówki za pomocą motywu Beaver (w 4 krokach)
  • Jak utworzyć stopkę za pomocą motywu Beaver (w 4 krokach)
  • Ostatnie przemyślenia
  • Powiązane pytania

Wprowadzenie do motywu bobra

Beaver Themer przenosi tworzenie stron na zupełnie nowy poziom, umożliwiając dostosowywanie obszarów witryny często definiowanych przez motyw — takich jak nagłówki, stopki i inne. Otwiera to możliwość uzyskania spójnego, markowego wyglądu w całej witrynie:

Wtyczka do tworzenia motywów Beaver Theme

Dzięki Beaver Themer możesz:

  • Dostosuj nagłówki, stopki, paski ogłoszeń i wezwania do działania.
  • Projektuj niestandardowe układy stron 404, stron wyszukiwania i archiwów blogów.
  • Twórz szablony dla niestandardowych typów postów.
  • Kontroluj ustawienia wyświetlania na wszystkich stronach lub tylko na wybranych stronach.

Dzięki edytorowi „przeciągnij i upuść” Beaver Builder dodawanie i stylizowanie elementów jest tak proste, jak tworzenie standardowej strony, wraz z opcjami kolorów, układami i modułami, takimi jak przyciski i formularze kontaktowe.

Uzyskaj dostęp do motywu Beaver dzięki planom premium

Dobra wiadomość jest taka, że ​​Beaver Themer jest zawarty w każdym planie premium Beaver Builder:

Nowy cennik Beaver Builder 2024

Oznacza to, że inwestując w plan premium, zyskujesz dostęp do zaawansowanych opcji dostosowywania.

Teraz, gdy poznaliśmy zalety Beaver Themer, przejdźmy do krok po kroku procesu tworzenia nagłówków za pomocą Beaver Themer.

Jak tworzyć nagłówki za pomocą motywu Beaver (w 4 krokach)

Niestandardowy nagłówek może pomóc zaprezentować Twoją markę, ułatwić nawigację w witrynie i wyróżnić kluczowe wezwania do działania. Oto jak go utworzyć za pomocą Beaver Themer:

Aby rozpocząć, upewnij się, że masz zainstalowany, aktywowany i licencjonowany moduł do tworzenia stron premium Beaver Builder oraz wtyczki Beaver Themer. Utwórz także menu dla swojej witryny, przechodząc do Wygląd > Menu w panelu WordPress.

Krok 1: Utwórz nowy układ motywu

Aby utworzyć nowy układ motywu, kliknij Beaver Builder > Układy motywu z obszaru administracyjnego WordPress. Następnie wybierz opcję Dodaj nowy :

twórz nagłówki i stopki z motywem bobra; krok 1: utwórz nowy układ motywu

Tutaj możesz nadać swojemu układowi tytuł :

twórz nagłówki i stopki z motywem bobra; Dodaj nagłówek do WordPressa za pomocą Beaver Themer

W polu Typ wybierz Układ motywu . W przypadku Układu użyj menu rozwijanego i wybierz Nagłówek . Kliknij opcję Dodaj układ motywu, aby kontynuować.

Krok 2: Skonfiguruj ustawienia

Następnie na stronie ustawień określ, gdzie i jak będzie wyświetlany nagłówek:

twórz nagłówki i stopki z motywem bobra; Edytuj swój nagłówek za pomocą Beaver Themer
  • Przyklejony nagłówek : ten styl nagłówka pozostaje niezmieniony u góry okna przeglądarki podczas przewijania strony w dół.
  • Nagłówek nakładki : wybierz tę opcję, aby tło nagłówka było przezroczyste i zawartość znajdowała się na górze ekranu.
  • Lokalizacja : wybierz, czy nagłówek ma być wyświetlany w całej witrynie, czy tylko na wybranych stronach.
  • Reguły : Kontroluj widoczność na podstawie statusu logowania użytkownika lub innych kryteriów.

Kliknij Publikuj, aby zapisać te ustawienia.

Krok 3: Dostosuj układ nagłówka

Po skonfigurowaniu ustawień kliknij opcję Uruchom Beaver Builder , aby otworzyć nowy nagłówek w edytorze:

twórz nagłówki i stopki z motywem bobra; Uzyskaj dostęp do edytora Beaver Builder, aby dostosować nagłówek Beaver Themer

W tym przypadku Beaver Builder automatycznie udostępnia domyślny szablon nagłówka z kilkoma modułami, w tym danymi kontaktowymi, ikonami społecznościowymi, tytułem i menu:

twórz nagłówki i stopki z motywem bobra; Domyślne opcje dostępne w nagłówku Beaver Themer

Możesz usunąć te moduły, aby zbudować nagłówek od zera lub, jeśli wolisz, zacząć od innego, wstępnie zaprojektowanego szablonu nagłówka dostępnego w panelu Treść:

twórz nagłówki i stopki z motywem bobra; Wybierz jeden z dostępnych szablonów układu nagłówka Beaver Themer

Możesz także spersonalizować każdy moduł własnymi danymi. Możesz na przykład dodać linki do swoich kont społecznościowych lub edytować tytuł witryny. Po prostu kliknij moduł, który chcesz edytować, a pojawi się wyskakujące okienko ustawień umożliwiające łatwe dostosowanie.

twórz nagłówki i stopki z motywem bobra; Edytuj nagłówek swojej witryny za pomocą Beaver Builder

Niektóre moduły wykorzystują połączenie terenowe do dynamicznego generowania treści. Na przykład nagłówek Twojej witryny może zostać automatycznie pobrany z tytułu witryny w ustawieniach WordPress. Aby usunąć to połączenie polowe, wystarczy kliknąć znajdujący się obok niego znak „X”.

twórz nagłówki i stopki z motywem bobra; Usuń połączenie pola w nagłówku Beaver Themer

Następnie po prostu wpisz preferowany tytuł w polu tekstowym Nagłówek :

twórz nagłówki i stopki z motywem bobra; Dodaj nowy nagłówek do nagłówka Beaver Themer

Na karcie Styl możesz dostosować kolory, czcionki i inne elementy, aby dopasować je do wyglądu swojej marki. Użyj próbnika kolorów, aby wybrać idealny odcień i wybierz czcionkę pasującą do osobowości Twojej marki. Na koniec dostosuj rozmiar czcionki za pomocą suwaka, aby uzyskać idealne dopasowanie.

twórz nagłówki i stopki z motywem bobra; Dostosowywanie nagłówka motywu Beaver Themer

Jeśli chcesz zmienić rozmieszczenie modułów w nagłówku, po prostu kliknij ikonę Przenieś i przeciągnij każdy moduł do preferowanej pozycji w układzie:

twórz nagłówki i stopki z motywem bobra; Przenoszenie modułów Beaver Builder w nagłówku

Aby zaktualizować kolor tła wiersza, kliknij ikonę klucza . W wyskakującym okienku Ustawienia wiersza przejdź do karty Styl, następnie przewiń do opcji Kolor tła i wybierz żądany odcień:

twórz nagłówki i stopki z motywem bobra; Zmiana koloru tła nagłówka

Pamiętaj, że możesz edytować dowolny wiersz, kolumnę lub moduł w ten sam sposób, klikając ikonę klucza .

Krok 4: Dodaj treść do nagłówka

Możesz także rozważyć dodanie większej liczby modułów do nagłówka. Jak wspomniano wcześniej, Beaver Builder umożliwia dynamiczną zawartość poprzez połączenia terenowe.

Aby skonfigurować własne połączenia terenowe, wystarczy kliknąć ikonę + obok pola, aby wyświetlić dostępne pola:

twórz nagłówki i stopki z motywem bobra; Tworzenie połączenia terenowego z Beaver Builder

Następnie kliknij Połącz , aby wygenerować zawartość dynamiczną.

Jedną z najlepszych części tworzenia nagłówka za pomocą Beaver Builder jest to, że możesz wybrać dowolny moduł, który chcesz dodać do nagłówka. Aby uzyskać dostęp do dostępnych modułów, wystarczy kliknąć ikonę + :

twórz nagłówki i stopki z motywem bobra; Otwieranie paska bocznego Beaver Builder

Ta czynność otwiera panel Treść. Jeśli chcesz dodać hasło swojej firmy do nagłówka, po prostu znajdź moduł Edytora tekstu i przeciągnij go do swojego układu:

twórz nagłówki i stopki z motywem bobra; Korzystanie z modułu edytora tekstu Beaver Builder

Kiedy upuścisz go na stronę, pojawi się wyskakujące okienko, w którym możesz dodać swój tekst. Następnie przejdź do karty Styl , aby zmienić czcionkę, kolor i rozmiar tekstu:

twórz nagłówki i stopki z motywem bobra; Edycja edytora tekstu w Beaver Builder

Aby dostosować dopełnienie, dodać niestandardowy CSS lub włączyć animacje do modułu tekstowego, kliknij kartę Zaawansowane.

Możesz także umieścić wezwanie do działania w nagłówku. Aby to zrobić, dodaj moduł Przycisk, następnie użyj zakładki Ogólne, aby dostosować tekst, wstaw swój link i dodaj ikonę:

twórz nagłówki i stopki z motywem bobra; Moduł przycisku Beaver Builder

Na karcie Styl możesz dostosować szerokość, wybrać kolory tekstu i tła — w tym kolory najechania myszką — oraz zmodyfikować wyrównanie i dopełnienie:

twórz nagłówki i stopki z motywem bobra; Dostosuj przycisk w nagłówku

Proces jest spójny we wszystkich modułach, niezależnie od tego, czy chcesz dodać zdjęcie, karuzelę postów czy licznik czasu.

Jak utworzyć stopkę za pomocą motywu Beaver (w 4 krokach)

Zaprojektowanie niestandardowej stopki dla Twojej witryny jest również mądrym posunięciem. Może pomóc w zapewnieniu zgodności z przepisami i poprawić komfort użytkowania. Na przykład, jeśli zbierasz dane osobowe, korzystne będzie dodanie linku do Twojej polityki prywatności. Dołączenie mapy witryny może również ułatwić użytkownikom poruszanie się po witrynie.

Dodatkowo możesz wyświetlić swoje dane kontaktowe na wszystkich stronach, dzięki czemu będą one łatwo dostępne. Możesz nawet rozważyć dodanie formularza rejestracyjnego, aby zachęcić do konwersji.

Aby utworzyć niestandardową stopkę, wykonaj podobny proces, jak podczas tworzenia nagłówka, korzystając z wtyczki premium do tworzenia stron Beaver Builder wraz z Beaver Themer.

Krok 1: Skonfiguruj nowy układ motywu

Podobnie jak w przypadku nagłówka, zaczniesz od utworzenia układu stopki. Przejdź do Beaver Builder > Układy motywów i kliknij Dodaj nowy .

twórz nagłówki i stopki z motywem bobra; Skonfiguruj nowy układ motywu

Kroki są prawie takie same jak poprzednio — nazwij stopkę, wybierz Układ motywu dla Typu i wybierz Stopka dla Układu :

twórz nagłówki i stopki z motywem bobra; Dodaj nową stopkę za pomocą Beaver Themer

Następnie kliknij Dodaj układ motywu .

Krok 2: Skonfiguruj ustawienia stopki

Pojawi się nowa strona, na której możesz edytować układ stopki. Te ustawienia są prostsze niż ustawienia nagłówka.

Wybierz miejsce, w którym chcesz wyświetlać stopkę na swojej stronie internetowej. Użyj menu rozwijanego Lokalizacja, aby to ustawić:

twórz nagłówki i stopki z motywem bobra; Edytuj układ stopki za pomocą Beaver Themer

Kliknij odpowiedni przycisk, aby dodać reguły dotyczące lokalizacji i wykluczania. Wybierz konkretne strony, które chcesz uwzględnić lub wykluczyć.

Powtórz to w sekcji Zasady. Kiedy już będziesz zadowolony z ustawień stopki, kliknij Publikuj .

Krok 3: Dostosuj układ stopki

Teraz wybierz opcję Uruchom Beaver Builde r, aby otworzyć edytor:

Uruchom Beaver Builder, aby edytować stopkę

Podobnie jak w przypadku nagłówka, Beaver Builder udostępnia domyślny szablon układu stopki:

Domyślne moduły stopki Beaver Builder

Na przykład dostępna jest sekcja zawierająca dane kontaktowe Twojej firmy, łącza nawigacyjne do przydatnych zasobów i krótki opis Twojej firmy. Możesz usunąć te kolumny i zbudować stopkę od zera lub zmodyfikować istniejącą treść.

Na przykład zamiast Zasobów dodatkowych możesz zamieścić najpopularniejsze posty na blogu lub strony produktów. Możesz to zrobić, przechodząc do ikony klucza i wybierając Ustawienia kursu :

Ustawienia nagłówka w Beaver Builder

Następnie na karcie Ogólne możesz wpisać nowy nagłówek. Przejdź do karty Styl , aby zastosować niestandardowe kolory, wybrać unikalne czcionki i dostosować rozmiar nagłówka:

Edytuj nagłówki w stopce Beaver Themer

Kliknij Zapisz, aby zastosować zmiany.

Teraz musisz dodać linki do pola tekstowego poniżej. Ponownie najedź kursorem na ikonę klucza i wybierz Ustawienia edytora tekstu .

Tutaj możesz usunąć bieżące wpisy i zastąpić je własnymi stronami. W edytorze tekstu możesz dodać tytuły swoich stron i linki, klikając ikonę Link :

Dodaj linki do stopki motywu Beaver

Wklej swój adres URL i wybierz Zapisz . W ten sam sposób możesz także dodać swój numer kontaktowy i firmowy adres e-mail.

Beaver Builder domyślnie zawiera informację o prawach autorskich. Dostosuj go klikając na moduł i dodając własne zestawienie:

Edytuj informację o prawach autorskich w Beaver Themer

Po skonfigurowaniu układu stopki nadszedł czas na dodanie treści usprawniających nawigację i wygodę użytkownika.

Krok 4: Dodaj treść do swojej stopki

Omówiliśmy podstawowe informacje, takie jak dane kontaktowe, linki do zasobów i informacje o prawach autorskich. Możesz jednak dodać dowolny moduł Beaver Builder, aby ulepszyć układ stopki.

Rozważ na przykład dodanie formularza rejestracji, aby zwiększyć zaangażowanie. Znajdź moduł Formularz subskrypcji i przeciągnij go do stopki:

Dodaj formularz subskrypcji do swojej stopki

Beaver Builder integruje się z wieloma dostawcami usług e-mail marketingu, umożliwiając wybór preferowanej usługi z rozwijanego menu:

Dodaj swojego dostawcę marketingu e-mailowego do formularza rejestracyjnego

Na tej karcie możesz dodać pole wyboru warunków korzystania z usługi lub dostosować wiadomość wyświetlaną użytkownikom po dokonaniu subskrypcji.

Przełącz się na kartę Przycisk , aby edytować tekst przycisku, dostosować kolory, dodać dopełnienie i nie tylko:

Edytuj przycisk subskrypcji w formularzu rejestracyjnym

Karta Captcha może okazać się przydatna, jeśli chcesz, aby użytkownicy sprawdzali, czy nie są botami.

Rozważ także dodanie linków do swoich kont społecznościowych. Skorzystaj z modułu Icon Group i przeciągnij go do swojej stopki:

Dodanie modułu grupy ikon w Beaver Builder

Następnie w zakładce Ikony wyskakującego okienka kliknij Edytuj ikonę :

Edytuj moduł grupy ikon Beaver Builder

Kliknij opcję Wybierz ikonę, aby wybrać odpowiednią. Znajdziesz ikony głównych platform mediów społecznościowych, takich jak Facebook, LinkedIn i Twitter. Następnie dodaj link do swojego profilu:

Dodaj swoje ikony społecznościowe do stopki

Kliknij Zapisz , aby wrócić do miejsca, w którym możesz dodać resztę swoich linków społecznościowych:

Dodawanie ikon mediów społecznościowych do stopki

Kontynuuj dodawanie modułów do swojej stopki. Gdy układ będzie zadowalający, kliknij Gotowe > Opublikuj .

Ostatnie przemyślenia

Kreatory stron upraszczają projektowanie postów i stron, ale często ograniczają dostosowywanie nagłówków i stopek. Na szczęście Beaver Themer daje Ci pełną kontrolę nad wyglądem Twojej witryny.

Oto krótkie podsumowanie tworzenia nagłówków i stopek za pomocą Beaver Themer:

  1. Utwórz nowy układ motywu bobra.
  2. Skonfiguruj swoje ustawienia.
  3. Dostosuj układ nagłówka i stopki.
  4. Dodaj treść do nagłówka lub stopki.

Wykonując te czynności, możesz ulepszyć funkcjonalność swojej witryny i upewnić się, że odzwierciedla ona unikalną tożsamość Twojej marki.

Powiązane pytania

Jakie są zalety używania Beaver Themer do nagłówków i stopek?

Beaver Themer oferuje szerokie możliwości dostosowywania, umożliwiając tworzenie unikalnych nagłówków i stopek pasujących do Twojej marki. Zapewnia kontrolę nad układami i możliwość łatwej integracji treści dynamicznych.

Jak korzystać z motywu Beaver?

Beaver Themer daje Ci pełną kontrolę nad wyglądem Twojej witryny. Możesz łatwo edytować nagłówki, stopki, strony 404 i inne istotne sekcje. Zacznij od utworzenia nowego układu Themera i skonfigurowania ustawień pozwalających zarządzać sposobem wyświetlania treści. Następnie dostosuj kolory i dodaj różne moduły, aby poprawić wygląd swojej witryny

Jak dostosować nagłówek do urządzeń mobilnych?

Aby Twój nagłówek był przyjazny dla urządzeń mobilnych, sprawdź ustawienia responsywności w Beaver Builder. Możesz dostosować układ i rozmiary czcionek specjalnie dla urządzeń mobilnych, aby poprawić użyteczność.

O Willu Morrisie

Will Morris jest autorem w WordCandy. Kiedy nie pisze o WordPressie, lubi wystawiać swój stand-up w mediach lokalnych.

Nasz biuletyn

Nasz biuletyn jest pisany osobiście i wysyłany mniej więcej raz w miesiącu. Nie jest to ani trochę irytujące ani spamerskie.
Obiecujemy.

Dołącz do Newslettera

Wypróbuj Beaver Builder już dziś

Beaver Builder