Jak skutecznie budować swoje strony z Divi 5

Opublikowany: 2025-05-29

Odbudowany od podstaw, Divi 5 może pochwalić się błyskawiczną wydajnością i wprowadza nowe funkcje, takie jak zmienne projektowe do stylizacji w całym terenie, zagnieżdżone rzędy do nieskończonej głębokości układu oraz wstępnie ustawione projekt do zwiększenia przepływu pracy. Dzięki nowoczesnemu, odnowionym budowniczym wizualnym Divi 5 pozwala tworzyć profesjonalne strony internetowe bez niewielkiego wysiłku, zaczynając od zera lub wykorzystując tysiące wstępnie zbudowanych układów.

W tym poście wyróżnimy unikalne funkcje Divi 5 i ulepszenia interfejsu użytkownika oraz w jaki sposób pomogą one bardziej efektywnie budować swoje strony. Od ustanawiania responsywnych układów po wykorzystanie innowacyjnych funkcji, takich jak grupy modułów i Divi AI, zobaczysz, jak Divi 5 przekształca projektowanie stron internetowych w szybsze, mądrzejsze i bardziej kreatywne wrażenia.

Jedna uwaga, zanim zanurtujemy: Divi 5 jest gotowy do użycia na nowych stronach internetowych, ale nie zalecamy przekształcenia istniejących stron na Divi 5.

Powiedziawszy to, zanurzmy się w środku.

Spis treści
  • 1 Zrozumienie nowoczesnego interfejsu użytkownika Divi 5
    • 1.1 Ewolucja budownicza wizualnego
    • 1.2 Intuicyjna nawigacja
    • 1.3 Responsywne kontrole projektowe
  • 2 Budowanie strony z unikalnymi funkcjami Divi 5
    • 2.1 1. Zmienne projektowe do wydajnego stylizacji
    • 2.2 2
    • 2.3 3. Zagnieżdżone rzędy dla elastycznych układów
    • 2.4 4. Grupy modułów dla zorganizowanych treści
    • 2.5 5. Zaawansowane jednostki do dynamicznego projektowania
    • 2.6 6. Integracja Divi AI
  • 3 najlepsze praktyki budowania stron internetowych z Divi 5
  • 4 Zbuduj mądrzejsze strony internetowe z Divi 5

Zrozumienie nowoczesnego interfejsu użytkownika Divi 5

Interfejs Divi 5 jest całkowitym przeglądem swojego poprzednika, zaprojektowanego pod kątem prędkości, elastyczności i intuicyjnego projektu bez kodu. Builder wizualny oferuje edycję front-end w czasie rzeczywistym z panelem ustawień czystszych, responsywne przełączniki projektowe i interfejs zagnieżdżonych warstw do bezproblemowej nawigacji sekcji, wierszy, kolumn i grup modułów.

Ulepszony przez szybsze fundament, Divi 5 wprowadza unikalne cechy, takie jak zagnieżdżone rzędy do nieskończonej głębokości układu, grupy modułów do usprawnienia modułów i zmienne projektowe dla spójnej stylistyki. Postępy te sprawiają, że Divi 5 jest dostępny dla początkujących i potężny dla profesjonalistów, przekształcając sposób budowy stron internetowych na WordPress.

Wizualna ewolucja budownicza

Wizualny konstruktor Divi 5 może pochwalić się przeprojektowanym interfejsem z usprawnionym doświadczeniem, który jest potężny i przyjazny dla użytkownika. W porównaniu z Divi 4, Divi 5 wprowadza czystszy, bardziej intuicyjny panel ustawień, który zmniejsza bałagan i logicznie organizuje opcje, zwiększając regulacje.

Interfejs Divi 5

Nowe responsywne przełączniki projektowe pozwalają przełączać się między kilkoma widokami na komputery stacjonarne, tabletu i mobilnych, zapewniając, że projekty wyglądają bezbłędnie na wszystkich urządzeniach. Te ulepszenia interfejsu użytkownika sprawiają, że Divi 5 jest dostępny dla początkujących, jednocześnie oferując zapotrzebowanie specjalistów precyzyjnych.

Divi 5 responsywne punkty przerwania

Intuicyjna nawigacja

Prowadzenie złożonych układów jest łatwe z interfejsem Warstwy Divi 5. Ten interfejs organizuje sekcje, wiersze, kolumny, moduły i nowe grupy modułów w jasną, hierarchiczną strukturę. Umożliwia łatwe przejście do elementów projektu, niezależnie od tego, czy dostosowanie pojedynczego modułu, czy restrukturyzację całej sekcji.

Interfejs przeciągania i upuszczania upraszcza rzeczy, podczas gdy tryb szkieletowy zapewnia widok ptaków struktury strony. Łącząc te narzędzia, Divi 5 sprawia, że ​​budowanie i edytowanie złożonych układów intuicyjnie, oszczędzając czas i zmniejszając frustrację.

Responsywne kontrole projektowe

Divi 5 wprowadza konfigurowalne punkty przerwania dla precyzyjnej kontroli nad tym, jak Twoje projekty dostosowują się do urządzeń. Możesz wybierać spośród siedmiu predefiniowanych punktów przerwania lub ustawić niestandardowe wartości, aby dopasować się do określonych rozdzielczości urządzeń. Zapewnia to idealne pikselowe układy bez ręcznych poprawek CSS.

Ta ziarnista kontrola, w połączeniu z zaawansowanymi jednostkami, takimi jak Clamp () do skalowania płynów, zapewnia, że ​​twoje projekty pozostają spójne i atrakcyjne wizualnie we wszystkich rozmiarach ekranu.

Budowanie strony z unikalnymi funkcjami Divi 5

Divi 5 wprowadza innowacyjne narzędzia, które na nowo zdefiniują sposób korzystania z Divi. Zagnieżdżone rzędy pozwalają na gniazdowanie Infinite Row dla złożonych układów, podczas gdy grupy modułów upraszczają styl i zarządzanie wieloma modułami jako pojedynczą jednostkę. Zmienne projektowe umożliwiają spójność całej witryny dla kolorów, czcionek i innych oraz zaawansowanych jednostek obsługują dynamiczne funkcje CSS, takie jak clamp () i calc () dla responsywnych projektów. Projektowanie ustalone z opcjami ustawień wstępnych grup usprawnia stylowanie elementów, a Divi AI przyspiesza tworzenie treści. Razem funkcje te umożliwiają użytkownikom efektywne tworzenie profesjonalnych, responsywnych stron internetowych.

Poniżej szczegółowo opisujemy, jak korzystać z tych narzędzi do tworzenia strony internetowej.

1. Zmienne projektowe do wydajnego stylizacji

Zmienne projektowe to ustawienia globalne, które mogą być używane do kolorów, czcionek, liczb, obrazów, tekstu i linków, które można zastosować w całym miejscu. Możesz zdefiniować zmienne, klikając ikonę zmiennych globalnych w The Visual Builder.

Zaletą korzystania z zmiennych projektowych jest to, że możesz je zaktualizować raz, aby zaktualizować wszystkie instancje tej zmiennej, zapewniając spójność i oszczędzanie czasu. Na przykład, jeśli ustalysz wartości liczbowe, aby przypisać obliczenia Clamp () do nagłówków, ustalasz globalną hierarchię tekstu na całej stronie internetowej. Jeśli chcesz dokonać szybkiej zmiany, każdy moduł nagłówka lub tekstu z zastosowanymi zmiennymi będzie aktualizowany w całej witrynie, umożliwiając wprowadzenie szybkich zmian, które wypełniają się w każdej instancji.

Jak używać zmiennych projektowych

Aby zmaksymalizować potencjał zmiennych projektowych, włącz je wcześnie do procesu projektowania. Ustanowienie zmiennych na początku tworzy spójne ramy, uwalniając cię do koncentracji na kreatywności niż powtarzających się zadaniach. Rozpocznij od kliknięcia ikony Menedżera zmiennego w The Visual Builder.

Divi 5 Zmienne projektowe

Gdy pojawi się okno dialogowe, możesz dodać zmienne, aby stworzyć podstawę projektu. Na przykład możesz użyć zmiennych liczbowych do ustalenia responsywnej typografii.

Zmienne liczbowe mogą być również używane do odstępu. Na przykład możesz ustalić standardowe odstępy dla wszystkich kolumn i wierszy w Twojej witrynie. Za pomocą wzoru calc (), takiego jak calc (80% - 60px), ustala szerokość elementu projektowego jako 80% pojemnika, jednocześnie dodając 30px wyściółki po obu stronach. Wybierz Calc z menu rozwijanego, aby zastosować formułę.

calc () w Divi 5

Wprowadź formułę calc () w polu wartości . Kliknij przycisk Zapisz zmienne , aby dodać go do menedżera zmiennej.

calc () w Divi 5

Po zapisaniu zmiennych Divi ułatwia zastosowanie ich w całym projekcie. Aby użyć odstępu, kliknij wiersz, kolumnę lub moduł, przejdź do karty Projekt i poszukaj pola szerokości.

Zmienne projektowe w Divi 5

Na koniec kliknij ikonę Wstaw dynamiczną zawartość, aby wybrać globalną zmienną odstępów.

Zmienne projektowe w Divi 5

Jak wspomniano wcześniej, zastosowanie zmiennej projektowej zapewnia spójność w całej witrynie. Aktualizacja jego właściwości w menedżerze zmiennym natychmiast synchronizuje wszystkie instancje, oszczędzając godziny ręcznych dostosowań.

Wskazówki dotyczące stosowania zmiennych projektowych

  • Zorganizuj swoje zmienne: Zmienne nazwij opisowo, aby ułatwić ich identyfikację w złożonych projektach.
  • Prezydencje dźwigni: Połącz zmienne projektowe z globalnymi ustawieniami Divi, aby stworzyć szablony stylu wielokrotnego użytku dla modułów, skracając czas konfiguracji nowych stron.
  • Reaktywność testu: Podgląd projektów zmiennych na wszystkich urządzeniach u urządzeń wizualnych, aby zapewnić, że wszystkie zmienne działają zgodnie z oczekiwaniami.

2. Projekt oparty na ustawieniach wstępnych z ustawieniami grupowymi opcji

Preprezentowany system projektowy oparty na Divi 5 rewolucjonizuje stylizację za pomocą dwóch potężnych narzędzi: ustawień wstępnych elementów i ustawień grup opcji. Te funkcje umożliwiają zapisywanie i ponowne wykorzystanie konfiguracji, zapewniając spójność i usprawnienie przepływu pracy projektu.

Divi 5 elementów wstępnych

Divi 5 elementów wstępnych

Presegowanie elementów pozwalają zapisać konfigurację modułu - w tym tekst, kolory, typografię, odstępy i efekty zawisowe - do ponownego użycia na Twojej stronie internetowej. Na przykład możesz utworzyć moduł przycisku w pełni stylizowany z określoną czcionką, tłem gradientu i animacją nalotu. Po zapisaniu jako ustawienia elementu możesz zastosować go do dowolnego przycisku na witrynie za pomocą jednego kliknięcia, utrzymując identyczną styl. Jeśli zaktualizujesz ustawienie wstępne, takie jak zmiana tła na stały kolor, każda instancja tego przycisku aktualizuje się automatycznie, eliminując powtarzające się edycje i zapewniając jednolity wygląd.

Divi 5 Presets Group Group

Natomiast ustawienia o grupie opcji koncentrują się na grupach stylu wielokrotnego użytku, takich jak typografia, granice lub cienie, które można zastosować do różnych elementów do spójnych projektów. Na przykład możesz utworzyć ustawienie grupy opcji dla czarnej granicy 1Px z promieniem 5px i użyć jej na przyciskach, obrazach i wierszach.

Jeśli później dostosujesz ustawienie wstępne do granicy 2px, wszystkie połączone elementy aktualizują natychmiastowe, oszczędzając czas i zachowując spójność. To modułowe podejście pozwala mieszać i dopasować grupy stylów w elementach, oferując elastyczność bez poświęcania kontroli.

Jak skutecznie korzystać z ustawień wstępnych

Presety elementów są już obecne, gdy zaczynają się od strony startowej lub układu Premade. Jednak podczas tworzenia strony internetowej od zera musisz je najpierw utworzyć. Tworzenie tych ustawień pozwala przyspieszyć proces projektowania, natychmiast stylizując podobne moduły w całej witrynie.

Tworzenie wstępnego elementu

Aby utworzyć ustawienie wstępne elementu, układaj moduł z pożądanymi ustawieniami. Następnie kliknij menu wstępnie ustawione w prawym górnym rogu ustawień modułu.

Podstawowe elementy w Divi 5

Kliknij nowy ustawienie wstępne z obecnych stylów, aby utworzyć nowy ustawienie wstępne.

Podstawowe elementy w Divi 5

Podaj wstępnie nazwę, wybierz, czy przypisać ją jako domyślną, i zapisz. Jeśli wybierzesz go jako domyślne ustawienie, każdy akordeon, który dodajesz do witryny, będzie identycznie stylizowany, co ułatwia szybciej i wydajniej budowanie stron internetowych.

Podstawowe elementy w Divi 5

Utwórz ustawienie grupy opcji

Proces tworzenia wstępnego ustawienia grupy opcji jest nieco inny. Zamiast stosować ustawienie wstępne do modułu, możesz przypisać ustawienia wstępne do aspektów modułu, który można przenieść na inne rodzaje modułów, kolumn, wierszy, a nawet sekcji. Podstawowe ustawienia grupy opcji doskonale nadają się do stylizacji granic, dodawania kontroli transformacji, filtrów, cieni pudeł i innych, umożliwiając utrzymanie mniejszych elementów spójnych w całym tekście.

Na przykład chcesz stworzyć styl graniczny dla obrazów i kolumn. Wybierz moduł obrazu, przejdź do zakładki Projekt i unosisz się nad ustawieniami granicznymi, aż pojawi się ikona wybierz grupy .

Prepresety grup opcji w Divi 5

Następnie kliknij Dodaj nowy ustawienie wstępne .

Dodaj nowy ustawienie wstępne

Stycz granicę, nazwij ją i zapisz wstępnie.

Wskazówki dotyczące korzystania z ustawień projektowych Divi 5

Połączenie ustawień wstępnych elementów i ustawień grup opcji pozwala zbudować skalowalny system projektowy. Oto kilka wskazówek dotyczących efektywnego wykorzystania ich do zbudowania strony internetowej z Divi 5:

  • Użyj ich w celu uzyskania wydajności: Utwórz ustawienia wstępne elementów lub ustawienia o grupie opcji, aby przyspieszyć budowanie stron, szczególnie w przypadku dużych stron internetowych. Ta metoda oszczędza od wielokrotnego stylizacji modułu, wiersza lub sekcji. Tworzysz style z przodu i nakładasz je tam, gdzie potrzebne.
  • Ustal spójność projektowania: ustawienia wstępne zapewniają jednolity styl w elementach, wzmacniając tożsamość marki i profesjonalny polski.
  • Edytuj ustawienia wstępne, gdy Twoja witryna wymaga zmian w projektowaniu: ustawienia wstępne umożliwiają aktualizację globalnych stylów bez ręcznej edytowania poszczególnych elementów, dzięki czemu są idealne do projektowania i wersji klienta.
  • Użyj ich w celu skalowalności: możesz łączyć ustawienia z zmiennymi projektowymi, aby stworzyć solidną strukturę dla stron, które często wymagają aktualizacji. Chcesz dodać stronę w dół drogi? Presety pozwalają na zrobienie tego szybciej i wydajniej.

3. Zagnieżdżone rzędy dla elastycznych układów

Zagnieżdżone rzędy w Divi 5 zastępują sekcje specjalne Divi 4 bardziej elastycznym, nieskończenie gniazdowalnym systemem. W przeciwieństwie do tradycyjnych wierszy, zagnieżdżone rzędy można umieścić w kolumnach, umożliwiając układanie wierszy, modułów lub dodatkowych zagnieżdżonych wierszy w praktycznie każdej konfiguracji.

Aby utworzyć zagnieżdżony wiersz, po prostu dodaj jeden do kolumny - lub pod modułem w kolumnie - za pośrednictwem wizualnego budowniczego i wypełnij go modułami lub dalszymi zagnieżdżonymi wierszami.

Zagnieżdżone rzędy w Divi 5

Ta funkcja pozwala budować złożone, warstwowe układy. Na przykład w sekcji o około, możesz umieścić 3-kolumnowy rząd zagnieżdżony pod modułem tekstowym, aby dodać przyciski, aby poprowadzić użytkowników do różnych stron.

Nadchodzące elementy sterujące FlexBox w Divi 5 poprawi opcje pozycjonowania, oferując precyzyjne wyrównanie i odstępy dla skomplikowanych projektów, takich jak tabele cenowe, portfele lub wielopoziomowe sekcje treści.

Jak używać zagnieżdżonych wierszy

Aby wykorzystać moc zagnieżdżonych wierszy, wykonaj następujące kroki w The Visual Builder:

Zacznij od włożenia standardowego wiersza do układu strony. Będzie to służyć jako fundament. Następnie kliknij kartę nowego wiersza , aby ujawnić opcje kolumny dla nowego zagnieżdżonego wiersza.

Zagnieżdżone rzędy w Divi 5

Następnie wybierz moduł dla pierwszej kolumny. W tym przykładzie obraz.

Zagnieżdżone rzędy w Divi 5

W drugiej kolumnie dodaj kolejny obraz. Możesz utworzyć ustawienia o grupie opcji dla granic, cieni pudełek i transformacji efektów stamtąd.

Prepresety grup opcji w Divi 5

Możesz dodać zagnieżdżone wiersze do drugiej kolumny lub pod pierwszą. Możliwości są nieograniczone.

Zagnieżdżone rzędy w Divi 5

Możesz tworzyć zaawansowane układy, które są głębokie na wielu poziomach. Na przykład możesz stworzyć tabelę cenową z zagnieżdżonym wierszem, aby uzyskać dwa przyciski obok siebie, funkcję pozbawioną wcześniejszych wersji Divi. Istnieje kilka sposobów korzystania z zagnieżdżonych wierszy , co czyni je wszechstronną funkcją podczas budowania strony internetowej z Divi. Są idealne do budowania sekcji bohaterów, stron zespołowych, nagłówków, stopek i innych.

Wskazówki dotyczące używania zagnieżdżonych wierszy

  • Najpierw zaplanuj swój układ: przed dodaniem zagnieżdżonych wierszy, naszkicuj zarys struktury strony, aby ustalić, gdzie je dodanie zapewnia wartość, na przykład w przypadku wielowarstwowych sekcji bohaterów, tabel cenowych lub sieci zespołowej.
  • Użyj do projektów modułowych: Utwórz zagnieżdżone wiersze dla komponentów wielokrotnego użytku, takie jak rząd z obrazem i tekstem do referencji, a następnie powielisz je lub zapisz, aby uzyskać spójną styl na całej witrynie.
  • Połącz z grupami modułów: Połącz zagnieżdżone rzędy z grupami modułów, aby organizować złożone układy.
  • Wykorzystaj responsywne punkty przerwania Divi: testuj zagnieżdżone wiersze w siedmiu punktach przerwania Divi 5 za pomocą responsywnych przełączników, aby zapewnić, że elementy zagnieżdżone są prawidłowe wyrównywanie na wszystkich urządzeniach.

4. Grupy modułów dla zorganizowanych treści

Grupy modułów działają jako pojemniki w Divi 5, które pozwalają grupować wiele modułów w kolumnie. Możesz stylizować, przenosić lub powielać je jako pojedynczą jednostkę. Mogą uprościć twój przepływ pracy, szczególnie w przypadku złożonych projektów, i przygotować scenę dla nadchodzącej obsługi FlexBox, odblokowując jeszcze bardziej precyzyjne opcje pozycjonowania.

Stamtąd możesz dodać moduły projektowe i zagnieżdżone wiersze lub zastosować wstępne ustawienia grup opcji do grupy, aby utworzyć układy, które można łatwo powielić lub zapisać w bibliotece Divi lub chmurze Divi.

Jak korzystać z grup modułów

Aby utworzyć grupę modułów, dodaj nowy wiersz i wybierz strukturę kolumny. Wybierz moduł grupy z dostępnych opcji Divi 5.

Grupy modułów Divi 5

Wewnątrz grupy modułów możesz dodawać moduły, takie jak tekst, obrazy, przyciski, a nawet zagnieżdżone wiersze. Na przykład możesz utworzyć grupę zawierającą nagłówek, tekst, obraz i przycisk do sekcji wywołania do akcji.

Grupy modułów Divi 5

Po stylu możesz zapisać lub zduplikować grupę modułów, klikając menu Elipsis w prawym górnym rogu grupy.

Grupy modułów Divi 5

Grupy modułów mogą tworzyć sekcje członków zespołu, sekcje wezwania do działania, nagłówki stron wnętrz i wiele innych. Ale co ważniejsze, grupy modułów staną się niezwykle pomocne, gdy pojawią się funkcje takie jak FlexBox i The Loop Builder.

Wskazówki dotyczące korzystania z grup modułów

  • Planuj Grupy modułów strategicznie: Użyj grup modułów do komponentów wielokrotnego użytku, takich jak CTA, referencje, członkowie zespołu lub karty produktów. Pomagają usprawnić proces budowy i utrzymywać organizację.
  • Połącz grupy modułów z ustawieniami: Zastosuj wstępne ustawienia grup opcji do grup modułów w celu spójnego stylizacji, takich jak jednolite cienie lub granice, w wielu grupach.
  • Użyj Divi Cloud: Zapisz często używane grupy modułów na Divi Cloud, aby uzyskać szybki dostęp do projektów, szczególnie dla klientów o podobnych potrzebach projektowych.

Korzystając z grup modułów, możesz tworzyć modułowe, zorganizowane projekty, które są łatwe w zarządzaniu i skalowaniu, dzięki czemu są idealne do budowania prostych lub bardziej złożonych stron internetowych.

5. Zaawansowane jednostki do dynamicznego projektowania

Funkcja zaawansowanych jednostek Divi 5 obsługuje szerszy zakres jednostek CSS (PX, VW, REM, %itp.) I funkcji takich jak calc (), clamp (), min () i max () w jednym polu wejściowym, umożliwiając dynamiczne i responsywne projekty. Na przykład możesz ustawić szerokość sekcji na obliczenie (100% - 40px) lub zacisku (20px, 3vw, 40px) dla typografii płynnej, która skaluje się na podstawie rozmiaru rzutni.

Zaawansowane jednostki mogą być również wykorzystywane jako zmienne projektowe do ustalania globalnych zasad i utrzymania projektów spójnych w całej witrynie.

Zaawansowane jednostki w Divi 5

Jak korzystać z zaawansowanych jednostek

Istnieje kilka sposobów korzystania z zaawansowanych jednostek, ale najskuteczniejszym sposobem jest połączenie ich ze zmiennymi projektowymi w celu spójności projektowania. Mogą jednak wystąpić przypadki, w których chcesz je przypisać na poziomie modułu.

Dobrym przykładem jest tekst. Jasne, możesz ustawić formuły Clamp () w menedżerze zmiennym, aby kontrolować rozmiar na całej witrynie, ale co, jeśli chcesz zwiększyć wpływ na kierunek, dodając miejsce, aby wyróżnić się lepiej? Właśnie tam przychodzą zaawansowane jednostki.

Aby zademonstrować, kliknij, aby dodać moduł nagłówka na swoją stronę internetową. Na karcie Projekt przejdź do pola rozmiaru.

Zaawansowane jednostki w Divi 5

Obok pola szerokości kliknij ikonę ikonę , aby ujawnić opcje zaawansowanych jednostek.

Zaawansowane jednostki w Divi 5

Z menu rozwijanego wybierz VW (szerokość rzutni) i wprowadź 50 . To poinformuje o tym, aby zająć 50% szerokości rzutni. Widokowy jest widocznym obszarem okna przeglądarki internetowej. Tak więc, niezależnie od tego, jak szerokie jest okno przeglądarki, zawsze będzie to połowa szerokości okna przeglądarki.

Zaawansowane jednostki w Divi 5

Po podświetleniu, jak będzie wyglądać na nagłówku na innych rozmiarach ekranu, zauważysz, że nagłówek pozostaje taką samą szerokością, niezależnie od tego.

Wskazówki dotyczące korzystania z zaawansowanych jednostek

  • Rozpocznij prosty: Zacznij od podstawowych jednostek, takich jak PX lub % dla prostych projektów, a następnie eksperymentuj z Clamp (), calc (), VH lub VW w celu responsywnego efektów.
  • Użyj zacisku do typografii: Zastosuj Clamp () do rozmiarów czcionek lub odstępów, aby utworzyć płyn, dostępne projekty dostosowujące się do dowolnego rozmiaru ekranu bez ręcznych punktów przerwania.
  • Połącz ze zmiennymi projektowymi: przechowuj często używane jednostki do nagłówków i tekstu nadwozia jako zmienne projektowe, aby zachować spójność i uprościć aktualizacje.

Zaawansowane jednostki zapewniają precyzję niestandardowych CSS w interfejsie Bez kodu Divi, ułatwiając budowanie dynamicznych, profesjonalnych stron internetowych, które bezproblemowo dostosowują się do dowolnego urządzenia.

6. Integracja Divi AI

Divi AI poprawia proces projektowania, generując tekst, obrazy, kod lub całe sekcje i układy oparte na podpowiedzi języka naturalnego. Działa w ramach budowniczego wizualnego w Divi 5, dzięki czemu w razie potrzeby uzyskanie małego projektu lub copywriting.

Na przykład możesz użyć wiersza, takiej jak „Utwórz nowoczesną sekcję bohatera z nagłówkiem, przyciskiem i obrazem tła”. Divi AI wyprodukuje w pełni zaprojektowany układ, który możesz ręcznie udoskonalić, aby dopasować swoją wizję.

Dzięki Divi AI możesz przyspieszyć proces projektowania, pokonać blok pisarza lub uzyskać trochę kreatywnego nacisku w razie potrzeby.

Jak używać Divi Ai

Aby w pełni wykorzystać AI Divi podczas budowania strony internetowej w Divi 5, możesz ją użyć, aby pomóc Ci pisać kopię na marce, tworzyć obrazy, dodać kilka CSS do istniejących modułów, a nawet generować sekcje. Divi AI może pomóc w tworzeniu pięknych stron internetowych, które rezonują z gościami.

Aby użyć AI Divi na istniejącym module tekstowym, najedź nad obszarem tekstu i kliknij ikonę Divi AI na karcie treści.

Aktywuj Divi Ai

Pojawi się okno dialogowe z wieloma opcjami. Możesz pisać i wymienić istniejącą zawartość, wydłużyć, skrócić lub uprościć, naprawić pisownię i gramatykę, przetłumaczyć ją, a nawet zmienić ton.

Opcje AI Divi

Po wybraniu opcji Divi AI zmieni kopię na podstawie istniejącej treści. Po zakończeniu możesz użyć tekstu, ponieść ponowne, ulepszyć go za pomocą AI lub udoskonalić wynik za pomocą kilku przewodników.

Divi ai w Divi 5

Wskazówki dotyczące używania Divi Ai

  • Bądź konkretny z monitami: Uwzględnij szczegóły takie jak ton, kolory lub preferencje układu podczas korzystania z DIVI AI do tworzenia obrazów lub sekcji. To samo dotyczy tekstu i kodu. Im bardziej konkretny, tym lepsze wyjście.
  • W razie potrzeby iteruj: jeśli początkowe wyjście nie jest idealne, udoskonal wiersz lub wygeneruj wiele odmian, aby znaleźć najlepsze dopasowanie.
  • Użyj go do inspiracji: Jednym z najlepszych sposobów korzystania z Divi AI jest burza mózgów pomysłów, takich jak generowanie koncepcji układu lub slogów, nawet jeśli planujesz mocno dostosować swoją stronę.

Najlepsze praktyki budowania stron internetowych z Divi 5

Przyjęcie strategicznego podejścia do cech Divi 5 jest niezbędne do maksymalizacji jego potencjału. Zacznij od planowania systemu projektowania z góry. Zdefiniuj podstawowe zmienne projektowe, takie jak kolory pierwotne i wtórne, odpowiednie linki, ustawienia typografii i czcionki.

Budując swoją stronę, ustal ustawy grupy opcji dla stylów wielokrotnego użytku, takie jak efekty unoszenia przycisków, cienie lub typografii, które przyspieszają Twój przepływ pracy i utrzymują spójną estetykę na Twojej stronie.

Prepresety grup opcji w Divi 5

Testowanie wczesnego i często jest również kluczowe dla pozytywnych wyników. Użyj responsywnych punktów przerwania Divi 5, aby wyświetlić podgląd zaawansowanych jednostek, aby upewnić się, że dobrze wyglądają na wszystkich urządzeniach. Responsywne przełączniki Divi 5 dają siedem punktów przerwania do odkrycia, dając lepsze wyobrażenie o tym, jak Twój projekt będzie wyglądał na ekranach o różnych rozmiarach.

Korzystanie z responsywnych punktów przerwania Divi 5

Połącz ustawienia wstępne z ustawieniami grupowymi opcji, aby zrównoważyć elastyczność i spójność. Użyj ustawień wstępnych elementów do określonych modułów, takich jak styl moduł CTA. Natomiast, aby zachować jednorodność, zastosuj ustawienia o grupie opcji dla wspólnych nieruchomości, takich jak style graniczne lub cienie. Gdy potrzebne są aktualizacje, możesz dostosować te ustalone grupy do zmian globalnych, a nie ręcznie edytować poszczególne elementy.

Wreszcie, zachowaj swoje projekty w utrzymaniu wydajności i użyteczności. Unikaj zawierania wierszy lub polegania na złożonych formułach calc (), chyba że konieczne, ponieważ mogą one skomplikować edycję. Podobnie utwórz grupy modułów dla niezbędnych projektów, które planujesz ponownie wykorzystać na swojej stronie internetowej.

Zbuduj mądrzejsze strony internetowe z Divi 5

Divi 5 na nowo zdefiniuje WordPress Web Design, umożliwiając łatwe budowanie oszałamiających, responsywnych stron internetowych. Jego nowoczesny budowniczy wizualny, intuicyjne kontrole, innowacyjne funkcje i Divi AI usprawniają proces, zapewniając profesjonalne wyniki przy minimalnym wysiłku. Niezależnie od poziomu umiejętności, narzędzia te sprawiają, że budowanie skutecznych, dynamicznych stron internetowych jest szybsze, mądrzejsze i bardziej kreatywne.

Gotowy do zbadania potencjału Divi 5? Pobierz wydanie Divi 5 Alpha już dziś i eksperymentuj z najnowszymi funkcjami, aby ożywić twoją wizję. Divi 5 pasuje do nowych witryn, ale nie jest jeszcze zalecane do konwersji istniejących.

Chcielibyśmy usłyszeć twoje myśli! Udostępnij swoją opinię, komentując poniżej. Jeszcze lepiej, opublikuj swoje doświadczenie Divi 5 w mediach społecznościowych, aby pomóc w rozpowszechnianiu informacji.

Pobierz Divi 5learn więcej o Divi 5