WPBakery Page Builder – instrukcja obsługi
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
- Dodajemy nową stronę w WPBakery Page Builder
- Podstawowe elementy WPBakery Page Builder
- Opcje elementów WPBakery Page Builder
- Darmowy poradnik video WPBakery
- 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.
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.
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.
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 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ć.
Jak dodać obraz
Obraz możemy dodać na kilka różnych sposobów. Są trzy opcje dodawania obrazów:
- Single Image – pojedynczy 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 Gallery – galeria 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 Carousel – slider 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
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
W tej zakładce możemy ustawić w CSS Box – padding 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.