Jak wyrównać sekcje i kolumny Elementora

Pracując z Elementorem , zauważysz, że niestandardowe ustawienie sekcji i kolumn jest nieco trudne. Aby uzyskać responsywny układ „rozciągnij do wypełnienia”, musisz wyrównać kolumny i sekcje w pionie i poziomie. Bez tego wyrównania elementy kolumn o różnej wysokości nie będą dopasowywane na ekranie.

• Dlaczego musimy się dostosować?
• Jak działają kolumny lub sekcje w projekcie responsywnym?
• Jak wyrównać sekcje i kolumny Elementora?
• Aby naprawić problemy z szerokością responsywną, użyj ukrytego przepełnienia
• Dbanie o pozycjonowanie
• Jednostki względne
• Kontroluj głębokość każdego elementu za pomocą indeksu Z
• Sztuczka dotycząca powielania funkcjonalności
• Przesunięcia
• Złota zasada
• Wniosek

Dlaczego musimy się dostosować?

W każdej kolumnie lub sekcji treść może należeć do różnych kategorii. Może mieć formę zdjęć, tekstu i ocen. Aby uzyskać spójny wygląd, zaleca się ujednolicenie wyglądu treści. Nie należy go tam tak po prostu wrzucać – porzucać – tak po prostu, do cholery.

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

Jak działają kolumny lub sekcje w projekcie responsywnym?

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żna tego zrobić poza określoną sekcją. Te widżety są powiązane z kolumną, w której się znajdują. Może to powodować problemy z responsywnością projektu.

Załóżmy, że masz układ z trzema kolumnami. Za pomocą niestandardowego pozycjonowania możesz przeciągnąć i upuścić widżet z prawej kolumny do środkowej kolumny lub jakkolwiek chcesz.

Ale takie działanie przyniesie korzyści tylko osobom odwiedzającym komputery stacjonarne, ponieważ będzie to dla nich wyglądało OK. Będzie to jednak powodować problem, jeśli dostęp do witryny będzie możliwy z telefonu komórkowego, ponieważ Elementor układa kolumny pionowo na urządzeniu mobilnym.

Zamiast więc mieć trzy kolumny obok siebie, możesz zobaczyć, że wszystkie trzy kolumny są ułożone jedna na drugiej. Element nie będzie już wyświetlany w środkowej kolumnie, tak jak ma to miejsce na komputerach stacjonarnych.

Chociaż możesz sprytnie dostosować widok mobilny za pomocą ukrytego ustawienia, ale nie ma gwarancji, że większość ludzi go znajdzie. Po co więc frustrować użytkowników? Zapewnienie responsywności i możliwości dostosowania projektu jest właściwym rozwiązaniem. Żeby się nigdzie nie rozbiło.

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

Jak wyrównać sekcje i kolumny Elementora?

Dla każdej sekcji/kolumny przejdź do sekcji układu i ustaw następujące opcje wyrównania zgodnie ze swoimi wymaganiami:

• Wyrównanie w pionie: możesz wybrać ustawienia widżetów spośród poniższych. Należy jednak pamiętać o jednej rzeczy: zawartości kolumny nie można wyrównać z trzema pierwszymi opcjami pionowymi kolumny, tj. górą, środkiem i dołem.
• Szczyt
• Środek
• Spód

W związku z tym dostępne są ^* trzy nowe opcje, dzięki którym naprawdę wygodnie będzie dopasować treść według własnych upodobań.

• ^*Odstęp pomiędzy – ustawia odstęp pomiędzy widżetami na początku i na końcu przy krawędzi kolumny. Widżety są rozmieszczone w równych odstępach, tj. pomiędzy nimi jest równa przestrzeń.
• ^*Przestrzeń wokół – odstęp pomiędzy widżetami jest równy, a krawędzie są o połowę mniejsze od odstępu pomiędzy widżetami.
• ^*Space Evenly – odstęp pomiędzy widżetami jest jednolity – jest taki sam pomiędzy nimi, przed nimi i po nich.

• Wyrównanie w poziomie: dzięki tej opcji możesz wykonać pozycjonowanie inline i wyrównać w poziomie widżety inline, które znajdują się w tym samym rzędzie. Możesz wyrównać zawartość kolumn w poziomie, korzystając z następujących opcji:
• Start – wyrównuje wszystkie ikony do lewej
• Środek: umieszcza ikony na środku kolumny
• Kończy ustawianie wszystkich ikon po prawej stronie
• Odstęp pomiędzy – odstęp pomiędzy widżetami na początku i na końcu na krawędzi kolumny. Widżety są rozmieszczone w równych odstępach, tj. pomiędzy nimi jest równa przestrzeń
• Przestrzeń wokół – odstęp pomiędzy widżetami jest równy, a krawędzie są o połowę mniejsze od odstępu pomiędzy widżetami
• Space Evenly – odstęp pomiędzy widżetami jest jednolity – jest taki sam pomiędzy nimi, przed nimi i po nich

Aby naprawić problemy z szerokością responsywną, użyj ukrytego przepełnienia

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 przekracza 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 Przepełnienie na Ukryta

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

Dbanie o pozycjonowanie

Należy również zadbać o ustawienie kolumn. Za pomocą Elementora 2.5 możesz ustawić niestandardowe pozycjonowanie — bezwzględne i stałe.

Pozycjonowanie absolutne to położenie elementu względem sekcji lub kolumny, w której się znajdujesz. Jeśli więc zastosujesz pozycjonowanie bezwzględne elementu lub sekcji, sekcja ta nie będzie przesuwać się wzdłuż okna odwiedzającego.

Pozycja stała różni się od pozycji bezwzględnej, ponieważ pozwala sekcji/elementowi pozostać nieruchomą z punktu widzenia odwiedzającego. Jeśli więc użytkownik przewinie stronę, element tam pozostanie.

Jednostki względne

Podczas projektowania strony internetowej przekonasz się, że istnieje wiele sposobów pozycjonowania elementów. W przypadku pozycjonowania bezwzględnego dobrym pomysłem jest użycie jednostek względnych, ponieważ dzięki temu responsywny projekt będzie bardziej funkcjonalny, jeśli chodzi o różne rozmiary ekranu.

Jednostka względna dostosowuje się sama w oparciu o względną szerokość i wysokość ekranu, umożliwiając w ten sposób zmianę rozmiaru elementów lub sekcji i lepszą responsywność projektu. Jeśli zdecydujesz się na użycie pikseli, musisz utworzyć wiele responsywnych sekcji dla różnych rozmiarów ekranu.

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

Jeśli zamierzasz używać „bezwzględnego” lub „stałego” pozycjonowania widżetów, będzie wiele sytuacji, w których dwa lub więcej widżetów może nakładać się na siebie, tj. są one ułożone „nad sobą”. Można tego uniknąć, stosując normalne ustawienie indeksu Z. Umożliwi to kontrolę głębi i pozwoli wybrać, które widżety mają pojawiać się na pierwszym planie.

Sztuczka dotycząca powielania funkcjonalności

Jeśli używasz kliknięcia prawym przyciskiem myszy do powielenia elementu z niestandardowym położeniem, może się wydawać, że kliknięcie prawym przyciskiem myszy nie zadziałało.

Ale poczekaj. To nieprawda. Zduplikowana funkcja działała doskonale i zduplikowała element. Tyle, że ponieważ każdy element ma dokładnie takie samo niestandardowe położenie, zduplikowany element jest ułożony DOKŁADNIE na drugim elemencie (sprawiając wrażenie, że nie utworzono żadnego duplikatu).

Krótko mówiąc, jeśli pomyślnie utworzysz jedną kolumnę, możesz ją zduplikować, jeśli zajdzie taka potrzeba. Upewnij się także, że tworzone kolumny nie korzystają z niestandardowego pozycjonowania. Jeśli tak, kopiowanie nie będzie działać w przypadku opcji kliknięcia prawym przyciskiem myszy. Można jednak użyć funkcji duplikowania, aby ominąć ograniczenie i skopiować kolumnę.

Przeciągnij nieco górny element, a odsłoni się drugi. Obydwa elementy są bardzo obecne. Ponadto, gdy zduplikujesz jedną kolumnę, będzie ona układana na starej. Możesz się zdezorientować. Ale nie martw się, możesz go po prostu przeciągnąć i użyć w projekcie swojej strony internetowej.

Przesunięcia

W niektórych przypadkach konieczne jest ustawienie przesunięć w treści strony internetowej. Dzięki Elementorowi możesz łatwo ustawić przesunięcie. Jeśli więc ustawisz przesunięcie o 500 pikseli od lewej strony, wokół treści zostanie pozostawiona przestrzeń w oparciu o wprowadzone dane. Podobnie możesz ustawić przesunięcie po prawej stronie. Dobrą praktyką jest ustawienie zarówno lewego, jak i prawego przesunięcia o podobnej wartości, ponieważ zawartość będzie prawidłowo wyrównana na ekranie.

W niektórych przypadkach konieczne jest ustawienie przesunięć w treści strony internetowej. Dzięki Elementorowi możesz łatwo ustawić przesunięcie. Jeśli więc ustawisz przesunięcie o 500 pikseli od lewej strony, wokół treści zostanie pozostawiona przestrzeń w oparciu o wprowadzone dane. Podobnie możesz ustawić przesunięcie po prawej stronie. Dobrą praktyką jest ustawienie zarówno lewego, jak i prawego przesunięcia o podobnej wartości, ponieważ zawartość będzie prawidłowo wyrównana na ekranie.

Złota zasada

Aby projekt był lepiej responsywny, użyj jednostek względnych. Dzieje się tak dlatego, że pozycjonowanie bezwzględne może być trudne, gdy dostęp do witryny odbywa się z innej platformy. Używanie jednostek względnych do projektowania sekcji spowoduje, że projekt będzie bardziej responsywny. Zmiana szerokości może być doskonale obsługiwana za pomocą jednostek względnych. Przez „względne” rozumiemy zmianę jednostek, takich jak procent lub szerokość widoku (VW), a nie stałe jednostki, takie jak piksele.

Wniosek

Elementor to niezwykle przyjazny dla użytkownika kreator stron internetowych. Czasami może to powodować problemy w wyświetlaniu witryny, jeśli dostęp do niej odbywa się z telefonu komórkowego lub tabletu. Za pomocą wyrównania sekcji i kolumn możesz z łatwością udoskonalić swoje witryny internetowe.