Szukasz sposobu na tworzenie niestandardowych układów w WordPress bez zagłębiania się w kod? Rozumiemy. Większość poradników jest albo jak czytanie powieści, albo zakłada, że jesteś ekspertem od kodowania.
Zauważyliśmy, że niektórzy doświadczeni użytkownicy WordPress unikają kreatorów stron, takich jak Beaver Builder, obawiając się, że stworzą nieporęczne projekty lub spowolnią swoje witryny.
Ale oto czego nauczyliśmy się, pomagając tysiącom początkujących: odpowiedni kreator stron może znacząco uprościć tworzenie witryn, jednocześnie zapewniając profesjonalne rezultaty.
W tym przewodniku krok po kroku pokażemy, jak tworzyć niestandardowe układy WordPress za pomocą Beaver Builder. Niezależnie od tego, czy zaczynasz od zera, czy korzystasz z gotowych szablonów, dowiesz się, jak zbudować dokładnie to, czego chcesz, bez konieczności kodowania.
Dlaczego używać Beaver Builder do tworzenia niestandardowych układów WordPress 👀
Wiele premium motywów WordPress zawiera gotowe układy stron dla różnych sekcji witryny. Czasami jednak wbudowany układ może nie odpowiadać Twoim potrzebom.
Możesz tworzyć niestandardowe szablony stron w WordPressie, tworząc motyw potomny, a następnie dodając własne szablony stron. Ale będziesz potrzebować pewnej wiedzy z zakresu PHP, HTML i CSS, aby to zadziałało.
Tutaj właśnie wkraczają narzędzia takie jak Beaver Builder. Jest to wtyczka do tworzenia stron typu „przeciągnij i upuść” dla WordPressa. Pomaga tworzyć własne niestandardowe układy stron bez pisania kodu.
Beaver Builder jest bardzo łatwy w użyciu i przyjazny dla początkujących. Jednocześnie jest wyposażony w niesamowite funkcje do tworzenia profesjonalnie wyglądających stron.
Działa ze wszystkimi motywami WordPress i ma mnóstwo modułów, które możesz po prostu przeciągnąć i upuścić na swoją stronę. Możesz stworzyć dowolny układ, jaki chcesz, i skonfigurować go dokładnie tak, jak sobie wyobrażałeś.
W tym samouczku Beaver Builder pokażemy Ci, jak używać Beaver Builder do tworzenia niestandardowych układów stron w WordPress. Możesz użyć poniższych szybkich linków, aby nawigować po tym artykule:
- Krok 1: Skonfiguruj wtyczkę Beaver Builder
- Krok 2: Utwórz swój pierwszy niestandardowy układ strony za pomocą Beaver Builder
- How to Manage Page Layout Templates in Beaver Builder
Krok 1: Skonfiguruj wtyczkę Beaver Builder
Najpierw musisz kupić wtyczkę Beaver Builder. Jest to płatna wtyczka, z cenami zaczynającymi się od 99 USD za nieograniczoną liczbę stron.
Następnie musisz zainstalować i aktywować wtyczkę Beaver Builder. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić stronę Ustawienia » Beaver Builder, aby wprowadzić swój klucz licencyjny.
Po wprowadzeniu klucza licencyjnego jesteś gotowy do tworzenia pięknych układów stron.
Krok 2: Utwórz swój pierwszy niestandardowy układ strony za pomocą Beaver Builder
Najpierw po prostu utwórz nową stronę w WordPress, odwiedzając Strony » Dodaj nową stronę.
Zanim otworzymy Beaver Builder, nadaj swojej nowej stronie tytuł i zapisz ją jako szkic.
Z naszego doświadczenia wynika, że kreator stron nie otwierał się, chyba że zrobiliśmy to najpierw.
Gdy to zrobisz, kliknij przycisk „Uruchom Beaver Builder”, aby rozpocząć.
Spowoduje to otwarcie frontendu Twojej strony w interfejsie Beaver Builder.
Jeśli po raz pierwszy korzystasz z Beaver Builder, zobaczysz wyskakujące okienko z powitaniem, oferujące wycieczkę z przewodnikiem.
Następnie musisz kliknąć przycisk '+' w górnym menu. Ten przycisk zmieni się w ikonę 'x'. Następnie przełącz się na zakładkę 'Szablony'.
Beaver Builder zawiera profesjonalnie zaprojektowane szablony, które pozwolą Ci od razu zacząć pracę.
Nie martw się; możesz dostosować szablon tak, jak chcesz. To tylko szybki sposób na rozpoczęcie pracy z układem.
Po wybraniu układu, Beaver Builder załaduje go w oknie podglądu. Najedź myszką na element, a Beaver Builder go podświetli.
Możesz po prostu kliknąć ikonę klucza na dowolnym podświetlonym elemencie, aby go edytować.
Beaver Builder wyświetli okno z różnymi ustawieniami, które możesz edytować.
Możesz zmienić czcionkę, kolor, tło, czcionkę, wypełnienie, margines i więcej.
Układy Beaver Builder opierają się na wierszach. Możesz przeciągać i upuszczać, aby zmieniać kolejność wierszy. Możesz również usunąć lub dodać nowy wiersz.
Po prostu kliknij ten sam przycisk „+” z wcześniejszego kroku i przejdź do sekcji „Wiersze”. Stąd możesz wybrać dowolne z prezentowanych wierszy i kolumn.
Beaver Builder doda wiersz do podglądu na żywo na Twojej stronie.
Możesz dodawać elementy do swojego wiersza za pomocą modułów podstawowych lub zaawansowanych oraz widżetów. Te moduły pozwalają dodawać najczęściej używane elementy, takie jak przyciski, nagłówki, tekst, obrazy, pokazy slajdów, audio, wideo itp.
Po prostu kliknij przycisk „+” i przejdź do sekcji „Moduły”. Następnie przeciągnij element do właśnie dodanego wiersza.
Kliknij element projektu WordPress, aby edytować jego właściwości.
Możesz również zapisać wiersz lub moduł, aby ponownie wykorzystać je później na innych stronach. Kliknij przycisk „Zapisz jako” podczas edycji wiersza lub modułu.
Kliknij przycisk „Gotowe” w prawym górnym rogu, gdy zakończysz edycję strony.
Beaver Builder wyświetli serię przycisków do publikacji lub zapisania strony jako szkicu.
Możesz również ponownie wykorzystać cały układ strony na innych stronach swojej witryny WordPress. Po prostu otwórz stronę za pomocą Page Builder, a następnie kliknij przycisk strzałki w dół, aby uzyskać dostęp do „Narzędzi” na górnym pasku.
Beaver Builder wyświetli wyskakujące okienko. Możesz zapisać stronę jako szablon lub szybko utworzyć duplikat strony z tym samym układem.
Jak zarządzać szablonami układu strony w Beaver Builder
Możesz sprawdzić wszystkie szablony, które utworzyłeś w Beaver Builder » Szablony. Tutaj możesz zarządzać, podglądać i edytować swoje istniejące szablony.
Jedną ze wspaniałych rzeczy w szablonach Beaver Builder jest to, że są to niestandardowe typy postów. Oznacza to, że możesz łatwo eksportować swoje szablony Beaver Builder za pomocą wbudowanej funkcji eksportu w WordPressie.
Odwiedź stronę Narzędzia » Eksport i wybierz Szablony. Kliknij przycisk „Pobierz plik eksportu”, a WordPress wyśle Ci plik XML do pobrania.
Teraz zaloguj się na stronę WordPress, na którą chcesz zaimportować szablony. Odwiedź stronę Ustawienia » Import i kliknij WordPress.
Zostaniesz poproszony o pobranie i zainstalowanie wtyczki WordPress Importer. Następnie będziesz mógł po prostu przesłać plik XML swojego szablonu i go zaimportować.
Alternatywa: Użyj SeedProd do stworzenia niestandardowego motywu
Chociaż Beaver Builder jest świetny, może nie być idealnym rozwiązaniem dla każdego. To nic! Istnieją inne doskonałe opcje, takie jak SeedProd.
SeedProd to kolejny przyjazny dla użytkownika kreator stron, który często polecamy. Nie służy on tylko do tworzenia stron docelowych. Możesz go nawet użyć do tworzenia całych motywów WordPress. Wykorzystaliśmy go w wielu projektach, w tym w tworzeniu stron docelowych dla OptinMonster.
Tym, co wyróżnia SeedProd, są rozbudowane opcje dostosowywania. Pozwalają one łatwo dodawać do stron fajne funkcje, takie jak rotujące się opinie klientów, przyciągające wzrok animacje, profesjonalne tabele cenowe, pola cech i wiele więcej.
Dodatkowo SeedProd posiada narzędzia AI, które mogą szybko generować dobrej jakości tekst i obrazy dla Twojej strony. Może to być prawdziwy oszczędzacz czasu podczas tworzenia stron.
Chcesz dowiedzieć się więcej? Sprawdź te recenzje, aby zobaczyć, jak SeedProd wypada na tle innych popularnych kreatorów stron:
- Elementor vs Divi vs SeedProd (Porównanie) – Który jest najlepszy?
- Instapage vs Leadpages vs Unbounce vs SeedProd
Mamy nadzieję, że ten artykuł pomógł Ci w tworzeniu niestandardowych układów stron w WordPressie za pomocą Beaver Builder. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia przyjaznej dla urządzeń mobilnych strony WordPress oraz naszymi ekskluzywnymi wyborami najlepszych kreatorów motywów WordPress.
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.
corey
to mi bardzo pomaga.
Używam Astra i Beaver. Niedługo będę musiał przejść na plan Growth
jest nadal dla mnie zbyt skomplikowane w przeciwieństwie do Guttenberga
Wsparcie WPBeginner
Cieszę się, że nasz przewodnik był pomocny!
Admin
Rodney Harrier
Zacząłem używać Elementora do tworzenia bloga. Jeśli przełączę się na Beaver Builder, czy stracę wszystko, co zrobiłem?
Wsparcie WPBeginner
Jeśli zmienisz wtyczki, stracisz dostosowania z pierwszej wtyczki.
Admin
Pius Anthony
Szanowni Państwo,
Szczęśliwego nowego roku, oglądam Twoje filmy na wpbeginner, są naprawdę inspirujące. Wierzę, że przed następnymi sześcioma miesiącami będę uczyć innych ludzi.
Z poważaniem
Pius Anthony
Wsparcie WPBeginner
Glad our guides can help you start helping other people too
Admin
Krayl
Czy podczas korzystania z Beaver Builder używasz go tylko na motywie potomnym? Jeśli nie, jak radzi sobie z aktualizacjami motywu?
Dziękuję zespołowi WPbeginner!
Lisa Theriault
Naprawdę potrzebuję pomocy. To powinno być łatwe, ale kiedy klikam na moduł lub wiersz, nic się nie dzieje. Próbowałem przeciągać i upuszczać, zapisywać itp. Nic. Upewniłem się, że ustawienia są poprawne i że wtyczka jest aktywna. Beaver Builder pojawia się na stronie do edycji, ale najwyraźniej jestem idiotą. Jestem sfrustrowany, ale jestem pewien, że to tylko jakaś głupia rzecz. Czy ktoś może zaproponować sugestie? Podążyłem za samouczkiem dla początkujących i jest on naprawdę łatwy. Kiedy próbuję zrobić to w trybie na żywo... nic. Proszę o pomoc. Z góry dziękuję.
Wsparcie WPBeginner
Cześć Lisa,
Spróbuj edytować nową stronę. Jeśli to nie zadziała, spróbuj przełączyć się na domyślny motyw WordPress, taki jak twenty seventeen, a następnie spróbuj edytować za pomocą Beaver Builder. Jeśli to zadziała, Twój motyw prawdopodobnie ma problemy z kompatybilnością z konstruktorem stron.
Admin
David Sharp
Mam ten sam problem co Lisa. Używałem Beaver Builder kilka lat temu do stworzenia strony docelowej i działało to bardzo dobrze. W rzeczywistości nadal używam tej samej strony docelowej bez żadnych problemów. Ale dzisiaj próbowałem stworzyć nową stronę docelową za pomocą Beaver Builder, ale tym razem Beaver Builder nie działał.
Oto co się stało: Utworzyłem nową stronę. Kliknąłem zakładkę Beaver Builder. Ale zamiast zobaczyć przycisk „Uruchom Beaver Builder”, zostałem przeniesiony na ekran, na którym widniało „Upuść układ wiersza lub moduł, aby rozpocząć”. Niestety, Beaver Builder nie wygenerował paska narzędzi Beaver Builder ani żadnych innych narzędzi (takich jak moduły lub wiersze), za pomocą których można by zbudować stronę.
Oto co próbowałem zrobić, aby rozwiązać problem, bezskutecznie:
1. Dezaktywowałem moje inne wtyczki.
2. Przełączyłem się na motyw Twenty Sixteen.
3. Upewniłem się, że używam najnowszej wersji wszystkiego (Wordpress, Beaver Builder itp.)
4. Zauważyłem, że jeśli coś wpisałem na stronie, a następnie kliknąłem zakładkę Beaver Builder, pojawiły się narzędzia. Ale kiedy klikałem na nie, widziałem tylko kręcące się kółko.
5. Próbowałem użyć Beaver Builder na mojej stronie internetowej, która jest online, a także na moim lokalnym serwerze testowym, ale Beaver Builder nie działał na żadnej z tych stron.
6. Próbowałem użyć innej przeglądarki (Safari zamiast mojej zwykłej Chrome) bez powodzenia.
Czy masz pomysł, co może być nie tak i jak mogę to naprawić?
Dzięki!
Wsparcie WPBeginner
Witaj David,
Możesz skontaktować się z pomocą techniczną Beaver Builder, oni będą w stanie Ci pomóc.
Krayl
To samo przydarzyło mi się, Liso. Myślę, że to mój motyw nie współpracuje dobrze z BB. Szukam zmiany motywu, aby uzyskać pełną kompatybilność.
Yeremi Akpan
Miałem podobne problemy podczas korzystania z Chrome, ale zostały rozwiązane, gdy przełączyłem się na Microsoft Edge.
Jesse
Jestem tak wdzięczna za wszystkie artykuły „jak to zrobić” na wpbeginner. Są jasne i bezpośrednie, i znacznie ułatwiają mi życie. Ponieważ mogłam śledzić ścieżkę od e-commerce przez Beaver Builder, jestem teraz w stanie uzyskać OptInMonster. Dziękuję Syed & zespół.
Gabrielle
Cześć, czy BB wypisuje [shortcodes] czy treść html, po przełączeniu z powrotem do normalnego edytora?
Zastanawiam się, czy to działa dobrze przy tworzeniu stron produktów dla woocommerce.
Dr Peter H. Markesteyn
Czy musiałbym utworzyć motyw potomny (20-17), aby zachować wszystkie zmiany, które wprowadziłbym za pomocą BeaverBuilder, gdy pojawi się aktualizacja?
Anthony
Chociaż ta wtyczka jest świetna, zastanawiałem się, czy uczysz, jak samemu je dostosowywać? Chcę zbudować swoje portfolio i wiedza, jak zrobić to samemu, byłaby fantastyczna!
Ian Gordon
Dzięki wtyczce Beaver Builder mogę wziąć istniejący motyw i stworzyć zupełnie nowy nagłówek i stopkę bez edycji żadnych istniejących plików szablonu? Mój
Sam
Jak dobrze Beaver Builder współpracuje z innymi wtyczkami?
Wsparcie WPBeginner
Dobrze współpracuje z większością wtyczek. Mogą wystąpić pewne problemy z losową, rzadziej używaną wtyczką, ale szybko rozwiązują takie problemy.
Admin
Rk bhardwaj
To niesamowita wtyczka, która sprawia, że każdy blog wygląda ładnie
Oliver
Beaver Builder is the best page builder plugin by the best team!
Robby
Hey, Oliver! Thanks for the kind words.
Andrew Peters
KOCHAM Beaver Builder. Używałem go do kilkunastu stron od czasu przejścia jesienią. Właściwie wracam i konwertuję niektórych moich klientów z VC na BB. To jest ogień!
Shaiful
Cześć,
Tylko zastanawiam się, czy może obsługiwać shortkody z kontekstem warunkowym? Na przykład:
[if user_loggedin]
witaj użytkowniku.
(wyświetl zawartość dla zalogowanego użytkownika zbudowaną za pomocą Beaver Builder)
[else]
witaj gościu.
(wyświetl zawartość publiczną zbudowaną za pomocą Beaver Builder)
[/if]
Wsparcie WPBeginner
Tak, obsługuje shortcody. Wklej je w dowolne pole, w którym możesz wstawić tekst, a zostaną one automatycznie wyrenderowane. Podczas umieszczania shortcodów na stronie najlepiej użyć modułu HTML w porównaniu do modułu Edytora Tekstu. Ten ostatni ma tendencję do dodawania dodatkowych tagów p, które czasami psują układ.
Admin