Jak rozszerzyć moduły, aby utworzyć unikalne układy kolumn w Divi

Każda nowa strona, którą projektujesz za pomocą Divi Builder, jest ustrukturyzowana przy użyciu wielu różnych układów kolumn. Divi zawiera wbudowane układy kolumn dla każdego wiersza, od jednej kolumny do sześciu kolumn. Czasami jednak możesz odczuwać potrzebę dostosowania tych kolumn, aby uzyskać jeszcze bardziej unikalne układy. Dzisiaj pokażę Ci kreatywny sposób, aby to zrobić.

W tym samouczku pokażę prostą technikę projektowania, która pozwala rozszerzać moduły przy użyciu ujemnych marginesów, aby zajmowały więcej niż jedną kolumnę. Ta technika pozwoli Ci zaprojektować unikalne niestandardowe układy, których być może nie uważałeś za możliwe.

Zacznijmy.

zapowiedź

Aby lepiej zrozumieć, co będziemy budować, oto przed i po wersji projektu przy użyciu tej techniki.

Przed

Jest to projekt układu bez używania niestandardowych marginesów w celu rozszerzenia modułów na inne kolumny.

Później

Jest to układ po rozszerzeniu dwóch modułów obrazu i trzech modułów tekstowych oznaczonych numerami „01”, „03” i „05”.

Zmiana jest subtelna, ale powinieneś być w stanie zobaczyć, że moduły rozszerzyły się, aby zająć sąsiednią kolumnę. Jedyną rzeczą potrzebną do osiągnięcia tego jest proste ustawienie marginesu na -100%.

A wynik na tablecie jest jeszcze bardziej ekscytujący.

Zrozumienie koncepcji

Domyślnie każdy moduł Divi ma szerokość 100%, co oznacza, że ​​każdy moduł umieszczony w kolumnie obejmie pełną szerokość kolumny, w której się znajduje. Szerokość rynny jest tym, co Divi używa do określenia ilości miejsca między każdą kolumną. Dlatego w tym samouczku ważne jest, aby ustawić szerokość rynny na 1, aby pozbyć się tej przestrzeni.

Oto ilustracja przedstawiająca, jak każdy moduł obejmuje całą szerokość kolumny w rzędzie z szerokością rynny ustawioną na 1.

Teraz, jeśli dodasz do modułu ujemny margines (lewy lub prawy), możesz łatwo rozszerzyć ten moduł, aby zajmował więcej niż jedną kolumnę. Dzięki temu możesz tworzyć niestandardowe układy kolumn dla swojej strony, których być może nie brałeś pod uwagę.

Na tej ilustracji widać, że dodanie -100% lewego marginesu do modułu w kolumnie 5 powoduje rozszerzenie modułu w lewo, aby zajmował zarówno kolumnę 5, jak i kolumnę 4.

Jedną z zalet sześciokolumnowego układu jest to, że projekt jest ładnie zachowany na tablecie.

Ponadto, ze względu na sposób uporządkowania kolumn od lewej do prawej, moduły należy generalnie rozciągać w lewo, aby zawartość nie była ukryta za kolumną. Jest to szczególnie ważne, jeśli masz ustawiony kolor tła. Jeśli więc napotkasz problem związany z ukryciem zawartości modułu za kolumną, prawdopodobnie rozszerzasz moduł w złym kierunku.

Dlaczego warto korzystać z układu sześciu kolumn?

Istnieją trzy główne powody zastosowania układu sześciu kolumn w tej technice projektowania. Pierwszym powodem jest to, że daje więcej kolumn do pracy. Drugim powodem jest to, że układy sześciu kolumn przekształcają się w układ trzech kolumn na tablecie, co pozwala na bardzo dobre zachowanie elementów projektu. Trzecim powodem jest to, że kolumny zachowają swoją kolejność na urządzeniach mobilnych, więc kolory tła kolumn pozostaną takie same. Jest to przydatne w przypadku układów siatki.

Ten projekt działa również z układem kolumn 1/2 1/6 1/6 1/6 i układem kolumn 1/6 1/6 1/6 1/2, ponieważ oba zachowają również trzy kolumny na tablecie.

Wdrażanie projektu

Aby pokazać, jak działa ta technika projektowania, przeprowadzę Cię przez proces tworzenia prostego układu siatki do prezentowania produktów. Następnie pokażę, jak rozszerzyć moduły na inne kolumny, aby stworzyć niestandardowy projekt układu.

Konfigurowanie sekcji i rzędów

Aby rozpocząć, utwórz nową stronę i wdróż konstruktor wizualny. Następnie wybierz „Buduj od podstaw”. Następnie dodaj układ kolumn 1/2 1/6 1/6 1/6 do pierwszej sekcji.

Następnie zaktualizuj ustawienia wiersza w następujący sposób:

Kolor tła: #222831
Szerokość rynny: 1
Wyrównaj wysokości kolumn: TAK
Margines niestandardowy: 0px góra, 0px dół
Niestandardowe dopełnienie: 0px góra, 0px dół

Zapisz ustawienia.

Ponieważ wszystkie trzy rzędy dla tego projektu będą współdzielić te ustawienia rzędów. Śmiało zduplikuj wiersz, aby utworzyć drugi wiersz. Następnie zmień drugi wiersz na układ sześciokolumnowy.

Aby utworzyć trzeci wiersz, po prostu zduplikuj drugi wiersz.

Dodawanie modułów do rzędu 1

W pierwszej kolumnie pierwszego górnego rzędu dodaj moduł tekstowy z następującymi ustawieniami:

Kolor tekstu: jasny
Rozmiar tekstu: 16px
Niestandardowe wypełnienie: 2vw góra, 2vw dół, 2vw lewo, 2vw prawo

W drugiej kolumnie pierwszego wiersza dodaj moduł notki z następującymi ustawieniami:

Tytuł: [wpisz tytuł]
Treść: [usuń]
Ikona: [wybierz ikonę]
Kolor ikony: #eeeeee
Rozmiar czcionki ikony: 50px
Kolor tekstu: jasny
Orientacja tekstu: Środek
Niestandardowa wyściółka: 3vw Top, 2vw Bottom

Zapisz ustawienia

W trzeciej kolumnie dodaj obraz.

W ostatniej kolumnie chcemy pozostawić ją pustą, abyśmy mogli rozszerzyć moduł obrazu, aby wypełnić również tę kolumnę. Nie chcemy jednak pozostawiać jej całkowicie pustej, aby kolumna była aktywna podczas układania w stos na urządzeniach mobilnych. Najprostszą rzeczą do zrobienia jest więc dodanie modułu dzielnika i nie pokazywanie dzielnika. Następnie możemy schować przegrodę do smartfona.

Zaktualizuj ustawienia rozdzielacza w następujący sposób:

Pokaż dzielnik: NIE
Wyłącz na: Telefon

Dodawanie modułów do rzędów 2 i 3

Przejdźmy teraz do wiersza 2. W pierwszej kolumnie skopiuj i wklej moduł notki, który utworzyłeś w drugiej kolumnie pierwszego wiersza. Następnie zmień ikonę i tekst tytułu na czarny kolor.

Następnie dodaj moduł tekstowy do drugiej kolumny z następującymi elementami:

Zadowolony:

<h2>Product</h2>
01

Kolor tekstu: #ffffff
Rozmiar tekstu: 50px
Wysokość linii tekstu: 1em
Orientacja tekstu: w prawo
Wyrównanie tekstu nagłówka 2: do lewej
Kolor tekstu nagłówka 2: #ffffff
Nagłówek 2 Wysokość linii: 3em
Niestandardowe wypełnienie: 2vw góra, 2vw dół, 2vw lewo, 2vw prawo

Następnie skopiuj właśnie utworzony moduł tekstowy i wklej go do kolumny 4 i kolumny 6.

Możesz także wkleić ten sam moduł tekstowy w kolumnie 3, kolumnie 5 i kolumnie 6 wiersza 3. Następnie możesz użyć wbudowanego edytora, aby zmienić numery każdego z modułów tekstowych, aby zobaczyć, jak te moduły się układają mobilny później.

W kolumnie 2 wiersza 3 dodaj kolejny obraz.

Następnie wypełnij wszystkie puste kolumny w całej sekcji dzielnikiem, kopiując i wklejając dzielnik utworzony w wierszu 1.

Oto jak twój układ powinien wyglądać w tym momencie (puste kwadraty reprezentują moduł dzielnika):

Dodawanie ujemnego marginesu w celu rozszerzenia modułów na inne kolumny

W tym momencie możemy zacząć rozbudowywać nasze moduły wykorzystując ujemną marżę. Ten proces jest niezwykle prosty.

Otwórz ustawienia modułu obrazu dla obrazu w pierwszym wierszu. Ponieważ chcemy rozszerzyć obraz w prawo, dodamy prawy margines -100%.

Następnie dodaj -100% lewego marginesu do modułu tekstowego w wierszu 2, kolumna 3.

Teraz skopiuj style modułów i wklej je do modułów tekstowych w wierszu 2, kolumnie 6, a także do modułu tekstowego w wierszu 3, kolumnie 5.

Pozostało tylko rozszerzyć obraz w wierszu 3, kolumnie 2. Zaktualizuj moduł obrazu z niestandardowym marginesem -100% Lewy.

Dodawanie kolorów tła do kolumn

Ostatnim etapem projektowania jest dodanie kolorów tła do kolumn. W pierwszym (górnym) wierszu dodaj:

Kolor tła kolumny 1: #393e46

W drugim rzędzie dodaj następujące elementy:

Kolor tła kolumny 1: #eeeeee
Kolor tła kolumny 4: #7971ea
Kolumna 5 Kolor tła: #393e46
Kolor tła kolumny 6: #393e46

A w ostatnim wierszu dodaj:

Kolor tła kolumny 3: #7971ea
Kolor tła kolumny 6: #7971ea

To tyle, jeśli chodzi o projekt pulpitu. Teraz upewnijmy się, że wszystko wygląda dobrze na urządzeniach mobilnych.

Dostosowywanie układu wyświetlacza smartfona

W tej chwili obecny układ będzie wyglądał świetnie na komputerze stacjonarnym i tablecie, ale te ujemne marginesy, które dodaliśmy, będą musiały zostać skorygowane na smartfonie.

Normalnie, gdybym chciał naprawić ujemny margines na smartfonie, po prostu ustawiłbym lewy margines na 0% w ustawieniach modułu dla urządzeń smartfonów. Jednak nadal będzie konieczna korekta dla rozmiarów ekranu o szerokości od 479 pikseli do 767 pikseli. Z tego powodu najlepszym sposobem na naprawienie ujemnej marży na smartfonie jest zrobienie tego za pomocą fragmentu niestandardowego CSS.

Przejdź do ustawień strony i dodaj następujący niestandardowy CSS w zakładce Zaawansowane:

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

To, co robi ten fragment kodu CSS, to ustawienie prawego i lewego marginesu wszystkich modułów na 0%, gdy rozmiar ekranu jest równy lub mniejszy niż 479 pikseli szerokości. To ładnie rozwiązuje problem!

Sprawdźmy teraz ostateczny projekt.

Końcowe przemyślenia

Używanie ujemnego marginesu do rozszerzania modułów może być wygodnym sposobem na uzyskanie unikalnych projektów układu na komputerze stacjonarnym i tablecie bez konieczności uciekania się do kilku CSS, aby zmienić domyślne układy kolumn Divi. Jedną z moich ulubionych rzeczy w tej technice projektowania jest to, jak pięknie wygląda układ na tablecie. Mamy nadzieję, że przyda się przy następnym projekcie. Jeśli już, zawsze pomaga lepiej zrozumieć Divi.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!