Jak wyrównać w pionie i poziomie sekcje, wiersze, kolumny i moduły w DIVI Builder

Podczas tworzenia witryny za pomocą Divi opcja wyrównania treści w pionie może być cennym dodatkiem do zestawu narzędzi do projektowania. W zależności od układu zawartość może wymagać wyrównania w pionie na różne sposoby (wyśrodkowany, dolny, górny). Najczęstszą potrzebą jest wyrównanie materiału w pionie. Dodaje do treści piękny akcent symetrycznych odstępów, co jest bardzo przydatne w przypadku korzystania z układów wielokolumnowych. Co więcej, zawartość wyśrodkowana w pionie pozostaje wyśrodkowana na szerokości przeglądarki, eliminując potrzebę niestandardowego dopełnienia lub marginesów, aby osiągnąć podobną responsywność.

W tej lekcji nauczę Cię, jak wyrównać zawartość w pionie w dowolnej kolumnie za pomocą kilku prostych wierszy CSS. W celach demonstracyjnych użyję kilku gotowych układów Divi. Nie musisz się martwić, jeśli nie znasz CSS. W ciągu kilku sekund będziesz mógł zastosować to do swojego projektu.

• Zrozumienie różnicy między Flex a Divi
• Czy to jest wymagane?
• Dodaj wstępnie skonfigurowany układ do swojej strony.
• Metoda 1: Wyrównywanie zawartości w pionie za pomocą funkcji Flex i automatycznego marginesu
• Wyrównywanie zawartości na dole
• Pionowe wyrównanie zawartości dla kolumn wiersza
• Metoda 2: Wyrównywanie zawartości w pionie przy użyciu kierunku Flex kolumny
• A co z układami z tylko jedną kolumną?
• Ostatnie przemyślenia na temat pionowego i poziomego wyrównania DIVI

Zrozumienie różnicy między Flex a Divi

Atrybut CSS Flex (lub Flexbox) jest po prostu środkiem do układania elementów w stosy poziome i pionowe (coś w rodzaju tabeli). Jednak w przeciwieństwie do typowych tabel, funkcja flex umożliwia tworzenie pudełek, które „dostosowują się” do rozmiaru zawartości, którą zawierają.

Divi używa atrybutu flex, gdy wybierzesz „Wyrównaj wysokość kolumn” jako ustawienie wiersza. Mówiąc najprościej, zapewnia to, że rozmiar wszystkich Twoich kolumn dopasuje się do rozmiaru kolumny zawierającej najwięcej informacji. Ponieważ „Wyrównaj wysokość kolumn” wyzwala flex dla kontenera wierszy, możesz z niego skorzystać, dodając CSS do swoich kolumn, aby zmienić zawartość każdej kolumny (lub pola).

Jeśli dodać „margin: auto” do dowolnej kolumny w wierszu, dla ex amp le, treść tej kolumny (czy jest to jeden lub kilka modułów) będzie wyśrodkowany w pionie.

Wszystkie Twoje kolumny (i ich zawartość) zostaną wyśrodkowane w pionie, jeśli dodasz „align-items: center;” do twojego rzędu.

Oczywiście właściwość flex ma o wiele więcej zastosowań w projektowaniu stron internetowych i bardziej zaawansowany CSS, które możesz wykorzystać w swoim motywie. Jednak chciałem, aby ten samouczek był prosty.

Czy to jest wymagane?

W sensie technicznym nie. Możesz użyć niestandardowych odstępów, aby umieścić zawartość/moduły pionowo w kolumnie (dopełnienie i margines). Dla np amp le można korzystać z opcji odstępów Divi do centrowania modułu (S) w kierunku pionowym w kolejce do nadania kolumnę równą górną i dolną wyściółkę. Możesz również wyrównać zawartość do dołu, dodając górną część do kolumny. Podczas dodawania większej ilości treści do strony może być konieczne zmodyfikowanie odstępów. Ponadto utrzymanie tego wyrównania w różnych rozmiarach przeglądarek może być problematyczne.

Tak więc, jeśli szukasz sposobu na wyrównanie informacji w pionie bez martwienia się o określone odstępy, myślę, że uznasz to za korzystne.

Zacznijmy tą imprezę!

Dodaj wstępnie skonfigurowany układ do swojej strony.

Zacznę od układu strony portfolio firmy zajmującej się projektowaniem wnętrz. Utwórz nową stronę, aby mieć ten układ na swojej stronie. Następnie nadaj swojej stronie nazwę. Wybierz "Użyj Divi Builder", a następnie "Użyj Visual Builder" z menu rozwijanego. Następnie wybierz "Wybierz gotowy układ" z menu rozwijanego. Następnie wybierz Pakiet układów firmy zajmującej się projektowaniem wnętrz z okna Wczytaj z biblioteki. Na koniec, wybierając układy, wybierz stronę Portfolio i kliknij „Użyj tego układu”.

Możesz zacząć po załadowaniu układu na stronie.

Metoda 1: Wyrównywanie zawartości w pionie za pomocą funkcji Flex i automatycznego marginesu

Otwórz ustawienia wiersza dla drugiego wiersza (tego bezpośrednio pod wierszem z tytułem strony). Otwórz grupę opcji Rozmiar w opcjach projektu i zauważ, że opcja „Wyrównaj wysokości kolumn” jest już aktywna; Oznacza to, że właściwość flex („display: flex;”) została dodana do wiersza.

W polu wprowadzania elementu głównego kolumny 2 przejdź do ustawień karty Zaawansowane dla tego samego wiersza i dodaj następujący fragment kodu CSS.

Zawartość drugiej kolumny została teraz przeniesiona, aby była wyśrodkowana w pionie.

Wyrównywanie zawartości na dole

Możesz zmienić wartość marginesu w następujący sposób, aby wyrównać zawartość do dołu, tak aby wszystkie moduły były ułożone na dole kolumny:

Pionowe wyrównanie zawartości dla kolumn wiersza

Możesz wyśrodkować zawartość wszystkich kolumn w wierszu w pionie, dodając następujący fragment kodu do głównego elementu ustawień wiersza, zamiast dodawać „margin: auto” do każdej kolumny z osobna.

Możesz również użyć tego fragmentu kodu, jeśli chcesz, aby wszystkie informacje w Twoich kolumnach były wyrównane u dołu:

Pamiętaj, że możesz użyć funkcji rozszerzania stylów Divi, klikając prawym przyciskiem myszy główny element z fragmentem kodu CSS i wybierając „Rozszerz główny element”.

Następnie, aby wyśrodkować w pionie całą zawartość każdej kolumny na stronie, zastosuj główny element CSS do wszystkich wierszy na stronie (lub sekcji).

Wszystko jest teraz wyważone w pionie.

Jednak mogłeś zauważyć, że biały kolor tła kolumny nie obejmuje już całego wiersza z powodu dodania w kolumnie „margin: auto”. Możesz temu zaradzić, zmieniając kolor tła wiersza na biały i usuwając wypełnienie wiersza. Zamiast tego nauczę Cię, jak wyśrodkować zawartość kolumny bez konieczności zmiany marginesu.

Metoda 2: Wyrównywanie zawartości w pionie przy użyciu kierunku Flex kolumny

Użyliśmy właściwości flex dodanej najpierw do wiersza. W rezultacie każda z naszych kolumn stała się „elastycznym pudełkiem”, które można było wyrównać w pionie, zmieniając margines.

Możemy jednak wykorzystać kierunek flex, aby wyrównać tekst naszej kolumny bez poświęcania efektu „Wyrównaj wysokość kolumny”, który utrzymuje nasze kolumny (i tła kolumn) w tym samym rozmiarze. Aby to osiągnąć, dodamy kilka linii CSS do naszej kolejki, powodując, że wszystkie znajdujące się w niej moduły zostaną ułożone pionowo, a następnie wyśrodkowane.

Powrót do poprzedniej ex Chodźmy amp LE rzędu. Klikając prawym przyciskiem myszy niestandardowy CSS i wybierając „Resetuj niestandardowe style CSS”, możesz usunąć dowolny niestandardowy CSS, który możesz mieć w ustawieniach wiersza.

Następnie w kolumnie 2 Main Element zastosuj następujący kod CSS:

Zmień „justify-content: center” na „justify-content: flex-end”, aby wyrównać zawartość do dołu.

Podoba mi się ta konfiguracja, ponieważ jeśli ustawię zawartość w pionie i ustawię wiersz na pełną szerokość, zawartość pozostanie wyśrodkowana.

Tworzenie pionowo wyrównanych rozmyć z różnymi ilościami tekstu

Wyśrodkowanie treści kolumn w pionie może również pomóc w tworzeniu notek. Jak być może wiesz, nie każda notka będzie miała taką samą ilość tekstu do opisania funkcji lub usługi. Wyśrodkowanie tych notatek w pionie może sprawić, że układ będzie wyglądał pięknie.

Dla płatności Digital Home Page Layout, będę pionowo wyrównać notki na ten ex amp le.

Aby stworzyć bardziej realistyczny obraz wyglądu witryny, najpierw dodam do notek różne ilości treści.

Teraz muszę „Wyrównać wysokość kolumn” w ustawieniach wiersza.

Teraz mogę wyrównać tekst i dostosować projekt za pomocą fragmentów CSS.

Możemy wyśrodkować zawartość naszych kolumn w pionie, dodając następujące elementy do sekcji Element główny na karcie Zaawansowane w ustawieniach wiersza:

Zmień go na następujący, aby wyrównać je na dole.

Możesz również wyrównać pierwszą kolumnę do dołu, a trzecią do góry, resetując niestandardowe style CSS i dodając następujące niestandardowe marginesy.

 Kolumna 1 Główny element CSS:

 Kolumna 3 Główny element CSS:

A co z układami z tylko jedną kolumną?

Nie potrzebujesz fragmentu kodu CSS ani flexu, aby wyśrodkować zawartość w jednej kolumnie w pionie. Wszystko, co musisz zrobić, to upewnić się, że tekst ma równe odstępy nad i pod (lub modułami). Większość konsumentów wymaga zawartości wyśrodkowanej w pionie w układach z wieloma kolumnami, ponieważ chcą, aby przylegający materiał był prawidłowo wyrównany.

Ostatnie przemyślenia na temat pionowego i poziomego wyrównania DIVI

Mimo że to rozwiązanie opiera się na kilku drobnych fragmentach niestandardowego CSS, uważam, że może być pomocne dla osób szukających szybkiego lekarstwa na czasochłonną procedurę. Proszę czuć się swobodnie dzielić się swoimi opiniami na temat tego podejścia, jak również ex amp les, jak to ma zapisane czas i wysiłek w przeszłości.