Przejdź do głównej treści

Jak wyrównać przedmioty w tej samej linii na Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecana]

Możliwość pionowego wyrównywania zawartości podczas tworzenia witryny za pomocą Divi może być praktycznym dodatkiem do narzędzia do projektowania. Czasami określony układ wymaga pionowego wyrównania zawartości na różne sposoby (wyśrodkowany, niski, wysoki). Najczęstszą potrzebą jest wyśrodkowanie treści w pionie.

Zapewnia przyjemny i wygodny symetryczny klawisz odstępu podczas korzystania z wielu układów kolumn dla treści. Ponadto pionowo wyśrodkowana zawartość pozostaje wyśrodkowana na różnych szerokościach przeglądarki, co eliminuje kłopot związany z zastosowaniem niestandardowego wypełnienia lub marginesów w celu uzyskania podobnego czasu reakcji.

W tym samouczku pokażę, jak dodać kilka małych fragmentów kodu CSS do dowolnej kolumny, aby wyrównać zawartość w pionie. Wykorzystam niektóre z predefiniowanych układów Divi jako przykłady dalszego postępowania. Jeśli nie wiesz dużo o CSS, nie musisz się martwić. W kilka sekund będzie można łatwo zastosować do własnych układów.

Zrozumienie Flex i Divi

Właściwość Flex (lub Flexbox) jest po prostu sposobem pozycjonowania elementów w stosach poziomych i / lub pionowych (podobnie jak w przypadku tabeli). Poza tym, że w przeciwieństwie do tradycyjnych tabel, właściwość flex umożliwia tworzenie pól, które będą pasować do rozmiaru zawartości, którą zawiera.

Divi używa właściwości flex za każdym razem, gdy wybierzesz "Equali Column Heights" jako parametr linii. To po prostu zapewnia, że ​​rozmiar kolumn dostosuje się do rozmiaru kolumny z największą zawartością. A ponieważ Equalize Column Heights aktywuje flex dla kontenera liniowego, możesz z łatwością go wykorzystać, dodając css do kolumn, aby dostosować zawartość każdej kolumny (lub strefy).

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

Ponadto, jeśli dodasz "linie-wyrównaj: centrum" do linii, 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, a także bardziej zaawansowane CSS, które można zastosować do kompozycji. Ale w tym samouczku chciałem zachować prostotę.

Czy to naprawdę konieczne?

Technicznie nie. Możesz pionowo wyrównać zawartość / moduły w kolumnie, używając niestandardowych odstępów (wypełnienia i marginesu). Na przykład można użyć opcji odstępów Divi, aby nadać kolumnie wartość równą górnym i dolnemu marginesowi, aby wyśrodkować moduł (moduły) pionowo w kolumnie. Możesz również dodać tylko jedno wypełnienie większe niż jedna kolumna, aby wyrównać niższą zawartość. Jednak może być konieczne dostosowanie odstępów podczas aktualizowania strony z większą zawartością. Ponadto może być trudno utrzymać to wyrównanie w różnych szerokościach przeglądarki.

Tak więc, jeśli szukasz rozwiązania, które pozwala w pionowy sposób dopasować zawartość bez konieczności myślenia o odstępach niestandardowych, uważam, że jest to pomocne.

Zacznijmy!

Załaduj wstępnie zdefiniowany układ na swojej stronie

Na początek wykorzystam układ portfolio firm wnętrz. Aby uzyskać ten układ na swojej stronie, utwórz nową stronę. Następnie podaj tytuł swojej strony. Kliknij "Użyj Divi Builder", a następnie "Użyj Visual Builder". Następnie wybierz opcję "Wybierz podstawowy układ". Następnie wybierz Zestaw układów firmy Projektowanie wnętrz w wyskakującym okienku Załaduj z biblioteki. Na koniec wybierz stronę Portfolio na liście układów i kliknij "Użyj tego układu".

szablon divi theme wordpress.png

Po załadowaniu układu na stronę jesteś gotowy do pracy.

Metoda 1: Jak wyrównać zawartość z Flex i Auto Margin

Otwórz ustawienia linii drugiej linii strony (tej bezpośrednio pod linią z tytułem strony). Pod parametrami projektu otwórz grupę opcji rozmiaru i zauważ, że "Wyrównaj wysokości kolumn" jest już aktywna. Oznacza to, że linia ma teraz właściwość flex ("display: flex;").

zharmonizuj wysokości kolumn.png

Teraz przejdź do ustawień zakładki Zaawansowane dla tego samego wiersza i dodaj następujący fragment css pod polem wprowadzania głównego elementu w kolumnie 2.

margines: samochód;

automatyczny margines divi.png

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

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

Dostosuj niższą zawartość

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

margines: samochód 0;

margin divi line.png

Pionowe wyrównanie zawartości dla wszystkich kolumn w twoim wierszu

Zamiast dodawać "margin: auto" do każdej kolumny z osobna, możesz również wyśrodkować zawartość wszystkich kolumn w swoim wierszu, dodając poniższy fragment do głównego elementu parametrów wiersza.

align-pozycje: centrum;

wyrównaj elementy divi.png

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

align-items: flex-end;

I nie zapominaj, że możesz skorzystać z funkcji Divi Extend Styles, klikając prawym przyciskiem myszy główny element za pomocą kodu CSS i klikając "Rozwiń główny element".

extend main element.png

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

rozwiń style na divi.png

Teraz wszystko jest wyśrodkowane w pionie.

pojawienie się zmian divi.png

Ale możesz zauważyć, że kolor tła białej kolumny nie pokrywa już całej wysokości linii. Wynika to z tego, że do kolumny dodaliśmy "margin: auto". Aby rozwiązać ten problem, możesz zmienić kolor tła pustej linii i usunąć wypełnienie z linii. Zamiast tego pokażę ci sposób wyśrodkowania zawartości kolumny bez zmiany marginesu.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

Metoda 2: Pionowe wyrównanie zawartości za pomocą kolumny Flex Flex

W pierwszej metodzie skorzystaliśmy z właściwości flex dodanej do linii. Dzięki temu każda z naszych kolumn jest "elastyczną ramką", którą można wyrównać w pionie, po prostu dostosowując margines.

Istnieje jednak również metoda elastycznego ukierunkowania w celu wyrównania zawartości naszej kolumny bez utraty efektu "Wyrównaj wysokość kolumny", który zachowuje nasze kolumny (i tła kolumn) o tym samym rozmiarze. Aby to zrobić, dodamy po prostu kilka linii CSS do naszej kolumny, tak aby wszystkie moduły w kolumnie były ułożone pionowo, a następnie wyśrodkowane.

Wróćmy do naszej linii w poprzednim przykładzie. Otwórz ustawienia linii i usuń niestandardowe css, klikając prawym przyciskiem myszy niestandardowy styl CSS i klikając "Resetuj niestandardowe style CSS".

Następnie dodaj następujący kod CSS pod kolumną 2, główny element:

wyświetlacz: flex; flex-direction: kolumna; justify-content: center;

Kierowanie giętki column.png

Lub, jeśli chcę dopasować zawartość na dole, po prostu zastąp "Wyrównaj zawartość: centrum" z "uzasadnij treść: elastyczny koniec".

flex wyrównanie end.png

Wspaniałą rzeczą przy tej konfiguracji jest to, że jeśli moje treści są wyśrodkowane w pionie, a szerokość linii zostanie osiągnięta, zawartość pozostaje wyśrodkowana.

wygląd pudełek.png

Utwórz blurbs (Summary) z różnymi ilościami pionowo wyrównanych tekstów

Wykreślenie zawartości kolumny w pionie może być również użyteczne w przypadku rozmycia. Jak wiesz, nie wszystkie rozmyślania będą zawierały dokładną ilość tekstu używanego do opisania funkcji lub usługi. Centrowanie tych rozmytych w pionie może stworzyć piękny projekt dla twojego układu.

W tym przykładzie zamierzam wyrównać pionowo napisy na układzie strony głównej Płatności cyfrowe.

Najpierw dodam różne ilości tekstu głównego do rozmycia, aby uzyskać bardziej realistyczną reprezentację tego, jak strona może wyglądać.

blorbds.png wyrównanie

Teraz muszę przejść do ustawień linii i "Zharmonizować wysokości kolumn".

harmonize columns.png

Teraz mogę dodać moje fragmenty kodu CSS, aby wyrównać moją zawartość i zmodyfikować projekt.

Na karcie Zaawansowane ustawień wiersza możemy pionowo wyśrodkować zawartość naszych kolumn, dodając następujące elementy w obszarze Element podstawowy:

align-pozycje: centrum;

Zmodyfikuj dopasowanie treści divi.png

Lub zmień go, wykonując następujące czynności, aby je zmniejszyć.

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

align-items: flex-end;

wyrównanie u dołu divi.png

Możesz również zresetować niestandardowe style CSS i dodać następujące niestandardowe marginesy, aby wyrównać pierwszą kolumnę u dołu i trzecią wyrównaną górę kolumny.

Element główny CSS kolumny 1:

margines: samochód samochód 0;

Element główny CSS kolumny 3:

margines: 0 samochód samochód;

dostosuj wyrównanie streszczenia divi.png

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

Z technicznego punktu widzenia nie potrzebujesz kodu CSS ani kodu flex, aby wyśrodkować zawartość kolumny w pionie. Wszystko, co musisz zrobić, to upewnić się, że masz równe odstępy powyżej i poniżej zawartości (lub modułów). W większości przypadków użytkownicy potrzebują pionowych treści skoncentrowanych na modelach z wieloma kolumnami, ponieważ chcą idealnie dopasować sąsiednią treść.

To wszystko na ten samouczek, który pokazuje, jak wyrównać elementy w tym samym wierszu Divi.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

Powrót do góry
4 akcji
udział2
ćwierkanie
Enregistrer2