Zmienne globalne w Divi 5 (Design Variables) – co ułatwiają w pracy?

Zmienne globalne w Divi 5 (Design Variables) - co ułatwiają w pracy?

Twoja strona na pewno zawiera sporo przycisków, które zachęcają do reakcji ze strony odwiedzającego. Są ważne i muszą być widoczne. Wyobraź sobie, że po jakimś czasie zauważasz, że ich kolor jest jednak za mało wyrazisty, nie działa na oko klienta, jak trzeba albo po prostu odświeżasz kolory swojej marki.

Co robisz? Wchodzisz na każdą podstronę, w każdą sekcję i szukasz każdego przycisku, aby zmienić kolor? Powodzenia, zaopatrz się w kilka termosów ciepłej kawy, herbatniki i kanapki, bo zajmie Ci to sporo czasu lub przeczytaj, jak łatwo i szybko możesz to zrobić dzięki zmiennym globalnym w Divi 5.

Czym są zmienne globalne (Global variables)?

W uproszczeniu to system, w którym jeden raz ustalasz konkretne wartości (np. kolory, rodzaj fontu, odstępy) i możesz używać ich w wielu miejscach na swojej stronie. Nie musisz ich wpisywać za każdym razem, gdy używasz jakiegoś modułu. Co więcej, gdy zmieni się Twoja wizja, lub po prostu będziesz chciał coś zmienić, wystarczy zmienić wartość w zmiennych i zmieni się ona wszędzie. 

Twój panel sterowania czyli Variable Manager

To właśnie tutaj możesz ustawić potrzebne Ci wartości. Jak się tam dostać? Po otworzeniu edytora strony w Divi, po lewej odnajdujesz ikonę trzech kółek ustawionych jedna na drugiej. Po kliknięciu otworzy się panel, w którym masz do wyboru: kolory (Colors), Fonty (Fonts), Gradienty (Gradients), Zdjęcia (Images), Linki (Links), Liczby (Numbers) i Tekst (Text). 

Jeśli chcesz najpierw poznać podstawy poruszania się po edytorze strony w Divi 5, zapraszam Cię do tego wpisu, gdzie poznasz interfejs kreatora i nauczysz się płynnie po nim poruszać.

I tutaj właśnie możesz ustawić dokładnie to, czego potrzebujesz używać na stronie najczęściej:

• Kolory: 4 pierwsze są ustawione na sztywno, czyli są zawsze i nie możesz zmienić ich nazwy, ale możesz zmienić kolory adekwatnie do swojej palety kolorów strony. Mamy tutaj Primary Color, czyli ten podstawowy, Secondary, czyli ten drugi, Heading Text, czyli kolor nagłówków, Link Color, czyli kolor linków i Body Text, czyli kolor tekstu (paragrafów).
  Klikając "Add Global Color" możesz dodać kolejne kolory i zbudować tym samym całą potrzebną Ci paletę, która będzie powtarzać się na stronie. 

• Fonty, czyli krój pisma: wybierz, jaki ma być ten do nagłówków (Heading) i reszty tekstu (Body) i dodaj (jeśli tego potrzeba) kolejne, może jakiś dekoracyjny?

• Gradienty: być może masz taki gradient, który często używasz, ma Twoje kolory marki? Dodaj go właśnie tutaj.

• Zdjęcia: zdarza się, że mamy grafiki lub zdjęcia, które powtarzają się na stronie, w różnych wersjach czy kolorach. Mogą to być zdjęcia, mogą być to jakieś dekorujące stronę akcenty.
• Linki: tutaj dodajesz linki (czyli adresy URL), które często będą pojawiać się na stronie, może to np. linki afiliacyjne lub partnerskie?
• Liczby: to centrum zarządzania wartościami liczbowymi, które chcesz mieć na stronie do określenia wielkości fontów, wysokości linii, marginesów, paddingów zaokrągleń i wszystkich innych cech, które mogą działać z liczbą. Tutaj też, mamy możliwość stosowania funkcji clamp(), które ułatwiają nam płynną responsywność. 

• Tekst: w tym miejscu zapisujemy powtarzające się na stronie fragmenty tekstu np. Twój firmowy numer telefonu. Wpisujesz go raz i możesz używać w stopce, podstronie kontakt i belce nad menu.

Jak dodać taką zmienną do modułu?

Po ustawieniu w panelu tego, czego potrzebujesz, kolejnym krokiem jest użycie zmiennej w codziennej pracy z modułami. W tym pomaga nam Dynamic Content, której ikonka wygląda właśnie tak samo, jak wspomniana wcześniej w Variable Manager i oznacza dynamiczną treść. Dzięki niej automatycznie pobierana i wyświetlana jest treść, którą wcześniej ustawiłeś ze zmiennych globalnych. Można powiedzieć, że to taki magiczny konektor, dzięki czemu w danym miejscu nie ma sztywnej wartości, tylko swego rodzaju wskaźnik, który mówi: "pobieram wartość ze zmiennych globalnych lub ustawień WordPress". Dlatego właśnie, gdy zapragniesz zmiany wspomnianego przycisku, zmienisz jego kolor w zmiennych globalnych, a użycie Dynamic Content podmieni w odpowiednim miejscu, co trzeba. Aktualizacja zrobiona w kilka sekund.

Dlaczego warto korzystać ze zmiennych globalnych?

Pewnie już się domyślasz, że to świetna funkcja w Divi 5 więc podsumujmy, co nam da stosowanie tych kroków opisanych wyżej, tak dla upewnienia:

1. Łatwe utrzymanie różnego typu danych: wszystkie ważne i strategiczne wartości projektu są zgromadzone w jednym, łatwo edytowalnym punkcie, co ułatwia zarządzanie nimi.
2. Tworzysz swojego rodzaju "Design system", który ułatwia Twojej stronie być spójną. Nie musisz pamiętać jaki rozmiar fontu był na stronie o mnie, jakie odstępy powinny być po każdej sekcji, a jakie tło ma przycisk. Strona jest konsekwentna w wyglądzie, przez co łatwiejsza w użytkowaniu przez Twojego klienta.
3. Super szybkie i łatwe zmiany na stronie, dzięki kliknięciu, w jednym miejscu, zmienia się cecha na całej stronie. Koniec z przeszukiwaniem modułów i zmianami w stu miejscach osobno.
4. Nie trzeba dopisywać kolejnych linijek kodu (jak w Divi 4), nie powtarzamy też tych samych wartości w kodzie każdego modułu, kod jest czystszy i lżejszy.
5. Możemy eksportować i łatwo zaimportować taki gotowy, zestaw zmiennych i od razu mieć już bazowe ustawienia do pracy nad kolejnym projektem.

Gdy masz już zmienne, możesz pójść krok dalej i zebrać ustawienia w gotowe zestawy, czyli presety. Jak działają i czym różni się preset elementu od presetu grupy opcji, opisuję we wpisie o presetach w Divi 5.

Podsumowanie

Sama korzystam z tego systemu w każdym projekcie i żadna zmiana mnie już nie przeraża. Strona to zaplecze Twojego biznesu, a zaplecze prędzej czy później wymaga poprawek i zmian: nowy sezon, zmiana koloru marki, inny numer telefonu. Dzięki zmiennym globalnym taka poprawka zajmuje minuty, a  nie, całe popołudnie.