Divi 5 Przewodnik dla początkujących: Jak opanować podstawy

Opublikowany: 2025-05-25

Jeśli słyszałeś o Divi 5 i zastanawiasz się nad obecnym stanem, ten przewodnik dla początkujących Divi 5 jest dla ciebie.

Divi 5 to przyszłość Divi Visual Builder, zaufanego i kochanego przez użytkowników WordPress. Odbudowany od podstaw, Divi 5 oferuje szybszą wydajność i bardziej intuicyjne doświadczenie. Łączy wszystko, z czego Divi jest znane na nowoczesnym, skalowalnym fundamencie, który ułatwia projektowanie stron internetowych.

W tym poście przeprowadzimy Cię przez wszystko, czego potrzebujesz, aby zacząć i czuć się pewnie, używając Divi 5, niezależnie od tego, czy jesteś nowy w Divi, czy przechodzisz z Divi 4.

Divi 5 znajduje się na etapie alfa, ale jest gotowy do użycia na nowych stronach internetowych.

Spis treści
  • 1 Co to jest Divi 5?
  • 2 Czy łatwo jest przejść z Divi 4 do Divi 5?
  • 3 nowe funkcje Divi 5, o których powinieneś wiedzieć
    • 3.1 1. Konfigurowalne punkty przerwania oferują bardziej responsywną elastyczność
    • 3.2 2. Zmienne projektowe pomagają zdefiniować spójny system brandingu
    • 3.3 3. PRETNICJE GRUPY OPCJI UPRODZIJ SYSTEM PROJEKTOWANYCH PRETYCZNYCH
    • 3.4 4. Zagnieżdżone wiersze do złożonych projektów układu
    • 3.5 5. Grupy modułów do uporządkowania modułów
    • 3.6 6. Zaawansowane jednostki pomagają zoptymalizować pod kątem mądrzejszego responsywnego projektu
  • 4 Spójrz na Divi 5
    • 4.1 1. Pobierz, zainstaluj i aktywuj Divi 5
    • 4.2 2. Utwórz swoją stronę internetową za pomocą Divi 5
    • 4.3 3. Dowiedz się o podstawach Divi 5
    • 4.4 4. Utwórz strony witryny z Divi 5
  • 5 5 wskazówek, aby jak najlepiej wykorzystać Divi 5
    • 5.1 1. Bądź na bieżąco z nowymi wydaniami
    • 5.2 2. Eksperymentuj z nowym budowniczym Divi 5
    • 5.3 3. Udostępnij i poszukaj wskazówek i wskazówek Divi 5 w społeczności Divi
    • 5.4 4. Buduj nowe strony internetowe z Divi 5
    • 5.5 5. Zbuduj system projektowania Divi
    • 5.6 6. Zgłoś błędy, gdy je napotkasz
  • 6 Wybierz Divi 5, aby rozpocząć podróż do projektowania stron internetowych

Co to jest Divi 5?

Divi 5 to najnowsza wersja motywu Divi WordPress, ale to coś więcej niż aktualizacja. Jest to pełna przebudowa ramy budowania witryn Divi, zaprojektowana w celu zapewnienia pełnej kreatywnej kontroli bez pisania niestandardowego kodu.

Sercem Divi 5 jest szybszy, zmodernizowany budowniczy wizualny. Jest lżejszy, bardziej responsywny i eliminuje wspólne problemy, przed którymi uczestniczy użytkownik w Divi 4, takich jak czas powolnego obciążenia, rozdęte wyjście i opóźnienie budownicza. Wszystko wydaje się coraz bardziej snapp, gładsze i bardziej intuicyjne.

Jest zbudowany, aby pomóc Ci przejść od pomysłu na uruchomienie bez przełączania narzędzi, pisania kodu lub marnowania czasu na konfiguracji. Oto jak:

  • Builder wizualny w czasie rzeczywistym , który reaguje szybciej, czuje się lżejszy i pozwala przeciągnąć, upuszczać i dostosowywać z mniejszym opóźnieniem i większą precyzją. Przetestuj to dla siebie tutaj.
  • Wstępnie zaprojektowane układy Divi, które pomagają zastosować piękne projekty stron dostosowane do różnych branż i celów.
  • Dziesiątki modułów Divi, które obsługują wszystko, od tekstu i obrazów po suwaki, galerie, formy, tabele cenowe i wiele innych.
  • Narzędzia marketingowe, takie jak Divi prowadzą do podzielonych testów, Bloom for E-mail i Monarch do udostępniania społecznościowego.
  • Zaawansowane opcje dostosowywania, takie jak ustawienia wstępne, zmienne projektowe i globalne style, pozwalają zachować spójność projektu i na marce.

To, co wyróżnia Divi 5, jest to, jak celowe jest to. Całe doświadczenie, od układu po interfejs po wydajność, ma na celu szybsze poruszanie się, pozostać zorganizowane i cieszyć się bez frustracji, bez kodu.

Pobierz Divi 5learn więcej o Divi 5

Czy łatwo jest przejść z Divi 4 do Divi 5?

Divi 5 jest następcą Divi 4, co oznacza, że ​​jest lepiej. Tak więc, jeśli jesteś przyzwyczajony do Divi 4, pomysł przełączania może wydawać się przytłaczający. Ale zacznijmy od stwierdzenia, że ​​Divi 5 jest zbudowany z kompatybilnością wsteczną . Oznacza to, że każda strona internetowa Divi 4 będzie działać z Divi 5.

Divi 5 zachowuje również wszystko, co kochałeś w Divi 4, ale po prostu sprawia, że ​​jest lepszy. Ogólne intuicyjne doświadczenie pozostaje znajome, więc będziesz mógł szybko zapoznać się z Divi 5. Omówmy kilka powodów, dla których powinieneś przejść z Divi 4 na Divi 5.

Divi 5 Builder oferuje szybszą, bardziej zoptymalizowaną wydajność

Divi 5 został zbudowany przy użyciu nowoczesnej architektury. Jednym z największych ulepszeń jest usunięcie skrótów, które spowodowały rozdęte wyjściowe i wolniejsze wydajność w Divi 4. Budowniczy ładuje się teraz szybko i jest ogólnie znacznie lżejszy.

Kolejnym poważnym ulepszeniem jest mądrzejsze renderowanie. W Divi 4 nawet niewielkie zmiany mogą wywołać niepotrzebne aktualizacje w całym układzie. Divi 5 ponownie renderuje to, co faktycznie się zmienia, zmniejszając opóźnienie i utrzymując gładkie wrażenia, nawet na złożonych stronach.

Zwróć uwagę, że milisekundy Divi 4 (po lewej) przyjmuje do załadowania wizualnego budowniczego. Divi 5 ładuje go niemal natychmiast.

Aby wesprzeć tę prędkość, usunęliśmy animacje przejściowe z panelu ustawień, zminimalizowaliśmy niepotrzebne przerysowanie i udoskonaliliśmy sposób stosowania aktualizacji w czasie rzeczywistym. Te małe zmiany sprawiają, że konstruktor czuje się bardziej responsywny przy każdym kliknięciu.

Divi 5 zapewnia łatwiejsze i prostsze wrażenia z edycji

Małe szczegóły często mają największy wpływ na sposób budowania. Divi 5 wprowadza szereg subtelnych, ale potężnych ulepszeń, które sprawiają, że interfejs budownicza jest bardziej intuicyjny.

Na początek edycja treści jest teraz szybsza niż kiedykolwiek. Dzięki edycji jednego kliknięcia możesz kliknąć bezpośrednio w dowolnym tekście lub module i rozpocząć pisanie, bez dodatkowych kroków i bez przełączania menu. To sprawia, że ​​całe doświadczenie wydaje się natychmiastowe i łatwe. (W Divi 4 wymagało wielu kliknięć, aby otworzyć panel ustawień modułu.)

Kolejnym aktualizacją jest dokowanie panelu , które pozwala przypiąć panel ustawień po obu stronach ekranu. Utrzymuje to Twój układ w pełnym widoku, gdy wprowadzasz zmiany i zapobiega pokryciu ustawień objęcia miejsca pracy. (Ta zdolność nie jest obecna w Divi 4.)

Nowe bułkę tartą u góry panelu ustawień pokazują dokładną lokalizację w strukturze układu, więc zawsze wiesz, gdzie jesteś, szczególnie podczas pracy z głęboko zagnieżdżonymi elementami.

Divi 5 bułki tartej

Możesz także przełączać się między trybami światła i ciemności w budowniczym, które nie były obecne w Divi 4. Te aktualizacje zapewniają czystszą, bardziej skoncentrowaną przestrzeń do edycji, ograniczenie bałaganu wizualnego i niepotrzebnych kliknięć, dzięki czemu masz lepszą kontrolę nad obszarem roboczym.

Divi 5 upraszcza organizację zarządzania i projektowania ustawień

Divi 5 wprowadza bardziej zorganizowany i intuicyjny system zarządzania stylami, ustawieniami układu i responsywnym korekt.

Możesz przełączać się między stanami responsywnymi i zawisowymi bezpośrednio w każdym ustawieniu projektowym, aby dostroić odstępy, typografię lub efekty dla każdej interakcji i rozmiaru ekranu bez przełączania widoków.

Podobnie, ustawienia wstępne modułów, zmienne projektowe i ustawienia o grupie opcji są łatwiejsze do stosowania i zarządzania przez twoją witrynę. (Szczegółowo je omówimy w poniższej sekcji.)

Dzięki Divi 5 ulepszamy fundament i dodajemy nowe, bardziej zaawansowane funkcje, aby pomóc Ci zoptymalizować przepływ pracy w projektowaniu stron internetowych bez niestandardowego kodowania. Dzięki aktualizacjom wydanym co dwa tygodnie, stąd staje się coraz lepszy.

Nowe funkcje Divi 5, o których powinieneś wiedzieć

Spójrzmy na nowe funkcje, które niedawno dodaliśmy do Divi 5 oraz o tym, jak pomagają ci szybciej budować strony internetowe:

1. Konfigurowalne punkty przerwania oferują bardziej responsywną elastyczność

Jednym z najbardziej ekscytujących dodatków w Divi 5 są konfigurowalne responsywne punkty przerwania. W Divi 4 byłeś ograniczony do standardowych trzech rozmiarów urządzeń: telefon, tablet i pulpit. Musiałeś użyć kodu niestandardowego, aby dopracować układy, aby uzyskać bardziej określone szerokości ekranu.

Z Divi 5 ograniczenie to zniknęło. Możesz teraz uzyskać dostęp do siedmiu predefiniowanych punktów przerwania, w tym szerokie telefon, szerokość tabletu, szerokoekranowy i ultra szeroki, a także znane.

Możesz włączyć lub wyłączyć te dodatkowe punkty przerwania w oparciu o Twoje potrzeby projektowe i zmienić ich wartości szerokości w celu pełnej kontroli. Daje to znacznie większą elastyczność podczas budowania responsywnych stron internetowych.

Aby zarządzać punktami przerwania, kliknij trzy kropki, aby otworzyć panel responsywnych punktów przerwania . Włącz dowolny nowy punkt przerwania, który chcesz dodać, i zmodyfikuj nową wartość dla jego kontroli szerokości, jeśli chcesz.

Zarządzanie konfigurowalnymi punktami przerwania

Nie martw się o utratę stylów, gdy wyłączysz punkt przerwania. Divi zapisuje je w tle, więc jeśli ponownie włączysz ten punkt przerwania później, twoje dostosowania wrócą. Jest to idealne do testowania różnych responsywnych projektów bez utraty pracy.

2. Zmienne projektowe pomagają zdefiniować spójny system marki

Zmienne projektowe mogą wydawać się małe na powierzchni, ale całkowicie przekształcają twój przepływ pracy, gdy zaczniesz je używać. Zamiast ręcznie dostosowywać tę samą wartość czcionki, koloru lub odstępów w różnych modułach, raz definiujesz ją i ponownie wykorzystujesz w swojej witrynie. Po aktualizacji zmiennej każda instancja aktualizuje się automatycznie, oszczędzając czas i utrzymując spójność projektu.

Jest to szczególnie pomocne w przypadku witryn wielostronicowych lub projektów klientów, w których ma znaczenie spójność marki. Możesz ustawić zmienne, takie jak rozmiar tekstu nadwozia, kolory nagłówka, wyściółka przycisków lub stylizacja linków. Jeśli chcesz dostosować wszystkie H4, nie musisz polować na każdy blok; Po prostu zmień wartość zmiennej raz.

Nie tylko atrybuty projektowe, możesz również zapisywać powtarzające się wartości treści, takie jak adres firmy, linki produktów, a nawet motywy w tle, aby uzyskać szybki dostęp. Oszczędza to od pracy ręcznej i pomaga lepiej organizować powtarzane treści.

Wewnątrz swojego budowniczego wizualnego kliknij ikonę Menedżera zmiennego i wybierz spośród sześciu typów zmiennych: liczby, tekst, obrazy, linki, kolory i czcionki.

Zmienny menedżer w Divi 5

W naszym przykładzie utwórzmy zmienną tekstową . Nazwij swoją zmienną i dodaj jej wartość, a następnie zapisz .

nazywanie i zapisywanie zmiennej tekstowej

Aby zastosować zmienną tekstową, kliknij element, który chcesz zmodyfikować. W naszym przypadku adres. Ponieważ jest to zmienna tekstowa, przejdź do zawartości w panelu ustawień i unosisz nad ciałem , aby zlokalizować ikonę treści dynamicznej . Teraz kliknij zapisaną zmienną, aby zastosować:

3. Presete grupy opcji Upraszcz ustawione system projektowy oparty na ustaleniu

Oszczędzanie i ponowne wykorzystanie stylów, takich jak ustawienia tła, odstępy, cienie pudełka, granice i inne, za pośrednictwem ustawień grup opcji może zaoszczędzić dużo czasu. Być może znasz już tradycyjne ustawienia wstępne elementów w Divi 4, które mają zastosowanie do całego elementu (sekcja, wiersz, kolumna, moduł).

Grupy opcji Wodprecy w Divi 5 Podejmij jeden krok głębiej. Pozwalają ci tworzyć i stosować ustawienia wstępne do określonych grup opcji projektowania w module. Na przykład możesz zaoszczędzić ustawienia graniczne jako ustawienie grupy opcji bez wpływu na nic innego.

Aby to zrobić, najpierw dostosujesz swoje preferowane ustawienia, a następnie zapiszesz je jako ustawienie. Poniżej zapisałem cień przycisku jako pudełko Shadow 2 i zastosowałem go do innych przycisków.

Jeśli chcesz ponownie wykorzystać styl przycisku z określonym efektem zawiskowania, granicy i koloru, ale pozostaw odstępy i styl tekstu w spokoju, ustawienia grup opcji pozwalają to zrobić. Możesz zastosować tylko potrzebne ustawienia bez wpływu na resztę modułu.

Podczas gdy zmienne projektowe pomagają kontrolować podstawowe wartości, takie jak czcionki, kolory i odstępy, ustawienia wstępne grupy opcji stają się głębiej. Pozwalają ci grupować i ponownie wykorzystywać całe sekcje stylów jako globalne ustawienia wstępne. Razem tworzą wstępnie ustawione system projektowy, który pomaga szybko budować spójne układy bez pisania niestandardowego kodu.

4. Zagnieżdżone rzędy dla złożonych projektów układu

Zagnieżdżone rzędy są zbudowane dla projektantów, którzy chcą swobody układu bez złożoności. Dzięki zagnieżdżonym wierszom możesz budować bardziej wyrafinowane układy bez ciągłego żonglowania wieloma sekcjami lub obejściami kodu.

Ułatwiają sobie złożone układy i bardziej intuicyjne do edycji, szczególnie podczas pracy na stronach lądowania, prezentacji produktów, układach na blogu wielu kolumn lub prezentacji najlepszej pracy w asymetrycznym portfolio.

Dodaj zagnieżdżony wiersz jako moduł treści. Kliknij przycisk Black Plus, przełącz na nowy wiersz i wybierz preferowany typ wiersza.

Dodanie zagnieżdżonego rządu

Po włożeniu zachowuje się dokładnie jak wiersz najwyższego poziomu. Ponadto każdy zagnieżdżony rząd zachowuje pełne responsywne ustawienia, co oznacza, że ​​możesz kontrolować, w jaki sposób zachowuje się on przez punkty przerwania. Nie ograniczasz się już do myślenia w podstawowych rzędach i kolumnach. Z zagnieżdżonymi rzędami myślisz w warstwach, a jednocześnie utrzymując przepływ pracy w czystości i wizualnej.

5. Grupy modułów do organizowania modułów

Grupy modułów są nowym elementem kontenerowym w Divi 5. Pozwalają one pakować wiele powiązanych modułów w jedną, elegancką grupę w obrębie budowniczego wizualnego. To sprawia, że ​​edycja dużych sekcji strony jest dramatycznie łatwiejsza do zarządzania, szczególnie w przypadku złożonych układów pełnych powtarzających się elementów lub zagnieżdżonych projektów.

Wyobraź sobie blok prezentacji produktu z nagłówkiem, obrazem, opisem, przyciskiem i dzielnikiem liniowym. Zamiast indywidualnego wybierania lub poruszania każdego modułu, gdy chcesz powtórzyć lub dostosować projekt, możesz je zgrupować raz i traktować jako jedną jednostkę.

Grupa modułów jest obecna jako kolejny moduł Divi 5. Wybierz moduł grupy , aby go dodać. Możesz dodać w nim więcej modułów, a wszystkie będą one zgrupowane jako jedna grupa modułu.

Dodaj grupę modułów

6. Zaawansowane jednostki pomagają zoptymalizować pod kątem mądrzejszego responsywnego projektu

W Divi 4 większość nakładów stylistycznych była ograniczona do podstawowych jednostek, takich jak piksele i wartości procentowe. Dzięki zaawansowanym jednostkom możesz teraz użyć znacznie szerszego zakresu jednostek CSS, w tym REM, EM, VW, VH, %, a nawet potężnych funkcji CSS, takich jak Camp () jako ustawienia wizualne w Divi 5. Ta funkcja jest pomocna dla projektantów, którzy dbają o responsywną projekt i skalowalną typografię.

Na przykład możesz również użyć Clamp (), aby ustawić minimalną, idealną i maksymalną wartość dla wyściółki lub rozmiaru czcionki, aby Twój projekt wygląda na wypolerowane na urządzeniach bez tworzenia dziesiątek niestandardowych punktów przerwania. Zacisk nagłówkowy (36px, 4vw, 48px) ustawi rozmiar czcionki na 36px, skalę w oparciu o 4% szerokości rzutni i przestanie rosnąć na 48px.

Wartości te są osadzone we wszystkich ustawieniach. Możesz także utworzyć zmienne projektowe liczb , definiując zaawansowane wartości jednostkowe.

Divi 5 zaawansowane jednostki

Funkcje te ułatwiają budowanie elastycznych, responsywnych i spójnych stron internetowych. Będziesz miał większą kontrolę nad swoim projektem bezpośrednio w ramach konstruktora, bez konieczności pisania niestandardowych CSS lub polegania na obejściach.

Ale to dopiero początek. To, co widziałeś do tej pory, reprezentuje tylko część ofert Divi 5. Aktywnie pracujemy nad kolejnymi funkcjami, wszystkie zaprojektowane, aby pomóc Ci budować mądrzejsze i szybsze. U podstaw, Divi 5 polega na tym, że projektowanie stron internetowych są mądrzejsze. Każda aktualizacja koncentruje się na uproszczeniu przepływu pracy i zapewnieniu narzędzi do budowania pięknych stron internetowych przy mniejszym wysiłku. Rozpoczęcie teraz da ci przewagę nad opanowaniem Divi 5, zanim będzie gotowy do ostatecznej premiery.

Pobierz Divi 5learn więcej o Divi 5

Spójrz na Divi 5

Zobaczmy, jak wygląda na budowę strony internetowej z Divi 5. Aby to zrobić, najpierw potrzebujesz działającej konfiguracji WordPress. Oznacza to wybór hosta, rejestracja nazwy domeny i zainstalowanie WordPress w witrynie. Zakładamy, że masz ten bieg, zanim skupimy się na następnej części tego postu:

1. Pobierz, zainstaluj i aktywuj Divi 5

Oto samouczek wideo do zakupu, instalacji i aktywowania Divi:

Gdy zakup się powiedzie, będziesz mógł zalogować się do strefy członkowskiej Elegant Temes. Teraz pobierz folder zip Divi 5.

Pobierz folder zip 5

Wróć do pulpitu WordPress. Śledź to zapytanie: wygląd> Tematy> Dodaj motyw> Prześlij motyw. Następnie prześlij plik zip Divi 5 z komputera i kliknij zainstaluj teraz.

Prześlij i zainstaluj Divi 5

Po zainstalowaniu aktywuj motyw.

Aktywuj Divi 5

Na koniec aktywuj swoją licencję Divi. W ten sposób będziesz mógł skutecznie uzyskać dostęp do wybranych usług. Proces jest automatyczny, po prostu zaloguj się z logowaniem do członkostwa ET jeszcze raz.

Zaloguj się do swojego członkostwa

Po zrobieniu tego możesz uzyskać dostęp do deski rozdzielczej Divi 5. Twój pulpit nawigacyjny zawiera takie informacje, jak status licencji Divi, aktualizacje, strony, szablony i wiele innych. Zobaczysz także Divi Quick Sites, które wykorzystamy do zbudowania bazy witryn.

Dysporcja Divi 5

Zacznij od Divi

2. Utwórz swoją stronę internetową za pomocą Divi 5

Najszybszym sposobem na zbudowanie całej strony internetowej z Divi 5 jest korzystanie z Divi Quick Sites.

Wybierasz między dwiema opcjami:

  • Skorzystaj z gotowej strony startowej , a Divi 5 zbuduje podstawową stronę internetową przy użyciu marki i treści wybranej witryny.
  • Lub wygeneruj swoją witrynę za pomocą sztucznej inteligencji, aby poinstruować Divi AI, aby stworzyć unikalną stronę internetową.

Divi Szybkie strony w Divi 5

Oto jak ten proces wygląda za pomocą witryn startowych: Wybierasz witrynę startową i wypełniasz kilka szczegółów, takich jak logo witryny i strony, które chcesz utworzyć.

A oto jak to działa z AI. Mówisz Divi AI o swojej stronie internetowej i czekasz, aż gotuje:

Szybkie witryny Divi są idealne, jeśli chcesz przyspieszyć proces budowania witryny. Daje to gotową strukturę, którą możesz dostosować z własną marką, treścią i stylem. Nie musisz zaczynać od pustej strony lub projektować każdy układ od zera.

Jeśli chcesz zbudować nową stronę od zera lub uzyskać dostęp do Divi Visual Builder, przejdź do stron> Dodaj stronę.

Dodaj nową stronę w WordPress

Teraz nazwij swoją stronę i kliknij użyj Divi Builder.

Nazwa i dostęp do Divi Builder

Wpiszesz Divi Visual Builder.

Divi 5 Builder wizualny

3. Dowiedz się o podstawach Divi 5

Jeśli po raz pierwszy uzyskujesz dostęp do Divi 5 Visual Builder, zobaczysz wiele ikon, więc oto szybki przewodnik:

Divi 5 Dashbaord Walkhrough

  • (1.) Lewy panel boczny: Ten panel zawiera narzędzia budownicze. Możesz dodać gotowe układy, uzyskać dostęp do biblioteki układu, wyświetlić strukturę za pomocą warstw, przełączać się na widok szkieletowy, zapisać zmienne projektowe, dostosować ustawienia konstruktora i uzyskać pomoc.
  • (2.) Górny pasek: Możesz przełączać się między trybami responsywnymi. Kontrola szerokości i powiększenia pomagają dostroić odstępy układu w punktach przerwania. Znajdziesz również tutaj cofanie/ponowne, jasne układ, historię i zapisz tutaj. Plus wyjście, podgląd, zapisz drafty i publikuj przyciski, aby zarządzać swoim postępem.
  • (3.) Prawy pasek boczny: Po kliknięciu dowolnego modułu jego ustawienia otwarte po prawej stronie. Możesz dodać zawartość, stylizuj ją i dodać niestandardowe CSS tutaj. Breadcrumbs u góry (strona> sekcja> Rząd> Kolumna) Pokaż dokładnie, gdzie mieszka moduł w twoim układzie.

Następnie masz dwa elementy kontenera: sekcje (reprezentowane na niebiesko) i wiersze (zawsze zielone). Wewnątrz rzędów masz kolumny, w których możesz dodawać moduły (w kolorze czarnym) .

sekcje, wiersze i moduły

Aby dodać sekcję, klikniesz przycisk Blue Plus. W rzędu jest to zielony przycisk plus i czarny dla modułu. Do wyboru otrzymujesz różne rodzaje opcji wierszy. Wewnątrz rzędu znajdują się kolumny.

Struktury rządu

A wewnętrzne rzędy i kolumny dodasz moduły treści, takie jak nagłówki, obrazy itp. Divi 5 oferuje ponad 200 modułów treści do wszystkich celów, niezależnie od tego, czy chcesz dodać formularz kontaktowy, referencje itp.

moduły treści w Divi 5

Najnowszy moduł grupy modułów pozwala grupować różne elementy, abyś mógł tworzyć i zapisać własne moduły. ( Szary kolor reprezentuje grupę modułów.)

Grupa modułów w Divi 5

4. Utwórz strony witryny z Divi 5

Nawet jeśli nie korzystasz z Szybkich witryn Divi, nadal możesz importować gotowe układy lub używać Divi AI do wygenerowania całego układu. Kliknij przycisk Blue Plus .

Zaimportuj wstępnie zaprojektowany układ lub utwórz za pomocą Divi Ai

(1.) Pozwala wybierać spośród ponad 2500 gotowych układów i (2.) pozwala instruować Divi AI, aby wygenerować stronę. Oto jak działa importowanie układu najważniejszego:

Jeśli zdecydujesz się budować z Divi AI, musisz tylko powiedzieć to o stronie, którą chcesz zbudować.

buduj z Divi Ai w Divi 5

Dostosowywanie projektu strony

Jeśli utworzyłeś swoją stronę za pomocą Divi Quick Sites, gotowych układów lub Divi AI, powinieneś ją dostosować, aby ją uczynić. Aby konsekwentnie dodawać markę w całej witrynie, najłatwiejszym sposobem jest zdefiniowanie zmiennych projektowych.

Zdefiniuj zmienne projektowe

Te globalne wartości (takie jak twoje podstawowe kolory i czcionki) będą miały zastosowanie automatycznie wszędzie tam, gdzie ich używasz. Aby je zmodyfikować, po prostu zmień wartość zmienną w menedżerze zmiennej.

Aby edytować dowolny moduł, kliknij go, a ustawienia wyskakują w prawym panelu bocznym.

Edycja ustawień modułu

Każdy panel ustawień modułu zawiera trzy zakładki:

  • Treść: Tutaj dodajesz lub edytujesz rzeczywistą zawartość modułu. Możesz także dodać linki, wybrać tło lub zmienić etykietę administracyjną, aby łatwiej zidentyfikować moduł.
  • Projekt: Przejście na kartę Design pozwala stylizować wygląd wizualnego modułu. Możesz zmienić rozmiar czcionki, wagę, kolor, wysokość linii, odstępy, wyrównanie i wiele innych. Należy pamiętać, że różne moduły mają różne opcje ustawienia.
  • Advanced : Zaawansowana karta zapewnia pełną kontrolę nad kolejnymi opcjami technicznymi. Dodaj niestandardowe CSS, ustaw responsywną widoczność i więcej. Jest to szczególnie przydatne, jeśli chcesz dostosować poza tym, co oferuje zakładka projektowa.
  • Ikona laptopa pozwala przełączać się między trybami responsywnymi i zawisowymi. Przełączając się na jeden tryb, możesz dostosować wszystkie ustawienia i zapisać.
  • Domyślnym przyciskiem wstępnym jest ustawiona funkcja Divi. Oto różnica między ustawieniami wstępnymi i wstępnymi grupami opcji.

Jeśli masz do czynienia z blokiem pisarza, użyj Divi AI, aby dodawać treść (tekst, obrazy i kod). Prawie każdy moduł pozwala używać sztucznej inteligencji. Wszystko, co musisz zrobić, to poszukać małej ikony AI.

Edytuj z AI

Po dostosowaniu strony pamiętaj, aby zapisać swój szkic. Następnie podgląd , aby wszystkie rzeczy działają poprawnie i opublikuj swoją stronę.

Zapisz, podgląd i publikuj

Zacznij od Divi

5 wskazówek, aby jak najlepiej wykorzystać Divi 5

Divi 5 znajduje się na ekscytującym etapie - publicznej sceny alfa. Przeszedł to, że ulepszenia i poważne ulepszenia wydajności. Teraz wszystko, co zostało, to nowe wydania funkcji i drobne poprawki.

To sprawia, że ​​jest to idealny czas na rozpoczęcie budowania z nim. Im szybciej zaczniesz, tym wygodniej będzie, gdy Divi 5 Beta zostanie w pełni uruchomiona. Oto kilka sposobów, aby jak najlepiej wykorzystać członkostwo Divi:

1. Bądź na bieżąco z nowymi wydaniami

Nowe aktualizacje funkcji to nie tylko poprawki lub poprawki wydajności, są również potężnymi narzędziami, które zmieniają sposób budowania stron internetowych. Od konfigurowalnych punktów przerwania po zmienne projektowe, zagnieżdżone wiersze i zaawansowane jednostki, każdy dodatek opiera się na nowym fundamencie Divi 5, aby zapewnić większą kontrolę i szybkość.

Aby pozostać w pętli, zasubskrybuj kanał eleganckich motywów na YouTube, w którym Nick regularnie dzieli się instrukcjami i ogłoszeniami.

Subskrybuj nasz kanał YouTube

2. Eksperymentuj z nowym budowniczym Divi 5

Builder wizualny Divi 5 jest szybki, responsywny i zbudowany dla wydajności. Każdy nowa funkcja dodaje do optymalizacji przepływu pracy i zachęcamy do dalszego eksperymentowania w celu opracowania nowych strategii. Aby Ci pomóc, publikujemy również nowe samouczki funkcyjne, aby podzielić się naszymi podejść. Na przykład nasz post na różnych strukturach wiersza pokazuje sposoby używania zagnieżdżonych wierszy do tworzenia inteligentnych układów.

Uzyskaj regularne odwiedzanie blogu Eleganckiego motywu, aby znaleźć kreatywne sposoby korzystania z Divi 5.

3. Udostępnij i poszukaj wskazówek i wskazówek Divi 5 w społeczności Divi

Gdy zaczniesz eksperymentować z Divi 5, sprawdzenie, w jaki sposób inni go używają, jest równie ważne. Projektanci i programiści na całym świecie badają również te same nowe funkcje, wypróbowują kreatywne układy i dzielą się swoimi wynikami.

Od inteligentnych zastosowań punktów przerwania po oszczędzające czas konfiguracje zmiennych projektowych, istnieje wiele, których można się nauczyć, obserwując, jak inni zbliżają się do ich kompilacji. Dołącz do oficjalnej grupy Divi na Facebooku lub forach zorientowanych na Divi, aby odkryć samouczki, zadawać pytania i uzyskać świeże pomysły od osób pracujących z Divi 5. Jest to jeden z najszybszych sposobów na rozwój umiejętności i bycie na bieżąco.

4. Zbuduj nowe strony internetowe z Divi 5

Najlepszym sposobem korzystania z Divi 5 (w tej chwili) jest budowanie nowych stron internetowych od zera. Nie ma powodu, aby czekać, jeśli zaczynasz świeży projekt. Otrzymujesz szybszą wydajność, czystszy kod i lepsze wrażenia z edycji od razu.

Ale jeśli pracujesz z istniejącą witryną Divi 4, lepiej jest poczekać trochę dłużej, zanim migruje ją do Divi 5.

Ponieważ Divi 5 jest nadal aktywny, niektóre moduły Divi 4 i rozszerzenia stron trzecich mogą nie być jeszcze w pełni obsługiwane. To powiedziawszy, ponieważ każda strona internetowa jest inna, nie będzie tak za każdym razem. Jeśli nie masz pewności, najlepszą rzeczą jest sprawdzenie kompatybilności Twojej witryny. Aby pomóc, stworzyliśmy również narzędzie migracyjne Divi 5.

narzędzie migracyjne Divi 5

Skanuje twoją istniejącą witrynę Divi 4 i mówi, które moduły są kompatybilne, które nie są i co wymaga uwagi. Pomaga to podjąć świadomą decyzję bez ryzyka witryny na żywo.

Jesteśmy jednak bardzo blisko wersji beta, więc naszą radą jest tworzenie nowych stron internetowych tylko za pomocą Divi 5 i czekanie trochę więcej przed zmianą witryn Divi 4.

5. Zbuduj system projektowania Divi

Divi 5 wprowadza wiele funkcji, więc może być mylące, aby zdecydować, które z nich użyć, a które nie. Na przykład, jeśli definiujesz zmienne projektowe, czy należy również używać ustawień grup opcji? Najlepszym sposobem na zrozumienie tego jest eksperymentowanie i ustalenie, co działa dla Ciebie. W miarę wydawania nowych funkcji możesz nadal udoskonalić swój proces.

Możesz uruchomić dowolną kompilację witryny ze zmiennymi projektowymi dla spójności, a następnie użyć ich w grupie opcji i ustawień wstępnych elementów. To ustrukturyzowane podejście oszczędza czas, utrzymuje dostosowanie marki i pozwala aktualizować globalne style za pomocą kilku kliknięć.

6. Zgłoś błędy, gdy je napotkasz

Divi 5 jest nadal aktywny, więc prawdopodobnie napotkasz kilka błędów po drodze. Kiedy to zrobisz, chcielibyśmy, żebyś je zgłosił. Pomaga naszemu zespołowi rozwiązać problemy szybciej i zbliża nas o krok do wydania beta. Możesz także polegać na nas w przypadku wątpliwości Divi 5 - nasz zespół wsparcia szybko odpowiada i tutaj, a użytkownicy profesjonalni otrzymują również wsparcie VIP -colm w całości na pilne.

Wybierz Divi 5, aby rozpocząć podróż do projektowania stron internetowych

Divi 5

Divi 5 zapewnia kompletne ramy budowania witryny, zmodernizowane i odbudowane od podstaw. Każda jego część została zaprojektowana w celu uproszczenia przepływu pracy, przyspieszenia wydajności i ustawiania przyszłości projektowania stron internetowych.

  • Lepsze niż konkurencja: podczas gdy większość budowniczych koncentruje się na krzykliwych funkcjach, Divi 5 koncentruje się na kontroli, prędkości i użyteczności w świecie rzeczywistym. Jest zbudowany do pracy z tobą, a nie przeciwko tobie.
  • Główne ulepszenie Divi 4: Divi 4 było już kochane przez użytkowników WordPress. Divi 5 utrzymuje wszystko, co ludzie lubili i naprawia wszystko, czego nie mieli. Jest szybszy, lżejszy i bardziej skalowalny.
  • Wszystkie narzędzia w jednym miejscu: od wizualnej edycji po treści AI, przechowywanie w chmurze, szybkie tworzenie strony i narzędzia marketingowe, Divi 5 daje wszystko, czego potrzebujesz, aby zacząć silnie i szybko się rozwijać.

Jeśli zaczynasz dziś swoją podróż do projektowania stron internetowych, zacznij od Divi 5. Jest zbudowany na to, dokąd zmierza sieć, a nie tam, gdzie była.

Divi 5 jest dziś gotowy do użycia na nowych stronach internetowych.

Pobierz Divi 5learn więcej o Divi 5