Investnet.pl > Poradniki > WordPress > WPBakery Page Builder – instrukcja obsługi

WPBakery Page Builder – instrukcja obsługi

2021-05-21

Tworzenie treści stron internetowych nie musi polegać na kodowaniu strony w HTML i stylowaniu jej poprzez kod CSS. W dzisiejszych czasach proste, nieskomplikowane strony internetowe tworzone są przy pomocy tzw. page builderów takich jak Elementor czy WPBakery. Tworząc strony w ten sposób nie musimy wcale posiadać wiedzy programistycznej i tworzyć proste strony internetowe przy pomocy wtyczek takich jak WPBakery.

W tym poradniku postaram się opisać większość podstawowych funkcji WPBakery Page Builder, które pozwolą Ci tworzyć lub edytować treści na stronach, które zostały stworzone przy pomocy tej wtyczki.


Spis treści

  1. Dodajemy nową stronę w WPBakery Page Builder
    1. Frontend Editor – edytor treści WPBakery
    2. Backend Editor – edytor treści WPBakery
  2. Podstawowe elementy WPBakery Page Builder
    1. Dodawanie sekcji
    2. Element Row
    3. Kolumna w WPBakery
    4. Dodawanie nagłówka
    5. Jak dodać tekst w WPBakery?
    6. Jak dodać obraz
    7. Własny kod HTML w WPBakery
    8. Dodawanie przycisków
  3. Opcje elementów WPBakery Page Builder
    1. General Options – klasy CSS, ID, animacje
    2. Design Options – marginesy, padding, tło
  4. Darmowy poradnik video WPBakery
  5. Podsumowanie

Dodajemy nową stronę w WPBakery Page Builder

Stronę dodajemy jak w przypadku każdej innej strony – najeżdżamy kursorem na zakładkę Strony w menu administratora i klikamy Dodaj nową. Pokaże nam się okno edycji treści Gutenberg, lecz chcemy przejść do edytora treści WPBakery. W tym celu klikamy przycisk WPBakery Page Builder znajdujący się w górnym pasku.

Dodawanie nowej strony przy pomocy WPBakery Page Builder
Dodawanie nowej strony przy pomocy WPBakery Page Builder

Zostaniemy przeniesieni do klasycznego edytora treści WordPress, który współpracuje z wtyczką WPBakery (w przeciwieństwie do Gutenberga). Teraz mamy do wyboru dwie opcje edycji treści – Backend Editor i Frontend Editor. Są to dwa edytory wtyczki WPBakery, które mają swoje wady i zalety.

Backend editor i frontend editor - WPBakery Page Builder
Backend Editor i Frontend Editor – WPBakery Page Builder

Frontend Editor – edytor treści WPBakery

Ten edytor umożliwia nam tworzenie strony w modelu Live Preview, co oznacza, że każdy dodawany element będziemy od razu widzieli na stronie w postaci takiej jak docelowo będzie wyglądać. Niestety, ale Frontend Editor jest wolniejszy od Backend Editor.


Backend Editor – edytor treści WPBakery

Backend Editor nie ma podglądu Live Preview przy tworzeniu strony, natomiast elementy ładują się dużo szybciej. To właśnie z niego będziemy korzystać przy tworzeniu strony. Dlatego wybieramy przycisk Backend Editor.


Podstawowe elementy WPBakery Page Builder

WPBakery działa na zasadzie Drag&Drop (przeciągnij i upuść) więc tworzenie stron w tym narzędziu jest dosyć proste. Każdy element, który dodamy na naszej stronie możemy później przeciągnąć na inną pozycję, edytować lub usunąć. Wszystkie elementy, które dodamy na stronie mają mnóstwo opcji do edycji i dostosowań. Możemy dodawać marginesy i paddingi do wybranych elementów czy sekcji.

Elementy dodajemy klikając w przycisk +, podobnie jak w przypadku Gutenberga.

Podstawowe elementy WPBakery Page Builder
Podstawowe elementy WPBakery Page Builder

Dodawanie sekcji

Dział jest to element nadrzędny i jest najwyżej w hierarchii elementów, które mogą być w nim umieszczony. W skrócie: Dodajemy dział jeśli chcemy stworzyć sekcje, która pomieści kilka elementów Row.


Element Row

Element Row odpowiada wierszowi w tabeli i jest to podstawowy element budujący strukturę strony w WPBakery. Bez tego elementu nie dodamy żadnej treści na stronę. Jeśli chcemy dodać jakikolwiek element i nie umieścimy go w elemencie Row – wówczas WPBakery automatycznie stworzy nowy wiersz i doda w nim wybrany element.


Kolumna w WPBakery

Dodawanie kolumny w WPBakery
Dodawanie kolumny w WPBakery

Dodawanie kolumny nie jest możliwe z poziomu dodawania elementu. Kolumny w WPBakery określa się w ustawieniach Row. Najeżdżając na ikonkę 3 pasków danego wiersza – pokaże nam się kilka możliwych układów kolumn do zastosowania oraz możliwość podania własnej konfiguracji (Custom).


Dodawanie nagłówka

Dodając nagłówek wyświetli nam się okno z możliwością edycji nagłówka. Widżet ten posiada wiele opcji. Możemy:

  • dodać tekst nagłówka,
  • dodać link do niego,
  • ustawić wagę nagłówka (h1-h6 gdzie h1 jest nagłówkiem najwyższej wagi, a h6 najniższej),
  • ustawić typografię nagłówka (czcionka, wielkość, pogrubienie, wysokość linii itp.).

Jak dodać tekst w WPBakery?

Dodawanie tekstu w WPBakery odbywa się przy pomocy wbudowanego edytora tekstu WordPress – WYSIWYG. Dodając widget Text Block w danym miejscu możemy dodać tekst, który wpiszemy w edytorze tekstu. Edytor tekstu WYSIWYG umożliwia nam dodawanie różnego rodzaju treści: nagłówki, akapity, listy itp. Podczas dodawania tekstu możemy również pogrubiać tekst oraz zmieniać pozycję tekstu. Po zaznaczeniu danego tekstu możemy również dodać link klikając ikonkę linku i wpisując adres URL do którego ma kierować.

Dodawanie tekstu w WPBakery poprzez WYSIWYG
Dodawanie tekstu w WPBakery poprzez WYSIWYG

Jak dodać obraz

Obraz możemy dodać na kilka różnych sposobów. Są trzy opcje dodawania obrazów:

  • Single Imagepojedynczy obraz – mamy kilka opcji do wstawienia takiego obrazu. Możemy wybrać rozmiar w jakim będzie wyświetlany, ustawić jego pozycję, styl, dodać link albo ustawić otwieranie jako lightbox.
  • Image Gallerygaleria obrazów – w tym przypadku możemy wyświetlić nasze obrazy jako siatkę obrazów albo slider. Dodatkowo możemy ustawić rozmiar wyświetlanych obrazów, dodać link albo lightbox.
  • Image Carouselslider obrazów – ta opcja pozwala nam na stworzenie slidera z wybranymi obrazami. Mamy do dyspozycji różne opcje slidera takie jak zarządzanie nawigacją slidera, liczbą wyświetlanych slajdów oraz ustawienie szybkości slidera.

Własny kod HTML w WPBakery

Wtyczka WPBakery przewidziała również opcję dodawania własnego kodu do strony przy pomocy widżetu Kod HTML. Możemy wstawić dowolny kod HTML na stronie i umieścić go w danym miejscu. Bardzo przydatna opcja jeśli zna się podstawy HTML.


Dodawanie przycisków

Możemy dodać przycisk klikając w powyższą ikonkę i ustawiając odpowiednie opcje widżetu. Generalnie podstawową własnością przycisku jest kierowanie do nowej podstrony lub witryny, dlatego należy ustawić odpowiedni URL. Możemy również ustalić tekst przycisku, styl, kolor rozmiar, pozycję. Ponadto możemy dodać ikonkę do przycisku zaznaczając opcję „Add icon?„.


Dodawanie wbudowanych widżetów WordPress

Ciekawą opcją jest również możliwość dodania wbudowanych widżetów WordPress takich jak np. WP Najnowsze wpisy, który doda nam listę ostatnich wpisów w danym miejscu. Integracja WPBakery z widżetami WordPress pozwala na dodanie wielu wbudowanych funkcji WordPress do strony.


Opcje elementów WPBakery Page Builder

Każdy element dodany przez WPBakery możemy dostosować przy pomocy opcji danego widżetu. Elementy mają różne funkcjonalności i opcje, ale posiadają także opcje, które się powtarzają praktycznie dla wszystkich widżetów.

Po kliknięciu na edycję danej opcji wyskoczy nam okno edycji widżetu.


General Options – klasy CSS, ID, animacje

Okno edycji widżetu WPBakery Page Builder
Okno edycji widżetu WPBakery Page Builder

Dla każdego elementu możemy ustawić ID oraz klasę CSS – te opcje przydają się później programistom do pracy nad tymi elementami przy pomocy kodu.

Możemy również dodać animację elementu klikając w opcję CSS Animation możemy wybrać daną animację.


Design Options – marginesy, padding, tło

Okno edycji widżetu WPBakery Page Builder - Design Options
Okno edycji widżetu WPBakery Page Builder – Design Options

W tej zakładce możemy ustawić w CSS Boxpadding elementu (odstępy) oraz marginesy. Ponadto możemy również dodać ramkę w okienkach przynależących dla opcji border.

Po prawej stronie CSS Boxa możemy ustawić tło w opcji Background. Możemy też dodać obraz, który ma się wyświetlać w tle elementu – opcję tą znajdziemy pod opcją Background (wystarczy kliknąć w plusik i wybrać obraz z biblioteki multimediów).


Darmowy poradnik video WPBakery

Załączam darmowy tutorial stworzony przez WPBakery , który pozwoli Ci poznać lepiej Frontend Editor wtyczki.


Podsumowanie

W tym wpisie nie przedstawiłem wszystkich opcji WPBakery. Mamy do dyspozycji jeszcze wiele przydatnych widżetów takich jak wstawianie Google Maps, filmików z Youtube/Vimeo, wykresów i wiele innych. Polecam zapoznać się z wstawionym poradnikiem wideo, który pozwoli Ci poznać jak pracuje się z wtyczką WPBakery Page Builder.

Autor
Jakub Wiśniewski

Specjalista WordPress - programista z zawodu, wykształcenia oraz z pasji. Wolny czas spędza czytając o nowych technologiach, grając w siatkówkę i ćwicząc grę na perkusji.

Sprawdź również