Tworzenie przekątnej struktury projektu z opcjami transformacji Divi (darmowe pobieranie!)

Zawsze szukamy sposobów na rozszerzenie możliwości projektowych, które masz dzięki Divi. A odkąd pojawiła się aktualizacja opcji transformacji, wiele nowych technik stało się możliwych bez konieczności posiadania wiedzy o kodowaniu.

W tym poście pokażemy, jak stworzyć oszałamiającą przekątną strukturę projektu. Projekt, który odtworzymy, świetnie nadaje się do sekcji bohaterów i pasuje do każdego rodzaju witryny, którą chcesz założyć. Na końcu samouczka będziesz mógł również bezpłatnie pobrać plik JSON!

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Zacznijmy odtwarzać!

Dodaj nową sekcję

Tło gradientowe

Zacznij od utworzenia nowej strony lub otwarcia istniejącej i dodania do niej zwykłej sekcji. Otwórz ustawienia sekcji i dodaj do niej tło gradientowe, korzystając z następujących ustawień:

• Kolor 1: #ffd633
• Kolor 2: #efefef
• Kierunek gradientu: 217 stopni
• Pozycja startowa: 45%
• Pozycja końcowa: 45%

Rozstaw

Następnie przejdź do zakładki projektowania i dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 4vw
• Dolna wyściółka: 12vw

Przelewowy

Musimy się upewnić, że opcje transformacji nie wykraczają poza kontener sekcji. Aby to osiągnąć, do głównego elementu sekcji dodamy pojedynczy wiersz kodu CSS.

overflow: hidden;

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając pierwszy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość ekranu. W następnym kroku tego posta zastąpimy miejsce, które właśnie usunęliśmy, dodając kilka niestandardowych wartości dopełnienia lewego i prawego za pomocą jednostki rzutni. Dzięki temu projekt pozostanie responsywny na wszystkich rozmiarach ekranu.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Śmiało i dodaj kilka niestandardowych wartości dopełnienia do ustawień odstępów dalej.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Lewa wyściółka: 25vw (komputer), 16vw (tablet), 7vw (telefon)
• Prawa wyściółka: 25vw (komputer stacjonarny i tablet), 27vw (telefon)

Wyświetlacz

Dbamy również o to, aby kolumny pojawiały się obok siebie na mniejszych ekranach, dodając jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł Blurb do kolumny 1

Dodaj tytuł

Czas zacząć dodawać moduły! Dodaj moduł Blurb do kolumny 1 i wprowadź wybrany przez siebie tytuł.

Prześlij ilustrację

Kontynuuj, przesyłając wybraną ilustrację. Te, których będziemy używać w tym samouczku, są częścią pakietu App Developer Layout Pack. Możesz pobrać ilustracje za darmo, przechodząc do postu i pobierając je na końcu.

Tło

Następnie dodaj całkowicie białe tło do modułu Blurb.

• Kolor tła: #ffffff

Ustawienia tekstu tytułu

Przejdź do karty projektu i odpowiednio zmodyfikuj ustawienia tekstu tytułu:

• Czcionka tytułu: Poppins
• Grubość czcionki tytułu: pół pogrubiona
• Styl czcionki tytułu: wielkie litery
• Wyrównanie tekstu tytułu: do środka
• Rozmiar tekstu tytułu: 0,5vw (komputer), 1,6vw (tablet), 2,4vw (telefon)
• Odstępy między literami tytułu: 1px
• Wysokość wiersza tytułu: 1,6 em

Rozstaw

Następnie zmodyfikuj ustawienia odstępów.

• Górna wyściółka: 1.3vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)
• Dolna wyściółka: 1.3vw (komputer), 4vw (tablet), 6vw (telefon)
• Lewa wyściółka: 1vw (komputer stacjonarny), 7vw (tablet i telefon)
• Prawa wyściółka: 1vw (komputer stacjonarny), 7vw (tablet i telefon)

Granica

Kontynuuj, dodając „1vw” w lewym górnym i prawym górnym rogu modułu Blurb.

Cień Pudełka

Na koniec dodaj do modułu cień pudełka, korzystając z następujących ustawień:

• Pozycja pionowa cienia pudełka: 10px
• Siła rozmycia cieni w pudełku: 60px
• Kolor cienia: rgba (39,39,52,0.37)

Clone Blurb Module dwa razy i umieść duplikaty w pozostałych kolumnach

Po dostosowaniu modułu Blurb możesz go sklonować dwukrotnie. Umieść duplikaty w dwóch pozostałych kolumnach wiersza.

Zmień duplikat #1

Zmień kopię i ilustrację

Zmień kopię i ilustrację pierwszego duplikatu.

Zmień odstępy

Wraz z ustawieniami odstępów.

• Górny margines: -3vw
• Górna wyściółka: 2.7vw (komputer), 8vw (tablet), 11vw (telefon)
• Dolna wyściółka: 2.7vw (komputer), 8vw (tablet), 11vw (telefon)

Zmień duplikat #2

Zmień kopię i ilustrację

Zmodyfikuj również kopię i ilustrację drugiego duplikatu.

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu! Użyj następującej struktury kolumn:

Tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj do niego tło gradientowe.

• Kolor 1: #fff20a
• Kolor 2: #ffb200
• Kierunek gradientu: 165 stopni

Rozmiary

Następnie przejdź do zakładki projektu i włącz opcję „Make This Row Fullwidth”.

• Stwórz ten wiersz o pełnej szerokości: Tak

Cień Pudełka

Na koniec dodaj cień do wiersza.

• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 100px
• Kolor cienia: rgba(0,0,0,0.39)

Dodaj moduł dzielnika

Widoczność

Używamy tego wiersza tylko do celów projektowych, a nie do prezentowania żadnych modułów. Ale aby upewnić się, że wiemy dokładnie, jak wygląda wiersz, musimy dodać do niego moduł dzielnika. Nie chcemy, aby moduł się wyświetlał, więc upewnij się, że opcja „Pokaż dzielnik” jest wyłączona.

• Pokaż dzielnik: Nie

Zastosuj opcje transformacji do wierszy

Rząd #1

Przekształć Tłumacz

Teraz, gdy ukończyliśmy pierwsze dwa rzędy, zamierzamy je przekształcić, aby pasowały do ​​przekątnej struktury projektowej, którą zamierzamy stworzyć. Zacznij od otwarcia ustawień pierwszego wiersza i zmodyfikuj wartości translacji transformacji.

• Dół: 30vw
• Po prawej: 6vw

Przekształć Obróć

Następnie zmień lewą wartość obrotu transformacji.

• Lewo: 37 stopni

Rząd #2

Skala transformacji

Kontynuuj, otwierając ustawienie drugiego wiersza i modyfikując wartości skali transformacji.

• Dół: 133% (komputer), 171% (tablet), 176% (telefon)
• Po prawej: 133% (komputer), 171% (tablet), 176% (telefon)

Przekształć Tłumacz

Wraz z transformacją przetłumacz wartości.

• Dół: 12vw (komputer), 1vw (tablet), 3vw (telefon)
• Po prawej: -2vw (komputer), -6vw (tablet), -4vw (telefon)

Przekształć Obróć

I obróć wiersz w ustawieniach obracania transformacji.

• Lewo: 37 stopni

Dodaj wiersz nr 3

Struktura kolumny

Do następnego i ostatniego rzędu! Możesz użyć tego wiersza i jego kolumn do udostępniania dowolnych informacji. Aby odtworzyć dokładny projekt, który widziałeś na podglądzie tego posta, wybierz następującą strukturę kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość ekranu.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H1

Czas zacząć dodawać moduły! Zaczniemy od tytułu Moduł tekstowy. Wprowadź wybrane przez siebie treści H1.

Ustawienia tekstu H1

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu H1.

• Czcionka nagłówka: Poppins
• Rozmiar tekstu nagłówka: 3vw (komputer), 5vw (tablet), 6vw (telefon)
• Odstępy między literami nagłówka: -2px

Rozstaw

Następnie dodaj kilka niestandardowych wartości odstępów.

• Górny margines: -6vw (komputer stacjonarny i tablet), 11vw (telefon)
• Lewy margines: 10vw

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Drugim modułem, którego potrzebujemy, jest kolejny moduł tekstowy. Dodaj wybrane przez siebie treści.

Ustawienia tekstu

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 0,8vw (komputer), 1,5vw (tablet), 2,2vw (telefon)
• Wysokość linii tekstu: 2,6 em

Rozstaw

Zmień również wartości odstępów.

• Górny margines: 3vw (telefon), 5vw (telefon)
• Lewy margines: 10vw
• Prawy margines: 28vw (tablet), 20vw (telefon)

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy, jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,9vw (komputer), 2,5vw (tablet), 3,5vw (telefon)
• Kolor tekstu przycisku: #000000
• Szerokość obramowania przycisku: 1px
• Kolor obramowania przycisku: #000000
• Promień obramowania przycisku: 1px
• Czcionka przycisku: Poppins
• Waga czcionki: lekka

Rozstaw

Na koniec ukształtuj swój moduł, używając niestandardowych wartości odstępów i gotowe!

• Górny margines: 2vw (komputer stacjonarny), 5vw (tablet i telefon)
• Lewy margines: 10vw
• Górna wyściółka: 1vw
• Dolna wyściółka: 1vw
• Lewa wyściółka: 3vw
• Prawa wyściółka: 3vw

Pobierz sekcję projektowania przekątnej ZA DARMO

Aby położyć ręce na bezpłatnej sekcji projektowania przekątnej, najpierw musisz ją 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 pliki

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.

POBIERANIE

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!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć oszałamiającą przekątną strukturę projektu, korzystając tylko z wbudowanych opcji Divi. Mamy nadzieję, że ten samouczek pomoże Ci zapoznać się z nowymi opcjami przekształcenia Divi. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!