Tworzenie stron z Page Builder

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.

 

 

Aktualności

Tworzenie stron WWW - częste pytania

12-10-2016 Wyświetleń:1051 Aktualności

Często zadawane nam są pytania dotyczące samego procesu tworzenia stron internetowych. Dlatego zdecydowaliśmy się na rozpoczęcie cyklu artykułów, odpowiadających na najczęstsze pytania.

Czytaj więcej

Aplikacja do wystawiania faktur Online

02-05-2015 Wyświetleń:10689 Aktualności

Udostępniliśmy nowe rozszerzenie do naszego systemu zarządzania treścią – aplikację do wystawiania faktur online. Teraz możesz mieć dostęp do swoich dokumentów z każdego

Czytaj więcej

Tworzenie stron WWW firmowych – co ważne…

13-11-2014 Wyświetleń:3253 Aktualności

  Obecne standardy internetowe oraz trendy panujące w sieci od stron firmowych wymagają znacznie więcej, niż jeszcze kilka lat temu. Coraz

Czytaj więcej

Najnowsze kursy

Tworzenie stron z Page Builder

22-01-2016 Wyświetleń:1032 Joomla!

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.

Czytaj więcej

Joomla 3 - Edycja treści

01-05-2015 Wyświetleń:3551 Joomla!

  Głównym elementem systemu CMS Joomla! Jest komponent artykułów. To właśnie ten komponent odpowiada za wyświetlanie treści na podstronach. Aby przejść do panelu

Czytaj więcej