Jest potężnym narzędziem służącym do organizacji treści na stronach serwisu. Posiada kilkadziesiąt dodatków, a jego moc tkwi w prostocie układania elementów na stronie serwisu.

Page Builder dostarcza dodatkową pozycję w głównym menu w panelu administratora.

 

page builder-10

 

Aby przejść do komponentu rozwijamy pozycję SP Page Builder. Do wyboru mamy przegląd już istniejących stron z możliwością ich edycji oraz stworzenie nowej podstrony w serwisie. Na początek wybierzmy opcję „Add New Page”. Po wybraniu pozycji system przekieruje nas do formularza tworzenia podstrony. Z wyglądu przypomina tradycyjny formularz dodawania artykułu, ale to tylko na początku.

 

Opis struktury

page builder-12

 

Na górze tradycyjnie znajdują się przyciski służące do operowania całym dokumentem, czyli zapisz, zapisz i zamknij, anuluj.

 

page builder-8

 

Niżej widoczny jest formularz definiowania Nazwy podstrony i jej aliasu. Możliwy jest import gotowej strony.

 

page builder-14

 

Pod formularzem znajduje się domyślna pierwsza sekcja strony. Kolejne dodajemy za pomocą przycisku „Add Row”.

 

page builder-15

 

Sekcja posiada wiele mechanizmów, które umożliwiają jej maksymalną personalizację. Przyjżyjmy się im bliżej.

 

 page builder-16

Miejsce dzięki któremu możemy przesuwać całą sekcję, względem innych.

 page builder-18

Służy do dodawania kolumn w sekcji, po najechaniu kursorem na element rozwija się menu z opcjami ustawień kolumn. Wybranie któregokolwiek elementu zmienia naszą sekcję, według wybranego wzorca.

page builder-28

 page builder-17

Służy do kopiowania całej sekcji wraz z elementami które znajdują się w niej. Po kliknięciu przycisku otwiera się okno popup w którym znajduje się kod sekcji, należy go skopiować.

 page builder-19

Służy do wklejania kodu sekcji. Tak jak w powyższej funkcji kliknięcie powoduje wyświetlenie okna popup z przestrzenią na wklejenie kodu, który został wygenerowany podczas użycia przycisku kopiuj. Te dwie funkcje są bardzo przydatne gdy chcemy skopiować z jednej podstrony daną sekcję i umieścić ją na innej podstronie. Wewnątrz podstrony do kopiowania służy szybsze rozwiązanie.

 page builder-20

Kliknięcie przycisku powoduje dodanie kolejnej sekcji pod obecną.

 page builder-24

Przycisk otwiera okno popup ustawień sekcji. Dokładne omówienie w dalszej części.

 page builder-21

Przycisk służy do kopiowania sekcji. To właśnie z tej opcji należy korzystać przy kopiowaniu sekcji wewnątrz danej podstrony. Operacja jest znacznie szybsza.

 page builder-22

Ukrywa i blokuje zawartość sekcji. Funkcja przydatna podczas pracy z wieloma sekcjami. Pozwala uniknąć nie planowanych przemieszczeń modułów znajdujących się w sekcji.

 page builder-23

Przycisk usuwa daną sekcję. Usunięcie wymaga potwierdzenia, w przypadkach nieplanowanej próby usunięcia.

 page builder-27

Przycisk dodaje sekcję wewnątrz sekcji. Pozwala to np. na tworzenie wielokolumnowych obszarów.

 page builder-25

Najważniejszy przycisk służący do dodawania modułów w sekcji.

 page builder-26

Przycisk otwiera okno popup z ustawieniami danej kolumny.

 

Ustawienia sekcji

W ustawienia sekcji wchodzimy poprzez kliknięcie przycisku „Row settings”

 

page builder-29

 

W ustawienia sekcji wchodzimy poprzez kliknięcie przycisku „Row settings”

 

page builder-30

 

  • Section Title – Czyli tytuł sekcji, który będzie widoczny na stronie.

  • Heading – Rodzaj nagłówka dla sekcji, wybierany w zależności od ważności danej sekcji, wybór z godny z HTML czyli mamy możliwość wyboru nagłówka od h1 do h6.

  • Title Font Size – wielkość czcionki w pikselach

  • Title Font Weight – wielkość czcionki według selektorów CSS.

  • Title Color – kolor tytułu, wybierany za pomocą color picker'a.

  • Title Margin Top – odstęp tytułu o elementów znajdujących się nad tytułem, podawany za pomocą liczb.

  • Title Margin Bottom – odstęp tytułu od elementów znajdujących się pod tytułem

  • Section subtitle – pod tytuł sekcji

  • Sub Title Font Size – rozmaiar czcionki podtytułu

  • Title & Subtitle Position – pozycja tytułu. Możliwe opcje to prawa strona, wyśrodkowanie, prawa strona.

  • Background Color - kolor tła dla całej sekcji

  • Font Color – kolor czcionki dla całej sekcji.

  • Background Image – obraz tła dla całej sekcji

  • Background Repeat – powtarzalność tła. Dostępne opcje to powtarzanie w pionie oraz poziomie, powtarzanie w pionie, powtarzanie poziomie.

  • Background Size – wielkość tła, opcja cover powoduje dostosowywanie się tła do wielkości sekcji, tak by zawsze miała tło.

  • Background Attachment – sposób wyświetlania tła

  • Background Position – pozycja tła na stronie.

  • Enable video in the background – opcja pozwala na użycie filmu jako tła, do użycia opcji należy podać ścieżki do źródła filmów MP4, OGV. Należy używać dwóch źródeł, dla pewności, że każda przeglądarka odtworzy film.

  • Section ID – możemy w tym miejscu przypisać ID sekcji.

  • CSS Class – pozwala na przypisanie klasy dla sekcji.

  • Padding – margines wewnętrzny sekcji. Podawany według wzoru użytego w polu z czterema wartościami (góra, prawa strona, dół, lewa strona).

  • Margin – margines zewnętrzny sekcji.

Wypełnianie powyższych opcji nie jest wymagane. Tworząc stronę internetową, większość stylów definiujemy, w arkuszach CSS, dzięki czemu wszystkie sekcje dziedziczą właściwości napisane przez nas.

Ustawienia kolumn na stronie internetowej oraz ich personalizacja

W celu ustawienia kolumn korzystamy z przycisku „Add Column” oraz wybieramy odpowiedni układ kolumnowy dla danej sekcji.

 

page builder-32

 

Po wyborze nasza sekcja przyjmie wybrany układ.

 

page builder-31

 

 

Do każdej kolumny możemy dodać kolejną sekcję za pomocą przycisku „Row” page builder-27

 

page builder-33

 

Nowa sekcja posiada takie same opcje jak główna. Ustawienia kolumny ustawia się poprzez kliknięcie przycisku.

Przycisk otwiera okno popup z dostępnymi dla danej kolumny opcjami.

 

page builder-34

 

  • Background Color - Pozwala na ustawienie tła kolumny, kolor wybiera się za pomocą narzędzia „Color Picker”.

  • Font Color – Pozwala na ustawienie koloru czcionki dla danej kolumny.

  • Column Padding – pozwala na zdefiniowanie marginesu wewnętrznego danej kolumny.

  • Column Animation – bardzo ciekawa opcja pozwalająca animować daną kolumnę.

  • Animation Duration – określa czas trwania animacji w milisekundach. Wartość 1 to jedna tysięczna mili sekundy. Domyślne ustawienie to 300, czyli 0,3 sekundy.

  • Animation Delay – opóźnienie animacji po załadowaniu strony, wartość również wtrażana w milisekundach.

  • CSS Class – przydzielenie klasy do danej kolumny.

Dodawanie modułów do kolumn na stronie internetowej.

Jest to najważniejsza funkcja w tym komponencie. Gdy mamy już przygotowaną strukturę strony internetowej składającą się z sekcji oraz odpowiednich już kolumn, możemy zabrać się za dodawanie modułów. Dodajemy je korzystając z przycisku „Addon” page builder-25

Po kliknięciu otworzy nam się okno popup z dostępnymi modułami.

 

page builder-35

 

Lista zawiera 42 moduły. Kliknięcie każdego z nich prowadzi do otwarcia okna popup z ustawieniami danej wtyczki. Skonfigurowany moduł zapisujemy. Ten z kolei wyświetli się nam w danej kolumnie.

 

 

page builder-5

 

Każdy z modułów, posiada dodatkowe opcje. page builder-6

Pierwsza z nich z ikoną ołówka służy do edycji modułu. Po kliknięciu otworzy nam się okno popup z zapisanymi ustawieniami, które możemy dowolnie modyfikować. Druga opcja służy do kopiowania modułu. Kolejna kopia zawsze pojawia się pod modułem macierzystym. Ostatnia odznaczona czerwoną ikoną pozwala usunąć moduł.

 

page builder-7

 

Za pomocą metody przeciągnij i upuść możemy dowolnie przemieszczać moduł pomiędzy kolumnami, sekcjami oraz innymi modułami w dowolnej sekcji. Pamiętaj aby po zakończeniu modyfikacji strony internetowej zapisać swoją pracę za pomocą przycisków na górze strony.

 

page builder-8

 

Poniżej również film pokazujący płynny przebieg budowy strony internetowej.