Jak korzystać z kontenera Elementor Flexbox w 6 prostych krokach

Czy próbowałeś nowego  Kontener Flexbox Elementora funkcja?

Cóż, krążą plotki, że to świetny dodatek, dzięki któremu Twoja witryna będzie lepiej zoptymalizowana pod kątem wszystkich urządzeń i przyspieszy jej ładowanie.

Jak? 

Cóż, nowy elastyczny kontener działa nieco inaczej (zarówno frontend, jak i backend) niż poprzednie sekcje/sekcja wewnętrzna. I te nowe i odmienne sposoby pracy są tym, co czyni magię.

In this blog, you will learn about the new options Kontener Flexbox Elementora brings to the table to build a responsive website and follow a complete Elementor Flexbox Container tutorial to create modern layouts using flexbox elementor features.

Więc czytaj dalej…

Co to jest kontener Elementor Flexbox?

Elementora Flexbox Pojemnik brings all the CSS Flexbox facilities to your Elementor editor and helps users create advanced responsive layouts using a modern flexbox container system. With the new addition, you can easily create advanced layouts to ensure that web pages look great on all devices irrespective of size.

Notatka: Kontener CSS Flexbox, jak sama nazwa wskazuje, zapewnia zaawansowaną elastyczność w tworzeniu projektu responsywnego dla urządzenia. Przed wprowadzeniem Flexboksa tworzenie responsywnego projektu przy użyciu wielu trybów układu, takich jak Blok, Inline, Tabela i Pozycja, było dość skomplikowane. Ale dzięki kontenerom Flexbox nie potrzebujesz już wielu trybów układu.

And when it comes to the Elementor flexbox container, you won’t have to use sections anymore. You can add widgets within a container without any section. This nested container Elementor structure gives you more flexibility than traditional sections and columns.

Po dodaniu widżetów i kontenerów możesz kontrolować rozmieszczenie widżetów w kontenerze wraz z układem każdego urządzenia. Poza tym otrzymujesz osobne ustawienia dostosowywania dla każdego kontenera (nawet kontenerów w kontenerze). Zapewnia to najlepszą elastyczność, dzięki której Twoje urządzenie projektowe będzie responsywne. 

Różnica między nowymi kontenerami i sekcjami Elementor Flex

Understanding Elementor section vs container layouts is important because containers provide lighter code structure, better responsiveness, and more design flexibility compared to older sections.

. Well, there are quite a few differences. These are some key differences :

• Możesz add widgets to containers with Elementor flexbox podczas gdy w przypadku sekcji musisz dodać kolumny, a następnie dodać do nich widżety.
• w flex, szerokość widżetu jest domyślnie ustawiona w linii podczas gdy w przypadku struktury sekcji kolumnowej szerokość widgetu jest domyślnie równa pełnej szerokości.
• Wcześniej można było dodać tylko jedną sekcję wewnętrzną wewnątrz sekcji, ale z najnowsze kontenery elastyczne, możesz dodać dowolną liczbę kontenerów.
• Dzięki strukturze sekcji kolumnowych można zmienić kierunek widżetu za pomocą pozycjonowania kolumnowego lub wbudowanego. Teraz, dzięki najnowszemu kontenerowi elastycznemu, możesz zmienić kierunek widżetu za pomocą opcji Kolumna, Wiersz, Odwrócenie kolumny lub Odwrócenie wiersza.
• W strukturze sekcji kolumnowych zastosowano opcję Odwróć kolumnę lub Powiel sekcje, aby strony internetowe były responsywne. W najnowszej metodzie elastycznego kontenera możesz użyć a Niestandardowa kolejność widżetów lub kontenerów dla każdego urządzenia.
• Opcje wyrównania w strukturze sekcji/kolumny to Do lewej, Do środka i Do prawej. Z drugiej strony w przypadku kontenerów elastycznych dostępne są opcje wyrównywania, takie jak elastyczny start, elastyczny środek i elastyczny koniec.

Teraz musisz pomyśleć o tym, jakie korzyści mogą ci przynieść te zmiany. Aby dowiedzieć się więcej na ten temat, przejdź do następnej sekcji.

Zalety korzystania z kontenera Elementor Flexbox

Przed dodaniem nowej funkcji do wtyczki przeprowadza się wiele badań, aby upewnić się, że jest ona przydatna dla klientów. To samo dotyczy elastycznego pojemnika Elementor. Ten Elementora funkcja została dodana, ponieważ w dużym stopniu przyniesie ona korzyści użytkownikom.

Oto niektóre z korzyści, jakie będziesz cieszyć korzystając z kontenera flexbox Elementor:

• Ponieważ sekcja i sekcja wewnętrzna zostaną zastąpione elastycznymi kontenerami, możesz budować bardziej zoptymalizowane strony internetowe.
• Flexbox will reduce the number of Elementor Flexbox columns and inner sections. As a result, less code will be produced in the backend. And less DOM will result in better speed dla Twojej witryny WordPress.
• Ustawienia kontenera Flexbox ułatwią Ci to tworzyć strony internetowe dostosowane do urządzeń z większą elastycznością niż dotychczas.
• Teraz możesz hiperłącze do pełnej sekcji. Wcześniej można było używać tylko widżetów zawierających hiperłącza.
• Jeśli wcześniej byłeś niezadowolony, ponieważ mogłeś dodać tylko jedną wewnętrzną sekcję w sekcji, to elastyczny kontener jest dla Ciebie. Dzięki elastycznemu pojemnikowi jest to możliwe dodawać kontenery w kontenerze na czas nieokreślony.

Jak korzystać z kontenera Elementor Flexbox w 6 krokach

Wykonaj poniższe kroki, aby dowiedzieć się, jak używać kontenera Elementor Flexbox na swojej stronie internetowej, aby uzyskać bardziej zoptymalizowany wygląd. Proces składa się z 6 prostych kroków:

Krok 1: Aktywuj kontener Flexbox w eksperymentach Elementora

First, you need to enable the Elementor Flexbox Container feature to start using Elementor containers inside the editor.

Za to, przejdź do Elementora ⇒ Ustawienia z panelu WordPress. Teraz przejdź do zakładki Eksperymenty i przewiń w dół, aby znaleźć opcję „Kontener Flexbox”.

Po znalezieniu opcji choose Active from the dropdown menu to enable flexbox container elementor support on your website. Na koniec przewiń w dół i kliknij „Zapisz zmiany”.”, aby zapisać status.

Step 2: Create a New Page

After activating the flex container, it’s time to create a new page so you can use this feature. This is the starting point for any beginner following an Elementor container tutorial or learning how to use Elementor’s flexbox containers effectively.

For that, Navigate to Strony ⇒ Wszystkie strony i wtedy kliknij Dodaj nowy. Teraz podaj tytuł i kliknij Edytuj za pomocą Elementora.

Step 3: Add a Container

Now, instead of a section, you need to add container layouts using the new Elementor container flexbox system. If you are wondering how to add a container in Elementor, simply click the plus icon and select your preferred structure.

Notatka: Jeśli zauważysz strukturę w nawigatorze, przekonasz się, że struktura ta jest w rzeczywistości kontenerem, w którym znajdują się inne kontenery, a nie kolumny. Możesz również przeciągnij i upuść pojedynczy kontener z menu po lewej stronie. 

Możesz dostosować wiele opcji kontenera, takich jak

• Szerokość kontenera: Możesz wybrać szerokość kontenera jako Pudełko lub pełną szerokość.
• Szerokość: Jeśli jako szerokość kontenera wybierzesz opcję W pudełku, szerokość będzie wynosić 928 pikseli. Z drugiej strony, jeśli wybierzesz opcję Pełna szerokość, szerokość kontenera będzie wynosić 100% szerokości rzutni. Można jednak zmienić obie wartości szerokości.
• Przelewowy: You can choose overflow value as Default, hidden, or auto. Advanced users often use Elementor container overflow hidden settings to improve animation and scrolling effects.
• Znacznik HTML: You can also create an Elementor container link by assigning clickable HTML tags. You get options such as div, header, footer, main, article, section, etc. There is a new addition of a tag.

Notatka:  Wiele opcji znajdziesz także w „Przedmiotach” (więcej o tym później). Co więcej, możesz dostosuj wszystkie powyższe ustawienia dla każdego pojemnika wewnętrznego również.

Step 4: Add Widgets

Proces dodawania widżetów jest taki sam, jak struktura sekcji kolumn. Musisz search for the widget then and drag widgets directly into the Elementor-widget-container area inside each container. This makes Elementor widget container management easier compared to older section-based layouts.

For example, I am going to add one heading, one video, and one social share icon.

Step 5: Customize Container Contents 

The Flexbox controls are the core of Flexbox WordPress layouts inside Elementor. For this, edit the container. Then, go to Layout on the left panel and expand the Items option. Here are the options you get to play with:

• Wskazówki: Domyślnym kierunkiem jest wiersz. Dostępne są jednak cztery opcje, takie jak Wiersz, Kolumna, Odwrócony wiersz i Odwrócona kolumna. Jeśli wybierzesz kolumnę lub kolumnę odwróconą, wszystkie kontenery w głównym kontenerze będą wyświetlane jako różne kolumny Flexbox Elementora.

Uwaga: jeśli wybierzesz kolumnę, musisz dostosować szerokość pojemników wewnętrznych.

• Wyrównaj kontenery: Można ustawić wyrównanie jako Flex Start, Center, Flex-End i Scratch. Flex zaczyna umieszczać element kontenera od punktu początkowegot, a dzięki wartości środkowej Flex możesz umieścić elementy na środku. Z drugiej strony, z końcówką Flex możesz wyświetlić wszystkie wewnętrzne pojemniki na dole. Dzięki opcji rozciągania pojemniki wewnętrzne zajmą dodatkową przestrzeń, jeśli zostaną przydzielone. Wszystko to będzie miało zastosowanie, jeśli wybierzesz kierunek jako rząd.

Z drugiej strony, jeśli wybierzesz kierunek jako kolumna, wówczas wartości flex-start i center będą działać tak samo jak wiersz. Ale z flex-end, pojemniki zostaną przesunięte w prawo i z zarysowaniem, zajmie dowolne miejsce po lewej stronie.

• Wyrównaj treść:  Masz sześć możliwości uzasadnienia treści: elastyczny początek, środek, elastyczny koniec, odstęp pomiędzy, odstęp wokół i odstęp równomiernie. Odstęp pomiędzy doda tę samą przestrzeń pomiędzy każdym z elementów. Nie spowoduje to jednak dodania żadnej przestrzeni na górze ani na dole elementów.

Opcja „przestrzeń wokół” doda przestrzeń zarówno na górze, jak i na dole każdego pojemnika. Opcja równomiernego odstępu doda tę samą przestrzeń wokół wszystkich widżetów i pojemników wewnętrznych.

• Luka elementów:  Możesz użyć tej opcji, aby dodać odstępy pomiędzy elementami (widżetami i sekcjami wewnętrznymi).

• Zawinąć: Wybierać Bez owinięcia położyć wszystkie elementy w jednej linii I Zawiń, aby zawartość płynęła w wielu liniach.

Krok 6: Opublikuj i wyświetl podgląd

Możesz powtórzyć krok 4, aby dostosować wszystkie ustawienia kontenera. Po zakończeniu dostosowywania kliknij przycisk publikowania, aby opublikować stronę. Następnie możesz kliknąć przycisk podglądu, aby zobaczyć swoją stronę z nową elastyczną strukturą kontenera.

How to Convert Section-based Elementor Page to Flexbox Container

Konwersja struktury opartej na sekcjach/kolumnach do nowego kontenera Elementor Flex jest niezwykle łatwa. Możesz to zrobić, wykonując 4 proste kroki pokazane poniżej:

Step 1: Select the Section you Want to Convert

Musisz przekonwertować każdą sekcję osobno. Najpierw wybierz sekcję, którą chcesz przekonwertować. Możesz kliknij sześć kropek aby wybrać sekcję lub wybierz sekcję z nawigatora (opcję znajdziesz w lewym dolnym rogu).

Step 2: Click on Convert to Make the Conversion

Teraz, aby przekonwertować, na lewym panelu znajdziesz plik Opcja Konwertuj na kontener pod układem. Kliknij na KONWERTOWAĆ przycisk.

Step 3: Delete the Previous Section

Po zakończeniu procesu konwersji znajdziesz dwie wersje tej samej sekcji. Jeden jest oparty na sekcjach, a drugi na kontenerach. Wersja na górze jest oparta na sekcjach. Usuń poprzednią/oryginalną wersję.

Krok 4: Aktualizacja i podgląd

You can repeat steps 1 to step 3 for all the sections of your page. Once you are done with converting all the sections into WordPress Flexbox container layout, click on the przycisk aktualizacji, aby zapisać. Teraz możesz kliknąć przycisk podglądu, aby zobaczyć tę samą stronę, ale z układem kontenera.

Czy możesz utworzyć poziomy i pionowy kontener Flexbox w Elementorze?

Tak, Elementor obsługuje tworzenie poziomych i pionowych kontenerów flexbox w mniej niż kilka sekund. Wystarczy wybrać sześć kropek kontenera Elementora i wybrać kierunek poziomy lub pionowy z karty układu. W ten sposób możesz bez problemu stworzyć swój pojemnik Flexbox.

Can You Use Elementor Add-on Features with the New Flexbox Container?

Tak. Absolutnie możesz. 

Możesz użyć ElementsKit – najlepszy dodatek do Elementora aby dodać dodatkowe widżety i inne funkcje do narzędzia do tworzenia stron Elementor. tego Elementora dodatek Jest 100% kompatybilny z nowym pojemnikiem Flexbox firmy Elementor.

Możesz użyć tego samego procesu konwersji dowolnej sekcji Elementora na układ kontenera (pokazanego w powyższej sekcji), aby przekonwertować sekcje/strony Elementora. 

W zestawie ElementsKit 90+ advanced widgets, 20+ modules, and 1,000+ professional templates. It extends the Elementor page builder with multilevel mega menus, custom headers & footers, versatile content elements, and trendy animations like liquid glass Lub paralaksa to build powerful WordPress websites. You can easily stworzyć kompletną stronę internetową using the ElementsKit premade template in just a few minutes.

Oto przykład, jak płynnie można zobaczyć, jak gotowe strony ElementsKit są konwertowane do kontenera Elementor Flexbox.

Często zadawane pytania

What is the difference between flexbox vs grid Elementor layouts?

Flexbox is a one-direction layout that allows you arrange items in a row or column. Whereas, Elementor grid is a two-dimentional layout where you can arrange items both in columns or rows at the same time.

Why Elementor flexbox container not showing?

Elementor flexbox container might not show due to plugin conflict, browser cache, outdated Elementor version, disabled flexbox container, etc. So, if you encounter such error, check and resolve the issue related to it.

How to reduce space between container in Elementor?

You can reduce space between Elementor container by adjusting padding and margin settings. Besides, you can also edit column gaps and container layout controls to reduce space between containers in Elementor.

Zakończyć

Jestem pewien, że teraz zdajesz sobie sprawę, dlaczego jest tak wiele wokół tego nowego dodatku do Elementora. Kontener Elementor Flex jest prawdziwym błogosławieństwem dla wszystkich twórców witryn WordPress, którzy szukali sposobów na tworzenie witryn internetowych bardziej zoptymalizowany, szybciej i responsywny niezależnie od wielkości urządzenia.

A wisienką na torcie jest to, że możesz w mgnieniu oka zamienić swoją wcześniej utworzoną witrynę internetową w witrynę zoptymalizowaną pod kątem kontenera. Jednak elastyczny kontener jest nadal w trybie eksperymentalnym. Dlatego nie zaleca się używania go w działającej witrynie internetowej, dopóki nie zostanie opublikowany jako aktywna funkcja

Do tego czasu możesz swobodnie bawić się elastycznym kontenerem Elementor w swojej witrynie testowej. I wypróbuj Zestaw elementów aby uzyskać większą elastyczność w projektowaniu niesamowicie wyglądającej witryny internetowej, która przyciągnie uwagę klienta i zwiększy sukces Twojej witryny.