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ć?

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ł.

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
  • End- ustawia wszystkie ikony w prawo
  • 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 także 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 oto. 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ąć, a następnie 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.

Ahmad

Zobacz komentarze

  • Gdzie znaleźć te opcje? Oni nie istnieją. Czy to dotyczy Premium Elementora? Jeśli tak, powinieneś wspomnieć o tym w swoim artykule, aby ludzie nie tracili czasu na jego przeczytanie.

  • Hola,

    Graj w Elementor Pro. Quiero poner dos banners, uno pegado a la izquierda y otro pegado a la derecha de la pantalla. Para ello on creado:
    - una seccion para cada banner.
    - un encabezado con una frase, a la cual on puesto de fondo una imagen.

    Una de ella deberia ir pegada a la derecha de la pantalla (margen izquierda 0 imagino). Algun consejo? Dziękuję bardzo!

  • Cześć, pierwszą rzeczą, na którą zwróciłbym uwagę, byłoby ustawienie wyrównania kolumny w pionie opisane w pierwszej części tego posta.
    Dzięki,

  • Buongiorno, tutto chiaro, grazie! Ma mi stavo domandando se è possibile inserire tre righe (con tre pulsanti uno sotto l'altro) nella stessa colonna.
    Cerco di spiegarmi meglio: vorrei splitre una sezione in due colonne. W Quella di sinistra metterei la foto di una cover, e nella colonna di sinistra vorrei mettere tre pulsanti (uno sopra l'altro), równoodległe i centralne rispetto alla colonna di sinistra, che rimandano ai tre modelli di smartfon dla jakości jest dostępny okładka na zdjęciu.
    Sto cercando ovunque, ma non trovo nulla che indichi che si possa fare.
    Sono aperta a wszystkie sugestie
    Grazie

  • Scusate, ho appena capito come fare (l'ho capito per errore). Scusate il zakłócenia i grazie lo stesso

    • Cześć, OK, świetnie, jasne, że to możliwe, możesz nawet wyśrodkować w pionie zawartość każdej kolumny

  • Yo tengo un problema con la alineación que no logro Solventar. El content se queda un lado, la imagen, titulo y texto. No logro centralo (solo hay una kolumny pero es como si la mitad o más no se pudieran usar, ni poner otro cuadro de texto) No me había pasado nunca y no se que más probar. Ha sido al editar para tamaño móvil, se ha quedado así un lado todo cuando cambio a escritorio! Alguien sabe que puede ser? On probado todo lo que pone en el artículo y parece que nada funciona 🤗

    • Witaj, myślę, że musisz zacząć od sprawdzenia wszystkich wyrównań w sekcjach, następnie kolumnach i bloku treści. Możliwe jest również, że CSS Twojego motywu zacznie odgrywać rolę w tym dostosowaniu.

  • smacznego!
    je m'arrache les cheveux car je n'arrive pas à aimer 3 colones à l'horizontale. Sur le brouillon elles paraissent toutes parfaitement Alignées, mais lorsque je prévisualise les modifs, les colonnes se retrouvent toutes imbriquées et de différentes tailles (largeurs et hauteur) sur le côté gauche de l'écran.
    je voudrais qu'elles fassent toutes la même taille et qu'elles soient wyrównanie parfaitement. Komentarz sprawiedliwy?

  • Hola, tengo instalado elementor pro pero cuando agrego una nueva sección no aparecen las opciones de alineación poziomo i alineación pionowo. Czy chcesz zainstalować dodatkowe uzupełnienie?
    Gracie

  • Hola, tengo la wersja pro de elementor y no figura ninguna de las opciones que indicas, que puede ser?

  • Cześć,

    Ich habe im stopka zawiera widżety. das oberste ist immer eine headline, darunter stichpunkte. da ich nicht zwei unterschiedliche textarten in einen kasten schreiben kann (h4 i p) muss ich das w 2 sekcjach machen. czy możesz ich nun den abstand der wordpress sekcje zueinander verringern? to jest nagłówek i tekst einfach zu viel platz.

    danke für eure hilfe

    • Cześć, istnieje kilka opcji moderowania odstępów między tekstami: może to być margines lub dopełnienie sekcji, kolumny lub widżetu LUB może to być opcja czcionki, np. wysokość linii.

Ostatnie posty

Jak używać nagłówków i stopek w Elementorze

Nagłówki i stopki witryny internetowej są niezbędnymi elementami. W większości przypadków nagłówek zapewnia nawigację…

6 stycznia 2022 r

Porównanie motywów WordPress: Astra vs OceanWP

Dwa najpopularniejsze motywy WordPress na rynku to Astra i OceanWP. Profesjonalny…

2 stycznia 2022 r

Porównanie motywów wiadomości WordPress: Gazeta kontra Astra

Stworzenie doskonałej witryny z wiadomościami nie wymaga zostania projektantem stron internetowych. My…

25 października 2021 r

Utwórz witrynę internetową związaną z wiadomościami za pomocą motywu gazety

Motyw gazety jest jednym z najważniejszych motywów WordPress zaprojektowanych przez tagDiv, firmę…

18 października 2021 r

Jak zbudować eCommerce za pomocą kreatora Avada WooCommerce

Jeśli chodzi o konfigurację sklepu internetowego, WooCommerce jest najczęściej wybieraną plugin . To…

4 października 2021 r

Jak używać lepkiego nagłówka i efektów przewijania w Elementorze

Nagłówek jest zazwyczaj pierwszą rzeczą, którą widzi osoba odwiedzająca Twoją witrynę…

21 września 2021 r