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

Na tym blogu dowiesz się o nowych możliwościach, jakie kontener Elementor flexbox zapewnia do tworzenia stron internetowych i jak korzystać z kontenera Elementor Flexbox w przewodniku krok po kroku.

Więc czytaj dalej…

Co to jest kontener Elementor Flexbox?

Kontener Elementor Flexbox przenosi wszystkie funkcje CSS Flexbox do edytora Elementor. Dzięki nowemu dodatkowi możesz łatwo tworzyć zaawansowane układy, aby strony internetowe wyglądały świetnie na wszystkich urządzeniach, niezależnie od ich rozmiaru.

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.

A jeśli chodzi o kontener flexbox Elementora, nie będziesz już musiał używać sekcji. Możesz dodawać widżety w kontenerze bez żadnej sekcji. Możesz także dodać nieskończoną liczbę kontenerów w kontenerze.

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

Pewnie zastanawiasz się, jakie są różnice pomiędzy kontenerami i sekcjami. Cóż, jest sporo różnic. Oto kilka kluczowych różnic:

• Możesz dodawaj widżety do kontenerów za pomocą Flexboksa 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 zmniejszy liczbę kolumn i sekcji wewnętrznych Elementor Flexbox. W efekcie w backendzie będzie generowanych mniej kodu. I jaess DOM spowoduje lepszą prędkość 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

Po pierwsze, będziesz potrzebować funkcji kontenera Flexbox, aby wykorzystać kontener Flexbox w Elementorze. 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 wybierz opcję Aktywny z menu rozwijanego, aby aktywować kontener Elementor Flexbox. Na koniec przewiń w dół i kliknij „Zapisz zmiany”.”, aby zapisać status.

Krok 2: Utwórz nową stronę

Po aktywowaniu elastycznego kontenera czas utworzyć nową stronę, aby móc korzystać z tej funkcji. W tym celu przejdź do Strony ⇒ Wszystkie strony i wtedy kliknij Dodaj nowy. Teraz podaj tytuł i kliknij Edytuj za pomocą Elementora

Krok 3: Dodaj kontener

Teraz zamiast sekcji musisz dodać kontener. Za to,  kliknij ikonę +, a następnie wybierz strukturę, która Ci się podoba.

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: Możesz wybrać wartość przepełnienia jako domyślną, ukrytą lub automatyczną.
• Znacznik HTML: Możesz także zmienić tag HTML kontenera. Dostajesz opcje takie jak div, nagłówek, stopka, główny, artykuł, sekcja itp. Dodano nowy tag. W ten sposób możesz zamienić ecały kontener w link ze znacznikiem.

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

Krok 4: Dodaj widżety

Proces dodawania widżetów jest taki sam, jak struktura sekcji kolumn. Musisz wyszukaj widżet, a następnie przeciągnij i upuść ikonę + każdego kontenera. Na przykład zamierzam dodać jeden nagłówek, jeden film i jedną ikonę udostępniania społecznościowego.

Krok 5: Dostosuj zawartość kontenera 

Teraz nadszedł czas, aby dostosować widżety kontenera. W tym celu edytuj kontener. Następnie przejdź do Układu na lewym panelu i rozwiń opcję Elementy. Oto opcje, którymi możesz grać:

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

Jak przekonwertować stronę Elementora opartą na sekcji na kontener Flexbox

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:

Krok 1: Wybierz sekcję, którą chcesz przekonwertować

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

Krok 2: Kliknij Konwertuj, aby dokonać konwersji

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

Krok 3: Usuń poprzednią sekcję

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

Możesz powtórzyć kroki od 1 do 3 dla wszystkich sekcji strony. Po zakończeniu konwertowania wszystkich sekcji na układ kontenera Flexbox kliknij przycisk 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.

Czy mogę używać funkcji dodatkowych Elementora z nowym kontenerem Flexbox?

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 Ponad 500 gotowych sekcji, ponad 35 gotowych stron i ponad 85 niestandardowych dodatków funkcje ułatwiające życie. Możesz z łatwością stworzyć kompletną stronę internetową korzystając z szablonu ElementsKit Premade w ciągu zaledwie kilku minut.

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

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.