Nowoczesne projektowanie stron internetowych zawsze polega na przełamywaniu siatki. Odbywa się to poprzez układanie elementów i akcentowanie akcentów w pozycjach, które przełamują normalną strukturę siatki. Możesz zobaczyć je zastosowane w projektach łamanych siatek na świetnych 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 przesunięciu kolumny.
W tym samouczku pokażę Ci, jak rozłożyć kolumny i moduły Divi dla unikalnych projektów zepsutych siatek. Z wiadomościami opcje kolumn Divi , możesz łatwo przenosić kolumny i zawarte w nich moduły. Pozwala to zaprojektować zarówno moduł, jak i kolumnę w unikalnych stylach, tworząc kreatywny projekt z łamaną siatką.
Zacznijmy!
badanie
Oto przegląd przykładów projektowych, które zbudujemy w tym samouczku.
To, czego potrzebujesz, aby zacząć
Aby rozpocząć, potrzebujesz:
- Le Motyw Divi zainstalowany i aktywny
- Nowa strona stworzona do tworzenia od zera w interfejsie użytkownika (konstruktor wizualny)
- Niektóre obrazy do wykorzystania treść fikcyjny
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Stagnacja kolumn i modułów w celu stworzenia unikalnego projektu zepsutej siatki w Divi
Zacznij od utworzenia nowej zwykłej sekcji z rzędem dwóch kolumn.
Następnie dodaj wywołanie do modułu akcji w kolumnie 1.
Zmień tekst tytułu na „Moduł Divi” lub inny krótki tytuł do wyboru.
Następnie zaktualizuj moduł ciemnym kolorem tła, a następnie edytuj tekst tytułu w następujący sposób:
Kolor tła: #333333
Wyrównanie tekstu: do lewej
Tytuł czcionki: gorzki
Rozmiar tekstu tytułu: 50px
Odstępy między literami: 2px
Następnie zaktualizuj przycisk wywołania modułu akcji w następujący sposób:
Rozmiar tekstu przycisku: 16px
Kolor tekstu przycisku: #333333
Kolor tła przycisku: Kolor
obramowanie przycisku: #ffffff
Promień granicy przycisku: 25px
Odstępy między literami przycisków: 2px
Czcionka przycisku: Raleway Size of
Czcionka przycisków: pogrubienie
Styl czcionki kluczowej: TT
Następnie skopiuj moduł i wklej duplikat do kolumny 2, aby w każdej kolumnie było takie samo wywołanie modułu akcji.
Zaktualizuj odstępy między wierszami
Dodaj teraz górny i dolny margines, aby zrobić miejsce dla projektu.
Margines: 20% w górę, 20% w dół
Dodaj obrazy tła kolumny
Mimo że nie będziemy ich jeszcze widzieć, będziemy dodawać obrazy tła do każdej z kolumn. Staną się widoczne, gdy przeniesiemy nasz moduł z kontenera kolumn za pomocą transform translate.
Śmiało, otwórz ustawienia w kolumnie 1 i dodaj obraz tła.
Następnie otwórz ustawienia kolumny 2 i dodaj obraz tła.
Dodaj pole cienia do każdej kolumny
Otwórz ustawienia kolumny 1 i dodaj cień następującego pola:
Box Shadow: patrz zrzut ekranu
Pozycja pozioma w polu Shadow: 0px
Pozycja pionowa w cieniu ramki: 0px
Rozprzestrzenianie cieni w pudełku: 100px
Kolor cienia: rgba (151, 178, 193, 0.21)
Następnie dodaj ten sam styl cienia do kolumny 2. Aby przyspieszyć, możesz użyć opcji kliknięcia prawym przyciskiem myszy, aby skopiować style cieni do kolumny 1, a następnie wkleić je do stylów cieni w kolumnie 2.
Zauważysz, że cienie w polu będą się nakładać. Użycie półprzezroczystego koloru ombre pomoże stworzyć super warstwowy efekt. Jest to główna zaleta stosowania cieni pudełkowych w projekcie. W przeciwieństwie do obramowań możesz dodawać duże cienie, które wyglądają jak obramowania, ale nie wpływają na faktyczne odstępy układu.
Nakładaj kolumny za pomocą narzędzia Transform Translate
W tym momencie jesteśmy gotowi do przesunięcia kolumn i modułów, aby zakończyć przerwany projekt siatki. Najpierw musimy przenieść kolumny na zewnętrzną krawędź strony. Następnie możemy później przenieść moduły do centrum.
Kolumna przestawna 1
Otwórz parametr kolumny 1 i dodaj następującą właściwość transformacji translacji.
Przekształć translację osi X: 25%
Przekształć translację osi Y: -25% (komputer), -5% (tablet)
Kolumna przestawna 2
Do kolumny 2 dodaj następującą właściwość konwersji transformacji.
Przekształć translację osi X: -25%
Przekształć translację osi Y: 25% (komputer), 5% (tablet)
Moduły offsetowe za pomocą Transform Translate
Jesteśmy teraz gotowi do rozłożenia naszych modułów, przenosząc je z kontenera kolumny. Spowoduje to odsłonięcie obrazu tła kolumny i pozwoli nam dodać kolejny cień obszaru do modułu w celu uzyskania dodatkowego nakładającego się elementu projektu.
Przesunąć moduł 1
Otwórz ustawienia wezwania do działania w kolumnie 1 i zaktualizuj następujące elementy:
Przekształć translację osi X: -60%
Przekształć translację osi Y: 50% (komputer), 10% (tablet)
Dodaj cień pola do modułu 1
Następnie dodaj cień następującego pola do modułu wywołania akcji w kolumnie 1:
Box Shadow: patrz zrzut ekranu
Pozycja pozioma w polu Shadow: 0px
Pozycja pionowa w cieniu ramki: 0px
Rozprzestrzenianie cieni w pudełku: 100px
Kolor cienia: rgba (151,178,193,0.21)
Odstępy między modułami 2
Aby przenieść moduł w kolumnie 2, zaktualizuj następujące elementy:
Przekształć translate oś X: 60%
Transformacja translacji osi Y: -50% (komputer stacjonarny), -10% (tablet)
Dodaj cień pola do modułu 2
Następnie możemy dodać cień pola do modułu wezwania do działania w kolumnie 2. Musimy sprawić, aby ten cień pola był prawie całkowicie przezroczysty, ponieważ będzie nachodził na moduł 1, a nie chcemy utrudniać czytania treść.
Box Shadow: patrz zrzut ekranu
Pozycja pozioma w polu Shadow: 0px
Pozycja pionowa w cieniu ramki: 0px
Rozprzestrzenianie cieni w pudełku: 100px
Kolor cienia: rgba (151,178,193,0.09)
Dodaj ramkę Shadow Box
Aby zakończyć projekt, dodaj cień strefy do linii służącej jako element projektu ramki w tle.
Box Shadow: patrz zrzut ekranu
Pole cieniowania Pozycja pionowa: 0px
Kolor cienia: #97b2c1
końcowe przemyślenia
Mam nadzieję, że ten samouczek dał ci trochę wyobrażenia o tym, jak możesz przesunąć kolumny i moduły Divi, aby stworzyć własne zepsute projekty siatki. Technika jest bardzo prosta. Obejmuje głównie niektóre właściwości tłumaczenia przekształcania w celu przesunięcia kolumn i modułów, a także cienie pól, aby utworzyć pojedynczy uszkodzony wzór. Zapraszam do zbadania większej liczby opcji kolorów i wprowadzenia więcej modów, aby zobaczyć, gdzie projekt może Cię zaprowadzić.
Mam nadzieję, że usłyszę od Ciebie w komentarzach.
