Co to jest kreator graficzny Divi Builder?

Kreator graficzny  Divi Builder jest to wtyczka wbudowana w motyw Divi (narzędzie) za pomocą, którego możemy tworzyć strony bez znajomości kodowania. Tworzenie strony polega na dodawaniu obszarów i umieszczaniu w nich tak zwanych modułów z różnymi zawartościami np. tekstem, obrazem, formularzem, slajderem itd.

Kreatora można używać na dwa sposoby. Korzystając z standardowego kreatora, tak zwany Back-End (ja nazywam go kreatorem blokowym) i kreatora wizualnego tzw. Fron-End.

Każdy z kreatorów umożliwia budowanie dokładnie takich samych stron internetowych z tymi samymi elementami. Kreator standardowy dostępny jest z panelu administracyjnego WordPress wraz z wszystkimi innymi standardowymi ustawieniami WordPressa. Znajduje się wewnątrz kokpitu WordPress i zastępuje domyślny edytor WordPress.

divi builder od strony panelu wordpress

Natomiast kreator wizualny (graficzny) umożliwia tworzenie stron z pierwszego planu. Tutaj od razu widzisz to co tworzysz, podgląd strony kreowany jest na bieżąco. Klikasz na wybrany element na stronie, dodajesz tekst, zmieniasz czcionkę, a zmiany pojawiają się od razu przed Twoimi oczami.

divi builder wizualny kreator

 

Jak włączyć kreator wizualny?

Po zalogowaniu do panelu WordPress wystarczy, że przejdziesz na dowolną stronę i z paska administratora wybierzesz przycisk „Włącz kreator graficzny”.

 

włączanie kreatora wizualnego divi builder od front-endu

 

Jeśli edytujesz stronę wewnątrz panelu WordPress, możesz przełączyć się na wizualny kreator uruchamiając najpierw standardowy kreator klikając na „Użyj generatora Divi” a potem na przycisk „Użyj kreatora graficznego”.

 

włączanie kreatora divi builder od back-endu

włączanie divi builder od back-endu

 

Podstawy wizualnego kreatora Divi Builder

Fenomen kreatora wizualnego polega ta tym, że stronę budujemy na żywo na zasadzie przeciągnij i upuść. Jesteśmy w stanie zbudować niemalże każdą stronę poprzez łączenie i rozmieszczanie elementów treści.

Budowanie strony w kreatorze Divi Builder polega na używaniu trzech głównych bloków: sekcji, wierszy i modułów. Korzystanie i łączenie ich umożliwia tworzenie przeróżne układy stron. Sekcje to największe bloki konstrukcyjne, które zawierają wiersze składające się z modułów. Każda strona w Divi posiada taką strukturę.

Sekcje

Podstawowym i za razem największym blokiem konstrukcyjnym stosowany w projektowaniu układu strony w Divi jest sekcja. To na niej tworzy się zawartość strony. Istnieją trzy rodzaje sekcji: Regularna, Specjalna i Pełnej Szerokości. Regularna sekcja składa się z wierszy podzielonych na kolumny. Sekcja Pełnej Szerokości składa się z modułów na pełną szerokość strony. Natomiast sekcja Specjalna pozwala na budowanie bardziej zaawansowanych układów.

Wiersze

Wiersze umieszcza się wewnątrz sekcji. Można je dodać dowolną ilość. Wiersze możemy podzielić na kolumny o różnych proporcjach. Po wyborze ilości kolumn dodajemy moduł w wybranej kolumnie. Jeśli chodzi o moduły to tu też nie ma limitu co do ilości ich wstawiana.

Moduły

Moduły są elementami treści, które tworzą Twoją stronę. Każdy moduł Divi ma możliwość dopasowania do dowolnej szerokości kolumny i są w pełni responsywne (przystosowują się do różnych szerokości ekranów).

Budowane pierwszej strony z kreatorem wizualnym Divi Builder

Do budowy strony wykorzystujemy trzy podstawowe elementy konstrukcyjne (sekcje, rzędy i moduły).

Dodawanie sekcji

Zanim w ogóle będziesz mógł cokolwiek zrobić na stronie musisz dodać sekcje. Sekcje można dodać klikając na niebieski przycisk (+).

Po umieszczeniu kursora myszy na obszarze sekcji pojawi się niebieskie (dla sekcji regularnej) obramowanie z niebieskim przyciskiem (+) poniżej. Po kliknięciu w ten przycisk pojawi się panel wyboru rodzaju sekcji, a następnie po wyborze odpowiedniej dla nas zostanie dodana poniżej obecnej sekcji.

Zawsze przy tworzeniu nowej strony z automatu jest dodawana sekcja regularna.

Dodawanie wierszy

Po dodaniu pierwszej sekcji wewnątrz niej możesz rozpocząć dodawanie wierszy z wybraną ilością kolumn . Sekcja może zawierać dowolną liczbę wierszy z różną ilością kolumn, dzięki czemu możesz tworzyć dowolne układy.
Aby dodać wiersz, należy kliknąć w  zielony przycisk (+), który pojawia się po umieszczeniu kursora myszy na bieżącym wierszu. Po kliknięciu zielonego  przycisku (+) pojawi się listą dostępnych typów kolumn. Wybierz odpowiednią dla siebie kolumnę, a wiersz zostanie dodany do sekcji.

dodawanie wierszy w kreatorze divi builder

Dodawanie modułu

Moduły dodajemy wewnątrz wierszy, a każdy wiersz może zawierać dowolną liczbę modułów. Moduły są elementami treści Twojej strony, a kreator Divi posiada ponad 40 różnych elementów, które możesz wykorzystać. Podstawowe moduły to takie jak Tekst, Obrazki i Przyciski lub bardziej zaawansowane, takie jak Suwaki, Galerie Akcji i Sklepy e-commerce.

Aby dodać moduł, należy kliknąć szary przycisk (+) znajdujący się w dowolnej kolumnie lub kliknąć w szary  przycisk (+), który pojawi się podczas umieszczania kursora na już dodanym module. Po kliknięciu przycisku zostanie wyświetlona lista modułów. Wybierz interesujący Cię moduł, a on zostanie dodany do Twojej strony i jednocześnie pojawi się panel ustawień modułu. Korzystając z panelu ustawień można rozpocząć konfigurowanie modułu.

dodawanie modułu w kreatorze divi builder

Konfigurowanie i dostosowywanie sekcji, wierszy i modułów

Każda sekcja, wiersz i moduł można dostosować na różne sposoby. Panel ustawień elementu można uzyskać, klikając ikonę koła zębatego, która pojawia się po umieszczeniu kursora nad dowolnym elementem na stronie.

ustawienia modułu divi builder

Spowoduje to uruchomienie panelu ustawień określonego elementu. Każdy panel ustawień jest podzielony na trzy karty: Treść, Projekt i Zaawansowane. Każda karta ma ułatwić szybkie i łatwe dostosowanie wielu różnych ustawień poszczególnych elementów. Na karcie Treść jest oczywiście miejsce, w którym można dodawać treści, takie jak obrazy, wideo, linki i etykiety administratora. Na karcie Projekt znajdują się wszystkie wbudowane ustawienia projektowania dla każdego elementu. W zależności od tego, co edytujesz, możesz sterować różnymi ustawieniami projektowania za pomocą jednego kliknięcia; W tym: typografia, odstępy (wypełnienie / margines), style przycisków itd.

Zapisywanie strony i dostęp do ustawień strony

Aby uzyskać dostęp do ustawień ogólnych stron, należy kliknąć na okrągłą, fioletową z trzema kropkami ikonę u dołu ekranu. Spowoduje to wyświetlenie paska ustawień z dodatkowymi opcjami. Możesz otworzyć ustawienia strony, klikając na ikonę koła zębatego. Tutaj możesz dostosować takie rzeczy, jak kolor tła strony i kolor tekstu. Znajdziesz też przyciski Zapisz i opublikuj, a także różne opcje podglądu. widoku strony na różnych urządzeniach.

ustawienia strony w divi builder

Wczytywanie gotowych układów stron

Świetnym sposobem na rozpoczęcie nowej strony jest praca z przygotowanym układem. Wraz z instalacją motywu Divi otrzymujemy ponad 20 gotowych układów, które obejmują różne typy stron, takie jak „O nas”, „Kontakt”, „Blog”, „Portfolio” itp. Należy tylko uzupełnić własną treścią.

Zapisywanie własnych układów do biblioteki

Poza korzystaniem z gotowych układów dostarczonych wraz z Divi, można zapisywać własne układy w Bibliotece Divi. Gdy projekt zostanie zapisany jako Divi Layout w bibliotece Divi, można ją załadować na nowe strony. Im więcej wyposażysz bibliotekę swoimi ulubionymi projektami, tym szybciej będziesz w stanie tworzyć nowe strony internetowe.

Aby zapisać element w bibliotece, kliknij w ikonę biblioteki, która pojawi się, gdy kursor myszy znajduje się na dowolnym elemencie oraz na pasku ustawień strony. Gdy element zostanie dodany do biblioteki, pojawi się on na karcie „Dodaj z biblioteki” i będziesz mógł go wybrać podczas dodawania nowych układów, sekcji, wierszy i modułów Divi.

biblioteka divi w divi nuilder

OK, podstawy zaliczone 🙂

Potrafisz już dodawać sekcje, wiersze i moduły tak aby dostosować je do swojego projektu. Życzę powodzenia i zapraszam do innych instrukcji.