Jak rozłożyć kolumny i moduły Divi w celu uzyskania unikalnych projektów zepsutych siatek?
Opublikowany: 2019-07-10Nowoczesne projektowanie stron internetowych wciąż polega na przełamywaniu siatki. Odbywa się to poprzez rozłożenie elementów i akcentów projektowych w pozycjach, które przełamują normalną strukturę układu siatki. Możesz zobaczyć, jak stosujemy wiele z tych uszkodzonych projektów siatek w naszych niesamowitych układach Divi. Zwykle wiąże się to z przenoszeniem modułów poza kolumnę lub wiersz, tak aby wychodziły poza kontener lub nakładały się na inne elementy na stronie. Ale być może nie pomyślałeś o przeniesieniu samej kolumny.
W tym samouczku pokażę, jak rozłożyć kolumny i moduły Divi, aby uzyskać unikalne projekty zepsutych siatek. Dzięki nowym opcjom kolumn Divi możesz łatwo przenosić kolumny, a także moduły, które zawierają. Pozwala to zaprojektować zarówno moduł, jak i kolumnę z unikalnymi stylami, aby stworzyć kreatywny projekt złamanej siatki.
Zacznijmy!
zapowiedź
Oto krótki rzut oka na przykłady projektów, które zbudujemy w tym samouczku.
Pobierz układ kolumn i modułów Stagger Divi za DARMO
Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.
Pobierz za darmo
Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.
Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!
Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.
Przejdźmy do samouczka, dobrze?
Wyjaśnienie podstawowego pomysłu
Podstawowa idea rozłożenia kolumn i modułów Divi w celu uzyskania unikalnych projektów zepsutych siatek polega na użyciu właściwości przekształcenia Divi do określania pozycji kolumn i modułów, które zawierają.
Gdy elementy zostaną ułożone schodkowo, masz wszystkie cechy konstrukcyjne kolumny i modułu, aby dodać akcenty projektowe, które tworzą unikalne projekty złamanej siatki.
Na przykład, możesz dodać unikalne tło (kolor, obraz itp.) z cieniem do swojej kolumny i zupełnie innym tłem i cieniem do swojego modułu.
Teraz, gdy masz już podstawową ideę, stwórzmy projekt od podstaw.
Czego potrzebujesz, aby zacząć
Aby rozpocząć, będziesz potrzebować:
- Zainstalowany i aktywny motyw Divi
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
- Kilka obrazów do wykorzystania do pozornej treści
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Układanie kolumn i modułów w celu stworzenia unikalnego projektu złamanej siatki w Divi
Najpierw utwórz nową zwykłą sekcję z wierszem w dwóch kolumnach.
Następnie dodaj moduł call to action w kolumnie 1.
Zmień tekst tytułu na „Divi Module” lub inny krótki tytuł, który wybierzesz.
Następnie zaktualizuj moduł ciemnym kolorem tła, a następnie zmień tekst tytułu w następujący sposób:
Kolor tła: #333333
Wyrównanie tekstu: do lewej
Czcionka tytułu: gorzka
Tytuł Rozmiar tekstu: 50px
Odstępy między literami tytułu: 2px
Następnie zaktualizuj przycisk wezwania do działania w następujący sposób:
Rozmiar tekstu przycisku: 16px
Kolor tekstu przycisku: #333333
Kolor tła przycisku:
Kolor obramowania przycisku: #ffffff
Promień obramowania przycisku: 25px
Odstępy między przyciskami: 2px
Czcionka przycisku: Raleway
Waga czcionki przycisku: pogrubiona
Styl czcionki przycisku: TT
Następnie skopiuj moduł i wklej duplikat w kolumnie 2, aby w każdej kolumnie znajdował się ten sam moduł wezwania do działania.
Zaktualizuj odstępy między wierszami
Teraz dodajmy górny i dolny margines do rzędu, aby zrobić miejsce na projekt.
Marża: 20% góra, 20% dół
Dodaj obrazy tła kolumny
Mimo że nie będziemy ich jeszcze widzieć, dodamy obrazy tła do każdej z kolumn. Staną się one widoczne, gdy przeniesiemy nasz moduł poza kontener kolumnowy za pomocą translatora transformacji.
Śmiało i otwórz ustawienia dla kolumny 1 i dodaj obraz tła.
Następnie otwórz ustawienia dla kolumny 2 i dodaj obraz tła.
Dodaj cień pudełka do każdej kolumny
Otwórz ustawienia kolumny 1 i dodaj następujący cień pola:
Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia pudełka: 0px
Siła rozprzestrzeniania się cieni w pudełku: 100px
Kolor cienia: rgba (151,178,193,0,21)
Następnie dodaj ten sam styl cienia pola do kolumny 2. Aby przyspieszyć działanie, możesz użyć opcji kliknięcia prawym przyciskiem myszy, aby skopiować style cienia pola w kolumnie 1, a następnie wkleić je do stylów cieni pola w kolumnie 2.
Zauważysz, że cienie pudełek będą się nakładać. Użycie półprzezroczystego koloru cienia pudełkowego pomoże stworzyć fajny efekt nakładania się. To jest świetna rzecz w używaniu cieni skrzynkowych w projektowaniu. W przeciwieństwie do obramowań, możesz dodać duże cienie, które wyglądają jak obramowania, ale nie wpływają na rzeczywiste odstępy w układzie.
Rozłóż kolumny Divi za pomocą translatora transformacji
W tym momencie jesteśmy gotowi do rozpoczęcia rozkładania kolumn i modułów, aby ukończyć projekt uszkodzonej siatki. Najpierw musimy przenieść kolumny do zewnętrznej krawędzi strony. Następnie możemy później przesunąć moduły do środka.
Kolumna schodkowa 1
Otwórz ustawienie kolumny 1 i dodaj następującą właściwość translacji transformacji.
Przekształć Przesuń oś X: 25%
Transform Translate oś Y: -25% (komputer), -5% (tablet)
Kolumna schodkowa 2
W kolumnie 2 dodaj następującą właściwość translacji transformacji.
Przekształć Przesuń oś X: -25%
Transform Translate oś Y: 25% (komputer), 5% (tablet)
Rozłóż moduły za pomocą translatora transformacji
Teraz jesteśmy gotowi do rozłożenia naszych modułów, przenosząc je poza kontener kolumny. Spowoduje to odsłonięcie obrazu tła kolumny i pozwoli nam dodać kolejny cień do modułu w celu uzyskania dodatkowego nakładającego się elementu projektu.
Moduł schodkowy 1
Otwórz ustawienia modułu wezwania do działania w kolumnie 1 i zaktualizuj następujące elementy:
Przekształć Przesuń oś X: -60%
Transform Translate oś Y: 50% (komputer), 10% (tablet)
Dodaj cień do modułu 1
Następnie dodaj następujący cień pola do modułu wezwania do działania w kolumnie 1:
Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia pudełka: 0px
Siła rozprzestrzeniania się cieni w pudełku: 100px
Kolor cienia: rgba (151,178,193,0,21)
Moduł schodkowy 2
Aby przenieść moduł w kolumnie 2, zaktualizuj następujące elementy:
Przekształć Przesuń oś X: 60%
Transform Translate oś Y: -50% (komputer), -10% (tablet)
Dodaj cień do modułu 2
Następnie możemy dodać cień pudełka do modułu call to action w kolumnie 2. Musimy sprawić, by ten cień był prawie całkowicie przezroczysty, ponieważ będzie on nakładał się na moduł 1 i nie chcemy utrudniać odczytania treści.
Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia pudełka: 0px
Siła rozprzestrzeniania się cieni w pudełku: 100px
Kolor cienia: rgba (151,178,193,0,09)
Dodaj ramkę cienia pola wiersza
Aby ukończyć projekt, dodajmy cień do wiersza, który służy jako element projektu ramki, który znajduje się w tle.
Cień pudełka: patrz zrzut ekranu
Pozycja pionowa cienia pudełka: 0px
Kolor cienia: #97b2c1
Ostateczny projekt
Sprawdźmy teraz ostateczny projekt.
Pulpit
Tablet
Telefon
Eksperymentowanie z różnymi projektami
Fajne w tym projekcie jest to, że umożliwia łatwą zmianę liczby modułów, kolorów i odstępów dla nowych projektów. Możesz także ustawiać kolumny i moduły Divi w różnych pozycjach.
Dodawanie odstępów do modułu, aby utworzyć obraz tła kolumny o równym rozmiarze do modułu
Ponieważ rozmiar kolumny jest podyktowany rozmiarem zawartej w niej zawartości, jakiekolwiek miejsce dodane do modułu również zwiększy rozmiar kolumny. A ponieważ nasza kolumna została przesunięta z obrazem tła, jest to łatwy sposób, aby obraz tła zawsze był skalowany z rozmiarem modułu, aby uzyskać zrównoważony projekt.
Na przykład otwórz ustawienia modułu wezwania do działania w kolumnie 1 i zaktualizuj dopełnienie w następujący sposób:
Wyściółka: 20% na górze, 15% na dole
I zauważ, jak obraz tła w kolumnie 1 skaluje się wraz z rozmiarem modułu.
Dodawanie kolejnych modułów
W ten sam sposób dodanie większej ilości dopełnienia do modułu zwiększa rozmiar tła kolumny, dodanie większej liczby modułów w kolumnie również zwiększy rozmiar tła kolumny.
Na przykład zduplikuj moduł w kolumnie 2 i zauważ, jak obraz tła rozszerza się, aby pomieścić miejsce potrzebne na dwa moduły w kolumnie.
Następnie możesz przesunąć górny moduł w kolumnie 2 nieco w prawo, aby uzyskać ładny, alternatywny projekt.
Oto wynik.
Zmiana kolorów
Jeśli chcesz dopasować układ do własnego schematu kolorów, świetnym sposobem na to jest aktualizacja kolorów cieni w pudełku.
Oto przykład, jak by to wyglądało podczas aktualizacji półprzezroczystych cieni pudełkowych dla kolumny 1, modułu 1 i modułu 2.
Końcowe przemyślenia
Mam nadzieję, że ten samouczek dał ci trochę inspiracji, jak możesz rozłożyć kolumny i moduły Divi, aby stworzyć własne unikalne projekty zepsutych siatek. Technika jest naprawdę prosta, obejmuje głównie kilka właściwości translacji transformacji, aby rozłożyć kolumny i moduły oraz kilka cieni skrzynkowych, aby stworzyć unikalny, zepsuty projekt. Zachęcamy do odkrywania większej liczby opcji kolorystycznych i wprowadzenia większej liczby modułów, aby zobaczyć, dokąd może Cię zaprowadzić projekt.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!