Wprowadzenie zmiennych projektowych dla Divi 5

Jestem podekscytowany wprowadzeniem zmiennych projektowych dla Divi 5, nowej funkcji, która znacznie poprawi przepływ pracy Divi i da użytkownikom Divi poważną nogę nad innymi budowniczymi.

Możesz zdefiniować zmienne dla wszystkiego, takie jak kolory, czcionki, liczby, obrazy i tekst oraz podłączyć je do elementów i ustawień Divi. Kiedy aktualizujesz zmienną, projekt i treść witryny zmieniają się.

Synergia między zmiennymi a nowym systemem projektowym Divi jest fantastyczna. Pokażę ci, jak to działa.

Sprawdź poniższy film, aby zobaczyć nową funkcję w akcji.

Divi idzie „globalne” z zmiennym zarządzaniem

Dzięki globalnej systemu kolorów Divi możesz już znać koncepcję zmiennej projektowej. Globalny kolor to rodzaj zmiennej projektowej. Jednak dzięki tej aktualizacji wprowadzamy globalne wszystko! Ponadto zarządzanie globalnymi ustawieniami jest łatwiejsze niż kiedykolwiek, dzięki nowemu menedżerowi zmiennej.

Tworzenie nowych zmiennych

Ikona zmiennych na lewym pasku bocznym otworzy menedżer zmiennych witryny. Dodaj nową zmienną, podaj jej nazwę i wartość, a następnie możesz podłączyć tę zmienną do odpowiednich ustawień na dowolnej stronie. Divi obsługuje obecnie sześć rodzajów zmiennych obejmujących wszystkie rodzime pola wejściowe Divi:

• Kolory : Kolory są niezbędne dla każdej strony internetowej; Większość stron internetowych używa tylko trzech do czterech kolorów podstawowych. Definiowanie zmiennych kolorów i korzystanie z nich za pośrednictwem witryny oznacza, że ​​możesz dostosować paletę kolorów całej witryny w kilka sekund.
• Czcionki : Era pracy z czcionkami statycznymi się skończyła. Ponadto nie jesteś już ograniczony do globalnych ustawień czcionek w dostosowywaniu motywów. Możesz zdefiniować czcionki swojej witryny jako zmienne i zarządzać nimi wszystkimi w jednym miejscu.
• Liczby : Możesz użyć zmiennych liczbowych do projektowania systemu wielkości witryny. Na przykład możesz użyć standardowego rozmiaru promieniowania granicznego we wszystkich elementach. Zmienianie tego w zmienną pozwoli ci dostosować rozmiar zaokrąglonych zakątków poprzez edycję pojedynczej zmiennej. Inne codzienne zastosowania obejmują zdefiniowanie rozmiarów tekstu i wysokości linii, szerokości i odstępów kontenerów oraz wszystkiego pomiędzy.
• Obrazy : Czy używasz tego samego obrazu na wielu stronach? Na przykład możesz mieć standardowy obraz tła, który służy jako znany motyw marki. Jeśli zamieniisz to w zmienną, odświeżenie marki w dół drogi jest łatwe.
• Tekst : Zmienne nie są ograniczone do projektowania; Możesz także zdefiniować zmienne tekstowe. Na przykład, jeśli przekształcisz numer telefonu i adresu swojej firmy w zmienne tekstowe, nie będziesz musiał polować na wszystkie miejsca, w których użyłeś tych zmiennych, gdy zmieniono szczegóły firmy.
• URL : Wrzuciliśmy również zmienne URL, bo dlaczego nie? Możesz mieć główne połączenie linku do działania na różnych stronach w różnych porach roku (na przykład zmiana go podczas sprzedaży). Zamiast aktualizować ten adres URL wszędzie, zaktualizuj pojedynczą zmienną.

Używanie zmiennych w elementach i ustawieniach

Kliknij ikonę zmiennych powyżej ustawień, aby wybrać z listy odpowiednich zmiennych i treści dynamicznej ze Twojej witryny.

Zmienny i dynamiczny system treści Divi został rozszerzony na wszystkie pola, gdzie wcześniej był dostępny tylko w polach treści. Oznacza to, że możesz przypisać zmienne i treść dynamiczną do pól liczb, pól czcionek itp.

Przykłady zmiennych projektowych

Zmienne projektowe są instrumentalne i szybko staną się podstawowym elementem przepływu pracy Divi Design. Ale jeśli koncepcja nie kliknęła, pozwól, że podam kilka przykładów.

Przykład pierwszy: Zarządzaj globalnymi czcionkami

Jak możesz użyć zmiennych projektowych do poprawy przepływu pracy? Najpierw rozważmy zmienne czcionki.

Większość stron internetowych używa dwóch do trzech czcionek. Prawdopodobnie spędziłeś czas na konfigurowaniu pożądanych czcionek tekstu i tytułu w różnych elementach i ustawieniach.

Ale co jeśli chcesz zmienić? Nawet jeśli optymalnie zaprojektowałeś swoją witrynę z ustawieniami wstępnymi, powrót i zmiana czcionek może być czasochłonne. Możesz nawet nie pamiętać wszystkich miejsc, w których użyłeś określonej czcionki.

Właśnie tam pojawiają się zmienne czcionek.

Zbudowałem stronę na powyższym filmie za pomocą trzech zmiennych czcionek: czcionki tytułowej, czcionki ciała i czcionki z wyróżnieniem.

Dodanie zmiennej czcionki tytułowej do elementów, takich jak mój domyślny ustawienie Blub, jest łatwe. Ponieważ nigdy nie używałem statycznych wartości czcionek, ale zamiast tego podłączyłem moje zmienne, czcionki na mojej stronie są całkowicie dynamiczne.

Zmiana czcionki tytułowej mojej witryny jest tak łatwa, jak aktualizacja zmiennej czcionki tytułowej.

Przykład drugi: Zarządzaj globalnymi rozmiarami

Możesz zrobić to samo z wielkościami tekstu.

W przypadku witryny na poniższym filmie zdefiniowałem serię ośmiu rozmiarów tekstu dla różnych poziomów nagłówka i stylów tekstu. Kiedy aktualizuję domyślną ustawienie wstępne i przypisuję zmienną rozmiaru tekstu o średnim nagłówku, wszystkie moje tytuły Blub dziedziczą wartość z tej zmiennej.

Ponieważ opieram rozmiary tekstu całej witryny na zmiennych, mogę zarządzać rozmiarami tekstu mojej witryny całkowicie od menedżera zmiennych.

Przykład trzeci: Globalizuj całą swoją stronę internetową

Na powyższym filmie możesz zobaczyć stronę internetową wykorzystującą pełną moc zmiennych. Wszystkie kolory są zmiennymi, podobnie jak czcionki, rozmiary tekstu, rozmiary promieniowania granicznego i wartości odstępów w moich elementach kontenera.

Nie tylko to, ale także zamieniłem współdzieloną treść w zmienne. Nazwa mojej firmy, numer telefonu i adres to zmienne treści.

Nawet obraz w tle, znany motyw marki w całej stronie internetowej, to zmienna obrazu, którą mogę łatwo zmienić.

Wypróbuj Divi 5 już dziś

Zmienne projektowe dla Divi 5 są dziś dostępne i jest to jedna z wielu funkcji przybywających w tym roku do Divi.

Możesz śledzić, gdy przejdziemy do ostatecznej wersji Divi 5 i później, z aktualizacjami co dwa tygodnie. W zależności od priorytetów możesz teraz użyć Divi 5, aby zbudować nowe witryny lub poczekać, aż dodamy więcej funkcji, co jest dla Ciebie najlepsze.

Jak opisano w oryginalnym wielofazowym harmonogramie wydania Divi 5, publiczna alfa Divi 5 jest jak „Divi 5 Lite”. Brakuje mu kilku funkcji i może nie być odpowiedni dla istniejących stron internetowych, ale jest gotowy do użycia na nowych stronach internetowych, jeśli wolisz doświadczenie od Divi 4.

Chcemy, żebyś spróbował, a jeśli go kochasz, użyj go; Kiedy wszyscy to uwielbiają, sprawimy, że to oficjalne.

Podglądanie: zagnieżdżone rzędy

Szybko budujemy funkcje. Za każdym razem, gdy kończymy nową funkcję, zaczynamy nową. Za każdym razem, gdy zaczynamy nową funkcję, rzucam okiem.

Na wypadek, gdybyś go przegapił, sprawdź w zeszłym tygodniu Sneak Peek, w którym prezentowałem zagnieżdżone wiersze. Rzędy wewnątrz rzędów! To prosty pomysł, ale niezbędny pierwszy krok w tworzeniu bardziej elastycznego systemu układu dla Divi 5.

Obejrzyj ten film, aby uzyskać wszystkie szczegóły.

Więcej aktualizacji Divi 5 jest w drodze

2025 to rok Divi 5 . Żmudna praca jest za nami. Zbudowaliśmy super szybkie fundament, a teraz nadszedł czas, aby Divi powrócił.

Dzięki za oglądanie i zanim wyjdziesz, mam przysługę zapytać. Jeśli jesteś tu w celu powrotu Divi, skomentuj ten film; Przeczytam każdy komentarz. Bardzo chciałbym zobaczyć, jak ten film dotarł do dwóch setek komentarzy , więc sprawdź liczbę komentarzy i udziel nam ręki, jeśli możesz. To świetny sposób na wyżywienie algorytmu, a co ważniejsze, lubimy z tobą rozmawiać.

Nie zapomnij śledzić nas na YouTube i zasubskrybuj biuletyn Divi, aby nigdy nie przegapić aktualizacji. Do zobaczenia wkrótce na kolejne ogłoszenie o funkcji Divi 5, które obiecuję, że będzie tuż za rogiem.