Budowanie ram projektowych z Divi 5

Jeśli kiedykolwiek pracowałeś z frameworkami CSS, takimi jak Bootstrap, rozumiesz, dlaczego jest tak popularny. Framework projektowy daje podstawę wielokrotnego użytku do projektowania szybkiego i spójnego układu, więc nie budujesz od zera za każdym razem, gdy stylizujesz stronę.

Chociaż większość frameworków opiera się na przygotowanych zajęciach, nadal oczekują, że napiszesz niestandardowe CSS w celu głębszego dostosowywania, co czyni je trudnymi dla niekoderów. Tam różni się Divi 5.

Obejmuje podejście wizualne, zastępując CSS narzędziami takimi jak zmienne projektowe, ustawienia z grupy opcji i ustawienia wstępne. Dostajesz całą moc ramy, bez pisania jednej linii CSS. W tym poście pokażemy, jak zbudować framework bez kodu wizualnie za pomocą Divi 5.

Divi 5 jest gotowy do użycia na nowych stronach internetowych , ale nie zalecamy migracji istniejących.

Jak Divi 5 pozwala zbudować framework projektowy bez kodu

Divi 5 jest odbudowywane od zera, aby zaawansowany projekt strony internetowej był dostępny dla wszystkich. Bez względu na poziom kodowania pozwala wizualnie budować nowoczesne, niestandardowe układy. Budowanie ram projektowych nie jest inaczej.

Subskrybuj nasz kanał YouTube

Zmienne projektowe pozwalają zdefiniować globalne wartości projektowe

Zmienne projektowe pozwalają zdefiniować powtarzalne wartości, takie jak kolory marki, czcionki, odstępy i więcej w jednym centralnym miejscu. Po zapisaniu możesz ponownie wykorzystać te wartości w całej swojej witrynie, aby nadać jej spójny, markowy wygląd wizualny.

Wewnątrz wizualnego konstruktora znajdź menedżera zmiennego , aby definiować i przechowywać różne typy zmiennych (liczby, tekst, obrazy, linki, kolory i czcionki) w zorganizowany sposób.

Zmienne projektowe są jak wersja niestandardowych właściwości CSS, ale mają znacznie większą elastyczność. Na przykład ogólnie deklarujesz zmienne CSS, takie jak : root {–Primary-color: #1A73E8; } , ale ze zmiennymi projektowymi Divi oszczędzasz tylko kolor jako kolor podstawowy .

Podczas aktualizacji zobaczysz ich prawdziwą moc. Nie ma potrzeby przechodzenia przez arkusz stylów; Po prostu zmodyfikuj zapisaną wartość zmienną raz w Menedżerze zmiennym, aby zaktualizować każdą instancję w całej Witrynie. Pozwalają szybko wizualizować swoje pomysły bez polowania na kilka zasad stylu.

Możesz również zdefiniować powtarzające się elementy treści, takie jak adres, e -mail, linki, motywy tła itp., Jako zmienne treści. Nie musisz ręcznie wstawić ich wiele razy; Jedno kliknięcie i te elementy pojawiają się na Twojej stronie. Na przykład zapisz i użyj adresu firmy jako zmiennej tekstowej.

Aby zastosować zmienną projektową, uwiduj opcję i poszukaj ikony treści dynamicznej.

Dowiedz się wszystkiego o zmiennych projektowych

Zapisz wspólne kombinacje stylów z ustawieniami grupowymi opcji

Podstawowe ustawienia grupy opcji pozwalają zapisać i ponownie używać często używanych ustawień projektowych, takich jak odstępy, granice, cienie, style tekstu i tła, bez konieczności odbudowywania ich za każdym razem. Koncentrują się na jednej określonej grupie opcji w module, dzięki czemu możesz stylizować właśnie tę część i zastosować ją w dowolnym miejscu jednym kliknięciem.

Załóżmy na przykład, że zawsze używasz tego samego wyściółki 40px i marginesu 10px we wszystkich sekcjach referencyjnych. Zapisz te ustawienia jako ustawienie ustępujące . Po dodaniu nowego modułu referencyjnego wybierz ustawienie wstępne i jest gotowe.

To, co sprawia, że ​​wstępne ustawienia grup opcji jest silne, jest to, że można je mieszać ze zmiennymi projektowymi . Jeśli twój podstawowy kolor jest zapisywany jako zmienna, możesz użyć go w ustawieniu wstępnym w tle, więc jeśli kolor marki kiedykolwiek się zmieni, całe ustawienia wstępne aktualizuje się z nim. Tła na wszystkich stronach zmieniają się za pomocą jednego kliknięcia.

Prezydenckie grupy opcji nie zastępują całego modułu, dotyczą tylko wybranej grupy stylów. Ale zawsze możesz zastąpić ustawienia wstępne ustawieniami specyficznymi dla modułów, aby dostosować określone moduły. Umożliwia to zachowanie unikalnego układu i treści przy jednoczesnym zapewnieniu spójnej wizualnej stylizacji w witrynie.

Dowiedz się wszystkiego o ustawieniach grup opcji

Zapisz w pełni zaprojektowane elementy z ustawieniami wstępnymi

Jeśli byłeś użytkownikiem Divi, znasz już ustawienia wstępne. Pozwalają ci zapisać wszystkie niestandardowe style modułu, w tym tekst, odstępy, kolory, ikony, efekty unoszącego się, jako wstępnie ustawione element, dzięki czemu można go ponownie wykorzystać bez budowania od zera. Zasadniczo tworzysz gotową wersję najczęściej używanych modułów.

Oto przypadek szybkiego użycia: Dostosuj i zapisz wstępnie zaprogramowania, a następnie zastosuj go na inne niestabilne blaszki, aby je szybko stylizować.

Jak te narzędzia odbijają się w frontend HTML

Divi 5 może wyglądać jak narzędzie bez kodu, ale w tle pisze czysty, strukturalny kod. Po dostosowaniu ustawień wizualnie, takich jak wybór wstępnego ustawiania odstępów lub zastosowanie kolorów marki z menedżera zmiennego, nie tylko stylizujesz moduł. Piszesz także kod.

Każda decyzja projektowa, którą podejmujesz, jest przetłumaczona na odpowiednią pozycję frontendową. Divi obsługuje część kodowania podczas koncentracji na projekcie.

Aby pokazać, jak potężne jest to, porównamy wizualny przepływ pracy w Divi 5 z ręcznym podejściem przy użyciu tradycyjnej struktury CSS, takiej jak Bootstrap.

Pierwszy bootstrap:

Ręczne budowanie systemu projektowania z kodem w bootstrapie

W naszym przykładzie użyłem konfiguracji WordPress z zainstalowanym motywem Understrap.

W typowym przepływie pracy opartym na kodzie zaczniesz od zdefiniowania globalnych wartości projektowych jako zmiennych CSS. Oto nasze:

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

Załóżmy, że budujemy prosty układ strony kontaktowej z formularzem kontaktowym i przyciskiem w stylu niestandardowym. Aby utrzymać wszystko spójne i wielokrotnego użytku, użyjemy mieszanki klas użyteczności Bootstrap i naszych własnych zmiennych CSS.

Najpierw dodajemy kod niestandardowy formularz kontaktowy za pomocą wbudowanych klas formularzy Bootstrap do obsługi układu i stylizacji wejściowej.

Następnie dodajemy kod naszego przycisku w stylu. Tutaj połączyliśmy klasy użyteczności bootstrap z naszymi niestandardowymi zmiennymi CSS dla tła, promienia granicznego i cienia. Daje nam to pełną kontrolę nad wyglądem i wyczuciem. Jeśli chcemy wprowadzić zmiany, możemy zaktualizować nasze zmienne.

Jak widać, jest świetny i wydajny, ale wszystko jest budowane ręcznie. Zdefiniowaliśmy zmienne, zastosowaliśmy klasy i napisaliśmy cały kod sami. I to jest prosty układ, wyobraź sobie budowanie złożonych stron przy użyciu tego podejścia!

Teraz zbudujmy tę samą stronę za pomocą Divi 5 bez kodowania.

Odtwarzanie tej samej strony wizualnie z Divi 5

Zaczynamy od zdefiniowania naszych globalnych zmiennych projektowych, które stają się częścią naszego systemu projektowego całego witryny. Najpierw przechodzisz do zmiennego menedżera> kolory . Następnie napisz kod sześciokątny dla koloru podstawowego (#e91e63) i zapisz.

Podobnie można również zapisać zmienne liczbowe dla promienia granicznego {6px} i odstępów. Następnie dodaję moduł formularza kontaktowego i dostosowuję przycisk Prześlij do mojego preferowanego stylu:

Teraz zapisuję te ustawienia przycisku jako ustawienie przycisków do późniejszego użycia.

Jeśli dodam kolejny przycisk i wybiorę ustawienie ustawień przycisków , zobacz, co się stanie? Styluje się automatycznie.

Aby zastosować ustawienie grupy opcji, unosić się nad ustawieniem i poszukaj ikony ustawień .

Czy zauważyłeś również, w jaki sposób zastosowaliśmy wiele niestandardowych stylów do przycisku jednym kliknięciem bez dotykania jednego wiersza kodu? To właśnie mamy na myśli, gdy mówimy, że oszczędzasz swoje preferencje projektowe wizualnie. Jest to rodzaj przepływu pracy Divi 5. Jest szybki, spójny i w pełni wizualny.

To, co dzieje się za kulisami, jest magiczne. Divi to nie tylko ślepo układanie stylów. Każda zmienna projektowa, ustawiona i stosowana ustawienie jest zorganizowana w czysty, wydajny kod renderowany z przodu.

Źródło strony powyższej strony zaprojektowanej przez Divi pokazuje, że kolor podstawowy jest zapisywany w sekcji głównej, podobnie jak zmienne CSS:

A na frontend, wstępne ustawienia grup opcji są automatycznie zapisywane i wynikające z wyczytania CSS ukierunkowanego na odpowiednie klasy (.et_pb_button, .ET_PB_CONTACT_SUBMIT).

Obie strony wyglądają tak samo, ale sposób, w jaki zostały zbudowane i utrzymane, jest zupełnie inny.

W Bootstrap skorzystaliśmy z jego klas użyteczności, ale nadal musieliśmy napisać kod. Ale dzięki Divi 5 osiągnęliśmy ten sam wynik, nie dotykając linii kodu, tylko przy użyciu jego potężnych funkcji, takich jak zmienne projektowe i ustawienia grup opcji.

Każda zmiana została zastosowana za pomocą kilku kliknięć, bez ryzyka niespójności, a jednak kod frontu pozostał czysty. Divi przechowuje twoje style w ustrukturyzowanym formacie wielokrotnego użytku bez dodawania niepotrzebnego znacznika lub stylizacji.

Jak zbudować swoje ramy projektowe z Divi 5

Divi 5 daje wszystkie narzędzia do budowania skalowalnego systemu projektowego, ale podobnie jak w tradycyjnym rozwoju, kolejność, w której korzystasz z tych narzędzi. Przejdźmy kroki i, co ważniejsze, zrozummy, dlaczego:

1. Zdefiniuj swoje globalne zmienne projektowe

Przed zaprojektowaniem strony zacznij od zdefiniowania globalnych zmiennych projektowych. Są to podstawowe wartości, na których będzie polegać cała strona, takie jak kolory, czcionki, rozmiary, jednostki odstępów itp. Po zdefiniowaniu elementów konstrukcyjnych witryny możesz je ponownie wykorzystać, aby wszystko było spójne, czyste i łatwe do zarządzania.

W Divi 5 masz menedżera zmiennego do ich tworzenia i organizacji.

Oto jak odgrywają podświetlone typy zmiennych:

• Kolory: Zapisz podstawowe, drugorzędne i akcentujące kolory marki, aby nie musieli pisać kodów sześciokątnych ani odcieni. Zapisz zmienne kolorów i zastosuj je jednym kliknięciem.
• Czcionki: Zdefiniuj dokładne czcionki, których używasz do nagłówków, tekstu ciała lub referencji. Zamiast ponownego wyboru poppins BOLD za każdym razem, gdy tworzysz H2, zapisz go jako zmienną czcionki . Będziesz mógł łatwo ponownie wykorzystać ten sam styl w modułach.
• Liczby: Przechowuj swoje wartości projektowe, takie jak promień graniczny 8px dla kart lub wyściółka 32Px dla modułów obrazu, jako zmienne liczbowe . Możesz także użyć zaawansowanych jednostek wewnątrz zmiennych liczbowych, aby tworzyć dynamiczne projekty.

Po ustawieniu zmiennych podstawowych każde ustawienie ustawień i strony, które zbudujesz, będą na nich polegać. A jeśli kierunek projektu zmieni się później (powiedzmy, chcesz dostosować odstępy podstawowe) , musisz tylko zaktualizować zmienną w jednym miejscu.

Po prawidłowym zdefiniowaniu zmiennych projektowych nie trzeba polować i modyfikować każdej instancji. Po prostu zmień wartość raz w samym menedżerze zmiennej .

2. Zapisz globalnie powtarzające się treści

Za pomocą Menedżera zmiennych możesz również zapisać wartości treści, takie jak linki, tekst i obrazy, które często powtarzają się w całej witrynie. Zwykle kopiowałbyś i wklejasz te wartości za każdym razem, ale Divi 5 pozwala je raz zdefiniować i ponownie wykorzystać je wszędzie.

Jest to szczególnie pomocne w oszczędzaniu linków do mediów społecznościowych, danych kontaktowych Twojej firmy i innych powtarzających się treści, które należy dodać ręcznie.

Możesz zapisać treść przez pozostałe trzy zmienne:

• Tekst: Powiedzmy, że adres Twojej firmy pojawia się w stopce, na stronie kontaktowej i w sekcji bohatera strony głównej. Zapisz go jako zmienną tekstową i wybierz, gdzie chcesz się pojawić.
• Linki: Zapisz adresy URL na stronie, kolekcji produktów, profili społecznościowych lub warunków jako zmiennych linków.
• Obrazy: Jeśli używasz logo marki lub obrazu tła na wielu stronach, zapisz go jako zmienną obrazu . Wyobraź sobie, że zastępując obrazy zastępcze w szablonach kliknięciami!

Divi 5 pozwala traktować tekst, linki i obrazy jako elementy składowe wielokrotnego użytku. Te zmienne treści mogą wydawać się niewielkie, ale znacznie wpływa na szybkość, dokładność i długoterminową konserwację. Oszczędzasz czas, zmniejszasz błędy i konsekwentnie aktualizujesz witrynę.

3. Utwórz i zapisz podstawowe style z ustawieniami grupowymi opcji

Po wprowadzeniu zmiennych projektowych następnym krokiem jest zdefiniowanie podstawowych wzorów stylizacji Twojej witryny za pomocą ustawień grupowych opcji. Oszczędzaj powszechnie używane ustawienia projektowe jako ustawienia wstępne i ponownie wykorzystaj je w dowolnym module.

Oto jak najlepiej wykorzystać ustawienia grupy opcji:

1. Zapisz ustawienia wstępne dla wspólnych stylów

Zacznij od zapisywania ustawień dla ustawień, których używasz najczęściej, takie jak promień graniczny, kolory tła lub odstępy. Załóżmy, że zawsze używam wyściółki górnej 40px i dolnego marginesu 10px do referencji, więc zapisałem te wartości jako ustawione odstępy.

Mogę natychmiast zastosować ten odstęp do moich referencji (i innych modułów, jeśli chcę) . Zrób to dla każdej grupy ustawień, które konsekwentnie ponownie wykorzystujesz: granice, cienie w pudełku, tła przycisków itp., Aby możesz je ponownie wykorzystać podczas budowania stron.

2. Połącz zmienne projektowe z ustawieniami wstępnymi

Następnie wzmocnij swoje ramy, łącząc zmienne projektowe z ustawieniami grupowymi opcji. Załóżmy, że zapisałeś promień graniczny 6px jako zmienną liczbową i użyłeś go podczas tworzenia wstępnego ustawienia grupy opcji. Jeśli zmienisz zmienną później, Twoje ustawienia wstępne będą również automatycznie aktualizować na stronie.

Podobnie możesz tworzyć typografię płynną o wartości clamp () dla responsywnego tekstu. Zapisz to wewnątrz ustawienia H1 i zastosuj je konsekwentnie do nagłówków w całym układzie. Ta kombinacja ustawień wstępnych i zmiennych to miejsce, w którym wizualna framework naprawdę zaczyna stać się modułowa, skalowalna i łatwa w utrzymaniu.

Możesz także zapisać ustawienia o grupie opcji jako domyślne , co oznacza, że ​​style są stosowane automatycznie do nowych modułów. Zastosuj wartości domyślne we wspólnych ustawieniach, abyś nie musiał nawet wybierać ustawień za każdym razem.

4. Utwórz ustawienia wstępne

Podstawowe elementy wstępne uzupełniają swoje ramy projektowe. Po zapisaniu preferowanych stylów jako ustawień wstępnych, powinieneś również zapisać style modułów jako ustawienia wstępne.

Jest to szczególnie pomocne w przypadku modułów, których często używasz, takie jak CTA, referencje, bludy i formularze kontaktowe. Na przykład, jeśli zaprojektowałeś przycisk CTA z kolorem marki, miękkim cieniem i specyficznym wyściółką, możesz zaoszczędzić całą konstrukcję jako ustawienie o nazwie Primary Light. Później zastosuj go natychmiast do dowolnego nowego przycisku za pomocą jednego kliknięcia.

Ustaw ustawienia wstępne jako domyślne

Możesz także ustawić dowolny wstępny element jako domyślny, aby każdy nowy moduł tego typu automatycznie postępuje zgodnie z zapisanymi stylami projektowania. Zapisywanie powyższego ustawowego przycisku podstawowego jako domyślnego, zobaczysz nowy przycisk dziedziczący jego styl:

Domyślnie przyspiesza Twój przepływ pracy i nadal możesz je zastąpić w razie potrzeby. Ale w większości przypadków posiadanie dobrze zdefiniowanych ustawień wstępnych zmniejsza powtarzalną pracę i usuwa zgadywanie projektowe. W połączeniu z tymi trzema funkcjami postępujesz zgodnie z ustawieniami projektowymi opartymi na ustalonych, które sprawiają, że budowanie witryn są całkowicie bez kodu.

Projektowanie nowych stron na podstawie twoich ram projektowych

Teraz, gdy zapisałem wszystkie moje preferowane zmienne projektowe, ustawienia o grupie opcji i ustawienia wstępne, przetestujmy nasze ramy.

Budowanie nowych stron stało się znacznie szybszym i łatwiejszym doświadczeniem. Nie muszę zaczynać od zera ani ręcznie wyposażać się w każdy moduł. Wszystko, czego potrzebuję, jest już skonfigurowane.

Jak widać, zastosowałem wiele zmian projektowych zaledwie kilku kliknięć. Tak, zaimportowałem gotowy układ Divi, ale dostosowałem go w kilka sekund z zapisanymi ramami.

Zamiast wybierać czcionki, ręcznie dostosowywać odstępy lub ulepszyć kolory, po prostu zastosowałem zapisane ustawienia wstępne. Projektowanie przycisków, rozmiary tekstu, style tła i granice obrazu były zgodne z ustawieniami framewornymi, które zbudowałem wcześniej.

Ręczne zastosowanie tych stylów do jednego modułu może nie być wielką sprawą. Ale kiedy dostosowujesz całą stronę, różnica jest jasna. Możesz zauważyć łatwość i szybkość, z jaką dokonałem tych wszystkich zmian. Jest to prawdziwa korzyść z tworzenia ram projektowych: przyspiesza przepływ pracy bez poświęcania jakości lub konsekwencji.

Najlepsza część przychodzi podczas aktualizacji. Jeśli moje globalne wartości kiedykolwiek się zmienią, muszę tylko zmodyfikować zapisane zmienne projektowe za pośrednictwem Menedżera zmiennych. Mogę również zmodyfikować moją grupę opcji i ustawienia wstępne, klikając ikonę małych ustawień.

To jest Power Divi 5 przynosi do ciebie. Pozwala tworzyć, zapisać i dostosowywać całą framework projektowania bez dotykania jednego wiersza kodu.

Budowanie frameworku projektowania bez kodu wizualnie

Tworzenie ram projektowych nie jest już tylko dla programistów. Dzięki odpowiednim narzędziom każdy może to zrobić, nawet jeśli nigdy wcześniej nie dotknąłeś kodu. Jak widziałeś w tym poście, wszystko, co potrzeba, to kilka inteligentnych kroków, aby stworzyć własny system projektowy. Jak? Za pomocą Divi 5.

Divi 5 daje narzędzia do tego

Divi 5 obsługuje złożoność i zapewnia pełną kontrolę poprzez zaawansowane funkcje. Możesz budować szybciej, pozostać konsekwentne i dokonywać globalnych aktualizacji bez opuszczania wizualnego konstruktora. Fajnie, prawda? Ale to tylko wierzchołek góry lodowej i dopiero zaczynamy!

Mamy o wiele więcej niesamowitych funkcji ustawionych do wydania i nie możemy się doczekać, aż je wypróbujesz. Pobierz publiczną alfa już dziś i zbuduj własne ramy projektowe bez ograniczeń kodowania.

Divi 5 jest gotowy do użycia na nowych stronach internetowych , ale nie zalecamy migracji istniejących.