Jak kreatywnie korzystać z nowych opcji wyrównania rzędów Divi

W dzisiejszym samouczku Divi pokażemy, jak wykorzystać nowe opcje wyrównania wierszy w Divi na swoją korzyść. Będziemy łączyć opcje wyrównania wierszy z innymi wbudowanymi opcjami projektowania, aby dać ci wyobrażenie o tym, co jest możliwe dzięki zaawansowanym opcjom projektowania Divi. Przykład, który pokażemy, jak odtworzyć, nie zawiera absolutnie żadnego dodatkowego kodu, co oznacza, że ​​każdy na dowolnym poziomie umiejętności może osiągnąć ten projekt.

Zacznijmy!

Podgląd projektu

Oto krótki rzut oka na to, co będziemy dzisiaj tworzyć (na komputerze):

A oto jak projekt będzie wyglądał na urządzeniach mobilnych:

Jak kreatywnie korzystać z nowych opcji wyrównania rzędów Divi

Subskrybuj nasz kanał YouTube

Ustawienia dostosowywania motywów

Główny pasek menu

Jak widać, dopasowaliśmy również menu główne do układu. Aby zmodyfikować główny pasek menu, przejdź do pulpitu WordPress > Wygląd > Dostosuj > Nagłówek i nawigacja > Główny pasek menu > I wprowadź następujące zmiany:

• Ukryj obraz logo: Włącz
• Wysokość menu: 30
• Rozmiar tekstu: 17
• Odstępy między literami: -1
• Styl czcionki: wielkie litery
• Kolor tekstu: #FFFFFF
• Kolor aktywnego łącza: #FFFFFF
• Kolor tła: rgba (255, 255, 255, 0)
• Kolor tła rozwijanego: rgba (255, 255, 255, 0)

Sekcja bohaterów

Po zmodyfikowaniu menu głównego nadszedł czas na rozpoczęcie pracy z układem. Pierwszą rzeczą, którą musisz zrobić, to dodać nową stronę, przełączyć się na Visual Builder i dodać nową sekcję standardową. Ta pierwsza sekcja będzie naszą sekcją bohaterów i wygląda tak:

Ustawienia sekcji

Tło gradientowe

Po dodaniu sekcji standardowej możesz dodać do niej tło gradientowe:

• Pierwszy kolor: #9e5555
• Drugi kolor: #000000
• Typ gradientu: liniowy
• Kierunek gradientu: 180 stopni
• Pozycja startowa: 50%
• Pozycja końcowa: 50%

Ustawienia wiersza

Kolorowa nakładka

Następnie dodaj do tej sekcji wiersz z jedną kolumną i otwórz jej ustawienia. Pierwszą rzeczą, którą musimy zrobić, to dodać kolorową nakładkę. Możesz wybrać, jak ciemny ma być obraz, wybierając ciemnoszary kolor. W tym przypadku użyliśmy „#595959”.

Zdjęcie w tle

Następną rzeczą, którą musimy zrobić, to dodać obraz tła do jednokolumnowego wiersza i zastosować kolorową nakładkę. Aby zmieszać kolorową nakładkę i obraz tła, wybierz „Pomnóż” jako mieszankę obrazu tła.

Wyrównanie środkowego rzędu

Jak większość stron internetowych, w sekcji bohatera wybierzemy wyrównanie do środkowego wiersza.

Utwórz wiersz o pełnej szerokości

Chcemy również, aby nasz wiersz miał pełną szerokość, więc włączymy tę opcję w podkategorii Rozmiar na karcie Projekt.

Niestandardowe wypełnienie

Ostatnią rzeczą, jaką musimy zrobić w ustawieniach wiersza, jest dodanie niestandardowego wypełnienia „300px” na górze i na dole.

Pierwszy moduł tekstowy

Gdy mamy już wszystkie ustawienia, dodamy do wiersza pierwszy moduł tekstowy. Wybierz tekst, który ma się pojawić na karcie Treść i przejdź do karty Projekt. Na karcie Projekt upewnij się, że następujące ustawienia dotyczą podkategorii Tekst:

• Czcionka tekstu: Arvo
• Rozmiar czcionki tekstu: 64 (komputer stacjonarny), 47 (tablet), 33 (telefon)
• Kolor tekstu: #FFFFFF
• Wysokość linii tekstu: 1em
• Orientacja tekstu: Środek

Drugi moduł tekstowy

Następnie dodaj kolejny moduł tekstowy. Drugi moduł tekstowy zawiera natomiast następujące ustawienia:

• Czcionka tekstu: Lato
• Rozmiar czcionki tekstu: 25 (komputer stacjonarny), 18 (tablet), 16 (telefon)
• Kolor tekstu: #FFFFFF
• Wysokość linii tekstu: 1,7 em
• Orientacja tekstu: Środek

Sekcja druga

Po zakończeniu sekcji bohatera możemy przejść do sekcji drugiej. W tej sekcji użyjemy wyrównania do prawego wiersza zamiast do środka w połączeniu z niestandardowymi tłem marginesów i kolumn, aby uzyskać piękny efekt. W tej sekcji musimy utworzyć dwie wersje wierszy: wersję komputerową i wersję na tablet/telefon. Dzięki temu projekt będzie wyglądał oszałamiająco na wszystkich rodzajach ekranów.

Ustawienia sekcji

Tło gradientowe

Po dodaniu drugiej sekcji dodaj do niej następujące tło gradientowe:

• Pierwszy kolor: #000000
• Drugi kolor: #d6d6d6
• Typ gradientu: liniowy
• Kierunek gradientu: 184 stopni
• Pozycja startowa: 20%
• Pozycja końcowa: 20%

Dodaj wiersz pulpitu

Następnie możesz iść dalej i dodać do niego pierwszy dwukolumnowy wiersz; ten wiersz będzie wersją na komputery stacjonarne. Na szczęście większość z nich będziemy mogli ponownie wykorzystać również w wersji na tablety/komórki.

Ustawienia wiersza

Tło kolumny

Na karcie Treść dodaj „#FFFFFF” jako kolor tła drugiej kolumny.

Wyrównanie do prawego rzędu

Przejdź do karty Projekt i wybierz wyrównanie do prawego wiersza.

Utwórz wiersz o pełnej szerokości

Następnie otwórz podkategorię Rozmiar i włącz opcję „Ustaw ten wiersz o pełnej szerokości”.

Niestandardowe wypełnienie

Ostatnią rzeczą, którą musisz zrobić w ustawieniach wiersza, jest dodanie górnego dopełnienia „300px” do wiersza i następującego dopełnienia do drugiej kolumny:

• Góra: 35px
• Po prawej: 35px
• Dół: 150px
• Po lewej: 35px

Kolumna 1

Moduł pierwszego dzielnika

W pierwszej kolumnie zaczniemy od dodania modułu rozdzielającego. W podkategorii Widoczność na karcie Treść włącz opcję „Pokaż dzielnik”.

Przejdź do karty Projekt i wybierz „#FFFFFF” jako kolor rozdzielacza.

Następnie wybierz „Solidny” jako styl dzielnika i „Góra” jako pozycję dzielnika w podkategorii Style.

Ostatnią rzeczą, którą musisz zrobić w zakładce Projekt modułu dzielnika, jest dokonanie następujących zmian w podkategorii Rozmiar:

• Waga rozdzielacza: 3
• Wysokość: 0px
• Szerokość: 20%
• Wyrównanie modułu: w prawo

Pierwszy moduł tekstowy

Tuż pod modułem dzielnika dodaj pierwszy moduł tekstowy i użyj następujących ustawień w podkategorii Tekst na karcie Projekt:

• Czcionka tekstu: Arvo
• Rozmiar czcionki tekstu: 30px
• Kolor tekstu: #000000
• Wysokość linii tekstu: 1,6 em
• Orientacja tekstu: Środek

Klonuj pierwszy moduł rozdzielacza i zmień wyrównanie

Sklonuj utworzony przez nas moduł dzielnika i umieść go tuż pod pierwszym modułem tekstowym. Jedyną rzeczą, którą należy zmienić, jest Wyrównanie modułu w podkategorii Sizing. Zamiast mieć go po prawej stronie, wybierz lewą.

Drugi moduł tekstowy

Ostatnią rzeczą, którą musisz dodać do pierwszej kolumny, jest kolejny moduł tekstowy z następującymi ustawieniami:

• Czcionka tekstu: Lato
• Rozmiar czcionki tekstu: 14
• Wysokość linii tekstu: 1,7 em
• Orientacja tekstu: Środek

Kolumna 2

Moduł obrazu

Pierwszą rzeczą, którą musisz dodać do drugiej kolumny, jest moduł obrazu z następującymi ustawieniami w podkategorii Odstępy na karcie Projekt:

• Pokaż przestrzeń pod obrazem: Tak
• Górny margines: -300px
• Po lewej: -80px

Moduł tekstowy

Następnie dodaj moduł tekstowy tuż pod modułem obrazu i wybierz następujące ustawienia w podkategorii Tekst na karcie Projekt:

• Czcionka tekstu: Lato
• Rozmiar czcionki tekstu: 14
• Wysokość linii tekstu: 1,7 em
• Orientacja tekstu: Środek

Moduł śledzenia mediów społecznościowych

Ostatnią rzeczą, którą musisz dodać do drugiej kolumny, jest moduł śledzenia w mediach społecznościowych. Dodaj tyle ikon społecznościowych, ile chcesz i upewnij się, że wybrałeś „Środek” jako wyrównanie elementu na karcie Projekt.

Wyłącz na tablecie i telefonie

Gdy to wszystko zrobisz, możesz wyłączyć wiersz na telefonie i tablecie.

Dodaj wiersz mobilny

Klonuj rząd pulpitu

Teraz, gdy stworzyliśmy już wersję na komputery stacjonarne, wersja mobilna będzie działać znacznie szybciej. Sklonuj wiersz Pulpit i wykonaj kolejne kroki.

Przełącz kolumny

Zacznij od zamiany modułów znajdujących się w obu kolumnach.

Kolor tła kolumny

Następnie usuń kolor tła drugiej kolumny i zamiast tego umieść go w pierwszej kolumnie.

Wypełnienie kolumny

Zamiast umieszczać niestandardowe wypełnienie w drugiej kolumnie, musimy umieścić je w pierwszej kolumnie. Poza tym dolne wypełnienie to nie „150px”, ale „35px”, podobnie jak górne, prawe i lewe dopełnienie.

Użyj wyrównania środkowego wiersza

Następnie musimy również zmienić wyrównanie wierszy na „Centrum”.

Wyłącz na pulpicie

Na koniec upewnij się, że wiersz jest wyłączony na pulpicie.

Część trzecia

Trzecia sekcja będzie bardzo podobna do drugiej. Utworzenie tej sekcji będzie łatwe, ponieważ możemy przejąć większość ustawień drugiej sekcji i wprowadzić pewne poprawki. Po wykonaniu wszystkich kroków będziesz mógł zobaczyć następujący wynik:

Ustawienia sekcji

Tło gradientowe

Dodaj nową sekcję standardową i użyj następującego tła gradientowego:

• Pierwszy kolor: #d6d6d6
• Drugi kolor: #9e5555
• Typ gradientu: liniowy
• Kierunek gradientu: 184 stopni
• Pozycja startowa: 30%
• Pozycja końcowa: 30%

Margines niestandardowy

Następnie dodaj również niestandardowy margines „-200px”.

Wiersz pulpitu

Ten sam sposób pracy liczy się dla trzeciej sekcji; zamierzamy stworzyć wersję na komputery stacjonarne i tablety/telefony.

Klonuj rząd drugiej sekcji pulpitu

Zacznij od sklonowania wiersza Pulpit z poprzedniej sekcji. Większość ustawień jest taka sama i omówimy zmiany, które należy wprowadzić.

Przełącz kolumny

Jedną ze zmian, które musimy wprowadzić, jest przełączenie modułów znajdujących się w obu kolumnach.

Kolor tła kolumny

Następnie musimy również usunąć kolor tła drugiej kolumny i dodać „#000000” jako kolor tła pierwszej kolumny.

Wypełnienie kolumny

Usuń niestandardowe dopełnienie kolumny 2 i użyj niestandardowego dopełnienia „35px” dla górnego, prawego, dolnego i lewego niestandardowego dopełnienia pierwszej kolumny.

Użyj wyrównania do lewego rzędu

Zmień także wyrównanie wiersza z prawej na lewą.

Margines niestandardowy modułu obrazu

Podkategoria odstępów modułu obrazu również będzie wymagała pewnych zmian:

• Góra: -150px
• Po prawej: -80px

Margines niestandardowy pierwszego modułu dzielnika

Następnie dodaj górny margines „200px” do pierwszego modułu dzielnika w drugiej kolumnie.

Użyj przeciwnych kolorów

Jak widać; użycie kolorów jest przeciwieństwem drugiej sekcji. Śmiało i zmień wszystkie kolory czcionek na „#FFFFFF”, a kolory dzielnika na „#000000”.

Wyłącz na tablecie i telefonie

Chociaż wiersz jest już wyłączony na tablecie i telefonie (z powodu klonu), możesz przejść do podkategorii Widoczność, jeśli chcesz się upewnić.

Wiersz mobilny

Klonuj poprzedni wiersz pulpitu

W przypadku wersji mobilnej sklonuj właśnie utworzony wiersz Desktop i wprowadź zmiany, które pojawią się w następnej części tego posta.

Użyj wyrównania środkowego wiersza

Otwórz ustawienia wiersza i zmień Wyrównanie wiersza na środek.

Margines niestandardowy modułu obrazu

Kolejną rzeczą, którą musisz zrobić, to zmienić górny margines modułu obrazu na '-20%'.

Wyłącz na pulpicie

Na koniec upewnij się, że ten ostatni wiersz jest wyłączony na komputerze.

Wynik

Postępując zgodnie z tym samouczkiem krok po kroku, powinieneś być w stanie osiągnąć następujący wynik na komputerze:

Oraz następujący wynik na urządzeniu mobilnym:

Końcowe przemyślenia

W tym poście pokazaliśmy, jak można twórczo korzystać z różnych opcji wyrównania wierszy w Divi Builder. Ludzie najwięcej uczą się przez działanie, dlatego przedstawiliśmy Wam przykład, który krok po kroku pokazaliśmy, jak tworzyć. Jeśli masz jakieś pytania lub sugestie; możesz zostawić komentarz w sekcji komentarzy poniżej.

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!