Jak utworzyć wysokości równych kolumn z Flexbox w Divi 5

Tworzenie czystych, profesjonalnych układów jest kamieniem węgielnym skutecznego projektowania stron internetowych, a równe wysokości kolumn przyczyniają się do zrównoważonego układu. Niezależnie od tego, czy wyświetlasz produkty, usługi, czy elementy portfela, kolumny, które doskonale zwiększają wrażenia użytkownika. W Divi 4 równe kolumny były możliwe, ale Divi 5 przynosi znacznie więcej do stołu.

W Divi 5 integracja systemu układu FlexBox poprawia proces, oferując prostszy, bardziej elastyczny sposób tworzenia równych wysokości kolumn. Ten post poprowadzi Cię poprzez tworzenie czystych, zrównoważonych układów. Zanurzmy się!

Równe wysokości kolumn w Divi 4

W Divi 4 osiągnięcie kolumn o równych wysokościach było proste, ale ograniczone. Przełącznik włączył wszystkie kolumny w wierszu, aby dopasować wysokość najwyższej kolumny. Ta funkcja była ratownikiem dla zachowania spójności wizualnej, ale miała ograniczenia, które często wymagały obejścia.

Efekt równej wysokości w Divi 4 zastosowano do kontenerów kolumnowych, co oznacza, że kolory tła, obrazy lub granice musiały być ustawione na poziomie kolumny. Takie podejście nie rozciągało się na moduły w kolumnach, co może prowadzić do niezręcznych luk. Na przykład przycisk pod krótkim modułem tekstowym w jednej kolumnie pozostawiłby niezręczne miejsce pod nim, podczas gdy przycisk pod dłuższym modułem tekstowym w innej kolumnie wypełnił go, tworząc niezrównoważony wygląd.

Gdy projektanci chcieli większej kontroli, takich jak wyrównanie zawartości modułu w pionie lub dostosowywanie odstępów, często konieczne było niestandardowe CSS. Stanowiło to wyzwanie, szczególnie dla początkujących, ponieważ musieli oni zagłębić się w niestandardowe pola CSS Divi, aby osiągnąć dopracowane wyniki. Na przykład, jeśli chciałeś, aby przyciski wyrównały się do dolnej części kolumny w Divi 4, musisz użyć CSS, aby to osiągnąć.

Jak Flexbox w Divi 5 adresuje równe kolumny

FlexBox jest płynnie zintegrowany z Divi 5, dzięki czemu tworzenie równych kolumn jest łatwiejsze do osiągnięcia. W przeciwieństwie do opcji przełączania Divi 4, Divi 5 wykorzystuje FlexBox, aby zapewnić wbudowane elementy sterujące, które ułatwiają projektowanie stron internetowych.

Dzięki FlexBox możesz automatycznie rozciągać kolumny, aby pasowały do najwyższego, jednocześnie oferując precyzyjne opcje wyrównania zarówno dla kolumn, jak i ich treści. To eliminuje potrzebę niestandardowych CSS, umożliwiając zaawansowane układy dla każdego użytkownika Divi, zarówno dla początkujących, jak i profesjonalistów. System układu FlexBox Divi 5 umożliwia projektantom łatwe tworzenie spójnych, profesjonalnych projektów.

Jak utworzyć równe wysokości kolumn w Divi 5

Tworzenie kolumn o równej wysokości w Divi 5 jest proste dzięki integracji FlexBox. W poniższych etapach pokazamy, jak się skonfigurować i upewnić się, że wszystko doskonale się wyrównuje.

Krok 1: Utwórz swój projekt

Otwórz The Visual Builder na nowej lub istniejącej stronie. Kliknij ikonę Black +, aby dodać nowy wiersz .

Gdy pojawi się nowe okno dialogowe sekcji, wybierz układ trzykolumn w równych kolumnach .

Dodaj moduł grupy w pierwszej kolumnie.

Następnie dodaj moduł ikon do modułu grupy w pierwszej kolumnie.

Wybierz ikonę Sprawdź na karcie zawartości.

Na karcie Projekt ustaw kolor ikon na #2EA3F2 i rozmiar ikony do 36px.

Następnie dodaj moduł nagłówka pod modułem ikony. Pamiętaj, aby dodać nagłówek do modułu grupy, klikając ikonę Black + zamiast szary.

Wpisz projekt strony internetowej jako tytuł na karcie treści .

Na karcie Design wybierz H5 jako poziom nagłówka , między czcionką nagłówka i średnią jako masę czcionki nagłówka . Ustaw styl czcionki na szczycie , na szczycie wyrównania tekstu w lewo , kolor na kierunku #000000 , i utrzymuj rozmiar tekstu na głównym rozmiarze 16px .

Następnie dodaj moduł tekstowy pod nagłówkiem wewnątrz modułu grupy. Możesz zostawić ustawienia, jakie są.

Dodamy moduł przycisku dla modułu końcowego w kolumnie. Jednak zamiast dodawać go do modułu grupy, dodamy go pod nim. Pozwoli nam to stworzyć równe wysokości kolumn, ale wyrównać przycisk do dołu, dzięki czemu projekt jest bardziej spójny.

Kliknij kartę Projekt i przypisz żądane ustawienia stylu do modułu przycisku. Sprawdź przycisk, aby upewnić się, że jest on poza modułem grupy, patrząc na widok warstw w lewym menu. Po zakończeniu przycisk powinien wyglądać jak zrzut ekranu poniżej-po lewej stronie z niebieskim tłem i białym tekstem.

Krok 2: Duplikatowanie kolumn

Gdy pierwsza kolumna zostanie wypełniona treścią, skopiujemy treść z pierwszej kolumny do drugiej i trzeciej kolumny i wprowadzimy kilka zmian. Możesz usunąć drugą i trzecią kolumny i zduplikować pierwszy lub skopiować i wkleić moduł grupy i przycisk do drugiej i trzeciej kolumny.

Następnie zmień tytuł główny w 2. kolumnie na kodowanie , a tytuł nagłówka w 3. kolumnie na marketing . Usuniemy również część zawartości w module tekstowym w 2. kolumnie, abyśmy mogli zademonstrować, w jaki sposób Divi 5 obsługuje FlexBox z różnymi długościami zawartości. Jak widać, kolumny są nierówne.

Zanim przejdziemy do następnego kroku, kliknij w pierwszą kolumnę i dodaj odstępy 25px do wszystkich stron naszej kolumny.

Dodamy również promień granicy 15px i szerokość granicy 1Px z #666666 jako kolor.

Ostatnim krokiem w projektowaniu naszego wiersza jest skopiowanie atrybutów projektowych z 1. kolumny i wklejenie ich do pozostałych kolumn. Kliknij prawym przyciskiem myszy pierwszą kolumnę i wybierz style elementów kopiowania . Następnie kliknij prawym przyciskiem myszy drugą kolumnę i wybierz styl wklejania . Powtórz tę akcję również dla trzeciej kolumny.

Krok 3: Skonfiguruj ustawienia FlexBox dla równych wysokości

Następnie będziemy musieli skonfigurować nasze ustawienia FlexBox dla wiersza. Divi 5 integruje sterowanie FlexBox z systemem układu, wychodząc poza wyrównanie wysokości kolumn Divi 4. Przejdź do zakładki projektowej dla wiersza i upewnij się, że Flex jest wybierany w ramach układu .

Następnie upewnij się, że wiersz jest wybierany w kierunku układu , zacznij pod treść uzasadnienia , a rozciąganie jest wybierane pod elementami wyrównania . To poinformuje Divi 5, aby zachował strukturę kolumny, wyrównać wszystkie elementy w wierszu po lewej stronie i wypełnili dostępną przestrzeń w pojemniku nadrzędnym.

Następnie kliknij ustawienia dla pierwszej kolumny. Kliknij menu rozwijane układu, aby ujawnić jego ustawienia na karcie Projekt . Domyślnie Flex zostanie wybrany w ramach układu . W polu kierunku układu wybierz kolumnę . Zgodnie z zawartością uzasadnienia wybierz przestrzeń pomiędzy . Wyrównaj wszystkie elementy do startu (po lewej) i pozostaw ustawiony zestaw układu na brak owinięcia .

Powtórz powyższe kroki dla 2. i 3. kolumny. Możesz także użyć funkcji kopiowania/wklejania lub rozszerzenia, aby zastosować te same ustawienia do pozostałych kolumn wiersza.

Wszystkie moduły w grupie zostaną rozciągnięte, aby wypełnić dostępną przestrzeń, a przyciski poza grupą zostaną wyrównane na dno.

Krok 4: Reaktywność testowa

Konfigurowalne responsywne punkty przerwania Divi 5 ułatwiają upewnienie się, że twoje równe wysokości kolumn wyglądają świetnie na wszystkich urządzeniach. Użyj responsywnych przełączników widoku, aby wyświetlić podgląd układu w The Visual Builder. Domyślnie istnieją trzy punkty przerwania. Jednak Divi 5 ma teraz 7, które można łatwo włączyć, klikając menu elipsy na pasku narzędzi u góry wizualnego budowniczego. Włącz punkty przerwania, które chcesz, i kliknij Zapisz , aby je zastosować.

Kliknij, aby podać podgląd układu w widoku tabletu . Jak widać, FlexBox utrzymuje kolumny ułożone w stos.

Możesz zmienić strukturę kolumny, aby umożliwić kolumnom układanie pionowo na mniejszych urządzeniach. Podczas gdy w punkcie przerwania tabletu kliknij kartę zawartości dla wiersza . Kliknij Zmień strukturę kolumny .

Gdy pojawi się okno dialogowe, kliknij, aby włączyć pojedynczy wiersz w równych kolumnach . Zmieni to 3-kolumnowy wiersz na jedną kolumnę na tablecie i urządzeniach mobilnych, jednocześnie zachowując 3-kolumnową strukturę na komputerach stacjonarnych.

Podczas podglądu zmian we wszystkich punktach przerwania zobaczysz, jak Divi przechodzi układ małych ekranów.

Dzięki automatyzacji wyrównania wysokości projektanci mogą skupić się na kreatywności, a nie na poprawkach technicznych, ułatwiając budowanie profesjonalnych witryn w ułamku czasu. System układu FlexBox Divi 5 obsługuje również lepszą organizację treści za pośrednictwem grup modułów, dzięki czemu wyrównujące moduły bez niestandardowych CSS jest łatwiejsze niż kiedykolwiek.

Powszechne przypadki użycia

System FlexBox Divi 5 sprawia, że tworzenie równych wysokości kolumn wszechstronnych i skutecznych dla różnych przypadków użycia. Poniżej znajdują się kilka powszechnych sposobów, w których świeci system Flexbox Divi 5:

1. Lista produktów

W układach e-commerce karty produktów często różnią się długością treści ze względu na tytuły lub opisy. Dzięki FlexBox Divi 5 możesz utworzyć siatkę kart produktów, w której każda kolumna utrzymuje równą wysokość, zapewniając czysty i profesjonalny wygląd. Na przykład produkt z krótkim opisem idealnie pasuje do jednego z dłuższym opisem. System FlexBox Divi 5 pozwala uniknąć niezręcznych luk i tworzyć spójne wrażenia, które wspiera zaufanie i zaangażowanie użytkowników.

2. Polecane sekcje

Sekcje usług lub funkcji dobrze pasują do systemu FlexBox Divi. Flexbox w Divi 5 zapewnia, że wszystkie moduły w rzędzie mają równe wysokości kolumn, tworząc zrównoważony i wypolerowany wygląd. Niezależnie od tego, czy wyświetlanie BIOS, usług lub akcji funkcyjnych kolumn wyrównanych, ułatwia skanowanie stron internetowych, poprawiając wrażenia użytkownika.

3. Siatki portfela

Siatka portfolio to idealny przypadek użycia dla FlexBox, szczególnie dla freelancerów wyświetlających swoją pracę. FlexBox zapewnia, że elementy galerii, takie jak obrazy równomiernie, nawet z różnymi współczynnikami kształtu. Możesz użyć modułu grupy, przypisać do niego obraz tła i odpowiednio dostosować odstępy. Stwarza to schludną, profesjonalną sieć, która konsekwentnie prezentuje twoją pracę, dzięki czemu jest idealna dla fotografów, projektantów lub agencji mających na celu wrażenie potencjalnych klientó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!

Zapoznaj się z funkcją FlexBox Divi 5

System układu FlexBox Divi 5 oznacza znaczący skok naprzód ze sposobu wyrównania wysokości kolumn Divi 4, przekształcając sposób, w jaki użytkownicy Divi tworzą równe kolumny. Tam, gdzie Divi 4 opierał się na sztywnej, zależnej od tła metodzie, która często wymagała niestandardowego CSS do udoskonalania, Divi 5 wiązuje FlexBox, aby zapewnić intuicyjne elementy sterujące i bezproblemową reakcję. Rezultatem jest bardziej wydajny system, który usuwa potrzebę niestandardowych obejść CSS i umożliwia użytkownikom Divi łatwe budowanie dopracowanych profesjonalnych układów.

Czy jesteś gotowy na podniesienie swoich witryn Divi? Zanurz się w ustawieniach Flexbox Divi 5 i eksperymentuj z twórczymi możliwościami, które odblokowują. Podziel się swoimi komentarzami poniżej lub połącz z nami w naszych kanałach mediów społecznościowych, aby podzielić się przemyśleniami na temat naszej nowej funkcji FlexBox.