Divi jest zdecydowanie jednym z Motywy WordPress najpopularniejszy w dzisiejszych czasach. Jednym z elementów, który stanowi o sile tego motywu, jest jego kreator (Divi Builder), który bardzo nam przypomina Program Visual Composer.

Divi Builder występuje w dwóch formach: standardowej „Back-end Builder” i „Visual Builder”. Oba interfejsy pozwalają na tworzenie dokładnie tego samego typu witryn internetowych z taką samą zawartością i takimi samymi parametrami projektowymi. Jedyną różnicą jest interfejs. Back-end Builder znajduje się w pulpicie WordPress i jest dostępny ze wszystkimi innymi standardowymi ustawieniami WordPress.

Znajduje się w interfejsie użytkownika WordPress i zastępuje standardowy edytor postów WordPress. Świetnie nadaje się do wprowadzania szybkich zmian, gdy jesteś w panelu, ale jest również ograniczony przez pulpit i jest renderowany jako blokowa reprezentacja Twojej witryny. W tym samouczku skupimy się tylko na konstruktorze wizualnym.

Pobierz DIVI WordPress Theme

divi builder.jpeg

Z drugiej strony całkowicie nowy Visual Builder umożliwia tworzenie stron w interfejsie użytkownika witryny! To niesamowite doświadczenie i pozwala na znacznie szybsze projektowanie. Po dodaniu zawartości lub dostosowaniu ustawień projektu w narzędziu do tworzenia wizualizacji zmiany pojawiają się natychmiast.

Możesz kliknąć stronę i zacząć pisać. Możesz podświetlić tekst oraz dostosować jego czcionkę i styl. Możesz dodawać nowe treści, budować stronę i widzieć wszystko, co dzieje się na twoich oczach.

użyj pliku-visual-builder.jpg

Jak włączyć program Visual Builder

Po zalogowaniu się do pulpitu WordPress możesz przejść do dowolnej strony w interfejsie swojej witryny i kliknąć przycisk „Aktywuj Visual Builder” na pasku administracyjnym WordPress, aby uruchomić kreatora. wizualny.

jak włączyć visual builder.jpeg

Jeśli edytujesz swoją stronę na pulpicie nawigacyjnym, możesz przełączyć się do kreatora wizualnego, klikając przycisk „Włącz Visual Builder”, który znajduje się u góry interfejsu zaplecza Divi Builder (pamiętaj, że najpierw musisz aktywuj Divi Builder, zanim pojawi się przycisk Visual Builder).

użyj edytora wizualnego Divi.jpeg

Podstawy programu Visual Builder

Siła Divi tkwi w Visual Builder, narzędziu do tworzenia stron, które współpracuje z funkcją „przeciągnij i upuść”, które umożliwia tworzenie niemal każdego rodzaju witryn internetowych poprzez łączenie i układanie elementów zawartości.

Konstruktor używa trzech głównych bloków konstrukcyjnych: sekcji, rzędów i modułów. Używanie ich razem pozwala tworzyć niezliczoną liczbę układów. Sekcje są największymi blokami budulcowymi i zawierają grupy rzędów. Rzędy znajdują się wewnątrz sekcji i służą do umieszczania modułów. Moduły są umieszczane w rzędach. To jest struktura każdej witryny Divi.

sekcje

Najbardziej podstawowymi i największymi blokami konstrukcyjnymi używanymi w projektowaniu układów za pomocą Divi są sekcje. Służą do tworzenia dużych grup treści i jest to pierwsza rzecz, którą dodajesz do swojej strony. Istnieją trzy typy sekcji: zwykła, specjalna i pełna szerokość.

Zwykłe sekcje składają się z rzędów kolumn, a sekcje o pełnej szerokości z modułów o pełnej szerokości, które poszerzają całą szerokość ekranu. Specjalne sekcje pozwalają na bardziej zaawansowane układy boczne.

rząd

Wiersze znajdują się wewnątrz sekcji i możesz umieścić dowolną liczbę wierszy w sekcji. Do wyboru jest wiele różnych typów kolumn. Po zdefiniowaniu struktury kolumn w wierszu możesz umieścić moduły w wybranej kolumnie. Nie ma ograniczeń co do liczby modułów, które można umieścić w kolumnie.

Moduły

Moduły to elementy treści, które składają się na Twoją witrynę. Każdy moduł Divi może dostosować się do dowolnej szerokości kolumny i wszystkie są w pełni responsywne.

Zbuduj swoją pierwszą stronę

Trzy podstawowe elementy składowe (sekcje, linie i moduły) są używane do tworzenia strony.

budowa strony Divi.jpg

Dodanie pierwszej sekcji

Zanim będziesz mógł cokolwiek dodać do swojej strony, musisz najpierw dodać sekcję. Sekcje można dodawać, klikając niebieski przycisk (+). Gdy najedziesz kursorem na sekcję, która już istnieje na stronie, poniżej pojawi się niebieski przycisk (+). Po kliknięciu nowa sekcja zostanie dodana pod sekcją, nad którą aktualnie znajdujesz się kursorem.

Jeśli zaczniesz nową stronę, pierwsza sekcja zostanie dodana automatycznie.

lista sekcji divi.jpg

Dodanie pierwszego wiersza

Po dodaniu pierwszej sekcji możesz zacząć dodawać rzędy kolumn w środku. Sekcja może zawierać dowolną liczbę wierszy, a wiersze z różnych typów kolumn można łączyć i dopasowywać, aby tworzyć różne układy.

Aby dodać wiersz, kliknij zielony przycisk (+) w pustej sekcji lub kliknij zielony przycisk (+), który pojawia się po najechaniu kursorem na bieżący wiersz, aby dodać nowy wiersz poniżej. Po kliknięciu zielonego przycisku (+) zostaniesz powitany listą typów kolumn. Wybierz dowolną kolumnę i możesz dodać swój pierwszy moduł.

jak wstawić wiersz Divi.jpeg

Dodanie pierwszego modułu

Moduły można dodawać w wierszach, a każdy wiersz może zawierać dowolną liczbę modułów. Moduły to elementy zawartości Twojej strony, a Divi zawiera ponad 40 różnych elementów, których możesz użyć do zbudowania.

Możesz użyć podstawowych modułów, takich jak Teksty, Obrazy i Przyciski, lub bardziej zaawansowanych modułów, takich jak Slidery, Portfolio Galerie i eCommerce Sklepów.

Aby dodać moduł, kliknij szary przycisk (+) znajdujący się w pustej kolumnie lub kliknij szary przycisk (+), który istnieje po najechaniu kursorem na moduł na stronie, aby dodać nowy moduł poniżej . Po kliknięciu przycisku zostaniesz powitany listą modułów.

Wybierz moduł, a zostanie on dodany do strony i pojawi się panel sterowania modułu. Za pomocą tego panelu sterowania możesz rozpocząć konfigurację modułu.

wstaw moduł DIVI.jpeg

To wszystko w tym samouczku. Dzięki temu, czego nauczyłeś się dzisiaj, będziesz mógł stworzyć układ za pomocą Divi. Wrócimy z zaawansowanymi tutorialami na ten temat. Możesz już pobrać Motyw Divi.

[vc_row center_row = "tak"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] POBIERZ TEMAT DIVI [/ vcex_button] [/ vc_column] »vc_column] =» vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expand" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] POBIERZ SZABLONY DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Inne samouczki Divi