Jak wyrównać zawartość w pionie w Divi

Możliwość pionowego wyrównania zawartości podczas tworzenia witryny za pomocą Divi może być wygodnym dodatkiem do paska narzędzi projektowych. Czasami określony układ wymaga, aby zawartość była wyrównana w pionie na różne sposoby (wyśrodkowana, dolna, górna). Najczęstszą potrzebą jest wyśrodkowanie treści w pionie. Zapewnia zachwycający dotyk symetrycznych odstępów, który naprawdę przydaje się podczas korzystania z wielu układów kolumn dla treści. Ponadto zawartość wyśrodkowana w pionie pozostaje wyśrodkowana na różnych szerokościach przeglądarki, co eliminuje konieczność stosowania niestandardowego dopełnienia lub marginesów, aby uzyskać podobną responsywność.

W tym samouczku pokażę, jak dodać kilka małych fragmentów CSS do dowolnej kolumny, aby wyrównać zawartość w pionie. Użyję niektórych gotowych układów Divi, aby zobaczyć przykłady, jak to zrobić. Jeśli nie wiesz zbyt wiele o CSS, nie musisz się martwić. Będzie to dość łatwe do zastosowania do własnych układów w ciągu kilku sekund.

Zrozumienie Flex i Divi

Właściwość css Flex (lub Flexbox) to po prostu sposób na pozycjonowanie elementów w stosach poziomych i/lub pionowych (coś w rodzaju tabeli). Z wyjątkiem, w przeciwieństwie do tradycyjnych tabel, właściwość flex umożliwia tworzenie pól, które dostosowują się lub „wyginają” do rozmiaru przechowywanej zawartości.

Divi używa właściwości flex za każdym razem, gdy wybierzesz "Wyrównaj wysokości kolumn" jako ustawienie wiersza. Zapewnia to po prostu pewność, że rozmiar wszystkich Twoich kolumn dostosuje się do rozmiaru kolumny z największą zawartością. A ponieważ "Wyrównaj wysokość kolumn" aktywuje flex dla kontenera wierszy, możesz łatwo z tego skorzystać, dodając CSS do swoich kolumn, aby dostosować zawartość każdej kolumny (lub pola).

Na przykład, jeśli dodasz „margin: auto” do dowolnej kolumny w wierszu, zawartość tej kolumny (niezależnie od tego, czy będzie to jeden, czy więcej modułów) zostanie wyśrodkowana w pionie.

Również, jeśli dodasz „align-items:center;” w wierszu wszystkie kolumny (i ich zawartość) zostaną wyśrodkowane w pionie.

Oczywiście istnieje wiele innych zastosowań właściwości flex w projektowaniu stron internetowych wraz z bardziej zaawansowanym CSS, który możesz zastosować do swojego motywu. Ale w tym samouczku chciałem, aby wszystko było proste.

Czy to naprawdę konieczne?

Technicznie nie. Możesz wyrównać zawartość/moduły w pionie w kolumnie, używając niestandardowych odstępów (dopełnienie i margines). Na przykład możesz użyć opcji odstępów Divi, aby nadać kolumnie równe górne i dolne wypełnienie, aby wyśrodkować moduły pionowo w kolumnie. Możesz też dodać do kolumny tylko górne wypełnienie, aby wyrównać zawartość do dołu. Jednak może być konieczne dostosowanie odstępów podczas aktualizowania strony o więcej treści. Ponadto utrzymanie tego wyrównania w różnych szerokościach przeglądarki może być trudne.

Tak więc, jeśli szukasz rozwiązania do wyrównania treści w pionie bez konieczności myślenia o niestandardowych odstępach, myślę, że okaże się to przydatne.

Zacznijmy!

Załaduj gotowy układ na swoją stronę

Na początek użyję układu strony portfolio firmy zajmującej się projektowaniem wnętrz. Aby uzyskać ten układ na swojej stronie, utwórz nową stronę. Następnie nadaj swojej stronie tytuł. Kliknij "Użyj Divi Builder", a następnie "Użyj Visual Builder". Następnie wybierz opcję „Wybierz gotowy układ”. Następnie wybierz Pakiet układów firmy zajmującej się projektowaniem wnętrz z wyskakującego okna Wczytaj z biblioteki. Na koniec wybierz stronę Portfolio z listy układów i kliknij „Użyj tego układu”.

Gdy układ zostanie załadowany na twoją stronę, jesteś gotowy do pracy.

Metoda 1: Jak wyrównać zawartość w pionie za pomocą funkcji Flex i Auto Margin

Otwórz ustawienia wiersza drugiego wiersza na stronie (tego bezpośrednio pod wierszem z tytułem strony). W ustawieniach projektu otwórz grupę opcji Rozmiar i zauważ, że „Wyrównaj wysokości kolumn” jest już aktywne. Oznacza to, że wiersz ma teraz dodaną właściwość flex („display: flex;”).

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

margin: auto;

Teraz zawartość drugiej kolumny została przesunięta, aby zostać wyśrodkowana w pionie.

Wyrównywanie zawartości do dołu

Jeśli chcesz wyrównać zawartość do dołu, tak aby wszystkie moduły ułożyły się na dole kolumny, możesz dostosować wartość marginesu w następujący sposób:

margin: auto auto 0;

Wyrównywanie zawartości w pionie dla wszystkich kolumn w wierszu

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

align-items: center;

Lub jeśli chcesz, aby cała zawartość Twoich kolumn była wyrównana do dołu, możesz dodać ten fragment kodu:

align-items: flex-end;

I nie zapominaj, że możesz skorzystać z funkcji rozszerzania stylów Divi, klikając prawym przyciskiem myszy główny element z fragmentem kodu css i klikając „Rozszerz główny element”.

Następnie rozszerz ten główny element css na wszystkie wiersze na stronie (lub sekcji), aby pionowo wyśrodkować całą zawartość każdej kolumny na stronie.

Teraz wszystko jest wyśrodkowane w pionie.

Ale być może zauważyłeś, że kolor tła białej kolumny nie obejmuje już pełnej wysokości wiersza. Dzieje się tak, ponieważ do kolumny dodaliśmy „margin: auto”. Aby to naprawić, możesz zmienić kolor tła wiersza na biały i pozbyć się dopełnienia wiersza. Ale zamiast tego pokażę Ci sposób na wyśrodkowanie zawartości Twojej kolumny bez zmiany marginesu.

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

W pierwszej metodzie wykorzystaliśmy właściwość flex dodaną do wiersza. Dzięki temu każda z naszych kolumn stała się „elastycznym pudełkiem”, które można wyrównać w pionie, po prostu dostosowując margines.

Ale istnieje również sposób na użycie elastycznego kierunku, aby wyrównać zawartość naszej kolumny bez utraty efektu „Wyrównaj wysokość kolumny”, który utrzymuje nasze kolumny (i tła kolumn) w tym samym rozmiarze. Aby to zrobić, po prostu dodamy kilka wierszy CSS do naszej kolumny, aby wszystkie moduły w kolumnie zostały ułożone pionowo, a następnie wyśrodkowane.

Wróćmy do naszego wiersza w poprzednim przykładzie. Otwórz Ustawienia wiersza i usuń dowolny niestandardowy CSS, który możesz tam mieć, klikając prawym przyciskiem myszy Niestandardowy CSS i klikając "Zresetuj niestandardowe style CSS"

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

display: flex;
flex-direction: column;
justify-content: center;

Lub jeśli chcę wyrównać zawartość do dołu, po prostu zmień „justify-content: center” na „justify-content: flex-end”.

Wspaniałe w tej konfiguracji jest to, że jeśli moja zawartość jest wyśrodkowana w pionie, a wiersz ma pełną szerokość, zawartość pozostaje wyśrodkowana.

Tworzenie rozmyć z różnymi ilościami tekstu wyrównanego w pionie

Wyśrodkowanie zawartości kolumny w pionie może być również przydatne w przypadku notatek. Jak wiecie, nie każda notka będzie zawierać dokładną ilość tekstu użytego do opisania funkcji lub usługi. Wyśrodkowanie tych notatek w pionie może stworzyć ładny projekt układu.

W tym przykładzie zamierzam wyrównać w pionie notki w układzie strony głównej płatności cyfrowych.

Zamierzam najpierw dodać różne ilości tekstu podstawowego do notek, aby dać bardziej realistyczną reprezentację tego, jak może wyglądać witryna.

Teraz muszę przejść do ustawień wierszy i „Wyrównaj wysokości kolumn”.

Teraz mogę dodać moje fragmenty CSS, aby dopasować zawartość i zmienić projekt.

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

align-items: center;

Lub zmień go na następujący, aby wyrównać je do dołu.

align-items: flex-end;

Możesz też zresetować niestandardowe style CSS i dodać następujące niestandardowe marginesy, aby wyrównać dół pierwszej kolumny i wyrównać górę trzeciej kolumny.

Kolumna 1 Główny element CSS:

margin: auto auto 0;

Kolumna 3 Główny element CSS:

margin: 0 auto auto;

A co z układami jednokolumnowymi?

Technicznie rzecz biorąc, nie potrzebujesz fragmentu kodu css ani flexu, aby wyśrodkować zawartość jednej kolumny w pionie. Wszystko, co musisz zrobić, to upewnić się, że masz równe odstępy nad i pod treścią (lub modułami). W większości przypadków ludzie potrzebują treści wyśrodkowanej w pionie w układach z wieloma kolumnami, ponieważ chcą, aby sąsiednia treść była idealnie wyrównana.

Wiele aplikacji

Istnieje wiele przydatnych aplikacji do pionowego wyrównywania treści w Divi. Jest to przydatne w przypadku nagłówków o układzie dwukolumnowym z tekstem nagłówka w jednej kolumnie i gdy chcesz się upewnić, że wezwanie do działania (przycisk) w drugiej kolumnie jest wyśrodkowane w pionie. Przydałoby się również centrowanie logo w pionie w układzie sześciokolumnowym (zwłaszcza, jeśli logo ma nieco inne wymiary).

Końcowe przemyślenia

Mimo że ta metoda opiera się na kilku małych fragmentach niestandardowego CSS, uważam, że aplikacja może być niezwykle przydatna dla tych, którzy szukają szybkiego rozwiązania czasami uciążliwego procesu. Chciałbym usłyszeć o innych przykładach, w których może się to przydać.

Zapraszam do dzielenia się swoimi pomysłami i komentarzami poniżej.

Pozdrawiam!