Beaver Builder kontra Divi 2022

Opublikowany: 2017-03-06
Beaver Builder kontra Divi 2022

Plusy

Plusy z konstruktorem bobrów

Prosty, przyjazny dla użytkownika interfejs. Układy, wiersze i moduły ładują się szybko. Jakość szablonów stron docelowych i szablonów stron treści jest wysoka. Każdą część układu można zapisać do późniejszego wykorzystania.

Divi Plusy

Zawiera wszechstronny edytor stron frontendowych i backendowych. Ogromna biblioteka gotowych układów i pakietów układów. W Divi Builder dostępne są tysiące opcji dostosowywania. Członkostwo w Elegant Themes zapewnia doskonały stosunek jakości do ceny.

Cons

Wady Beaver Builder

Uzyskanie dostępu do motywu Beaver Builder kosztuje znacznie więcej. Moduły treści nie są tak stylowe jak Divi Builder. Gotowe układy wyglądają świetnie, ale nie ma ich aż tak wielu do wyboru.

Wady Divi

Nauczenie się, jak działa Divi Builder, zajmuje trochę więcej czasu. Divi wymaga więcej zasobów, aby działać wydajnie. Nie tak szybko jak Beaver Builder.

Streszczenie

Beaver Builder i Divi to dwa z najlepszych rozwiązań do tworzenia stron typu „przeciągnij i upuść” w świecie WordPress. Łatwo jest polecić oba rozwiązania, jednak członkostwo w Elegant Themes generalnie zapewnia większy stosunek jakości do ceny ze względu na inne premium produkty WordPress, które są zawarte w pakiecie.

Beaver Builder i Divi to dwa z najlepszych rozwiązań do tworzenia stron typu „przeciągnij i upuść” w świecie WordPress. Łatwo jest polecić oba rozwiązania, jednak członkostwo w Elegant Themes generalnie zapewnia większy stosunek jakości do ceny ze względu na inne premium produkty WordPress, które są zawarte w pakiecie.

Edytory WYSIWYG (What You See Is What You Get) są podstawą oprogramowania komputerowego od lat 70., ale w świecie WordPress widzimy, że coraz więcej właścicieli witryn przechodzi na narzędzia do tworzenia stron metodą „przeciągnij i upuść”, aby pomóc im tworzyć stylowe posty na blogu i profesjonalne strony.

Ta adopcja nasiliła się, odkąd WordPress wprowadził nowy edytor bloków o nazwie Gutenberg w WordPress 5.0 w 2018 roku. Oczywiście Edytor klasyczny jest nadal dostępny dla tych, którzy wolą stary edytor wizualny.

Nowy edytor bloków jest darmowy, ma przyjazny dla użytkownika interfejs i ma wiele przydatnych bloków treści dostępnych do wyboru.

Uwielbiam prostotę edytora bloków WordPress, ale nie da się ukryć, że jest to podstawowe rozwiązanie. Jego bloki treści mają kilka opcji dostosowywania i nie ma wbudowanego systemu szablonów. To znacznie ogranicza to, co możesz stworzyć.

Jeśli chcesz przenieść swoją witrynę na wyższy poziom, polecam skorzystanie z zaawansowanego rozwiązania do budowania stron typu „przeciągnij i upuść”, takiego jak Beaver Builder lub Divi.

Te responsywne wtyczki WordPress zapewniają większą kontrolę nad stylem postów na blogu, stron i niestandardowych typów postów.

W tym artykule chciałbym pokazać porównanie tych wtyczek do tworzenia stron, aby pomóc Ci zobaczyć, która z nich jest najlepsza dla Ciebie i Twoich projektów.

Uproszczona wersja Beaver Builder jest dostępna na WordPress.org, ale ponieważ darmowa wersja nie zawiera wielu funkcji, ten artykuł skupi się na pełnej wersji Beaver Builder.

Interfejs Beaver Builder

Beaver Builder to edytor frontendowy, który można uruchomić z kilku różnych obszarów WordPress.

Podczas tworzenia nowego wpisu na blogu, strony lub niestandardowego typu wpisu w edytorze bloków WordPress zobaczysz opcję „Uruchom Beaver Builder” lub „Użyj standardowego edytora”.

Uruchom Beaver Builder

Przycisk „Uruchom Beaver Builder” nie jest automatycznie wyświetlany w edytorze Gutenberga. Pojawia się tylko wtedy, gdy dodasz blok Beaver Builder do swojej strony.

Jeśli blok Beaver Builder nie jest dostępny, sprawdź stronę ustawień Beaver Builder, aby upewnić się, że odpowiedni typ postu jest włączony.

Blok budowniczy bobra

Beaver Builder można również uruchomić z Edytora klasycznego i głównej strony z listami postów, stron i niestandardowych typów postów.

Po zalogowaniu zobaczysz również opcję modyfikacji strony na pasku administracyjnym WordPressa.

Uruchom Beaver Builder z paska administracyjnego WordPress

Kiedy Beaver Builder się załaduje, po prawej stronie zobaczysz menu, które wyświetla dostępne moduły. W tym miejscu wyświetlane są również karty wierszy, szablonów i zapisanych układów.

Kliknięcie symbolu X powyżej zamyka menu, ale możesz ponownie załadować menu, klikając symbol +, który jest teraz wyświetlany.

Interfejs Beaver Builder

W prawym górnym rogu strony zobaczysz przypomnienie, że Twoja strona została edytowana i zawiera nieopublikowane zmiany. Jeśli klikniesz przycisk Gotowe, wyświetlą się opcje umożliwiające odrzucenie układu, zapisanie wersji roboczej lub opublikowanie układu.

Przyciski zapisywania Beaver Builder

W lewym górnym rogu strony jest wyświetlany wpis, strona lub niestandardowy typ wpisu, który edytujesz. Kliknięcie go załaduje menu narzędzi Beaver Builder.

W tym menu jest schowanych wiele ustawień i funkcji.

W tym miejscu możesz opublikować swój układ, zapisać układ jako szablon, zduplikować układ, wyświetlić wszystkie swoje poprawki, sprawdzić historię edycji i nie tylko.

Z tego menu można również uzyskać dostęp do ustawień globalnych oraz ustawień JavaScript i CSS, a na dole menu wyświetlane są skróty do obszaru administracyjnego WordPress i stron pomocy.

Narzędzia Beaver Builder

Po prawej stronie menu narzędzi znajduje się dzwonek powiadomień, który wyświetla aktualizacje wtyczek i najnowsze posty z bloga Beaver Builder.

Powiadomienia Beaver Builder

Aby dodać nowy moduł lub wiersz do układu, po prostu przeciągnij go i upuść w głównym obszarze kanwy.

Dostępnych jest kilka wstępnie skonfigurowanych konfiguracji kolumn dla wierszy wraz z zapisanymi układami kolumn, zapisanymi wierszami i gotowymi wierszami.

Kolumny Beaver Builder

Po dodaniu nowych wierszy na stronie zostanie wyświetlony zarys struktury. Możesz przeciągnąć i upuścić moduł treści do dowolnego z tych pól.

Zarys wierszy i kolumn

W lewej górnej części wierszy i modułów zobaczysz opcje przenoszenia elementu do innej części układu. Dany wiersz lub moduł można również zduplikować lub usunąć z tego miejsca.

Wiersze i kolumny mają przycisk ustawień i przycisk akcji, który umożliwia zresetowanie szerokości wierszy i kolumn.

Szerokości, kolory, tła, obramowania i inne elementy można dostosować na karcie stylu w oknie ustawień. Oprócz marginesów i dopełnienia, zakładka Zaawansowane pozwala ograniczyć widoczność dla zalogowanych użytkowników i dostosować punkt przerwania dla użytkowników mobilnych.

Ustawienia rzędów Beaver Builder

Zapoznanie się z dowolnym narzędziem do tworzenia stron WordPress zajmuje trochę czasu, jednak Beaver Builder jest niewątpliwie jednym z najłatwiejszych rozwiązań do pobrania. Jest to również jeden z najszybszych, a zmiany, które wprowadzasz, ładują się niemal natychmiast.

Beaver Builder umożliwia stylizowanie każdego aspektu układu, ale jak zobaczysz, Divi oferuje o wiele więcej opcji dostosowywania podczas tworzenia układów.

Interfejs Divi Builder

Eleganckie motywy używają słowa Divi do opisania zarówno popularnego motywu WordPress, jak i narzędzia do tworzenia stron typu „przeciągnij i upuść”.

Powoduje to niewielkie zamieszanie wśród osób, które nie znają eleganckich motywów, dlatego czasami wyróżniają produkty, nazywając projekt „Motyw Divi”, a kreator stron „Divi Builder”.

Na razie chciałbym skupić się na Divi Builder. Ten kreator stron jest włączony do motywu Divi, ale jest również dostępny jako samodzielna wtyczka WordPress dla tych, którzy chcą go używać z innymi motywami WordPress.

Po aktywacji Divi Builder zobaczysz opcję „Użyj Divi Builder” po dodaniu nowego posta, strony lub niestandardowego typu postu.

Spowoduje to uruchomienie wizualnego kreatora frontendu, ale dostępny będzie również edytor zaplecza o nazwie Legacy Builder.

Zbuduj swój układ za pomocą Divi

Możesz przełączyć się na Divi Builder w dowolnym momencie z domyślnego edytora bloków WordPress.

Użyj przycisku Divi Builder

Divi Builder można również uruchomić z głównych stron z listami postów, stron i niestandardowych typów postów.

Podobnie jak Beaver Builder, jeśli jesteś zalogowany, zobaczysz opcję włączenia Divi Builder z paska administracyjnego WordPress.

Włącz Visual Builder

Eleganckie motywy mają również blok układu Divi.

Ten blok umożliwia wstawienie dowolnego układu Divi bezpośrednio do układu utworzonego za pomocą domyślnego edytora bloków WordPress.

Blok układu Divi

Kiedy po raz pierwszy uruchomisz Divi Builder, zostaniesz zapytany, czy chcesz zbudować układ od podstaw, wybrać gotowy układ lub sklonować inną już utworzoną stronę.

Ekran wyboru Divi Builder

Jeśli zaczniesz od zera, Divi Builder załaduje puste płótno i wyświetli pole, aby wstawić nowy wiersz.

Do wyboru jest 20 wierszy, a każdy z nich ma inną strukturę kolumn.

Wstaw nowy wiersz w Divi

Po wstawieniu wiersza Divi Builder poprosi o wybranie modułu do dodania do strony.

Wstawianie nowego modułu w Divi

Divi Builder następnie ładuje okno ustawień dla wybranego modułu.

Ustawienia przycisków

Jeśli jesteś nowy w Divi Builder, polecam zapoznanie się z działaniem edytora, wybierając gotowy układ, ponieważ daje ci to coś do zabawy.

Doświadczeni użytkownicy wolą zacząć od pustego płótna, ale pamiętaj, że menu główne nie jest automatycznie ładowane po wybraniu tej opcji.

Aby załadować menu główne, kliknij przycisk z trzema poziomymi kropkami na dole strony.

Menu główne Divi Builder

Opcje menu głównego podzielone są na trzy kolumny.

Możesz załadować ustawienia kreatora za pomocą ikony trzech pionowych kropek po lewej stronie menu.

Do menu można dodać trzy różne tryby wyświetlania: tryb najechania kursorem, tryb kliknięcia i tryb siatki. Te tryby zmieniają sposób interakcji z układem i wprowadzają zmiany. Na przykład w trybie najechania kursorem na część strony podświetlisz moduły, kolumny, wiersze i sekcje, a następnie możesz wprowadzić modyfikacje.

Inne ustawienia w polu ustawień konstruktora obejmują domyślny tryb wyświetlania, interwał stanu historii i proces tworzenia strony.

Ustawienia programu Visual Builder

Jeśli stworzyłeś złożony układ, mogą wystąpić sytuacje, w których podświetlona zostanie niewłaściwa część strony. Na przykład możesz chcieć przenieść kolumnę, ale przypadkowo zaznaczysz wiersz, do którego należy.

Jednym ze sposobów rozwiązania tego problemu jest użycie trybu widoku krawędziowego. Spowoduje to usunięcie z widoku niepotrzebnych elementów projektu, aby ułatwić przeglądanie struktury strony. Jest to niezwykle przydatne podczas przenoszenia rzeczy w złożonym układzie.

Po lewej stronie menu znajdują się również opcje umożliwiające wyświetlanie projektu w widoku na komputery, tablety i urządzenia mobilne.

Widok szkieletowy Divi Builder

W środkowym menu dostępnych jest siedem opcji. Środkowy przycisk X zamyka menu.

Po lewej stronie możesz załadować układ z biblioteki, zapisać bieżący układ i wyczyścić układ. Po prawej stronie możesz wyświetlić ustawienia strony, historię edycji i przenośność.

Pole ustawień postu/strony umożliwia zmianę tytułu, fragmentu, polecanego obrazu i kategorii. Dostępnych jest również wiele ustawień projektowych, takich jak odstępy, paleta kolorów, niestandardowy CSS i widoczność.

Pole historii edycji umożliwia łatwe cofanie i ponawianie ostatnich zmian oraz przeglądanie pełnej historii wszystkich wprowadzonych zmian.

Układy można eksportować i importować w formacie JSON za pomocą pola ustawień przenoszenia. Jest to przydatne do przenoszenia układów na inne strony internetowe.

Historia edycji Divi Builder

Twój układ można zapisać i opublikować po prawej stronie strony.

Samouczki wideo i skróty klawiaturowe można również wyświetlać w polu Divi Helper w tym obszarze. Dostępna jest również funkcja wyszukiwania, która pomaga znaleźć funkcje i dokumentację.

Prawa strona menu głównego

Interfejsy użytkownika Beaver Builder i Divi Builder działają inaczej, jednak jeśli chodzi o dostosowywanie wierszy i kolumn, w rzeczywistości działają w podobny sposób.

Oba rozwiązania wyświetlają ustawienia w lewym górnym rogu i umożliwiają przenoszenie, duplikowanie oraz dostosowywanie wierszy i kolumn. Divi ma jednak więcej opcji dostosowywania.

Przykład wierszy i kolumn w Divi Builder

Divi Builder posiada element nad wierszami, zwany sekcjami.

Sekcje mogą zawierać wiele wierszy, a każdy wiersz może zawierać wiele kolumn. Daje ci trochę dodatkowej elastyczności przy konstruowaniu stron.

Wstaw sekcję w Divi Builder

We wcześniejszych wersjach Divi Builder układy były tworzone bezpośrednio z edytora WordPress, jednak wizualny kreator frontendu jest teraz standardowym sposobem tworzenia układów za pomocą Divi.

Na szczęście stary edytor jest nadal dostępny w Divi Builder.

Aby aktywować Legacy Builder, musisz najpierw przejść do sekcji zaawansowanej obszaru opcji wtyczki Divi, wyłączyć najnowszą wersję Divi Builder i włączyć Edytor klasyczny.

Aktywacja starszego kreatora

Interfejs użytkownika Legacy Builder wygląda podobnie do trybu widoku krawędziowego, który jest dostępny w edytorze wizualnym.

Chociaż nie pozwala na podgląd zmian, które wprowadzasz w czasie rzeczywistym, uwielbiam jego szybkość i wydajność. Wszystko ładuje się trochę szybciej niż w edytorze frontendowym i łatwiej jest zobaczyć strukturę Twojej strony.

Starszy interfejs Divi Builder

Beaver Builder ładuje wszystko nieco szybciej niż Divi Builder, a jego interfejs użytkownika jest łatwiejszy do odebrania, jednak Divi Builder oferuje o wiele więcej ustawień dostosowywania i dodatkowych funkcji, których brakuje w Beaver Builder.

Włączenie trybu szkieletowego i Legacy Builder prawdopodobnie sprawia, że ​​Divi Builder jest również bardziej elastycznym rozwiązaniem.

Aby uzyskać bardziej kompleksowe spojrzenie na działanie Divi Builder, zapoznaj się z naszą pełną recenzją Divi Builder.

Gotowe układy Beaver Builder

Jestem wielkim fanem gotowych układów, ponieważ znacznie skracają one czas tworzenia stylowych treści. Pomagają również zrozumieć, jak tworzyć zaawansowane układy.

Beaver Builder nie oferuje tylu gotowych układów, co Divi, ale jakość każdego szablonu jest równie wysoka.

Szablony stron docelowych i szablony stron treści są dostępne w zakładce szablonów głównego menu treści obok wszystkich zapisanych szablonów.

Szablony stron docelowych to kompletne szablony całostronicowe. Dostępnych jest łącznie 15 szablonów landing page wraz z pustym szablonem strony canvas.

Dostępne są szablony dla małych firm, siłowni, prawników, muzyków, fotografów, restauracji, e-booków i nie tylko.

Wybór szablonu strony docelowej

Po wybraniu szablonu landinga pojawia się pytanie, czy chcesz zastąpić istniejący układ, czy dołączyć go do tego, który już masz.

Dołącz lub zamień układ

Gotowe układy są wstawiane do układu w kilka sekund.

Po dodaniu możesz je dostosować według własnego uznania i zapisać jako szablony niestandardowe.

Wstawiono szablon strony docelowej

Szablony stron treści to uniwersalne szablony dla części strony, które są odpowiednie dla każdego rodzaju witryny.

Dostępnych jest 25 szablonów stron z treścią. Dostępne są układy ułatwiające wstawianie obszaru, informacji o zespole, usługach, formularzu kontaktowym, tabelach cen, formularzu rejestracji i nie tylko.

Szablony stron z treścią

Beaver Builder oferuje również dziesiątki gotowych rzędów. Te układy można łatwo wstawić do dowolnej części strony.

Znajdziesz je pod zakładkami wierszy głównego menu treści.

Gotowe wiersze

Jeśli korzystasz z systemu szablonów Beaver Builder, możesz znacznie skrócić czas tworzenia nowych układów.

Układy można zapisać w dowolnym momencie i ponownie wykorzystać tyle razy, ile chcesz.

Zapisz swój układ

Wszystkimi zapisanymi szablonami można zarządzać z głównego menu administracyjnego Beaver Builder i w razie potrzeby edytować później.

Możesz zapisywać szablony, wiersze, kolumny i moduły, a każdy zapisany układ można przypisać do kategorii.

Menu administratora Beaver Builder

Beaver Builder wykonał fantastyczną robotę, integrując gotowe układy z interfejsem użytkownika. Układy można wstawiać w kilka sekund, a dostosowania można zapisywać i używać raz po raz.

Gotowe układy Divi

Podobnie jak Beaver Builder, Divi oferuje użytkownikom szeroką gamę gotowych układów.

Do wyboru jest ponad 1100 pakietów układów.

150 z tych układów to pakiety układów, które zawierają projekty dla wielu obszarów Twojej witryny, takich jak strona z informacjami, blog, strona docelowa i galeria.

Jak wspomniano wcześniej, po uruchomieniu Divi Builder na nowej stronie jedną z dostępnych opcji jest wybranie gotowego układu.

Ekran wyboru Divi Builder

Bibliotekę Divi można również załadować z menu głównego.

Wczytaj z biblioteki

Biblioteka Divi umożliwia wstawianie gotowych układów, zapisanych układów i całych stron.

Możesz zawęzić wyszukiwanie odpowiedniego układu, korzystając z pola wyszukiwania lub wybierając jedną z 13 kategorii, do których przypisane są układy.

Pamiętaj, aby zapisać bieżący układ przed wstawieniem gotowego układu, ponieważ Divi Builder nadpisze go.

Pakiet układu Divi Builder

Pakiety układów wyróżniają wszystkie układy zawarte w pakiecie, jednak zdecydowanie zalecamy kliknięcie przycisku „Wyświetl demo na żywo”, aby zobaczyć dokładnie, jak będzie wyglądać Twoja witryna, jeśli wybierzesz projekt.

Aby pomóc zilustrować ten punkt, spójrz na obszar demonstracyjny projektu Divi Web Freelancer, który jest pokazany na zrzucie ekranu poniżej.

Projektowanie stron internetowych dla freelancerów

W zależności od konfiguracji hostingu, Divi Builder może potrwać do minuty, aby zaimportować wszystkie układy w pakiecie układów.

Po wstawieniu układu do strony możesz go dostosować i dostosować do własnych potrzeb, zmieniając kolory, dodając moduły i usuwając sekcje, które nie są dla Ciebie istotne.

Modyfikowanie mojego pakietu układu

Układy można zapisać w Bibliotece Divi w dowolnym momencie z głównego menu Divi.

Możesz nazwać każdy układ i pogrupować je w kategorie.

Zapisywanie układu w bibliotece Divi

Menu administratora Divi łączy się z główną stroną opcji wtyczki, Divi Theme Builder, biblioteką Divi i kilkoma innymi stronami ustawień (które omówimy później).

Menu administratora Divi Builder

Divi Theme Builder to fantastyczne narzędzie, które pozwala tworzyć niestandardowe szablony stron. Następnie możesz przypisać szablony do postów, stron i niestandardowych typów postów.

Dla każdego szablonu możesz przypisać układ do nagłówka, treści i stopki. Następnie możesz dokładnie określić, w których obszarach witryny te szablony mają być używane.

Na przykład możesz stworzyć unikalny projekt swojego bloga, ale wykluczyć go z niektórych kategorii postów. Możesz także tworzyć unikalne szablony dla strony wyników wyszukiwania, strony 404, archiwów, strony głównej i nie tylko.

Dodaj nowy szablon

Wszystkie zapisane układy można wyświetlić na stronie „Biblioteka Divi”, która jest połączona z głównym menu administratora Divi.

Z tej strony można importować i eksportować układy. Tutaj możesz również zarządzać kategoriami układu.

Zapisane układy Divi Builder

Gdy klikniesz, aby edytować układ na głównej stronie Biblioteki Divi, zostaniesz przeniesiony do przeglądu swojego projektu w trybie widoku krawędziowego.

Ten tryb jest przydatny do dostosowywania struktury układu, ale jeśli chcesz wprowadzić bardziej szczegółowe zmiany, możesz przełączyć się do widoku pulpitu, tabletu lub telefonu. W ten sposób możesz modyfikować zapisany układ za pomocą edytora wizualnego.

Jeśli wolisz, możesz uruchomić zwykły edytor wizualny frontendu i dokonać dostosowań na samej stronie.

Edycja zapisanego układu w Divi

Obok siebie nie wierzę, że jakość gotowych układów Divi Builder jest lepsza niż projektów dostępnych w Beaver Builder, jednak cała konfiguracja w Divi Builder jest znacznie lepsza.

Pakiety układów Divi Builder zapewniają do kilkunastu szablonów, które pomogą Ci zbudować kompletną stronę internetową, podczas gdy Beaver Builder oferuje tylko układy jednostronicowe i układy dla określonych sekcji strony.

W Divi Builder jest o wiele większy wybór, ponieważ wtyczka oferuje 950 szablonów stron docelowych w porównaniu z 15 Beaver Builder. Duży wybór układów stron trzecich jest również dostępny dla Divi.

Należy jednak pamiętać, że Beaver Builder ma tendencję do wstawiania układów na twoją stronę nieco szybciej niż Divi Builder.

Sprawdź stronę Divi Layouts, aby zobaczyć, jakie gotowe układy są dostępne w Divi Builder.

Moduły treści Beaver Builder

W Beaver Builder dostępnych jest łącznie 29 modułów. Moduły są podzielone na sześć kategorii: Podstawowe, Media, Działania, Układ, Informacje i Wpisy.

Istnieje wiele różnych modułów do dodawania treści, dostosowywania układu i pobierania treści z bloga.

Lista modułów Beaver Builder

Jednym z modułów w kategorii Układ jest moduł paska bocznego, który umożliwia wstawianie widżetów WordPress. Otwiera to wiele możliwości integracji funkcjonalności z układami z innych wtyczek WordPress.

Widżety WordPress w Beaver Builder

Gdy moduł zostanie przeciągnięty i upuszczony na obszar roboczy, pojawi się jego okno ustawień.

We wszystkich modułach znajdziesz wspólne ustawienia dotyczące stylizacji, odstępów, widoczności, animacji i nie tylko, jednak każdy moduł ma unikalne ustawienia, które pozwalają zmienić to, co jest wyświetlane.

Na przykład w module mapy znajdują się pola do wpisania adresu mapy, wysokości mapy oraz atrybutu tytułu mapy.

Moduł mapy

Beaver Builder nie ma największej kolekcji modułów treści i nie oferuje tylu opcji dostosowywania, co Divi.

Wierzę jednak, że Beaver Builder ma wszystko, czego potrzebujesz do tworzenia pięknych układów, ponieważ brakujące funkcje można wstawić do układów za pomocą widżetów WordPress.

Moduły treści Divi Builder

38 modułów treści jest dostępnych do wyboru w Divi Builder.

Oprócz podstawowych modułów, takich jak obraz, wideo, portfolio i referencje, istnieją przydatne moduły do ​​dodawania liczników słupków, notatek, suwaków i wezwania do działania.

Divi Builder dodaje również nowy niestandardowy typ postu dla projektów.

Podobnie jak Beaver Builder, Divi ma moduł paska bocznego, dzięki czemu możesz zintegrować widżety WordPress z układami.

Moduły treści Divi Builder

Divi Builder korzysta z systemu kodowania kolorami, aby pomóc w tworzeniu stylowych układów.

Sekcje są niebieskie, rzędy zielone, a moduły ciemnoszare (prawie czarne).

Możesz dodać nowy moduł, najeżdżając kursorem na kolumnę i klikając przycisk „Dodaj nowy moduł”.

Dodawanie nowego modułu

Jak pokazałem wcześniej, po wybraniu modułu automatycznie pojawi się okno ustawień modułu, dzięki czemu można wprowadzić wartości i dostosować styl.

Wszelkie wprowadzone dostosowania można zapisać w Bibliotece Divi. Dzięki temu możesz zaoszczędzić dużo czasu podczas tworzenia stron.

Na przykład możesz zmodyfikować moduł mapy, aby wyświetlał mapę adresu Twojej firmy. Następnie możesz łatwo zapisać mapę i wstawić ją na swoją stronę z informacjami, formularz kontaktowy, posty na blogu i nie tylko.

Wstaw zapisany moduł

Divi Builder oferuje więcej opcji stylizacji i dostosowywania niż Beaver Builder i ma dziewięć dodatkowych modułów treści, ale nie sądzę, aby ktokolwiek czuł się ograniczony tym, co jest dostępne we wtyczce WordPress, zwłaszcza że widżety WordPress można wstawiać do układów za pomocą modułu paska bocznego.

Konfiguracja Beaver Buildera

Pole ustawień globalnych można załadować z menu narzędzi w interfejsie użytkownika Beaver Builder.

Umożliwia włączanie i wyłączanie nagłówka strony oraz marginesów i dopełnienia wierszy, kolumn i modułów. W tym obszarze można również dostosować układy responsywne, a są tam pola do wstawiania kodu CSS i JavaScript.

Ustawienia globalne Beaver Builder

Strona główna ustawień Beaver Builder jest podzielona na kilka sekcji.

Aby otrzymywać automatyczne aktualizacje wtyczek, musisz wprowadzić swój klucz licencyjny w sekcji licencji. W następnej sekcji można włączać i wyłączać moduły i typy postów.

Ustawienia typu postu Beaver Builder

Dostęp do systemu szablonów można dostosować w następnej sekcji. Możesz włączyć podstawowe szablony, szablony użytkownika lub wszystkie szablony. Szablony można również wyłączyć.

Obszar ustawień dostępu użytkownika pozwala określić, z jakich grup użytkowników WordPress mogą korzystać Beaver Builder. Uprawnienia są podzielone na pięć różnych obszarów, takich jak dostęp do kreatora i menu administracyjnego Beaver Builder.

Strona ustawień ogólnych umożliwia również włączanie i wyłączanie zestawów ikon, znakowania wtyczek, znakowania motywów i ustawień pomocy. Buforowanie i debugowanie jest dostępne w sekcji narzędzi.

Ustawienia dostępu użytkownika Beaver Builder

Zalecam sprawdzenie strony ustawień Beaver Builder po zainstalowaniu Beaver Builder, ale większość dostosowań, które wykonasz, odbywa się w głównym interfejsie Beaver Builder.

Konfiguracja Divi Builder

Podobnie jak Beaver Builder, większość czasu spędzisz na dostosowywaniu układów w samym edytorze Divi Builder, ale istnieje kilka ważnych ustawień, które można znaleźć w głównym menu administratora Divi.

Strona główna opcji wtyczki zawiera zakładkę do wprowadzania nazwy użytkownika i klucza API Elegant Themes. Musisz to zrobić, aby otrzymywać automatyczne aktualizacje wtyczek.

W kolejnej zakładce możesz wpisać swój klucz Google API. Jest to konieczne, jeśli chcesz korzystać z modułu mapy. Czcionki Google można również wyłączyć na tej stronie.

Następna karta umożliwia włączanie i wyłączanie Divi Builder dla określonych typów postów WordPress. Jest to przydatne, jeśli chcesz ograniczyć dostęp do Divi Builder dla niektórych typów postów, takich jak galeria.

Opcje integracji typu posta

W zakładce Zaawansowane możesz włączyć i wyłączyć minifikację CSS i Javascript. W tym miejscu możesz również włączyć edytor Legacy Builder.

Zaawansowane opcje Divi Builder

Divi Builder zapewnia pełną kontrolę nad tym, co każda grupa użytkowników w Twojej witrynie może, a czego nie może zrobić.

Podczas gdy Beaver Builder pozwala ograniczyć dostęp do kilku kluczowych obszarów, Divi Builder pozwala dokładnie określić, do jakich funkcji użytkownicy mają dostęp.

Na przykład możesz uniemożliwić użytkownikom ładowanie układów lub wyłączanie funkcji w Divi Builder.

Edytor ról Divi

Centrum wsparcia Divi dostarcza raport na temat twojego systemu. Pomoże Ci to zdiagnozować problemy z konfiguracją hostingu.

Na przykład w przypadku mojej testowej witryny WordPress raport wykazał, że moja instalacja WordPressa miała ograniczoną ilość zasobów.

Dostęp zdalny jest również dostępny na tej stronie. Może to pomóc zespołowi wsparcia Elegant Themes w rozwiązaniu wszelkich problemów związanych z Divi Builder.

Centrum pomocy i wsparcia Divi Builder

Centrum pomocy zawiera również linki do przydatnych samouczków wideo oraz tryb awaryjny, który wyłącza funkcje, które mogą powodować problemy z innymi wtyczkami i motywami WordPress.

Błędy są również wyświetlane na tej stronie, jeśli włączony jest WP_DEBUG_LOG.

Centrum pomocy i wsparcia Divi Builder

Divi Builder to prosta wtyczka WordPress do skonfigurowania, z kilkoma ustawieniami do sprawdzenia po instalacji.

Wyróżniającą się funkcją w obszarze ustawień jest Divi Role Editor. Jest to coś, co docenią właściciele dużych witryn WordPress z wieloma pracownikami.

Motyw Beaver Builder

Beaver Builder Theme to framework HTML5 i Bootstrap WordPress, który jest zawarty w planach Beaver Builder Pro i Agency.

Jest to minimalistyczny projekt WordPress, który działa jak puste płótno do tworzenia projektów za pomocą Beaver Builder. W motywie dostępne są haki i filtry, które pomagają programistom modyfikować projekt strony internetowej, a także ma świetne wsparcie dla WooCommerce.

Aktywacja motywu Beaver Builder

Wszystkie ustawienia motywu Beaver Builder znajdują się w programie WordPress Customizer.

Styl i pozycję można dostosować do dziesiątek obszarów strony. Istnieją również układy nagłówka, menu nawigacyjnego, bloga, archiwów, postów na blogu, stron WooCommerce i stopki.

Konfigurator motywu Beaver Builder

Chociaż w swojej istocie Beaver Builder pozostaje minimalnym motywem WordPress, programiści poszli o krok dalej, aby dodać wiele dodatkowych opcji dostosowywania.

Weźmy na przykład logo swojej witryny. Możesz przesłać zwykły obraz logo, jeden dla urządzeń Retina, pojawiające się logo dla zwykłych urządzeń i urządzeń Retina oraz inne logo dla urządzeń mobilnych.

Przesyłanie logo w motywie Beaver Builder

W wielu innych motywach WordPress różne części projektu, takie jak nagłówek, pasek boczny i stopka, mogą uniemożliwić Beaver Builder poprawne wyświetlanie układów. Dlatego wielu użytkowników Beaver Builder przeszło na motyw Beaver Builder.

To świetny wybór, jeśli chcesz używać układów Beaver Builder na swojej stronie internetowej.

Motyw Divi

Beaver Builder promuje swój projekt jako motyw ramowy dla Beaver Builder, podczas gdy Elegant Themes sprzedaje motyw Divi jako wszechstronny, uniwersalny motyw WordPress.

To pokazuje, jak wpływowy może być marketing, ponieważ istnieje więcej podobieństw między motywem Beaver Builder a motywem Divi, niż ludzie myślą.

Na początku Divi był uniwersalnym motywem WordPress, jednak większość wszechstronności, którą wszyscy kojarzyli z motywem Divi, została później przeniesiona do Divi Builder. To była niewątpliwie słuszna rzecz.

Tak więc, ponieważ większość funkcji jest włączona do Divi Builder, motyw Divi można uznać za strukturę taką jak motyw Beaver Builder. Dlatego, jeśli posiadasz oba produkty, możesz użyć motywu Divi z Beaver Builder lub motywu Beaver Builder z Divi Builder.

Aktywacja motywu Divi

Po aktywacji motywu Divi zobaczysz kilka subtelnych zmian w menu administratora Divi.

Obejmuje to zastąpienie strony opcji wtyczek stroną opcji motywu i łączem do narzędzia WordPress Customizer.

Oprócz rozszerzanego obszaru ustawień, wszystko inne pozostaje bez zmian.

Co ciekawe, jeśli motyw Divi jest aktywny, wtyczka Divi Builder zostanie automatycznie dezaktywowana. Jest to konieczne, ponieważ funkcjonalność Divi Builder jest wbudowana bezpośrednio w motyw Divi (i dodatkowy motyw WordPress Elegant Themes).

Menu administratora motywu Divi

Znajdziesz setki przydatnych opcji w WordPress Customizer, rozmieszczonych w kilkunastu sekcjach. Można ich używać do kontrolowania obszarów, takich jak nagłówek, stopka i paski boczne.

Główny obszar zawartości postów, stron i niestandardowych typów postów jest nadal kontrolowany przez Divi Builder.

Dostosowywanie motywów WordPress w motywie Divi

Jeśli chodzi o dostosowywanie projektu witryny, nie wierzę, że motyw Divi jest lepszy lub gorszy od motywu Beaver Builder. Istnieje kilka obszarów, w których Motyw Divi daje więcej opcji, a kilka obszarów, w których Motyw Beaver Builder daje więcej.

Ustawienia układu motywu Divi

Wszystkie opcje wtyczek Divi Builder zostały zintegrowane z bardziej rozbudowanym obszarem opcji Divi Theme.

Na przykład ustawienia typu postu są teraz dostępne na karcie kreatora, a opcje ze strony ustawień zaawansowanych znajdują się teraz na stronie opcji ogólnych.

Strona ustawień ogólnych zawiera również pola dla ikon mediów społecznościowych, przewijania, niestandardowego kodu CSS i innych.

Ogólne opcje motywu Divi

Dodatkowe opcje są również dostępne dla użytkowników Divi Theme.

Istnieje dedykowany obszar opcji dla menu nawigacyjnego Twojej witryny i strony układu, na której możesz określić, które funkcje powinny być włączone w postach i na stronach.

Istnieją również strony, na których można dodać baner o wymiarach 468 × 60 pikseli i ogólne szczegóły SEO dotyczące Twojej witryny.

Opcje motywu nawigacji Divi

Podobnie jak motyw Beaver Builder, motyw Divi to minimalny motyw WordPress, który został zoptymalizowany do użytku z Divi Builder.

Gorąco polecam korzystanie z tego projektu, jeśli chcesz skorzystać z ogromnej gamy gotowych układów Divi.

Koszt konstruktora bobra

Funkcje i funkcjonalność to dwa czynniki, które należy wziąć pod uwagę podczas przeglądania Beaver Builder i Divi, jednak należy również wziąć pod uwagę koszt tych produktów i budżet dostępny dla swoich projektów.

Wiele premium firm WordPress pobiera więcej opłat za korzystanie z ich produktów na dodatkowych stronach internetowych. Na przykład plan podstawowy może obsługiwać jedną witrynę internetową, plan pośredni może obsługiwać trzy witryny internetowe, a plan zaawansowany może obsługiwać dziesięć witryn internetowych.

Beaver Builder i Elegant Themes są bardziej hojne, oferując wsparcie i aktualizacje dla nieograniczonej liczby stron internetowych.

Chociaż ten artykuł koncentruje się głównie na wersji premium Beaver Builder, nadal polecam sprawdzić Beaver Builder Lite.

Jest to dobre rozwiązanie dla prostych stron internetowych, a także pomaga zobaczyć, jak działa interfejs Beaver Builder.

Należy jednak pamiętać, że w bezpłatnej wersji Beaver Builder brakuje przydatnych modułów, takich jak formularz kontaktowy, cennik czy mapa. There is no access to the Beaver Builder templating system or pre-made layouts either.

Upgrading Beaver Builder Lite

For the vast majority of projects, the full version of Beaver Builder is a better fit than the lite version.

Three different premium plans are available: Standard, Pro, and Agency. All plans come with one year of premium support and access to premium modules and templates.

The standard plan retails at $99 per year. To get WordPress multisite support and access to the Beaver Builder Theme, you need to upgrade to the $199 per year Pro plan.

The $399 per year Agency plan adds white labeling. Web design companies may be interested in this plan as it allows you to rebrand the plugin as your own and change all references to Beaver Builder in templates and the admin area.

Ceny konstruktora bobrów

Beaver Builder oferuje 30-dniową gwarancję zwrotu pieniędzy.

Wszyscy członkowie Beaver Builder otrzymują 40% zniżki po roku. To obniża cenę planów Beaver Builder w kolejnych latach do 59,40 USD rocznie, 119,40 USD rocznie i 239,40 USD rocznie.

Jeśli nie masz pewności co do jakiegokolwiek aspektu korzystania z Beaver Builder, gorąco polecam sprawdzenie ich szczegółowej bazy wiedzy. Możesz również poprosić o pomoc za pośrednictwem wsparcia biletowego oraz na forum społeczności Beaver Builder, grupie Beaver Builder na Facebooku i pokoju Beaver Builder Slack.

Obszar wsparcia Beaver Builder

Koszt Divi

Polityka cenowa członkostwa w Elegant Themes jest prostsza.

Dostępne są dwa plany, a oba plany zapewniają pełny dostęp do wszystkich produktów Elegant Themes.

Roczne członkostwo w Elegant Themes kosztuje 89 USD rocznie.

Podobnie jak Beaver Builder, możesz nadal korzystać z produktów, takich jak Divi Builder, po wygaśnięciu członkostwa, jednak nie otrzymasz wsparcia i aktualizacji, jeśli nie odnowisz subskrypcji.

Jeśli uważasz, że będziesz odnawiać członkostwo na kilka lat, możesz rozważyć wykupienie dożywotniego planu dostępu. Za jednorazową opłatą w wysokości 249 USD otrzymasz dożywotni dostęp, wsparcie i aktualizacje do wszystkich produktów Elegant Themes.

Eleganckie plany motywów

Elegant Themes oferuje również 30-dniową gwarancję zwrotu pieniędzy wszystkim nowym klientom.

Aby pomóc Ci lepiej zrozumieć ich produkty, Elegant Themes stworzyło jeden z najbardziej obszernych obszarów dokumentacji, jakie kiedykolwiek widziałem. Istnieją setki pisemnych samouczków i samouczków wideo, które wyjaśniają, jak działają motywy i wtyczki Elegant Themes WordPress.

Członkowie mogą również poprosić o pomoc za pośrednictwem obsługi biletów, a także istnieje duże forum społecznościowe, sieć Meetup i popularna grupa na Facebooku.

Obszar wsparcia eleganckich motywów

Porównanie kosztów Beaver Builder i Divi jest trudne, ponieważ mają nieco inne modele cenowe.

Pomimo tego, że jest bardziej ograniczony, doceniam fakt, że dostępna jest darmowa wersja Beaver Builder, ponieważ Beaver Builder Lite wystarczy do prostych blogów i prostych projektów stron internetowych.

Wierzę jednak, że pełna wersja Beaver Builder jest najlepszą opcją dla większości użytkowników WordPressa.

Przy 99 USD standardowa licencja na Beaver Builder kosztuje 10 USD więcej niż Elegant Themes, jednak kolejne odnowienia kosztują tylko 59,40 USD rocznie.

Jest to hojna zniżka dla lojalnych członków, jednak dożywotni plan Elegant Themes może nadal być tańszy dla wielu właścicieli witryn.

Członkostwo w Elegant Themes obejmuje również motyw Divi, za który będziesz musiał zapłacić 199 USD, aby uzyskać dostęp do motywu Beaver Builder.

Co ważniejsze, członkostwo w Elegant Themes obejmuje pięć produktów wysokiej jakości: Divi Theme, Divi Builder, motyw magazynu WordPress Extra, wtyczkę WordPress Bloom z opcją akceptacji e-maili oraz wtyczkę Monarch do mediów społecznościowych.

Z tego powodu uważam, że członkostwo w Elegant Themes zapewnia lepszy stosunek jakości do ceny dla większości użytkowników WordPress.

Końcowe przemyślenia

Kreatory stron typu „przeciągnij i upuść” mogą pomóc użytkownikom WordPressa w tworzeniu pięknych układów stron internetowych w ciągu kilku minut za pomocą przyjaznego dla użytkownika interfejsu.

W artykule porównawczym, takim jak ten, moim obowiązkiem jest pokazać mocne i słabe strony zarówno Beaver Builder, jak i Divi, jednak należy pamiętać, że oba te rozwiązania są produktami dopracowanymi i jest między nimi wiele podobieństw.

Proces tworzenia nowych wierszy i kolumn jest podobny w obu produktach, ale wydaje mi się, że interfejs Beaver Builder jest łatwiejszy do nauczenia i trochę szybszy.

Divi oferuje o wiele więcej opcji dostosowywania i więcej gotowych układów. Twierdzę, że pięć produktów objętych członkostwem w Elegant Themes zapewnia również lepszy stosunek jakości do ceny.

Mam nadzieję, że podobało Ci się nasze szczegółowe spojrzenie na Beaver Builder i Divi.

Aby dowiedzieć się więcej o Beaver Builder, odwiedź oficjalną stronę sprzedaży lub przeczytaj naszą pełną recenzję Beaver Builder. Możesz również lepiej zrozumieć, jak działa Beaver Builder, odwiedzając stronę demonstracyjną Beaver Builder lub testując bezpłatną wersję wtyczki.

Możesz dowiedzieć się o Divi na stronie Elegant Themes oraz w naszej pełnej recenzji Divi Builder. Chociaż nie jest dostępna żadna darmowa wersja Divi Builder, możesz przetestować wtyczkę na stronie demonstracyjnej Divi Builder. Pomoże Ci to zobaczyć, co może zrobić Divi Builder.

Dziękuje za przeczytanie.
Kevin