fbpx

Pozycje w Divi, czyli podkręć swój design

Pozycje w Divi to stosunkowo świeża funkcja – została dodana wraz ze styczniową aktualizacją. Do czego można je wykorzystać? Przede wszystkim – można trochę zaszaleć z elementami. W kursie „Zrób to sama w Divi!” pokazywałam jak zrobić popup z dowolnej sekcji lub modułu. Użyłam do tego m.in. pozycji. Ale można je też wykorzystać do wyrównania przycisków w kilku kolumnach czy dodania pływającego okienka na dole strony. Dziś porozmawiamy o pierwszym przykładzie.

Jednak zacznijmy od teorii. Do czego służą pozycje? I jak je włączyć?

Pozycje w Divi – jak je uruchomić?

Pozycje w Divi możesz ustalić dla każdego elementu – sekcji, wiersza, kolumny i modułu. Żeby to zrobić, musisz wejść w ustawienia tego elementu, a następnie Zaawansowane -> Stanowisko. Z listy rozwijanej Stanowisko wybierasz jedną z opcji pozycji:

Domyślnie

Jest to tzw. pozycja statyczna. Czyli taka, w jakiej znajduje się element po jego dodaniu do strony. Niektóre elementy w Divi mają domyślnie ustawioną pozycję na „Relative” – nie przejmuj się tym, mimo to strona powinna działać prawidłowo,

Relative

Uruchamiając tę pozycję, możemy ustawić nasz element w odpowiednim stosunku do jego pierwotnej pozycji. Wiem, brzmi trudno, ale w użyciu jest proste. Jeśli włączysz pozycję Relative, a następnie użyjesz suwaczków do ustawienia pozycji w pionie (Vertical Offset) i w poziomie (Horizontal Offset) – możesz przesunąć ten element względem miejsca, w którym był poprzednio. Co ważne – miejsce, które było „zajmowane” przez ten element, dalej będzie „zajęte” – nic się na stronie nie przesunie. Nie przy każdej pozycji jest to oczywiste 😉

Absolute

Ta pozycja służy do ustalania pozycji elementu w stosunku do elementu-rodzica. Tu też lepiej korzystać z suwaczków, niż z kwadracików, bo te drugie się często sypią. Najważniejsze konkluzja jest taka – możesz przesuwać ten element dowolnie od poprzedniej pozycji (powiedzmy), ale miejsce, które ten element zajmował – znika. Co oznacza, że cała reszta strony przesunie się na jego miejsce. W zależności od tego czy potrzebujesz w domyślnym miejscu elementu mieć pustą przestrzeń/nic – wybierasz pozycję Relative/Absolute,

Fixed

Przy pomocy tej pozycji możesz ustawić umiejscowienie elementu w stosunku do krawędzi przeglądarki. W ten sposób można np. zrobić popup na środku strony czy pływające okienko z zaproszeniem na webinar, które znajduje się w prawym dolnym rogu. Tu również miejsce zajmowane przez ten element „znika”. W przypadku popupu trzeba jeszcze dodać kody javascript i css, dzięki którym nasze okienko zniknie po naciśnięciu „x”. Mówiłam o tym więcej w kursie „Zrób to sama w Divi!„.

 

W oknie ustawiania pozycji mamy jeszcze do wyboru Indeks Z. Ta opcja służy do przesuwania naszego elementu w osi warstwowej. Nasza strona składa się z warstw. Jeśli chcemy, by jakiś element znajdował się nad innymi – musi mieć większy Indeks Z. Jeśli ma się znajdować pod nimi – Indeks Z musi być mniejszy.

W tym okienku to tyle, przejdźmy jeszcze na chwilę do wizualnej edycji.

Pozycje w Divi – edycja wizualna

Jeśli ustawisz pozycję elementu na Fixed lub Absolute – możesz ustawić Vertical OffsetHorizontal Offset poprzez wizualną edycję. Po ustawieniu pozycji w prawym górnym rogu znajdziesz ikonę róży. Po najechaniu na nią, kliknięciu i przeciągnięciu możesz zmienić pozycję tego elementu na ekranie. Ta opcja działa dla edytora w podglądzie na komputer, telefon i tablet.

 

Na co trzeba uważać?

Wiadomo – jeśli korzystamy z jakiejś funkcji, zawsze coś może pójść nie tak. Najważniejsze w pozycjach jest to, żeby pamiętać, że Vertical OffsetHorizontal Offset to opcje ustawiane na sztywno – odsuwamy o ileś pikseli od domyślnej pozycji. Dlatego trzeba ustawić je osobno na wszystkie urządzenia – jeśli ustawimy tylko dla wyglądu na komputery, na urządzeniach mobilnych wszystko się rozjedzie.

 

Jak ustawić wyrównany przycisk?

Wracamy do przykładu. Zdarza się, że mamy tekst w kilku kolumnach, a pod każdym tekstem wstawiamy przycisk. Niektórym osobom zależy na tym, by mieć wszystkie przyciski na tej samej wysokości. Niektórzy robią to, rozdzielając kolumnę z tekstami pustym wierszem. O tym, że to się nie sprawdza, powinnaś już wiedzieć z posta o podstawach konstruowania stron w Divi.

Jednak możemy takie przyciski wyrównać korzystając z pozycji – wystarczy, że ustawisz pozycję na Fixed i ustawić odpowiedni VerticalHorizontal Offset. Możesz też ustawić pozycję przycisku na Absolute, wyrównać do samego dołu i w ustawieniach wierszy -> Design -> Wymiarowanie -> Wyrównaj wysokość kolumny (ta opcja musi być włączona). Więcej o tym jak ogarnąć wyrównanie przycisków znajdziesz w materiale wideo.

Jak wyśrodkować kolumny w Divi?

Jak wyśrodkować kolumny w Divi?

Kiedy buduję strony dla swoich klientów, często zależy mi, żeby zawartość kolumn była wyśrodkowana w stosunku do siebie. Często jest to lepsze...

Responsywność w Divi

Responsywność w Divi

Jakiś czas temu w moje oko wpadła oferta kursu online o Divi. Z ciekawości weszłam na stroną lądowania, żeby zobaczyć zakres tematów poruszanych na...