Jak pionowo dostosować się do systemu układu FlexBox Divi 5

Tworzenie wizualnie zrównoważonych i responsywnych układów jest niezbędne w nowoczesnym projektowaniu stron internetowych, a nowy system układu Flexboxa Divi 5 ułatwia osiągnięcie wyrównania pionowego. Ta potężna nowa funkcja pozwala użytkownikom Divi projektować elastyczne, dynamiczne układy, oferując pełną kontrolę nad pozycjonowaniem pionowym. Niezależnie od tego, czy wyrównuje tekst w sekcji, równoważenie treści w rzędach wielu kolumnowych, czy tworzenie responsywnych projektów, Divi 5 upraszcza proces intuicyjnymi elementami sterującymi wbudowanymi bezpośrednio w wizualny konstruktor.

W tym poście przeprowadzimy Cię przez kroki w celu opanowania pionowego wyrównania, dostarczenia rzeczywistych przykładów i oferowanie wskazówek dotyczących tworzenia responsywnych, dopracowanych układów. Zbadajmy, w jaki sposób system układu FlexBox Divi 5 może przekształcić twoje podejście do pionowego wyrównania.

Zrozumienie systemu układu Flexbox Divi 5

Flexbox lub elastyczny układ skrzynki to model układu CSS zaprojektowany w celu uproszczenia układu elementów w pojemniku, co czyni go idealnym do wyrównania poziomego i pionowego. W przeciwieństwie do tradycyjnych metod, takich jak pływaki lub margines, FlexBox zapewnia proste podejście do organizowania treści. Umożliwia elementom dynamiczne dostosowywanie ich rozmiaru, zamówienia i wyrównania na podstawie wymiarów kontenera i rzutni, zapewniając spójne i reagujące układy na wszystkich rozmiarach ekranu.

Dzięki FlexBox możesz bez wysiłku centrować treści, równomiernie dystrybuować przestrzeń lub układać elementy w określonej kolejności. Ta elastyczność sprawia, że ​​jest koniecznością dla projektantów stron internetowych, a Divi 5 wykorzystuje swoją moc, aby umożliwić użytkownikom tworzenie wyrafinowanych układów bez konieczności zaawansowanej wiedzy na temat CSS.

Jak Divi 5 integruje FlexBox

Divi 5 niedawno wprowadził swój system układu FlexBox. Ten system integruje FlexBox bezpośrednio z wizualnym konstruktorem, umożliwiając użytkownikom kontrolowanie sekcji, wiersza, kolumny i modułów z intuicyjnymi ustawieniami.

Kluczowe funkcje obejmują różne nowe szablony wierszy, od pojedynczych kolumn po sekcje wielu rzędu, co ułatwia budowanie układów w Divi.

Elementy ELEXBOX Divi 5 pozwalają kontrolować kierunek układów, dostosowywać luki poziome i pionowe, uzasadnić treść do startu, środka lub końca, włączenie i nie tylko.

Funkcja nowej struktury kolumny Divi 5 zapewnia większą kontrolę nad tym, jak kolumny zachowują się na mniejszych urządzeniach. Możesz łatwo zmienić liczbę kolumn lub zmieniać ich kolejność, dzięki czemu projekty wyglądają świetnie w każdym rozmiarze ekranu.

Divi 5 odsuwa się od sekcji specjalistycznych i pełnej szerokości, ponieważ wiersze mogą być teraz zagnieżdżone w celu tworzenia złożonych, responsywnych projektów bez polegania na przestarzałych typach sekcji. Postępy te sprawiają, że system FlexBox Layout Divi 5 jest potężnym narzędziem do budowania nowoczesnych, elastycznych układów bezpośrednio w ramach konstruktora.

Konfigurowanie wyrównania pionowego w Divi 5

System układu FlexBox Divi 5 jest płynnie zintegrowany z wizualnym budowniczym, dzięki czemu użytkownikom jest dostępny do tworzenia elastycznych i responsywnych projektów. Aby rozpocząć, otwórz wizualny budowniczy na nowej lub istniejącej stronie i dodaj sekcję i wiersz. Stworzyliśmy cały układ, abyśmy mogli przejść przez kroki, aby wyrównać elementy pionowo w różnych scenariuszach.

Pionowe wyrównanie w sekcji

W ustawieniach sekcji przejdź do zakładki projektowej i zlokalizuj opcje układu , w których znajdziesz elementy sterujące FlexBox.

Upewnij się, że Flex jest wybierany w stylu układu . Zapewnia to, że FlexBox jest włączony dla sekcji.

Domyślnie Start (Flex-start) jest wybierany w ramach treści uzasadnionych . To wyrównuje wszystkie elementy na początku pojemnika. W tym przykładzie, chcąc wyśrodkować przedmioty w pionie, możesz wyrównać je do środka , przestrzeni lub równomiernie . Ponieważ mamy pojedynczy rząd z uwzględnionym zagnieżdżonym wierszem, wszystkie elementy projektu w naszej sekcji będą koncentrować się pionowo z dowolną opcją wspomnianą powyżej.

Pionowe wyrównanie w rzędzie

Możesz także wyrównać treść w pionie na poziomie wiersza. Jednak w tym przykładzie użyjemy wyrównanych elementów , a nie uzasadniania treści do pionowego wyrównania modułów w wierszu. Na karcie Projekt wiersza zlokalizuj ustawienia układu . Upewnij się, że włączysz Flex i znajdź ustawienia elementów wyrównania . Domyślnie wybierany jest Start , a to wyrównuje wszystkie moduły w rzędzie do górnej części pojemnika.

Istnieje kilka opcji w zależności od tego, jak chcesz wyrównać elementy. Wybierz Centrum, jeśli chcesz, aby elementy w rzędzie do środka w pionie. Wybierając koniec, wszystkie elementy będą wyrównać do dolnej części rzędu. Stretch sprawia, że ​​wszystkie przedmioty wypełniają wysokość rzędu.

Pionowe wyrównanie na odcinkach wielu rzędów

W tym scenariuszu mamy trzy rzędy w sekcji, w tym jednopozadowy rząd i dwa trzy kolumny. Użyjemy ustawień zawartości uzasadnienia , aby pionowo wyrównać wszystkie treści w wierszach.

Gdy sekcja używa kolumn jako kierunku układu, uzasadnienie treści będzie pionowo wyrównać swoje wiersze. Start jest domyślnie wybierany. Dopasowuje wszystkie wiersze na górną część sekcji. Rzędy będą spakowane razem, zaczynając od górnej krawędzi. Centrum wyrównuje wszystkie wiersze w sekcji pionowo. Rzędy będą spakowane razem, zaczynając od dolnej krawędzi. Po wybierzeniu wszystkie rzędy są zgodne z dolną częścią sekcji. Rzędy będą się spakować, zaczynając od dolnej krawędzi.

Przestrzeń między rzędami równomiernie wzdłuż osi głównej (pionowo). Pierwszy rząd będzie spłukiwany na górnej części sekcji, ostatni rząd na dole, a wszelkie rzędy pomiędzy nimi będą miały równą ilość miejsca oddzielającego je. Przestrzeń wokół rozpowszechnia rzędy z równą przestrzenią wokół każdego przedmiotu.

Przestrzeń między sąsiednimi wierszami będzie dwukrotnie większa niż przestrzeń na końcach wierszy (przestrzeń między pierwszym rządem a górną częścią sekcji oraz przestrzenią między ostatnim rządem a dolną częścią sekcji). Wreszcie przestrzeń jest równomiernie podobna do przestrzeni, ale zapewnia, że ​​przestrzeń między każdym rządem jest taka sama, a przestrzeń na początku i na końcu sekcji jest również równa temu odstępowi.

Pionowe wyrównanie w grupach modułów

System FlexBox Divi 5 upraszcza również wyrównanie pionowe w grupach modułów, szczególnie przy użyciu funkcji takich jak Builder pętli dla treści dynamicznej. Rozważ grupę modułów wyświetlającą posty na blogu z obrazem, postem, opublikowaniem fragmentu i przyciskiem. Bez odpowiedniego wyrównania elementy takie jak przyciski mogą wydawać się niewspółosione w kolumnach. W poprzednich wersjach Divi wymagało to równych wysokości kolumn i niestandardowych CSS. Divi 5 usprawnia ten proces z FlexBox.

Aby wyrównać elementy, kliknij w pierwszą kolumnę grupy modułów, przejdź do karty Projekt i zlokalizuj ustawienia Flex. Ustaw uzasadnienie treści na przestrzeń pomiędzy . To równomiernie rozkłada moduły w kolumnie, doskonale wyrównując przyciski odczytu więcej we wszystkich kolumnach bez niestandardowych CSS. Takie podejście zapewnia spójne, profesjonalne układy treści dynamicznych, takie jak siatki blogów lub oferty produktów.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a my wysyłamy Ci e -mailem kopię pakietu układu Ultimate Divi Landing Page, a także ton innych niesamowitych i bezpłatnych zasobów, wskazówek i wskazówek. Śledź dalej, a będziesz mistrzem Divi w krótkim czasie. Jeśli jesteś już subskrybowany, po prostu wpisz swój adres e -mail poniżej i kliknij Pobierz, aby uzyskać dostęp do pakietu układu.

POBIERAĆ

Udało ci się zasubskrybować. Sprawdź swój adres e -mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układu Divi!

Wskazówki dotyczące responsywnego wyrównania pionowego

System układu FlexBox Divi 5 ułatwia wyrównanie w pionie treści, ale należy wziąć pod uwagę kilka wskazówek. Divi 5 oferuje solidne narzędzia do responsywnego projektowania, umożliwiając dostrajanie pionowego wyrównania we wszystkich urządzeniach. Niezależnie od tego, czy koncentrujesz treść w sekcji bohatera, czy wyrównujesz przyciski w układzie wielu kolumn, następujące wskazówki pomogą Ci wykorzystać funkcje Divi 5 w celu utrzymania spójnych, profesjonalnych układów.

Użyj konfigurowalnych responsywnych punktów Divi 5

System FlexBox Divi 5 umożliwia dostosowanie zamawiania i wyrównania modułów dla różnych rozmiarów ekranu, zapewniając układy dostosowane do wszystkich rozmiarów ekranu. W The Visual Builder możesz użyć siedmiu konfigurowalnych responsywnych punktów przerwania, aby kontrolować, w jaki sposób układy pojawiają się na urządzeniach.

Aby zoptymalizować wyrównanie pionowe, możesz dostosować struktury kolumn na tabletach i urządzeniach mobilnych. Zapewnia to, że układy wyglądają idealnie w każdym rozmiarze ekranu. Na przykład możesz chcieć dwóch kolumn na tablecie i tylko jednej na urządzeniach mobilnych.

System układu FlexBox Divi 5 pozwala również zmienić kolejność kolumn na urządzeniach mobilnych, kontrolując to, co użytkownicy mobilni widzą pierwsze w sekcji lub wierszu.

Użyj zmiennych projektowych Divi 5

Funkcja zmiennych projektowych Divi 5 jest idealna do utrzymywania spójnych odstępów i wyrównania w responsywnych poglądach. Zmienne projektowe umożliwiają zdefiniowanie wartości wielokrotnego użytku dla właściwości, takich jak wyściółka, marginesy i rozmiary czcionek, zapewniając jednolitość w układach. W celu wyrównania pionowego możesz utworzyć zmienną dla wyściółki pionowej, aby standaryzować odstępy w rzędach lub sekcjach. Na przykład ustawiaj zmienną projektową o nazwie Vertical Padding na 30px w Manager Divi.

Aby zastosować zmienną do wiersza, przejdź do karty Projekt, kliknij menu rozwijane odstępów i kliknij ikonę treści dynamicznej, aby ją użyć.

Flexbox ułatwia pionowe wyrównanie

System układu FlexBox Divi 5 ułatwia pionowe wyrównanie, oferując elastyczne i responsywne rozwiązanie do tworzenia wypolerowanych układów. Integrując FlexBox z wizualnym budowniczym, Divi 5 pozwala użytkownikom kontrolować wyrównanie sekcji, wierszy, kolumn i grup modułów z precyzją, wszystko bez konieczności zaawansowanej wiedzy na temat CSS. Jego funkcje zapewniają spójne, profesjonalne projekty na wszystkich urządzeniach. Niezależnie od tego, czy koncentrujesz treść, wyrównujesz dynamiczne grupy modułów, czy budujesz układy wielu rzędu, Divi 5 upraszcza proces podczas dostarczania wyników.

Pobierz najnowszą alfa Divi 5 i eksperymentuj z systemem układu Flexbox w nowym projekcie.