The Divi Builder to plugin dostępny dla posiadaczy motywów Elegant Themes, który służy do budowania strony. Z jego pomocą stworzymy też post czy projekt. O tej wtyczce wspominałam już niejednokrotnie z uwagi na to, że to właśnie ona sprawia, że potrzebujemy co raz mniej wtyczek zewnętrznych, aby nasza strona lub blog wyglądały tak, jak sobie tego życzymy. Plugin jest intensywnie rozwijany i co raz bardziej zachwyca opcjami. Ostatnie aktualizacje przyniosły dużo dobrego i jeszcze więcej można z nim stworzyć. Nie będę się dziś skupiać na poszczególnych elementach, jakie The Divi Builder posiada – takie szczegółowe zestawienie będzie się cyklicznie pojawiało na blogu, żeby pokazać Wam jak można każdy element wykorzystać i jak poradzić sobie z jego ustawieniami. Dzisiaj zajmiemy się tym, co jest całkowicie nowe i wiele osób nie wie, do czego te opcje służą.

Text shadow

Ja akurat zwolennikiem tych efektów nie jestem, ale domyślam się, że znajdzie się cała masa osób, które będę konsekwentnie taką opcje wykorzystywać. Co to właściwie jest ten text shadow? To po prostu cień tekstu, a raczej wokół tekstu. Opcja jest dostępna we wszystkich modułach i możemy zastosować ją globalnie: dla wszystkich wielkości nagłówków, przy czym dla każdego możemy ustawić inny text shadow, podtytułów, czy zwykłego tekstu. W modułach dostępnych jest 5 rodzajów cieni tekstu, a należy ich szukać w ustawieniach danego modułu, w zakładce Design.

Zasada ustawiania cienia jest dość prosta. Wszystko odbywa się za pomocą tych opcji:

• Nagłówek Text Shadow Horizontal Length – przesuwa cień w lewo lub w prawo
• Nagłówek Text Shadow Vertical Length – przesuwa cień do góry lub do dołu
• Nagłówek Text Shadow Blur Strength – sprawia, że cień jest rozmazany albo wyostrzony
• Nagłówek Text Shadow Color – to kolor cienia

Filtry

To kolejna przyjazna funkcjonalność, która sprawdzi się głównie w przypadku grafik i zdjęć, ale nie tylko. Filtry możemy stosować do tekstów, tak jak w przypadku text shadow czy teł i dostępne są one również w każdym module, jaki wybieramy. Pojawiają się także w opcjach wiersza i całej sekcji, więc każdy parametr, na każdym poziomie budowania strony można zmienić. W ustawieniach mamy do wyboru:

• Odcień – kolor, po prostu
• Nasycenie – określa, jak bardzo wyraźne i intensywne (bądź też nie), będą Twoje kolory
• Brightness – jasność. Tutaj możesz przyciemnić bądź rozjaśnić wybrany element.
• Contrast – kontrast, po prostu
• Invert – odwraca kolory, a ustawiony na 100% w przypadku zdjęcia daje wrażenie negatywu
• Sepia – w tym efekcie możesz dostosować intensywność efektu sepii
• Opacity – to efekt przeźroczystości. Można nim całkowicie ukryć zdjęcie, lub dodać lekką nakładkę ala tło na zdjęciu
• Blur – rozmycie.

I o ile można by pomyśleć, że dodanie takich elementów jest sztuką dla sztuki, to warto pochylić się nad osobami, które nie czują jeszcze klimatu CSS, żeby samodzielnie wprowadzić takie, czy podobne zmiany, albo o osobach, które nie posiadają lub nie umieją obsługiwać programów graficznych, żeby zrobić jakiś dodatkowy efekt swojej grafiki. Poza tym, obsługa wszystkich tych opcji, które znjadują się w The Divi Builder jest bardzo prosta i intuicyjna. Na początku może być trudno rozróżnić od siebie dane funkcjnalności, ale można to wszystko robić bezpośrednio na stronie, przez edytor wizualny, tak jak ja to robiłam na mini filmikach powyżej.

Box shadow

To efekt, który ja bardzo lubię i korzystam z niego nagminnie – może nawet za często. Kiedyś box shadow można było dodać wyłącznie poprzez CSS, teraz możemy ręcznie wykorzystać taką opcję przez The Divi Builder i jeszcze dostosować jego rozmiar, odcień i wysokość czy szerokość. Box shadow jest dostępny dla sekcji, wiersza i modułu. Ja najczęściej wykorzystuję ten efekt w przypadku wrzucania zdjęć do postów, żeby zaznaczyć, gdzie dane zdjęcie się zaczyna i kończy – dzięki temu nie zlewa się ono z tekstem, a czasem po prostu dla lepszego efektu. Box shadow, czyli po prostu cień pola/elementu sprawdzi się również w przypadku przycisków, czy kontenerów na blogu. Dzięki temu efektowi bardzo dobrze wyglądają elementy, które mają delikatną ramką – cień je zmiękcza, nieznacznie poszerza i wizualnie wyglądają o wiele lepiej. Jak możemy operować cieniem:

Box Shadow Horizontal Position – przesuwa cień na boki, w lewo lub w prawo Box Shadow Vertical Position – przesuwa cień w górę lub w dół Box Shadow Blur Strength – odpowiada za to, jak bardzo cień ma być rozmyty Box Shadow Spread Strength – odpowiada za wielkość cienia Shadow Color – odcień cienia Box Shadow Position – do wyboru mamy dwie opcje Outer Shadow, czyli cień zewnętrzny, oraz Inner shadow, czyli cień wewnętrzny

Animacje

Animacje możemy dodać do sekcji, wiersza, lub konkretnego modułu. Możemy dzięki nim wykonywać nawet animacje tekstu, nico podobne do tych, które możesz kojarzyć np. z Power Pointa. Rodzaje animacji możesz zobaczyć na filmiku powyżej. Opcje dodatkowe z jakich możesz skorzystać podczas animacji są następujące:

• Animation Repeat – powtarzanie animacji. Once – oznacza, że animacja wystąpi raz, Loop, że będzie zapętlona i będzie się odtwarzać bez końca.
• Animation Direction – kierunek animacji. Możesz zdecydować czy animacja zacznie się od strony lewej, prawej, od środka czy od dołu
• Animation Duration – czas trwania animacji, czyli jej prędkość
• Animation Delay – opóźnienie animacji. Dzięki tej opcji określasz po ilu sekundach animacja ma się aktywować.
• Animation Intensity – określa intensywność animacji
• Animation Starting Opacity – to opcja przeźroczystości animacji początkowej
• Animation Speed Curve – to opcja łagodzenia animacji i najlepiej po prostu ją przetestować, chociaż jeżeli mam być szczera, ja w tej opcji efektu animacji nie widzę w ogóle 😀

To o czym chciałabym żebyś pamiętał to fakt, że nie zawsze warto wykorzystywać wszystkie dodatkowe opcje i możliwości, jakie daje nam dany motyw czy plugin. Przede wszystkim należy mieć na uwadze dobro czytelnika czy Klienta, bo to dla niego tworzy się strony i blogi. Jeżeli przesadzisz ani jeden, ani drugi nie wróci zbyt prędko. Natomiast technicznie, jeżeli chcesz wykorzystać jakieś dodatkowe efekty to warto je testować przez kreator graficzny (visual builder), który wszelkie zmiany jeszcze przed ich zapisaniem pokazuje bezpośrednio przed Twoimi oczami.

Masz pytanie? Daj znać. Napisz nam też w komentarzu jakie są Twoje ulubione efekty specjalne, którym nie możesz się oprzeć 🙂