Przewodnik po zrozumieniu i użyciu stałej pozycji w Divi

Właściwość ustalonej pozycji jest kluczowym typem pozycji, aby nauczyć się, jak prawidłowo używać. Stałe elementy są ważne dla poprawy doświadczenia użytkownika w Twojej witrynie. Stałe nagłówki pozostają widoczne podczas przewijania strony internetowej, ułatwiając użytkownikom poruszanie się po witrynie. Naprawione paski boczne utrzymują widoczne wezwania do działania i opcje e-maili, zwiększając liczbę konwersji. To samo dotyczy stałych pasków powiadomień, wyskakujących okienek i wielu innych. Gdy zrozumiemy, jak działa stała pozycja i jak prawidłowo jej używać w Divi, będziemy mieli potężne narzędzie do projektowania, które przeniesie nasze witryny Divi na wyższy poziom.

W tym poście omówimy:

• Przegląd czterech typów pozycjonowania Divi
• Jak ustalona pozycja „pozycjonuje” element w Divi
• Korzystanie z opcji stałej pozycji w Divi
• Wskazówki, o których należy pamiętać podczas korzystania z ustalonej pozycji
• 6 przydatnych sposobów korzystania ze stałej pozycji w Divi

Sprawdź to!

Przegląd czterech rodzajów pozycjonowania Divi

Pozycja stała jest jednym z czterech typów pozycji dostępnych w opcjach pozycji Divi. Oto krótki przegląd każdego z nich poniżej.

Statyczny (domyślny)

Z technicznego punktu widzenia elementy statyczne nie są „pozycjonowane”, ponieważ pozostają w normalnym przepływie lub kolejności elementów na stronie i nie reagują na właściwości górnej, prawej, dolnej i lewej, jak inne pozycjonowane elementy (dlatego nie offsety są dostępne w Divi dla elementów w pozycji statycznej/domyślnej). W Divi, kiedy wybieramy domyślną pozycję dla modułu, wybieramy pozycję statyczną. Warto również wspomnieć, że niektóre elementy w Divi (takie jak wiersze i sekcje) będą domyślnie miały pozycję względną (nie pozycję statyczną).

Względny

Względnie pozycjonowane elementy przypominają elementy statyczne, ponieważ podążają za normalnym przepływem strony. Główna różnica polega na tym, że elementy pozycjonowane względnie mogą być pozycjonowane przy użyciu właściwości góra, dół, lewo i prawo. Ponadto, w przeciwieństwie do elementów statycznych, można je również pozycjonować za pomocą właściwości Z Index.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dotyczącym zrozumienia i używania względnej pozycji w Divi.

Absolutny

Element pozycjonowany bezwzględnie wyłamuje się z normalnego przepływu dokumentu i dlatego na stronie nie jest tworzone żadne miejsce dla tego elementu. Możemy myśleć o tym jako o elemencie unoszącym się nad innymi elementami na stronie, które zajmują rzeczywistą przestrzeń. Zostanie ustawiony względem najbliższego umieszczonego kontenera nadrzędnego.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dotyczącym zrozumienia i używania pozycji absolutnej w Divi.

Naprawiony

Podobnie jak pozycja bezwzględna, elementy ze stałą pozycją wyłamują się z normalnego przepływu strony i nie będą miały rzeczywistej przestrzeni utworzonej na stronie. Kluczową różnicą między bezwzględną a stałą jest to, że stała pozycja jest względna w stosunku do okna przeglądarki lub rzutni. Innymi słowy, bez względu na to, gdzie element znajduje się w normalnym toku strony, po ustaleniu stałej pozycji, jego pozycja będzie teraz bezpośrednio odnosić się do okna przeglądarki. Możemy użyć właściwości top, bottom, left i right, aby umieścić element w rzutni. Ponieważ stałe elementy często unoszą się za lub przed innymi elementami na stronie, Z Index pomoże uporządkować stałe elementy nad innymi.

UWAGA: W CSS istnieje inny rodzaj pozycjonowania zwany przyklejonym. Przyklejony element pozycjonowany zachowuje się jak element pozycjonowany względnie, dopóki nie przewiniemy do jego kontenera (w pewnym momencie określonym przez najwyższą wartość). Następnie element zostaje unieruchomiony (lub przyklejony) do momentu przewinięcia przez użytkownika do końca kontenera. Jednak lepka pozycja może być nieco nieprzewidywalna, ponieważ inne czynniki mogą hamować funkcjonalność. Pozycjonowanie lepkie zostanie wbudowane w Divi w najbliższej przyszłości.

Jak ustalona pozycja „pozycjonuje” element w Divi

Jak wspomniano w przeglądzie, typ stałej pozycji jest podobny do pozycji bezwzględnej, ponieważ element wyłamuje się z normalnego przepływu dokumentu (HTML na stronie). Wyrwanie się z obiegu dokumentu oznacza, że ​​element nie pozostawi rzeczywistej przestrzeni, w której pierwotnie znajdował się na stronie. Oto ilustracja modułu, w którym pozycja względna zostaje zmieniona na pozycję stałą. Zwróć uwagę, że obszar, który pierwotnie utworzył/zajęty w kolumnie, zniknął, a moduł jest teraz naprawiony w lewym górnym rogu okna przeglądarki.

Duża różnica między stałą a bezwzględną polega na tym, że w przeciwieństwie do pozycji bezwzględnej, która odnosi się do kontenera nadrzędnego, pozycja stała odnosi się do okna przeglądarki lub rzutni. Właśnie dlatego stałe elementy mówią w widoku, gdy użytkownik przewija stronę w dół, a elementy pozycjonowane bezwzględnie mogą nie.

Oto ilustracja przedstawiająca działanie trzech pozycji (względnej, bezwzględnej i stałej) podczas przewijania strony w dół. Zwróć uwagę, że stały moduł pozostaje na swoim miejscu (umieszczony względem przeglądarki) podczas przewijania przez użytkownika.

Korzystanie z opcji stałej pozycji w Divi

W Divi możesz nadać dowolnemu elementowi stałą pozycję, wybierając opcję stałej pozycji w przełączniku grupy opcji Pozycja na karcie Zaawansowane. Znajdziesz również dodatkowe opcje stałej pozycji (lokalizacja, przesunięcia, indeks z) po wybraniu pozycji względnej.

Dostosowywanie położenia podstawy ustalonej pozycji

Po wybraniu stałej pozycji możesz wybrać lokalizację bazową za pomocą wizualnego interfejsu lokalizacji. W zależności od wybranej lokalizacji bazowej, dostępne będą nowe kontrolki Przesunięcia X i Y.

Korzystanie z przesunięć ze stałą pozycją

Kontrolki Przesunięcia w pionie i w poziomie umożliwiają dalsze dostosowanie położenia bazowego stałego elementu na jego osi lokalizacji.

Wartości Offset Origin i Offset będą ze sobą współpracować, aby umieścić nasz element w dowolnym miejscu w oknie przeglądarki. W tym przykładzie mamy moduł, który ma stałą pozycję, początek przesunięcia w lewym górnym rogu, przesunięcie pionowe 50px i przesunięcie poziome 50px. Zwróć uwagę, jak wartości przesunięcia przesuną element z dala od początku przesunięcia w poziomie i/lub w pionie (z dala od lewego górnego rogu przeglądarki).

Używając wartości przesunięcia poziomego i pionowego w Divi (takich jak właściwości góra, dół, lewo i prawo w CSS) dla stałego elementu, należy pamiętać, że te wartości pozycjonują element względem okna przeglądarki. Właściwość Z Index przydaje się również w przypadku stałego elementu. Ponieważ przez większość czasu chcesz, aby te stałe elementy znajdowały się przed innymi elementami na stronie, musisz nadać im wysoką wartość indeksu Z (np. 9999).

Użyj przeciąganych kotwic, aby zmienić położenie stałych elementów na stronie

Gdy zmienisz pozycję elementu na Stałą, po najechaniu na element pojawi się przeciągana kotwica. Pozwala to przeciągnąć element, aby zmienić jego pozycję. Gdy zmieniasz położenie elementu, jego przesunięcie X i Y jest dostosowywane w ustawieniach modułu.

Kilka wskazówek dotyczących używania stałego pozycjonowania

Dostosuj stałe elementy do urządzeń mobilnych

Nie zapomnij, że możesz ustawić różne pozycje i przesunięcia na różnych wyświetlaczach urządzeń, aby uzyskać responsywne projekty. Na przykład możesz chcieć mieć stały nagłówek na komputerze, ale nie na urządzeniu mobilnym. Stałe paski boczne mają sens na komputerze, ale nie są tak naprawdę możliwe na wyświetlaczu telefonu komórkowego. Aby dokonać zmiany, możesz dostosować opcję pozycji w Divi do Relative na tablecie i telefonie. Spowoduje to przywrócenie go do pierwotnej pozycji w przepływie dokumentu.

Stwórz miejsce na stałe elementy

Ponieważ pozycja stała umieszcza elementy poza obiegiem dokumentu, znajdują się one nad zawartością strony. Jeśli więc nie chcesz, aby stały element ukrywał zawartość, musisz stworzyć miejsce na stały element. Można to zrobić na wiele sposobów, ale zwykle jest to realizowane przez dodanie dopełnienia lub marginesu do układu strony.

Dobrym przykładem jest stały pasek boczny. Jeśli chcesz dodać stały pasek boczny do szablonu strony w Divi, musisz najpierw upewnić się, że szerokość głównego obszaru zawartości jest zmniejszona, aby utworzyć niezbędną przestrzeń dla stałego paska bocznego. Jeśli więc używasz sekcji do tworzenia paska bocznego, możesz nadać sekcji stałą pozycję, wysokość 100% i szerokość 300 pikseli.

Następnie należałoby nadać drugiej sekcji zawierającej moduł treści posta (główny obszar treści strony) lewy margines 300 pikseli, aby zmieścić szerokość paska bocznego po lewej stronie strony.

Użyj wyższego wskaźnika Z dla elementów stałych

Jeżeli stałemu elementowi nie zapewniono odpowiedniej ilości miejsca na Twojej stronie, będzie on nakładał się na inne treści na stronie. W większości przypadków będziesz chciał, aby stały element pozostał widoczny (na górze), ponieważ koliduje z innymi elementami na stronie podczas przewijania. Aby to zrobić, możesz dodać wyższy indeks Z do swojego stałego elementu, aby upewnić się, że pozostaje ponad wszelką inną zawartością w przestrzeni Z. Jeśli nie wiesz, jaką wartość podać, możesz dodać dużą liczbę, np. 9999.

6 sposobów na wykorzystanie stałej pozycji

#1 Stałe nagłówki

Jednym z najlepszych zastosowań nowych opcji stałych pozycji jest tworzenie stałych nagłówków. Korzystając z Divi Theme Builder, możesz zbudować całkowicie niestandardowy nagłówek i naprawić całą sekcję.

Jak publikować

Oto post o tym, jak zbudować stały nagłówek w Divi:

• Jak utworzyć stały nagłówek z opcjami pozycji Divi

#2 Naprawiono paski stopki

Podobnie jak w przypadku stałych nagłówków, niektóre strony internetowe korzystają również ze stałych stopek lub pasków stopki. Dzięki temu użytkownicy mogą zachować widoczne informacje na pierwszym planie w bardziej subtelnym miejscu. Stałe paski stopki świetnie nadają się do telefonów komórkowych, ponieważ są bardzo blisko kciuków, które swędzą, by kliknąć przycisk.

Posty z instrukcjami

Oto kilka postów na temat budowania stałego paska stopki w Divi:

• Jak utworzyć stały pasek stopki dla motywu Divi?
• Jak tworzyć stałe mobilne stopki w Divi
• Jak utworzyć (stały) mobilny pasek kontaktowy w Divi

#3 Naprawiono paski boczne/pionowe menu

Dzięki stałym paskom bocznym takie elementy, jak menu, zgłoszenia e-maili i wezwania do działania są łatwo dostępne dla odwiedzających podczas poruszania się po witrynie. A jeśli chcesz, możesz dodać przewijanie z przepełnieniem do stałego paska bocznego, aby mieć ładny przewijalny stały pasek boczny z mnóstwem treści.

Posty z instrukcjami

Oto post o tym, jak zbudować stały pasek boczny w Divi:

• Jak zbudować responsywny, stały pasek boczny z płynnie przewijanymi linkami zakotwiczenia w Divi
• Jak utworzyć pionowe (stałe) menu nawigacyjne dla swojej witryny Divi?

#4 Naprawiono przyciski Back-to-Top

Przyciski Back-to-Top są zwykle zamocowane w prawym dolnym rogu witryny, zawsze dostępne dla użytkowników, aby je kliknąć w celu odesłania ich z powrotem na górę strony.

Oto post na temat budowania stałych przycisków od tyłu do góry w Divi:

• Jak tworzyć niestandardowe przyklejone (naprawione) projekty Powrót do góry za pomocą Divi

#5 Stałe menu

Większość menu wysuwanych lub wyskakujących ma stałą pozycję. Świetnie nadają się również do urządzeń mobilnych.

Oto post o tym, jak zbudować stałe menu w Divi:

• Jak stworzyć responsywne wysuwane menu za pomocą kreatora motywów Divi

#6 Naprawiono pola powiadomień, wezwania do działania, zgłoszenia e-maili itp.

Oto post o tym, jak zbudować stałe okno powiadomień w Divi:

• Jak dodać zamykane wsuwane wezwanie do działania w dowolnym rogu szablonu strony w Divi

Końcowe przemyślenia

Nie zajdziesz daleko w tworzeniu stron internetowych, zanim napotkasz potrzebę użycia stałej pozycji. Znajduje zastosowanie w wielu kluczowych elementach składających się na stronę internetową. W Divi stałą pozycję dzieli tylko jedno kliknięcie, ale ważne jest, aby zrozumieć, jak to działa, aby dobrze z niej korzystać. Mamy nadzieję, że ten artykuł pomógł ci zrozumieć, jak lepiej wykorzystać ustaloną pozycję w Divi, abyś mógł wznieść swój następny projekt na nowe wyżyny.

Jakie masz doświadczenia z typem stałej pozycji?

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!