Presety w Divi 5 - czym są i jak z nich korzystać
Czym jest w ogóle preset? W Divi 5, tak jak w wielu innych programach, to ustawienie parametrów lub cech, które możesz zastosować jednym kliknięciem. Spotkasz go w różnych dziedzinach, na przykład w fotografii (zestaw parametrów, który po włączeniu nadaje zdjęciu klimat retro), muzyce (zestaw dźwięków tworzący efekt echa dla wokalu), grach komputerowych (gotowe postaci, dzięki którym nie musisz od podstaw tworzyć gracza) i oczywiście w projektowaniu stron czy grafik (na przykład preset przycisków lub nagłówków, który potem jest używany w całym projekcie).
Po przygotowaniu takiego presetu możemy go łatwo wykorzystywać i oszczędzamy czas, bo nie musimy tworzyć go ponownie. Projekt jest dzięki temu spójny wizualnie, nie ryzykujemy błędów przy robieniu elementu po raz kolejny, a dodatkowo, gdy stwierdzimy, że jakaś cecha w tym ustawieniu nam nie pasuje, zmieniamy ją jednym kliknięciem i zmienia się wszędzie. To właśnie magia presetów w Divi 5.
Jakie są rodzaje presetów w Divi 5?
Divi 5 posiada trzy podstawowe typy presetów:
- Element Presets (presety elementów) to odpowiednik tradycyjnych presetów z poprzednich wersji Divi. Możemy je przypisać (czyli podłączyć) do konkretnego typu modułu, wiersza lub sekcji, na przykład osobny preset modułu przycisku albo modułu zdjęcia.
- Option Group Presets (presety grup opcji) to nowy rodzaj presetu w Divi 5, który różni się od poprzedniego tym, że przypisujemy go do konkretnej grupy ustawień, czyli prościej pisząc, dotyczy jednej cechy wyglądu, na przykład cienia lub obramowania.
- Default Presets (presety domyślne): każdy element i każda grupa opcji ma swój wariant domyślny. Jeśli edytujesz domyślny preset przycisku, każdy nowo dodany przycisk na stronie automatycznie dostanie te style. Domyślne presety dają alternatywę dla Theme Customizera z poprzednich wersji Divi, bo możesz stylować cały projekt bezpośrednio w nich.
Najlepiej wytłumaczyć to na przykładzie z życia: załóżmy, że prowadzisz cukiernię. Tworzysz przepis na czekoladową muffinkę i to jest właśnie preset elementu, bo masz w nim konkretne składniki całej muffinki: czekoladę, mąkę, mleko, olej (w Divi to konkretny moduł). Masz też wyjątkowy krem waniliowy. To jest preset grupy opcji, bo kiedy pojawia się klient, który chce muffinkę z takim kremem, to go dodajesz, ale możesz go też używać w innych wypiekach, na przykład w rurce z kremem albo w torcie waniliowym.
Preset elementu (Element Preset), czyli ustalamy, jak wygląda cały moduł
Żeby odejść od słodkości, wracamy do edytora w Divi i załóżmy, że tworzymy stronę dla klienta, który w projekcie ma zdjęcia z zaokrągleniem 30 px, ramką grubości 10 px i cieniem. Dodatkowo zdjęcia są zawsze w sepii. Zamiast za każdym razem, gdy dodaję moduł zdjęcia, ustawiać to wszystko od nowa (a zdjęć na stronie jest na przykład 25), tworzę preset, który jednym kliknięciem zmienia taki moduł w ten z projektu.
Preset grupy opcji (Option Group Preset), czyli ustalamy, jak wygląda jedna cecha
Najczęściej stosuję go w typografii tekstu: po dodaniu modułu tekstu ustawiam, jak ma wyglądać tekst (jaka czcionka, rozmiar, odstępy między literami, kolor, interlinia), i zapisuję. Potem, gdy dodaję moduł, który ma w sobie tekst, na przykład CTA, mogę przypiąć mu ten preset i tekst od razu wygląda tak, jak ma, a dodatkowo w każdym module jest spójny i powtarzalny.
Idąc za naszym przykładem modułu zdjęcia, preset grupy opcji możemy dodać gdy chcemy w naszym module mieć opcję dodania innego koloru ramki. Wtedy w łatwy sposób możemy stworzyć taki zestaw ustawień i łatwo nadawać tą cechę także w innych modułach.
Czyli warto zapamiętać że:
- Preset elementu (Element Preset) zapisuje wygląd i strukturę całego modułu jako całości.
- Preset grupy opcji (Option Group Preset) zapisuje tylko jedną konkretną cechę wizualną, która powtarza się w wielu różnych modułach i jest w nich zagnieżdżana (jak krem w różnych wypiekach).
Jak nie zgubić się w gąszczu własnych presetów
Skoro tak łatwo stworzyć preset, można ich zrobić wiele i w pewnym momencie się w nich zgubić. Pierwsza dobra rada to logiczne nazewnictwo (serio, chcesz się zastanawiać, co to jest "Preset 15" albo "Ładny nagłówek 45"?), czyli na przykład "przycisk zielony z ramką" albo "tekst body mini".
Oprócz tego masz do dyspozycji centrum dowodzenia presetami, czyli Preset Manager (Menedżer presetów), który znajdziesz w lewym panelu. Zobaczysz tam wszystkie presety ze strony, możesz je wyszukać, podejrzeć na żywo, zmienić ich ustawienia, usunąć, sklonować, zaimportować i wyeksportować, bez skakania po ustawieniach w poszczególnych modułach.
Presety a zmienne globalne
Presety łatwo pomylić ze zmiennymi globalnymi, bo i jedne, i drugie ustawiasz raz i stosujesz w wielu miejscach. Różnica jest w tym, co przechowują. Zmienna zapamiętuje jedną wartość, na przykład kolor podstawowy albo rodzaj fontu dla nagłówków. Preset natomiast zapamiętuje cały zestaw ustawień wyglądu elementu, na przykład rozmiar, grubość i interlinię nagłówka. Oba rozwiązania można łączyć: w presecie możesz użyć zmiennej, więc zmiana koloru w jednym miejscu przejdzie przez preset na cały projekt. O zmiennych pisałam we wpisie o zmiennych globalnych, który ciepło polecam.
Podsumowanie
Presety ułatwiają wdrażanie projektu strony, a razem ze zmiennymi globalnymi tworzą spójny system projektowy, który pozwala zbudować wiarygodną stronę marki. Na początku może to wydawać się trudne, ale ćwiczenie czyni mistrza. W moich projektach najczęściej sięgam po presety grup opcji, głównie dla nagłówków i tekstu, a presetów elementów używam rzadziej, przy sekcjach i wierszach. Ponieważ bazuję na projekcie, który wcześniej zaakceptował klient, niektóre stworzone presety ustawiam jako domyślne, bo wiem, że będą na stałe na stronie i dotyczą najczęściej używanych modułów lub grup cech, co bardzo ułatwia pracę. Radzę zacząć od jednego presetu np dla nagłówka i zobaczyć, jak szybko zmiana w jednym miejscu przechodzi na cały projekt.
