[Ad_1]
Chodźmy.
badanie
Zanim zagłębimy się w samouczek, rzućmy okiem na wynik na różnych rozmiarach ekranu.
Biuro
Aplikacje mobilne
Pobierz układ ZA DARMO
Aby zdobyć darmowy układ, musisz go najpierw pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobierania, musisz zapisać się na naszą listę mailingową Divi Daily za pomocą forma poniżej. Jako nowy subskrybent otrzymasz jeszcze więcej korzyści Divi i bezpłatny pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybowany” ani otrzymywać dodatkowych e-maili.
Zacznijmy odtwarzać!
Dodaj sekcje zastępcze 2x
Dodaj nową sekcję
Zacznij od dodania sekcji zastępczej do strony, nad którą pracujesz.
zaklejania
Otwórz ustawienia sekcji i zmień wysokość w ustawieniach rozmiaru.
Sekcja klonowania
Sklonuj sekcję raz. Dzięki temu na Twojej stronie pozostaną dwie sekcje zastępcze. Te sekcje zastępcze pomogą Ci zobaczyć efekt końcowy po przejściu samouczka. W działającej witrynie sekcje zastępcze zostaną zastąpione zwykłymi sekcjami, których używasz na całej stronie.
Dodaj nową sekcję między sekcjami zastępczymi
Po umieszczeniu sekcji symboli zastępczych dodaj nową sekcję między sekcjami symboli zastępczych.
Kolor tła
Otwórz ustawienia sekcji i użyj białego koloru tła.
- Kolor tła: #ffffff
rozstaw
Przejdź do zakładki przekroju i zmień odpowiednio górne i dolne wartości dopełnienia:
- Górna wyściółka: 10vh
- Dolna wyściółka: 10vh
Dodaj wiersz nr 1
Struktura kolumny
Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza, przejdź do ustawień rozmiaru i zmień wartości szerokości i maksymalnej szerokości.
- Szerokość: 100%
- Maksymalna szerokość: 100%
Dodaj moduł tekstowy do kolumny
Dodaj kopię
Jedyny moduł, którego potrzebujemy do tego wiersza, to moduł tekstowy. Dodaj wybraną kopię.
Ustawienia tekstu
Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu:
- Czcionka tekstu: Montserrat
- Grubość czcionki tekstu: Ultra Bold
- Styl czcionki tekstu: wielkie litery
- Kolor tekstu: # fff2ea
- Rozmiar tekstu: 11vw
- Wysokość wiersza tekstu: 1 em
- Wyrównanie tekstu: do środka
Dodaj wiersz nr 2
Struktura kolumny
Dodaj kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 2
- Szerokość: 90%
- Wyrównanie linii: Środek
Dodaj moduł obrazu do kolumny
Prześlij obraz
Dodaj moduł obrazu do kolumny wiersza. Prześlij wybrany obraz.
wyrównanie
Przejdź do zakładki module design i odpowiednio zmień wyrównanie obrazu:
zaklejania
Następnie przejdź do ustawień rozmiaru i wymuś pełną szerokość modułu.
Dodaj moduł przycisku do kolumny
Dodaj kopię
Następnym i ostatnim modułem, który dodamy do kolumny, jest moduł przycisku. Użyj wybranej kopii.
Wyrównanie przycisków
Przejdź do zakładki Projekt i zmień wyrównanie przycisków.
Ustawienia przycisków
Następnie stylizuj przycisk w następujący sposób:
- Użyj niestandardowych stylów dla przycisku: Tak
- Rozmiar tekstu przycisku: 16px
- Kolor tekstu przycisku: # 000000
- Kolor tła przycisku: #ffffff
- Szerokość obramowania przycisku: 0px
- Odstępy między literami przycisków: 2px
- Czcionka przycisku: Montserrat
- Grubość czcionki przycisku: pogrubiona
- Styl czcionki przycisku: wielkie litery
rozstaw
Użyj również niestandardowych wartości dopełnienia w ustawieniach odstępów.
- Górna wyściółka: 20px
- Dolna wyściółka: 20px
- Lewa wyściółka: 5%
- Prawa wyściółka: 5%
Dodaj pozycjonowanie bezwzględne do wiersza 1
Po ukończeniu drugiego rzędu wróć do rzędu nr 1. Otwórz ustawienia wiersza, przejdź do zakładki Zaawansowane i ustaw sekcję bezwzględną. W ten sposób linia i moduł tekstowy w środku zostaną umieszczone poniżej linii zawierającej moduł obrazu.
- Pozycja: bezwzględna
- Lokalizacja: Centrum
Sklonuj wiersz nr 1 i umieść duplikat w wierszu nr 2
Aby umożliwić wyświetlanie modułu tekstowego nad obrazem, potrzebujemy kolejnego wiersza z wyższą wartością z-index. Sklonuj pierwszy wiersz i umieść duplikat pod drugim rzędem.
Zastosuj efekty do wiersza nr 3
Zwiększ indeks Z
Otwórz zduplikowany wiersz i zmień indeks z na karcie Zaawansowane.
Zmień kolor tekstu
Otwórz moduł tekstowy w wierszu i zmień kolor tekstu.
Zastosuj tryb mieszania do linii
Następnie otwórz ustawienia wiersza i zmień tryb mieszania w ustawieniach filtrów.
Użyj efektu przewijania w module tekstowym w wierszu nr 3
Dodaj efekt zanikania i zanikania
Ukończ samouczek, ponownie otwierając blok tekstowy, przechodząc do efektów przewijania i włączając efekt pojawiania się i zanikania. Otóż to!
- Włącz pojawianie się i zanikanie: Tak
- Początkowe krycie: 0%
- Średnie krycie: 0% (do 26%)
- Krycie końcowe: 100% (przy 28%)
- Wyzwalacz efektu ruchu: środek elementu
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Biuro
Aplikacje mobilne
końcowe przemyślenia
W tym artykule pokazaliśmy, jak wykazać się kreatywnością dzięki wbudowanym efektom przewijania Divi. W szczególności pokazaliśmy, jak tasować przewijaną kopię. Na początku kopia wydaje się znajdować pod obrazem. Po przewinięciu kopia pojawia się nad obrazem i łączy się z obrazem. Udało Ci się również bezpłatnie pobrać plik JSON! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
Jeśli chcesz dowiedzieć się więcej o Divi i otrzymać więcej gratisów Divi, koniecznie zasubskrybuj naszą biuletyn e-mailem i na nasz Kanał YouTube abyś zawsze był jedną z pierwszych osób, które poznają tę bezpłatną zawartość i skorzystają z niej.
[Ad_2]
