Chcesz dowiedzieć się, jak tworzyć własne układy stron w WordPress?
Beaver Builder pozwala tworzyć twoje własne układy stron bez pisania jakiegokolwiek kodu. Dzięki wbudowanemu edytorowi typu „przeciągnij i upuść” możesz szybko zaprojektować swoją witrynę internetową.
W tym artykule omówimy Beaver Builder i pokażemy, jak tworzyć własne układy stron w WordPress za pomocą Beaver Builder.
Dlaczego i kiedy potrzebne są własne układy stron?
Wiele motywów WordPress premium posiada gotowe układy stron dla różnych sekcji witryny internetowej. Czasami jednak wbudowany układ może nie pasować do twoich potrzeb.
Możesz tworzyć własne szablony stron w WordPressie, tworząc motyw potomny, a następnie dodając własne szablony stron. Będziesz jednak potrzebował pewnej wiedzy na temat PHP, HTML i CSS, aby to zadziałało.
Tutaj z pomocą przychodzi Beaver Builder. Jest to wtyczka do tworzenia stron typu „przeciągnij i upuść” dla WordPressa. Pomaga ona tworzyć własne, dostosowane układy stron bez pisania jakiegokolwiek kodu.
Recenzja Beaver Builder
Beaver Builder jest bardzo łatwy w użyciu i przyjazny dla początkujących. Jednocześnie jest wczytywany z niesamowitymi funkcjami do tworzenia profesjonalnie wyglądających stron.
Działa ze wszystkimi motywami WordPress i ma mnóstwo modułów, które można po prostu przeciągnąć i upuścić na twoją stronę. Możesz stworzyć dowolny układ i skonfigurować go tak, jak sobie wyobrażałeś.
W tej recenzji Beaver Builder pokażemy, jak używać Beaver Builder do tworzenia własnych układów stron w WordPress.
Zaczynajmy.
Konfiguracja wtyczki Beaver Builder
Najpierw należy zakupić wtyczkę Beaver Builder. Jest to płatna wtyczka, której ceny zaczynają się od 99 USD za nieograniczoną liczbę witryn.
Następnie należy zainstalować i włączyć wtyczkę Beaver Builder. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu należy przejść na stronę Ustawienia ” Kreator stron, aby wpisz klucz licencyjny.
Po wpiszeniu twojego klucza licencyjnego, jesteś teraz gotowy do tworzenia pięknych układów stron.
Tworzenie pierwszego własnego układu strony za pomocą Beaver Builder
Wystarczy utworzyć nową stronę w WordPressie, przechodząc na Strony ” Dodaj nową stronę. W edytorze WordPress zostanie powiadomiona nowa karta Page Builder.
Następnie kliknij przycisk „Launch Beaver Builder”, aby rozpocząć.
Jeśli korzystasz z Beaver Builder po raz pierwszy, zobaczysz powitalne okienko z przewodnikiem.
Następnie należy kliknąć przycisk „Szablony” w górnym menu.
Beaver Builder zawiera kilka profesjonalnie zaprojektowanych szablonów, dzięki którym możesz od razu rozpocząć pracę.
Bez obaw, szablon można dowolnie dostosowywać do własnych potrzeb. To tylko szybki sposób na rozpoczęcie pracy z układem.
Po wybraniu układu, Beaver Builder wczyta go w oknie podglądu. Przesuń twój kursor myszy na element, a Beaver Builder podświetli go.
Wystarczy kliknąć ikonkę klucza na dowolnym podświetlonym elemencie, aby go edytować.
Beaver Builder wyświetli wyskakujące okienko z różnymi ustawieniami, które można edytować.
Można zmienić tekst, kolor, tło, krój pisma, dopełnienie, margines itp.
Układy Beaver Builder są oparte na wierszach. Możesz przeciągać i upuszczać, aby zmieniać kolejność wierszy. Można również usuwać lub utwórz nowy wiersz.
Wystarczy kliknąć menu Układy wierszy i wybrać liczbę kolumn w twoim wierszu.
Beaver Builder doda wiersz do podglądu na żywo na twojej witrynie.
Możesz dodawać elementy do twojego wiersza za pomocą podstawowych lub zaawansowanych modułów i widżetów. Moduły te umożliwiają dodawanie najczęściej używanych elementów, takich jak przyciski, nagłówki, tekst, obrazki, pokazy slajdów, audio, filmy itp.
Po prostu wybierz element i przeciągnij go do właśnie dodanego wiersza. Kliknij element, aby edytować jego właściwości.
Możesz również zapisać wiersz lub moduł, aby użyć go później na innych stronach. Kliknij przycisk „Zapisz jako” podczas edycji wiersza lub modułu.
Po zakończeniu edycji twojej strony kliknij przycisk „Gotowe” w prawym górnym rogu.
Beaver Builder wyświetli serię przycisków umożliwiających opublikowanie lub zapisanie twojej strony jako wersji roboczej.
Możesz również ponownie wykorzystać cały układ strony dla innych stron w twojej witrynie WordPress. Wystarczy otworzyć stronę za pomocą Page Builder, a następnie kliknąć 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.
Zarządzanie szablonami układów stron w Beaver Builder
Każda licencja Beaver Builder uprawnia do korzystania z niego na nieograniczonej liczbie witryn internetowych. Jak jednak przenieść twój szablon strony z jednej witryny WordPress na inną?
Beaver Builder przechowuje szablony utworzone przez użytkownika we własnym typie treści o nazwie szablony. Domyślnie jest on ukryty, ale można uczynić go widocznym, przechodząc do Ustawienia ” Kreator stron i klikając kartę Szablony.
Wystarczy zaznaczyć pole obok opcji „Włącz administratora szablonów” i kliknąć przycisk „Zapisz ustawienia szablonów”.
Powiadomienie o nowej pozycji menu Szablony pojawi się na twoim pasku administratora WordPress. Wszystkie układy stron zapisane jako szablony pojawią się na tej stronie.
Ponieważ jest to własny typ treści, możesz łatwo wyeksportować swoje szablony Beaver Builder za pomocą wbudowanej funkcji eksportu w WordPress.
Przejdź na stronę Narzędzia ” Eksportuj i wybierz Szablony. Kliknij przycisk „Pobierz plik eksportu”, a WordPress wyśle plik XML do pobrania.
Teraz zaloguj się do witryny WordPress, do której chcesz importować szablony. Przejdź na stronę Ustawienia ” Importuj i kliknij WordPress.
Zostaniesz poproszony o pobranie i zainstalowanie wtyczki WordPress importer. Następnie będziesz mógł po prostu przesłać plik xml twojego szablonu i importować go.
To wszystko; mamy nadzieję, że ten artykuł pomógł ci w tworzeniu własnych układów stron w WordPress przy użyciu Beaver Builder. Możesz również zapoznać się z naszym przewodnikiem na temat ukrywania niepotrzebnych elementów w panelu administracyjnym WordPress za pomocą Adminimize oraz z naszą ekspercką listą najlepszych motywów i szablonów Beaver Builder.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
corey says
this helps me out a lot.
i am using astra and beaver. been needing to upgrade to grwoth plan soon
is still over my head unlike Guttenberg
WPBeginner Support says
Glad to hear our guide was helpful!
Administrator
Rodney Harrier says
I started using Elementor to build a blog. If I switch to Beaver Builder, do I lose whatever I have done?
WPBeginner Support says
If you change plugins you would lose the customizations from your first plugin.
Administrator
Pius Anthony says
Dear Sir,
Happy new year, i have being watching your wpbeginner video it really inspiring I believe before the next six month i will be teaching other people.
Regard
Pius Anthony
WPBeginner Support says
Glad our guides can help you start helping other people too
Administrator
Krayl says
When using Beaver Builder, are you using it on a child theme only? If not, how does it hold up to theme updates?
Thank you team WPbeginner!
Lisa Theriault says
I really need some help. This is supposed to be easy but when I click on a module or a row nothing happens. I tried dragging and dropping, saving, etc. Nada. I made sure the settings were correct and that the plug in was active. Beaver Builder shows up on the page for editing but I’m obviously an idiot. Getting frustrated, but I’m sure it’s just some silly thing. Can someone offer suggestions? I followed the beginner tutorial and thay is really easy. When I try to do it in Live mode….nothing. Please help. Thank you in advancd.
WPBeginner Support says
Hi Lisa,
Try editing a new page. If that doesn’t work try switching to a default WordPress theme like twenty seventeen and then try editing with Beaver Builder. If that works, then your theme probably has compatibility issues with the page builder.
Administrator
David Sharp says
I’m having the same problem as Lisa. I used Beaver Builder a couple of years ago to create a landing page, and it worked very well. In fact, I’m still using that same landing page without any problems. But today I tried to create a new landing page using Beaver Builder, but this time, Beaver Builder wouldn’t work.
Here’s what happened: I created a new page. I clicked the Beaver Builder tab. But instead of seeing a button that says “Launch Beaver Builder,” I was taken to a screen that said, “Drop a row layout or module to get started.” Unfortunately, Beaver Builder failed to produce a Beaver Builder toolbar or any other tools (such as modules or rows) with which to build the page.
Here’s what I tried to do to fix the problem, without success:
1. I deactivated my other plugins.
2. I switched to the Twenty Sixteen Theme.
3. I made sure I’m using the latest version of everything (WordPress, Beaver Builder, etc.)
4. I noticed that if I typed something into the page and then clicked Beaver Builder tab, tools would show up. But when I clicked on them, I just got a spinning circle.
5. I tried using Beaver Builder on my website that’s online, and also on my localhost test site, but Beaver Builder failed to work on either site.
6. I tried using a different browser (Safari instead of my usual Chrome) without success.
Any idea what might be wrong and how I might fix it?
Thanks!
WPBeginner Support says
Hi David,
You can contact Beaver Builder support, they would be able to help you out.
Krayl says
Same thing happened to me Lisa. I think it is my theme not playing well with BB. Looking to switch themes to have full compatibility.
Yeremi Akpan says
I had similar issues using Chrome, but they were resolved when I switched to Mirosoft Edge.
Jesse says
I am so grateful for all the wpbeginner ‘how-to’ articles. They are clear and direct, and they make my life so much easier. Because I could follow the trail from ecommerce through Beaver Builder I am now in a place to get OptInMonster. Thanks Syed & team.
Gabrielle says
Hi, is BB outputting [shortcodes] or html content, when switching back to normal editor?
I wonder if this works well, when building products pages for woocommerce.
Dr. Peter H. Markesteyn says
Would I have to create a child theme (20-17) to preserve all the changes I would make with BeaverBuilder when there is an update?
Anthony says
While this plugin is great, I was wondering if you teach how to customize them yourself? I am looking to build my portfolio and knowing how to do it yourself would be fantastic!
Ian Gordon says
WIth the Beaver Builder plugin, I can take an existing theme and create a completely new Header and Footer without editing any of the existing template files? My
Sam says
How nice does Beaver Builder play with other plugins?
WPBeginner Support says
It plays well with most plugins. There might be some hiccups with a random less commonly used plugin, but they are quick to solve such issues.
Administrator
Rk bhardwaj says
This is amazing plugin to make any blog looks pretty
Oliver says
Beaver Builder is the best page builder plugin by the best team!
Robby says
Hey, Oliver! Thanks for the kind words.
Andrew Peters says
I LOVE Beaver Builder. I’ve used it for close to a dozen sites since making the switch back in the fall. I’m actually going back and converting some of my clients from VC to BB. It’s fire!
Shaiful says
Hi there,
Just wondering, can it support shortcodes that have conditional context? Such as:
[if user_loggedin]
hello user.
(show logged in user content build with beaver builder)
[else]
hello guest.
(show public content build with beaver builder)
[/if]
WPBeginner Support says
Yes it supports shortcode. Paste them in any field that you can insert text and they will be rendered automatically. When placing shortcodes on the page, it is best to use the HTML module compared to the Text Editor module. The latter tends to add additional p tags which sometimes break the layout.
Administrator