Wraz z rozwojem WordPressa pojawiły się kreatory umożliwiające tworzenie zawartości stron za pomocą drag&drop oraz kreatorów wizualnych tak, aby osoby nie potrafiące tworzyć stron www mogły je samodzielnie modyfikować i uzupełniać treścią.

Obecnie na rynku do dyspozycji mamy kilka narzędzi przeznaczonych do tego celu. Najpopularniejsze z nich to Divi, Elementor, Visual Composer oraz tytułowy Beaver Builder, którym zajmiemy się w tym wpisie.

Dlaczego warto wypróbować kreatory wizualne?

Przede wszystkim, jak już wspomniałem wcześniej – kreatory wizualne usprawniają pracę osobom nie potrafiącym tworzyć stron www, na przykład redaktorom. Inną, bardzo ważną zaletą jest przyspieszenie procesu tworzenia i modyfikowania kolejnych podstron – tworzenie strony przez stworzone wcześniej komponenty jest znacznie szybsze niż tworzenie ich z poziomu kodu. Kreatory wizualne mają możliwość tworzenia wspomnianych już komponentów – sprawia to, że tworzymy reużywalne, łatwe w utrzymaniu i rozbudowie kawałki kodu.

Najwięcej czasu podczas pracy z WordPressem spędziłem z kreatorem Beaver Builder i to dlatego właśnie na nim się skupię w tym wpisie. Teraz przejdę do omówienia całego spektrum możliwości tego kreatora.

Tworzenie komponentów

Jak już wcześniej wspomniałem Beaver Builder umożliwia tworzenie reużywalnych komponentów (lub modułów – będę używał tych słów zamiennie). Takie moduły oprócz uzupełniania zawartością wcześniej zdefiniowanych pól pozwalają także na ustawienie marginesów wewnętrznych i zewnętrznych, widoczności na odpowiednich rozdzielczościach lub też widoczności zależnie od tego czy jesteśmy zalogowani czy też nie.

Tworzenie komponentu rozpoczyna się w momencie stworzenia katalogu z komponentem w katalogu bb-modules. Następnie należy stworzyć plik PHP, gdzie definiujemy ścieżki do katalogów ze stylami, skryptami i assetami (np. zdjęcia czy video). Oprócz tego należy też zdefiniować w module dostępne pola, ich typ oraz ewentualne wartości domyślne. Poniżej przedstawiam przykładowy plik konfiguracyjny:

<?php 
class videoModule extends FLBuilderModule { 
public function __construct() { 
parent::__construct(array( 'name' => __('Video module', 'fl-builder'),
            'description'   => __('videoModule', 'fl-builder'),
            'category'		=> __('Landing pages', 'fl-builder'),
            'cr_image'      => FL_MODULE_EXAMPLES_URL . 'videoModule/preview.jpg',
            'dir'           => FL_MODULE_EXAMPLES_DIR . 'videoModule/',
            'url'           => FL_MODULE_EXAMPLES_URL . 'videoModule/',
            'partial_refresh' => true 
        ));
    }
}

FLBuilder::register_module('videoModule', array(
    'general'       => array(
        'title'         => __('General', 'fl-builder'),
        'sections'      => array(
            'general'       => array(
                'title'         => __('General', 'fl-builder'),
                'fields'        => array(
					'header'     => array(
						'label'         => 'Nagłówek sekcji',
						'type'          => 'text',
						'default'       => 'Example text.'
					),
                    'header_weight'   => array(
                        'label'         => 'Rodzaj nagłówka (tylko dla SEO)',
                        'type'          => 'select',
                        'description'   => 'Nie zmienia wyglądu nagłówka',
                        'default'       => 'p',
                        'options'       => array(
                            'p'      => 'p',
                            'h1'      => 'h1',
                            'h2'      => 'h2',
                            'h3'      => 'h3'
                        )
                    ),
                    'video_ratio'   => array(
                        'type'          => 'select',
                        'label'         => 'Format wideo',
                        'description'   => 'Dzięki temu wysokość i szerokość jest dopasowywana automatycznie',
                        'default'       => '16by9',
                        'options'       => array(
                            '16by9'      => '16 : 9',
                            '4by3'      => '4 : 3'
                        )
                    ),
					'video'     => array(
						'label'         => 'Kod do wstawienia filmu',
						'type'          => 'textarea',
                        'default'       => '<img src="/bb-modules/videoMoule/img/lorem.jpg" alt="" >',
						'placeholder'       => 'iframe lub dowolny kod html'
					),
					'content'     => array(
						'label'         => 'Tekst pod filmem',
						'type'          => 'editor',
					    'default'       => 'Example text.'
					),
				)
			),
        )
    )
));

Mając już plik tworzący moduł należy stworzyć do niego wcześniej wspomniane assety, oraz drugi równie istotny plik, czyli szablon HTML (który też musimy zapisać w pliku .php, aby pobrać niezbędne dane). Wartości z pól zdefiniowanych w poprzednim pliku uzyskujemy poprzez dostęp do obiektu $settings. Po uzyskaniu danych z $settings zostaje nam jedynie zdefiniowanie szablonu. Przykładowy szablon może wyglądać tak:

<?php 
    $header = $settings->header;
    $header_weight = $settings->header_weight;
    $content = $settings->content;
    $video = $settings->video;
    $video_ratio = $settings->video_ratio;
?>

<div class="section videos container video_margin_bottom">
    <?php if ($header) { ?>
        <div class="row">
            <div class="col-xs-12 header mt0">
                <<?php echo $header_weight; ?> class="title header_margin-top"><?php echo $header; ?></<?php echo $header_weight; ?>>
            </div>
        </div>
    <?php } ?>
    <div class="wrap">
        <div class="vwrap">
            <?php if ($video) { ?>
                <div class="video embed-responsive embed-responsive-<?php echo $video_ratio; ?>">
                    <?php echo $video; ?>
                </div>
            <?php } ?>
        </div>
        <?php if ($content) { ?>
            <div class="video-ds fz16">
                <?php echo $content; ?>
            </div>
        <?php } ?>
    </div>
</div>

Dostęp do edycji treści modułu odbywa się poprzez edycję podstrony za pomocą Kreatora Stron. Tam też otrzymujemy możliwość wcześniej wspomnianej zmiany marginesów, widoczności etc. Układanie elementów odbywa się poprzez mechanizm drag&drop. Z listy modułów wybieramy interesujący nas moduł i przeciągamy go na naszą stronę. Klikając na moduł otworzy nam się menu edycji modułu. W zależności od tego, jakie pola zdefiniujemy nasz moduł będzie wyglądał inaczej. Warto też wspomnieć, że Beaver Builder wspiera responsywność modułów – niektóre wartości możemy ustawić osobno dla desktopów, tabletów i smartfonów.

W tym miejscu warto zaznaczyć, że Beaver Builder posiada mechanizm cache’owania, przez co zmiany na stronie mogą nie pojawić się od razu. Należy wtedy wejść w panel administracyjny WordPressa. Następnie z zakładki Ustawienia wybrać pozycję Kreator Stron a w niej opcję Pamięć Podręczna. Tam należy wyczyścić pamięć podręczną i już możemy cieszyć się wprowadzonymi zmianami.

Zapisywanie modułów

Stworzony moduł po uzupełnieniu treścią możemy zapisać. Tak zapisany komponent możemy potem użyć na innej stronie mając już gotową treść. To ogromna oszczędność czasu! Co więcej, mamy możliwość tworzenia modułów globalnych. Tym co je wyróżnia od zwyczajnie zapisanego modułu jest to, że edycja modułu na jednej podstronie modyfikuje go w każdym miejscu, gdzie użyliśmy modułu globalnego.

Zapisywanie szablonów

Idąc krok dalej, oprócz zapisywania modułów mamy też możliwość zapisywania szablonów. Szablon to szkielet całej podstrony. Dzięki temu jeśli chcemy wypracować powtarzalny styl dla niektórych podstron, to tworzymy go raz a następnie powielamy zmieniając tylko treść.

Zapisywanie zmian tylko w pamięci

Jeśli chcemy edytować naszą stronę, ale efekt naszej pracy musi zatwierdzić ktoś inny, to nie musimy tworzyć osobnej, prywatnej podstrony – wystarczy że zapiszemy nasz moduł, ale nie opublikujemy zmian. Tak zapisane zmiany zostaną zapisane w widoku kreatora, natomiast nie zostaną wystawione na światło zewnętrzne.

Łyżka dziegciu w beczce miodu

Póki co opisywałem Beaver Buildera w samych superlatywach. Należy jednak wspomnieć o dwóch minusach. Pierwszy z nich to wydajność. Tworząc strony w oparciu o to rozwiązanie zauważyłem, że dosyć mocno obciąża ono naszą stronę. Problemu tego nie spotkałem w przypadku chociażby Visual Composera. Natomiast warto też wspomnieć, że nie była to najnowsza wersja wtyczki – problem ten mógł zostać naprawiony (i całkiem możliwe, że został bo w wersji demo go nie uświadczyłem). Drugi z mankamentów to niestety cena produktu. Beaver Builder w standardowej wersji kosztuje 99 USD, zaś w wersji Agency koszt wzrasta aż do 399 USD.

Podsumowanie

Podsumowując, Beaver Builder to dobre narzędzie do tworzenia stron, nie wymagające dużej wiedzy technicznej oraz przyspieszające pracę! Jeśli zainteresowałem Cię tym rozwiązaniem, to możesz przetestować je całkowicie za darmo właśnie TUTAJ.  Klikając natomiast w TEN link możesz zakupić Beaver Buildera – nie ukrywam, że jest to link afiliacyjny 🙂

Zachęcam Cię do podzielenia się swoimi doświadczeniami z kreatorami wizualnymi oraz wypróbowania Beaver Buildera w wersji demo.

Źródła i materiały dodatkowe:

• https://www.wpbeaverbuilder.com
• https://www.youtube.com/channel/UCvvtiNDweAHU-0mBeN1hh6A/videos
• https://blog.robertorlinski.pl/2018/08/20/tworzenie-stron-do-edycji-bez-kodu
• http://demo.wpbeaverbuilder.com

Czy wiesz, że devszczepaniak.pl jest na Facebooku?

Chcesz otrzymywać informację o nowych wpisach zaraz po publikacji?
Koniecznie zaobserwuj devszczepaniak.pl na Facebooku.

Udostępnij wpis

Szukasz taniego i dobrego VPS? Skorzystaj z Mikrusa i przy zakupie odbierz dodatkowy miesiąc usługi za darmo!

Chcesz docenić moją pracę? Postaw mi kawę!