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.
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ę.
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ę!
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ę.
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; |
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; |
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.
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; |
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.
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.
Nagłówki i stopki witryny internetowej są niezbędnymi elementami. W większości przypadków nagłówek zapewnia nawigację…
Dwa najpopularniejsze motywy WordPress na rynku to Astra i OceanWP. Profesjonalny…
Stworzenie doskonałej witryny z wiadomościami nie wymaga zostania projektantem stron internetowych. My…
Motyw gazety jest jednym z najważniejszych motywów WordPress zaprojektowanych przez tagDiv, firmę…
Jeśli chodzi o konfigurację sklepu internetowego, WooCommerce jest najczęściej wybieraną plugin . To…
Nagłówek jest zazwyczaj pierwszą rzeczą, którą widzi osoba odwiedzająca Twoją witrynę…
Zobacz komentarze
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 treści, ale dokładnie sprawdź renderowanie na wszystkich urządzeniach.