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 treść może wymagać wyrównania w pionie na różne sposoby (wyśrodkowana, dolna, górna). 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 z wieloma kolumnami. Co więcej, treść wyśrodkowana w pionie pozostaje wyśrodkowana na całej szerokości przeglądarki, eliminując potrzebę niestandardowego dopełnienia lub marginesów w celu uzyskania podobnej responsywności.
W tej lekcji nauczę Cię, jak wyrównać w pionie zawartość dowolnej kolumny za pomocą kilku prostych linii CSS. W celach demonstracyjnych użyję kilku prefabrykowanych układów Divi. Nie musisz się martwić, jeśli nie znasz CSS. W ciągu kilku sekund będziesz mógł zastosować to w swoim projekcie.
- Zrozumienie różnicy między Flexem a Divi
- Czy to jest wymagane?
- Dodaj wstępnie skonfigurowany układ do swojej strony.
- Metoda 1: Wyrównywanie treści w pionie za pomocą funkcji Flex i automatycznego marginesu
- Wyrównanie zawartości na dole
- Wyrównanie zawartości w pionie dla kolumn wiersza
- Metoda 2: Wyrównywanie zawartości w pionie przy użyciu kierunku zginania kolumny
- A co z układami zawierającymi tylko jedną kolumnę?
- Końcowe przemyślenia na temat wyrównania pionowego i poziomego DIVI
Zrozumienie różnicy między Flexem a Divi
Atrybut CSS Flex (lub Flexbox) to po prostu sposób na rozmieszczenie elementów w stosach poziomych i pionowych (coś w rodzaju tabeli). Jednak w przeciwieństwie do typowych tabel, funkcja flex pozwala budować pola, które „dostosowują się” do rozmiaru zawartej w nich treści.
Divi używa atrybutu flex, gdy jako ustawienie wierszy wybierzesz opcję „Wyrównaj wysokość kolumn”. Mówiąc najprościej, gwarantuje to, że rozmiar wszystkich kolumn zostanie dostosowany do rozmiaru kolumny zawierającej najwięcej informacji. Ponieważ opcja „Wyrównaj wysokość kolumn” uruchamia elastyczność kontenera wierszy, możesz z niej skorzystać, dodając CSS do kolumn, aby zmienić zawartość każdej kolumny (lub pola).
Jeśli na amp dodasz „margines: auto” do dowolnej kolumny w wierszu, zawartość tej kolumny (niezależnie od tego, czy jest to jeden, czy kilka modułów) zostanie wyśrodkowana w pionie.
Wszystkie kolumny (i ich zawartość) zostaną wyśrodkowane w pionie, jeśli dodasz „align-items: center”; do swojego rzędu.
Oczywiście właściwość flex ma o wiele więcej zastosowań w projektowaniu stron internetowych i bardziej zaawansowane CSS, które możesz wykorzystać w swoim motywie. Jednak w tym samouczku chciałem zachować prostotę.
Czy to jest wymagane?
Z technicznego punktu widzenia nie. Możesz użyć niestandardowych odstępów, aby ustawić zawartość/moduły w pionie w kolumnie (dopełnienie i margines). Na amp możesz użyć opcji odstępów Divi, aby wyśrodkować moduły w pionie w kolejce, aby zapewnić kolumnie równe wypełnienie u góry iu dołu. Możesz także wyrównać zawartość do dołu, dodając górne wypełnienie do kolumny. Podczas dodawania większej ilości treści do strony może być konieczna zmiana odstępów. Co więcej, utrzymanie tego wyrównania w różnych rozmiarach przeglądarek może być problematyczne.
Jeśli więc szukasz sposobu na wyrównanie informacji w pionie bez martwienia się o określone odstępy, myślę, że będzie to korzystne.
Zacznijmy tą imprezę!
Dodaj wstępnie skonfigurowany układ do swojej strony.
Zacznę od układu strony z 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ę. Z rozwijanego menu wybierz „Użyj Divi Builder”, a następnie „Użyj Visual Builder”. Następnie z menu rozwijanego wybierz opcję „Wybierz gotowy układ”. Następnie wybierz pakiet układów firmy zajmującej się projektowaniem wnętrz w oknie Załaduj 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 stronę.
Metoda 1: Wyrównywanie treści w pionie za pomocą funkcji Flex i automatycznego marginesu
Otwórz ustawienia drugiego wiersza (tego bezpośrednio pod wierszem z tytułem strony). Otwórz grupę opcji Rozmiar w opcjach projektu i zwróć uwagę, że opcja „Wyrównaj wysokości kolumn” jest już aktywna; Oznacza to, że do wiersza dodano właściwość flex („display: flex;”).
W polu wprowadzania Element główny 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 tak, aby była wyśrodkowana w pionie.
| 01 | margines: automatyczny; |
Wyrównanie zawartości na dole
Możesz zmienić wartość marginesu w następujący sposób, aby wyrównać treść do dołu, tak aby wszystkie moduły układały się na dole kolumny:
| 01 | margines: auto 0; |
Wyrównanie zawartości w pionie dla kolumn wiersza
Możesz wyśrodkować w pionie zawartość wszystkich kolumn w wierszu, dodając następujący fragment do głównego elementu ustawień wiersza, zamiast dodawać „margines: auto” do każdej kolumny z osobna.
| 01 | wyrównanie elementów: środek; |
Możesz także użyć tego fragmentu, jeśli chcesz, aby wszystkie informacje w kolumnach były wyrównane do dołu:
| 01 | elementy wyrównania: koniec elastyczny; |
Pamiętaj, że możesz skorzystać z funkcji Rozszerzenia stylów Divi, klikając prawym przyciskiem myszy główny element z fragmentem 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 zrównoważone w pionie.
Być może jednak zauważyłeś, że biały kolor tła kolumny nie pokrywa już całego wiersza ze względu na dodanie do kolumny „margines: auto”. Można temu zaradzić, zmieniając kolor tła wiersza na biały i usuwając dopełnienie wiersza. Zamiast tego nauczę Cię, jak wyśrodkować treść kolumny bez konieczności zmiany marginesów.
Metoda 2: Wyrównywanie zawartości w pionie przy użyciu kierunku zginania 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 wyrównać w pionie, zmieniając margines.
Możemy jednak użyć kierunku elastycznego, aby wyrównać tekst w naszej kolumnie bez poświęcania efektu „Wyrównaj wysokość kolumny”, który utrzymuje ten sam rozmiar naszych kolumn (i tła kolumn). Aby to osiągnąć, dodamy do naszej kolejki kilka linii CSS, co spowoduje, że wszystkie znajdujące się w niej moduły zostaną ułożone pionowo, a następnie wyśrodkowane.
Wróćmy do poprzedniego amp wiersza. 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 wierszy.
Następnie w elemencie głównym kolumny 2 zastosuj następujący CSS:
| 010203 | wyświetlacz: flex; kierunek flex: kolumna; justify-treść: środek; |
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ę treść pionowo i ustawię wiersz na pełną szerokość, treść pozostanie wyśrodkowana.
Tworzenie pionowych napisów z różną ilością tekstu
Wyśrodkowanie zawartości kolumn w pionie może również pomóc w przypadku notek. Jak być może wiesz, nie każda notka będzie zawierała taką samą ilość tekstu opisującego funkcję lub usługę. Wyśrodkowanie tych notek w pionie może sprawić, że Twój układ będzie wyglądał pięknie.
W przypadku układu strony głównej płatności cyfrowych w tym amp wyrównam napisy w pionie.
Aby stworzyć bardziej realistyczny obraz wyglądu witryny, najpierw dodam do notek różne treści.
Teraz muszę „wyrównać wysokości kolumn” w ustawieniach wierszy.
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 w sekcji Główny element na karcie Zaawansowane w naszych Ustawieniach wierszy:
| 01 | wyrównanie elementów: środek; |
Zmień go na poniższy, aby wyrównać je na dole.
| 01 | elementy wyrównania: koniec elastyczny; |
Możesz także ustawić pierwszą kolumnę wyrównaną do dołu, a trzecią kolumnę do góry, resetując niestandardowe style CSS i dodając następujące niestandardowe marginesy.
Główny element CSS kolumny 1:
| 01 | margines: auto auto 0; |
Kolumna 3 Główny element CSS:
| 01 | margines: 0 auto auto; |
A co z układami zawierającymi tylko jedną kolumnę?
Nie potrzebujesz fragmentu kodu CSS ani elementu elastycznego, aby zawartość jednej kolumny była wyśrodkowana w pionie. Wszystko, co musisz zrobić, to upewnić się, że tekst ma równe odstępy powyżej i poniżej (lub modułów). Większość konsumentów wymaga treści wyśrodkowanych w pionie w układach z wieloma kolumnami, ponieważ chcą, aby sąsiedni materiał był prawidłowo ułożony.
Końcowe przemyślenia na temat wyrównania pionowego i poziomego DIVI
Mimo że to rozwiązanie opiera się na kilku mniejszych fragmentach niestandardowego CSS, uważam, że może być pomocne dla osób poszukujących szybkiego lekarstwa na czasochłonną procedurę. Prosimy o podzielenie się swoimi opiniami na temat tego podejścia, a także amp wnioskami na temat tego, jak zaoszczędziło ono czas i wysiłek w przeszłości.
Dziękuję za jasne wyjaśnienie. Nie działa to jednak w przypadku modułu Blog. Wtedy w rzędzie jest tylko 1 kolumna. O liczbie blogów obok siebie decyduje moduł (domyślnie 3). Czy kolumny tutaj również mogą być wykonane tak samo?
Cześć, nie. Przepraszam, jest przeznaczony tylko dla klasycznych kolumn DIVI, moduł blogu DIVI ma zupełnie inny kod do wyrównywania kolumn.
A co, jeśli chcesz, aby moduł był ustawiony 2/3 w dół lub 1/3 od góry, a nie idealnie pośrodku u góry lub u dołu?
Cześć, obawiam się, że będzie to wymagało wykonania niestandardowego CSS, domyślnie nie ma takiej opcji.
Być może możesz spróbować wyrównać treść na środku i dodać trochę dopełnienia do swojej zawartości, ale dokładnie sprawdź renderowanie na wszystkich urządzeniach.