Jak wyrównać sekcje Elementor i kolumny

Podczas pracy z Elementorem zauważysz, że niestandardowe pozycjonowanie sekcji i kolumn jest nieco trudne. Musisz wyrównać kolumny i sekcje w pionie i poziomie, aby uzyskać responsywny układ „od rozciągnięcia do wypełnienia”. Bez tego wyrównania elementy kolumn o różnej wysokości nie będą dostosowywane na ekranie.

• Dlaczego musimy się wyrównać?
• Jak działają kolumny lub sekcje dla elastycznego projektu?
• Jak wyrównać sekcje i kolumny Elementora?
• Aby rozwiązać problemy z elastyczną szerokością, użyj opcji Przepełnienie ukrytej
• Dbanie o pozycjonowanie
• Jednostki względne
• Kontroluj głębokość każdego elementu za pomocą Z-Index
• Sztuczka o zduplikowanej funkcjonalności
• Przesunięcia
• Złota zasada
• Wniosek

Dlaczego musimy się wyrównać?

W każdej kolumnie lub sekcji treść może należeć do różnych kategorii. Może mieć postać zdjęć, tekstu i ocen. Aby uzyskać złożony wygląd, zaleca się, aby wygląd treści był jednolity. Nie powinno się go tam tak po prostu wrzucać - wyrzucać - tylko dla cholernej zabawy.

Przy dobrym wyrównaniu możesz sprawić, że strona będzie wyglądać bardziej schludnie i elegancko - tak, aby nie wyglądała na zagraconą. Dzięki opcji wyrównania można dopasować kilka widżetów o różnych rozmiarach obok siebie w tej samej kolumnie.

Jak działają kolumny lub sekcje dla elastycznego projektu?

Elementor 2.5 umożliwia niestandardowe pozycjonowanie projektu i treści. Dzięki nowej funkcji niestandardowego pozycjonowania możesz przenosić widżety w dowolne miejsce. Ale tak naprawdę nie możesz tego zrobić poza pewną sekcją. Te widżety odnoszą się do kolumny, w której się znajdują. Może to powodować problemy z responsywnością projektu.

Załóżmy, że masz układ trzech kolumn. Za pomocą niestandardowego pozycjonowania możesz przeciągać i upuszczać widżet z prawej kolumny do środkowej kolumny lub dowolnie.

Ale zrobienie tego przyniesie korzyści tylko użytkownikom pulpitu, ponieważ będzie im to wyglądać OK. Będzie to jednak powodować problem, jeśli dostęp do strony będzie możliwy z urządzenia mobilnego, ponieważ Elementor ustawia kolumny pionowo na urządzeniu mobilnym.

Zamiast trzech kolumn obok siebie, możesz spotkać wszystkie trzy kolumny ułożone jedna na drugiej. Element nie będzie już pojawiał się w środkowej kolumnie, jak na komputerach stacjonarnych.

Chociaż możesz inteligentnie dostosować widok mobilny z ukrytym ustawieniem, ale nie ma gwarancji, że większość ludzi go znajdzie. Dlaczego więc denerwować użytkowników? Odpowiednie rozwiązanie sprawia, że ​​projekt jest elastyczny i elastyczny. Aby nigdzie się nie zawiesił.

W tym celu należy zwrócić uwagę na relację widżetu do kolumny, w której się on znajduje.

Jak wyrównać sekcje i kolumny Elementora?

Dla każdej sekcji / kolumny wyląduj w sekcji układu i ustaw następujące opcje wyrównania zgodnie z własnymi wymaganiami:

• Wyrównanie w pionie: możesz wybrać ustawienia widżetów z następujących. Ale jedną rzeczą, o której należy pamiętać, jest to, że zawartość kolumny nie może być wyrównana z pierwszymi trzema kolumnowymi opcjami pionowymi, tj. Górą, środkiem i dolnym.
• Top
• Środkowy
• Dolny

W związku z tym istnieją ^* trzy nowe opcje, które sprawiają, że dopasowanie treści do własnych upodobań jest naprawdę wygodne.

• ^*Odstęp między - ustawia odstępy między widżetami na początku i na końcu na krawędzi kolumny. Widżety są równo rozmieszczone, tzn. Jest między nimi równa przestrzeń.
• ^*Space Around - odstęp między widżetami jest równy, a krawędzie są o połowę mniejsze niż odstępy między widżetami.
• ^*Space Równomiernie - odstęp między widżetami jest jednolity - jest równy między nimi, przed nimi i po nich.

• Wyrównaj w poziomie: dzięki tej opcji możesz wykonywać pozycjonowanie w wierszu i wyrównywać widżety wbudowane, które znajdują się w tym samym wierszu, w poziomie. Możesz wyrównać zawartość kolumn w poziomie, korzystając z następujących opcji:
• Start - wyrównuje wszystkie ikony w lewo
• Środek: umieszcza ikony na środku kolumny
• End - ustawia wszystkie ikony po prawej stronie
• Space Between - przestrzeń między widżetami na początku i na końcu na krawędzi kolumny. Widżety są rozmieszczone w równych odstępach, tj. Między nimi jest równa przestrzeń
• Przestrzeń wokół - przestrzeń między widżetami jest równa, a krawędzie są o połowę mniejsze od przestrzeni między widżetami
• Spacja równomiernie - przestrzeń między widżetami jest jednolita - jest równa między, przed i po nich

Aby rozwiązać problemy z elastyczną szerokością, użyj opcji Przepełnienie ukrytej

Jeśli chodzi o wygląd witryny na urządzeniach mobilnych, istnieje duże prawdopodobieństwo, że możesz napotkać problem polegający na tym, że widżet z niestandardowym pozycjonowaniem przepełnia szerokość kolumny.  

Powoduje to naprawdę frustrującą sytuację dla użytkowników mobilnych, którzy mogą przewijać w poziomie. I nie jest to coś, czego chciałeś dla swojej witryny. Można to naprawić poprzez:

Ustawienia układu > Ustaw opcję Przepełnienie Ukryty

W ten sposób przekroczony obszar zostanie odcięty i nie będzie potrzeby przewijania w poziomie

Dbanie o pozycjonowanie

Musisz także zadbać o pozycjonowanie kolumn. Możesz ustawić niestandardowe pozycjonowanie za pomocą Elementora 2.5 — bezwzględnego i stałego.

Pozycjonowanie bezwzględne to pozycjonowanie elementu względem sekcji lub kolumny, w której się znajdujesz. Tak więc, jeśli użyjesz pozycjonowania bezwzględnego do elementu lub sekcji, ta sekcja nie będzie się przesuwać wzdłuż okna gościa.

Pozycja stała różni się od pozycji bezwzględnej, ponieważ pozwala sekcji / elementowi pozostać nieruchomym w punkcie widzenia gościa. Jeśli więc użytkownik przewinie stronę, element tam pozostanie.

Jednostki względne

Projektując swoją stronę internetową, zauważysz, że istnieje wiele sposobów umieszczania elementów. W przypadku pozycjonowania bezwzględnego dobrym pomysłem jest użycie jednostek względnych, ponieważ sprawi, że responsywny projekt będzie bardziej funkcjonalny, jeśli chodzi o różne rozmiary ekranu.

Względna jednostka dostosowuje się na podstawie względnej szerokości i wysokości ekranu, umożliwiając tym samym zmianę rozmiaru elementów lub sekcji i lepszą responsywność. Jeśli zdecydujesz się używać pikseli, musisz utworzyć wiele responsywnych sekcji dla różnych rozmiarów ekranu.

Kontroluj głębokość każdego elementu za pomocą Z-Index

Jeśli zamierzasz korzystać z pozycjonowania „bezwzględnego” lub „stałego” dla widżetów, będzie wiele sytuacji, w których dwa lub więcej widżetów może się nakładać, tj. Są ułożone „jeden na drugim”. Możesz tego uniknąć, używając normalnego ustawienia indeksu Z. Umożliwi to kontrolowanie głębokości i pozwoli wybrać, które widżety pojawią się na pierwszym planie.

Sztuczka o zduplikowanej funkcjonalności

Jeśli używasz prawego przycisku myszy do duplikowania elementu z niestandardowym pozycjonowaniem, może wyglądać, że kliknięcie prawym przyciskiem nie zadziałało.

Ale oto. To nieprawda. Funkcja duplikowania działała doskonale i zduplikowała element. Chodzi o to, że ponieważ każdy element ma dokładnie to samo niestandardowe położenie, zduplikowany element jest ułożony DOKŁADNIE na innym elemencie (co sprawia wrażenie, że nie został utworzony żaden duplikat).

Mówiąc prościej, jeśli pomyślnie utworzysz jedną kolumnę, możesz ją zduplikować w razie potrzeby. Upewnij się również, że utworzone kolumny nie używają niestandardowego pozycjonowania. Jeśli tak, to powielanie nie będzie działać z opcją prawego przycisku myszy. Możesz jednak użyć funkcji duplikatu, aby obejść to ograniczenie i skopiować kolumnę.

Przeciągnij trochę górny element, a odsłoni on drugi. Oba elementy są tam bardzo duże. Ponadto, gdy zduplikujesz jedną kolumnę, zostanie ona nałożona na starą. Możesz się pomylić. Ale nie martw się, możesz go po prostu przeciągnąć, a następnie użyć w projekcie swojej strony internetowej.

Przesunięcia

Są przypadki, w których musisz ustawić przesunięcia w treści strony internetowej. Dzięki Elementorowi możesz łatwo ustawić przesunięcie. Tak więc, jeśli ustawisz przesunięcie o 500 pikseli od lewej, wokół zawartości pozostanie przestrzeń na podstawie wprowadzonych danych. Podobnie możesz również ustawić przesunięcie po prawej stronie. Dobrą praktyką jest ustawienie zarówno lewego, jak i prawego przesunięcia na podobną wartość, ponieważ zawartość będzie odpowiednio wyrównana na ekranie.

Są przypadki, w których musisz ustawić przesunięcia w treści strony internetowej. Dzięki Elementorowi możesz łatwo ustawić przesunięcie. Tak więc, jeśli ustawisz przesunięcie o 500 pikseli od lewej, wokół zawartości pozostanie przestrzeń na podstawie wprowadzonych danych. Podobnie możesz również ustawić przesunięcie po prawej stronie. Dobrą praktyką jest ustawienie zarówno lewego, jak i prawego przesunięcia na podobną wartość, ponieważ zawartość będzie odpowiednio wyrównana na ekranie.

Złota zasada

Aby uzyskać lepszą responsywność, użyj jednostek względnych. Dzieje się tak, ponieważ pozycjonowanie bezwzględne może być trudne, gdy dostęp do witryny jest uzyskiwany z innej platformy. Użycie jednostek względnych do projektowania sekcji zapewni bardziej responsywny projekt. Zmianę szerokości można doskonale obsłużyć za pomocą jednostek względnych. Przez „względne” rozumiemy zmienne jednostki, takie jak procent lub szerokość widoku (VW), zamiast ustalania jednostek, takich jak piksele.

Wniosek

Elementor to super przyjazny dla użytkownika program do tworzenia stron internetowych. Czasami może to stanowić wyzwanie w wyświetlaniu strony internetowej, jeśli strona jest otwierana z telefonu komórkowego lub tabletu. Dzięki wyrównywaniu sekcji i kolumn możesz z łatwością tworzyć doskonałe strony internetowe.