Dodawanie przekształconych cieni do kopii za pomocą Divi

Dzięki nowym opcjom przekształcania Divi możesz tworzyć piękne projekty internetowe, jednocześnie wyświetlając wszystkie ustawienia przekształcania w czasie rzeczywistym. Łącząc ze sobą różne moduły, możesz osiągnąć wyjątkowe i płynne efekty, które pomogą poprawić wygląd i styl sekcji, nad którą pracujesz. W tym konkretnym poście skupimy się na tworzeniu przekształconych cieni dla twojej kopii, używając tylko wbudowanych opcji Divi. Będziesz mógł również bezpłatnie pobrać przykładowy plik JSON.

Weźmy się za to!

Zapowiedź

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

Pulpit

mobilny

Pobierz układ sekcji bohaterów Transformed Shadows ZA DARMO

Aby położyć ręce na darmowym układzie sekcji bohatera przekształconych cieni, 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 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!

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać sekcję bohaterów

Dodaj nową sekcję

Rozstaw

Pierwszą rzeczą, którą musisz zrobić, to dodać nową zwykłą sekcję do nowej lub istniejącej strony. Otwórz ustawienia sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Przelewowy

Przejdź do zakładki Zaawansowane i upewnij się, że przepełnienia sekcji są ukryte. W dalszej części tego postu użyjemy kilku opcji transformacji, a ukrycie przepełnienia sprawi, że nic nie przekroczy kontenera sekcji.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i pozwól wierszowi zająć całą szerokość ekranu, stosując następujące ustawienia:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Przejdź do ustawień odstępów, usuń domyślną wyściółkę dolną i dodaj trochę niestandardowej przestrzeni po lewej i prawej stronie wiersza.

• Dolna wyściółka: 0px
• Lewa wyściółka: 4vw
• Prawa wyściółka: 4vw

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Czas zacząć dodawać różne moduły, zaczynając od modułu tekstowego. Wprowadź wybraną kopię.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: wyświetlacz Playfair
• Wyrównanie tekstu: do prawej
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 11vw
• Wysokość linii tekstu: 1em

• Długość pionowa cienia tekstu: 0,02 em
• Siła rozmycia cienia tekstu: 0,16 em
• Kolor cienia tekstu: rgba (0,0,0,0.44)

Klonuj moduł tekstowy nr 1

Zmień zawartość

Po ukończeniu pierwszego modułu tekstowego możesz go sklonować i zmienić kopię duplikatu.

Dodaj nowy moduł tekstowy nad modułem tekstowym #1

Dodaj zawartość

Przejdźmy do następnego modułu, którym jest kolejny moduł tekstowy. Tym razem umieszczamy moduł na górze kolumny. W kolejnych krokach przekształcimy ten moduł tekstowy w przekształcony cień tekstowy modułu, który pojawi się w następnej kolejności. Upewnij się, że używasz tej samej kopii.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: wyświetlacz Playfair
• Grubość czcionki tekstu: pogrubiona
• Wyrównanie tekstu: do prawej
• Kolor tekstu: rgba (94 150 187 0,28)
• Rozmiar tekstu: 11vw
• Odstępy między literami tekstu: 4,5px
• Wysokość linii tekstu: 1em

Przekształć Tłumacz

Czas przekształcić moduł, aby wyglądał jak przekształcony cień tekstu w następnym module! Przejdź do ustawień odstępów i zmodyfikuj wartości translacji transformacji.

• Po prawej: 13,9vw
• Dół: -2,1vw

Przekształć Obróć

Obróć również moduł.

• Środek: 291 stopni

Przekształć pochylenie

I zwiększ dolną wartość pochylenia.

• Dół: 30 stopni

Sklonuj przekształcony moduł tekstowy i umieść nad modułem tekstowym nr 2

Zmień zawartość

Po zakończeniu tworzenia przekształconego modułu cienia tekstu możesz go sklonować i umieścić nad trzecim modułem tekstu w kolumnie. Upewnij się, że zmieniłeś kopię.

Zmień ustawienia tekstu

Przejdź do zakładki projektu i zmień kolor tekstu.

• Kolor tekstu: #f3e4df

Dodaj odstępy

Aby zrekompensować dodatkową przestrzeń, która została utworzona przez przekształcony moduł cienia tekstu, dodamy trochę ujemnego marginesu górnego.

• Górny margines: -12vw

Dodaj moduł tekstu opisu do kolumny 1

Dodaj zawartość

Następnym modułem, którego potrzebujemy w kolumnie 1, jest kolejny moduł tekstowy. Wpisz wybrany przez siebie opis.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Otwórz Sans
• Wyrównanie tekstu: do prawej
• Wysokość linii tekstu: 2,3 em

Rozmiary

Zmień szerokość modułu na różnych rozmiarach ekranu w ustawieniach rozmiaru.

• Szerokość: 53% (komputer), 70% (tablet), 90% (telefon)
• Wyrównanie modułu: w prawo

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Przejdź do następnego i ostatniego modułu w kolumnie 1, czyli modułu przycisku. Wprowadź wybraną kopię.

Wyrównanie

Przejdź do zakładki projektu i zmień wyrównanie przycisków.

• Wyrównanie przycisków: w prawo

Ustawienia przycisków

Zmodyfikuj również ustawienia przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 20px
• Kolor tła przycisku: #5e96bb
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 50px
• Czcionka przycisku: Wyświetlacz Playfair

Rozstaw

I pobaw się ustawieniami odstępów, aby dopełnić styl przycisku.

• Górny margines: 2vw
• Dolny margines: 3vw
• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Dodaj moduł obrazu nr 1 do kolumny 2

Prześlij obraz 1:1

Do drugiej kolumny! Tutaj potrzebujemy dwóch modułów obrazu. Zacznij od pierwszego modułu obrazu i prześlij obraz w proporcji 1:1. Oznacza to, że zarówno szerokość, jak i wysokość muszą mieć tę samą wartość w pikselach. Upewnienie się, że Twój obraz jest kwadratem, pomoże przekształcić go w okrąg w kolejnych krokach.

Rozmiary

Przejdź do ustawień rozmiaru modułu obrazu i włącz opcję „Wymuś pełną szerokość”.

• Wymuś pełną szerokość: tak

Rozstaw

Dodajemy też górną marżę.

• Górny margines: 2vw

Granica

Aby przekształcić moduł obrazu w okrąg, dodamy „50vw” do każdego z rogów. Użycie naprawdę wysokiej wartości pomaga nam zachować okrągły kształt na różnych rozmiarach ekranu.

Cień Pudełka

Na koniec dodamy również cień pudełka do modułu obrazu, korzystając z następujących ustawień:

• Pozycja pozioma cienia pudełka: -300px
• Pozycja pionowa cienia pudełka: -300px
• Kolor cienia: rgba (94 150 187 0,28)

Dodaj moduł obrazu nr 2 do kolumny 2

Prześlij obraz 1:1

Przejdźmy do drugiego modułu obrazu w kolumnie 2. Ponownie upewniamy się, że przesłany obraz ma proporcje 1:1.

Rozmiary

Przejdź do zakładki projektu i zmień szerokość.

• Szerokość: 62%

Granica

Dodaj „50vw” do każdego z rogów tego modułu obrazu.

Cień Pudełka

Dodamy również niestandardowy cień pudełka.

• Pozycja pozioma cienia pudełka: -200px
• Pozycja pionowa cienia pudełka: 150px
• Kolor cienia: #d4c1bd

Przekształć Tłumacz

Na koniec zmień pozycję modułu obrazu za pomocą opcji przekształć i gotowe!

• Po prawej: -13vw
• Dół: 19vw

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak kreatywnie używać zduplikowanych modułów tekstowych do tworzenia przekształconych cieni tekstu. To ciekawy sposób na umieszczenie kopii w centrum uwagi i wykorzystanie wbudowanych opcji Divi z innej perspektywy. Mamy nadzieję, że podobał Ci się ten samouczek, a jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.