Używanie kontrolek transformacji Divi do tworzenia unikalnych układów modułów Blurb

Kontrolki Divi Transform ułatwiają pozycjonowanie i stylizowanie elementów strony w celu tworzenia unikalnych układów. Moduł notatek Divi jest jednym z najczęstszych elementów prezentowania elementów na stronie internetowej. Pomyślałem więc, że pokażę, jak wykorzystać te efekty Transform, tworząc kilka unikalnych układów z modułem blurb. Oczywiście, możesz osiągnąć podobne pozycjonowanie za pomocą marginesów i dopełnienia, ale proces ten byłby znacznie bardziej skomplikowany i mniej zabawny. Ponadto elementy sterujące przekształcaniem umożliwiają dodawanie dodatkowych stylów w celu skalowania i obracania notatek w celu uzyskania jeszcze bardziej unikalnych projektów.

W tym samouczku pokażę, jak pozycjonować i obracać notki w kreatywny sposób, korzystając z kontrolek transformacji Divi.

Zacznijmy.

Pierwsze kroki

W tym samouczku wszystko, czego naprawdę potrzebujesz, to Divi. Aby wszystko skonfigurować, śmiało utwórz nową stronę. Nadaj swojej stronie tytuł i wdróż konstruktor Divi na interfejsie, aby zbudować stronę od podstaw.

Teraz możesz zacząć.

Tworzenie projektu układu Blubb #1

W tym pierwszym projekcie układu zamierzamy ustrukturyzować nasze notki za pomocą dwóch różnych wierszy. Następnie użyjemy opcji transformacji Divi, aby przeskalować i ustawić moduły notatek, aby stworzyć unikalny układ modułów notatek.

Utwórz pierwszy rząd

Aby rozpocząć, utwórz zwykłą sekcję, a następnie dodaj następujący układ kolumn dla wiersza: 1/2 1/6 1/6 1/6

Dodaj i stylizuj moduł tekstowy

W kolumnie 1/2 po lewej stronie dodaj moduł tekstowy o następującej treści:

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Następnie zaktualizuj następujące ustawienia projektu:

Kolor tła: #ffffff
Szerokość: 500px
Margines niestandardowy (komputer): pozostało -70px
Margines niestandardowy (tablet): pozostało 20 pikseli
Niestandardowe wypełnienie: 20px góra, 20px dół

Aktualizuj dopełnienie sekcji

Następnie musimy dodać trochę dopełnienia do naszej sekcji. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Niestandardowa wyściółka: góra 20vw

Zaktualizuj ustawienia dla pierwszego rzędu

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

Szerokość rynny: 1
Niestandardowe wypełnienie: góra 10vw, dół 0px
Szerokość obramowania: 5px
Kolor obramowania: #eeeeee

Dodaj drugi rząd

Następnie dodaj kolejny wiersz pod właśnie dostosowanym wierszem. Daj mu układ sześciu kolumn.

Twórz i stylizuj moduły Blurb

Teraz nadszedł czas, aby zacząć tworzyć moduły notatek, które ostatecznie ustawimy za pomocą kontrolek transformacji. Dodaj kolumnę modułu notki 2 pierwszego (górnego) utworzonego wiersza.

W ustawieniach notki usuń treść i zaktualizuj tekst Tytułu słowem „Usługi”. Następnie kliknij, aby użyć ikony zamiast obrazu. W tym przykładzie używam ikony chmury.

Zaktualizuj pozostałe ustawienia notki w następujący sposób:

Kolor ikony: #ffffff
Ikona koła: TAK
Kolor koła: #5e89fb
Czcionka tytułu: Nunito
Wyrównanie tekstu tytułu: do środka
Rozmiar tekstu tytułu: 16px
Niestandardowe wypełnienie: 1vw góra, 1vw dół, 1vw lewo, 1vw prawo

Następnie zaktualizuj domyślny margines pod ikoną rozmycia, dodając następujący kod CSS do pola CSS Blurb Image na karcie Zaawansowane:

margin-bottom: 5px

Następnie skopiuj właśnie utworzony moduł notatek i wklej go do każdej z kolumn, upewniając się, że masz dwa moduły notatek w kolumnie 3 w górnym rzędzie, a kolumny 5 i 6 w drugim rzędzie są puste.

Dodaj efekty transformacji, aby skalować i pozycjonować Blurbs

Teraz jesteśmy gotowi do użycia elementów sterujących przekształcaniem, aby ustawić i przeskalować notki do unikalnego projektu.

Najpierw otwórz ustawienie notki w kolumnie 2 w górnym rzędzie i zaktualizuj kontrolki transformacji w następujący sposób:

Przekształć skalę osi X: 242%
Skala transformacji osi Y: 242%

Przekształć Przesuń oś X: -96px
Przekształć Przesuń oś Y: -44px

Następnie zaktualizuj ustawienia górnego modułu Blurb w kolumnie 3 pierwszego rzędu w następujący sposób:

Skala transformacji osi X: 192%
Przekształć skalę osi Y: 192%

Przekształć Przesuń oś X: -70px
Przekształć Przesuń oś Y: -13px

Następnie zaktualizuj moduł notki w kolumnie 4 górnego rzędu w następujący sposób:

Przekształć skalę osi X: 158%
Przekształć skalę osi Y: 158%

Przekształć Przesuń oś X: 33px
Przekształć Przesuń oś Y: -13px

Następnie zaktualizuj dolny moduł notki w kolumnie 3 górnego rzędu w następujący sposób:

Przekształć skalę osi X: 132%
Skala transformacji osi Y: 132%

Przekształć Przesuń oś X: 89px
Przekształć Przesuń oś Y: 39px

Następnie nadaj mu następujący kolor tła, aby utworzyć przerwę w obramowaniu wiersza dla subtelnego elementu projektu:

Kolor tła: #ffffff

Otóż ​​to!

Aby uzyskać dodatkowy element projektu, możesz stopniowo zwiększać krycie koloru okręgu na każdej z ikon używanych w całym układzie.

Korekty mobilne

Aby dostosować układ modułu notatek dla wyświetlaczy tabletów i telefonów, możemy po prostu ustawić efekty transformacji z powrotem do pierwotnego stanu, aby notki wróciły do ​​​​pierwotnego rozmiaru i były ładnie umieszczone w kolumnach. W tym celu możemy skorzystać z funkcji wielokrotnego wyboru Divi. Ponieważ kliknięcie modułów, które zostały umieszczone za pomocą właściwości transform, może być trudne, nadszedł dobry moment, aby włączyć tryb siatki w ustawieniach kreatora. Pozwoli to zobaczyć moduły notatek w ich pierwotnej pozycji. Gdy jesteś w trybie siatki, przytrzymaj ctrl lub cmd, a następnie kliknij każdy z modułów, które mają efekt transformacji. Następnie kliknij ikonę koła zębatego dowolnego z wybranych modułów, aby otworzyć modalne ustawienia elementu.

W trybie modalnym Ustawienia elementu zaktualizuj następujące elementy:

Przekształć skalę osi X: 100%
Przekształć skalę osi Y: 100%

Przekształć Przesuń oś X: 0px
Przekształć Przesuń oś Y: 0px

Spowoduje to przywrócenie oryginalnej pozycji i skali notek na wyświetlaczach tabletów i telefonów.

Ostateczny wynik

Oto ostateczny projekt.

Tworzenie układu modułu Blubb #2

W następnym przykładzie pokażę Ci unikalny układ modułu notki z wykorzystaniem opcji transformacji Divi, tłumaczenia i obracania. Wrzucę również dodatkowy fragment kodu CSS, który dodaje perspektywę każdemu z notek. Oto jak to zrobić.

Utwórz nagłówek

Najpierw dodaj nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj moduł tekstowy do wiersza o następującej treści:

<h2>Our Process</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Następnie zaktualizuj pozostałe ustawienia modułu tekstowego w następujący sposób:

Czcionka nagłówka 2: Nunito
Grubość czcionki nagłówka 2: pół pogrubiona
Rozmiar tekstu nagłówka 2: 50px
Nagłówek 2 Odstępy między literami: 7px
Szerokość: 500px

Tworzenie układu rozmycia z sześciokolumnowym rzędem

To dba o nagłówek. Teraz nadszedł czas, aby dodać wiersz dla naszego układu modułu notatek. Śmiało i utwórz nowy wiersz z sześciokolumnowym układem bezpośrednio pod bieżącym wierszem.

Stylizacja modułu Blurb

W pierwszej kolumnie dodaj nowy moduł notki i zaktualizuj ustawienia w następujący sposób:

Usuń tekst główny w polu treści i zaktualizuj tekst tytułu słowem „Krok”.

Następnie kliknij, aby użyć ikony i wybierz ikonę zaznaczenia okręgu.

Nadaj Blurbowi białe tło w następujący sposób:

Kolor tła: #ffffff

Następnie zaktualizuj ustawienia projektu:

Kolor ikony: #ffffff
Ikona koła: TAK
Kolor koła: #3d0dad
Czcionka tytułu: Nunito
Grubość czcionki tytułu: pogrubiona
Styl czcionki tytułu: TT
Wyrównanie tekstu tytułu: do środka
Odstępy między literami tytułu: 4px

Następnie nadaj notce cień w następujący sposób:

Cień pudełka: Zobacz zrzut ekranu
Kolor cienia: rgba(0,0,0,0.12)

I na koniec dodaj efekt transformacji obrotu do modułu notatek:

Przekształć Obróć oś X: -3deg
Przekształć Obróć oś Y: -10 stopni
Przekształć Obróć oś Z: 31 stopni

To zajmuje się naszym pierwszym modułem notatek.

Aktualizuj ustawienia wiersza

Teraz zanim zaczniemy duplikować nasz moduł notki, musimy zaktualizować ustawienia wierszy w następujący sposób:

Szerokość rynny: 2
Niestandardowe wypełnienie: góra 11vw, dół 0px

Pomoże to w rozmieszczeniu notatek w układzie.

Powielanie i stylizacja Reszta Blurbs

Teraz jesteśmy gotowi do powielenia i dostosowania pozostałych notek. Śmiało i skopiuj moduł notki w kolumnie 1 i wklej go do wszystkich pozostałych kolumn z wyjątkiem ostatniej kolumny (kolumna 6). Kolumnę 6 pozostawimy pustą, aby pozostawić więcej miejsca na przesunięcie notek w prawo.

Teraz otwórz ustawienie modułu notki w kolumnie 2 i zaktualizuj następujące elementy:

Kolor koła: #62de9d

Przekształć skalę osi X: 120%
Przekształć skalę osi Y: 120%

Przekształć Przesuń oś Y: -10% (pamiętaj, aby wpisać tutaj wartość procentową)

Następnie zaktualizuj moduł notki w kolumnie 3 w następujący sposób:

Kolor koła: #5e89fb

Przekształć skalę osi X: 140%
Przekształć skalę osi Y: 140%

Przekształć Przesuń oś Y: -20%
Przekształć Przesuń oś X: 10%

Zaktualizuj moduł notki w kolumnie 4 w następujący sposób:

Kolor koła: #2a3fc9

Przekształć skalę osi X: 160%
Przekształć skalę osi Y: 160%

Przekształć Przesuń oś Y: -30%
Przekształć Przesuń oś X: 30%

I na koniec zaktualizuj moduł notki w kolumnie 5 w następujący sposób:

Kolor koła: #62de9d

Przekształć skalę osi X: 180%
Przekształć skalę osi Y: 180%

Przekształć Przesuń oś Y: -40%
Przekształć Przesuń oś X: 55%

Jak widać, każda z notatek zwiększy rozmiar o 20% od lewej do prawej. A wartości procentowe tłumaczenia Transformacji zapewniają, że notki są ładnie wyrównane.

Ponieważ projekt przelewa się do ostatniej kolumny (kolumna 6) pozostawimy go pustym. Ale zawsze możesz dodać kolejną notkę w kolumnie 6, jeśli zwiększysz rozmiar wiersza.

Dodawanie właściwości perspektywy do każdej kolumny

W CSS właściwość Perspektywa służy do nadania elementowi pozycjonowanemu w 3D pewnej perspektywy w Z-Space. Zasadniczo określa, jak daleko obiekt pojawia się od użytkownika, gdy patrzy na ekran. Właściwość Perspektywa musi być zastosowana do kontenera nadrzędnego tego, który ma pozycję 3D, która w tym przypadku jest naszym modułem blurb. Dlatego musimy dodać perspektywę do każdej kolumny za pomocą małego fragmentu CSS w następujący sposób.

Dodaj następujący kod CSS do pola CSS głównego elementu kolumny dla każdej z 5 kolumn w następujący sposób:

Kolumna 1 Główny element:

perspective: 1000px

Kolumna 2 Główny element:

perspective: 1000px

Kolumna 3 Główny element:

perspective: 1000px

Kolumna 4 Główny element:

perspective: 1000px

Kolumna 5 Główny element:

perspective: 1000px

W tym przypadku zmiana jest bardzo subtelna, ale moim zdaniem warta dodatkowego wysiłku.

Oto projekt układu modułu blurb bez perspektywy.

I oto z perspektywą na miejscu.

Jeśli chcesz, aby notki wyglądały bliżej użytkownika, możesz zmniejszyć wartość perspektywy. Na przykład tak będą wyglądać notki z „perspective: 400px” dodanym do każdej kolumny.

Dodawanie tła rozdzielającego do przekroju

Aby notki wyglądały na stojące na powierzchni, możemy dodać do sekcji tło rozdzielające. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Styl dolnego rozdzielacza: patrz zrzut ekranu
Kolor dolnej przegrody: #dddddd
Wysokość dolnej przegrody: 27vw
Powtarzanie poziome dolnej przegrody: 0,8x
Klapka dolnej przegrody: pozioma

Aby dostosować układ dla wyświetlaczy tabletów i telefonów, musisz zaznaczyć kilka modułów notek i zaktualizować następujące opcje transformacji w ustawieniach Elementów dla wyświetlaczy tabletów:

Przekształć skalę osi X: 100%
Przekształć skalę osi Y: 100%

Przekształć Przesuń oś Y: 0%
Przekształć Przesuń oś X: 0%

Ostateczny wynik

Sprawdźmy teraz ostateczny wynik układu modułu notki.

Końcowe przemyślenia

Dzięki kontrolkom transformacji Divi masz możliwość łatwego umieszczania modułów notatek w określonych obszarach strony. To sprawia, że ​​zabawne jest eksperymentowanie i tworzenie nowych układów modułów notatek do prezentowania usług, etapów procesu i niezliczonych innych zastosowań. Mam nadzieję, że ten samouczek da ci trochę inspiracji do samodzielnego przetestowania tych technik projektowania.

Aby uzyskać więcej inspiracji, zapoznaj się z tymi 5 kreatywnymi projektami modułów z notatkami.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!