Jak odsłonić podstawową siatkę obrazu w swoim bohaterze za pomocą lepkich opcji Divi

Stworzenie sekcji bohatera, która przyciągnie uwagę odwiedzających, może nadać ton reszcie witryny. Jeśli szukasz kreatywnego sposobu na wykorzystanie lepkich opcji Divi, które pomogą Ci się tam dostać, pokochasz ten samouczek. Dzisiaj pokazujemy, jak odsłonić podstawową siatkę obrazu w swoim bohaterze za pomocą przyklejonych opcji Divi. Dołączamy bardzo płynne przejście z domyślnego na przyklejony, a plik JSON będzie można pobrać również za darmo!

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 za DARMO

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

1. Stwórz projekt bohatera

Dodaj nową sekcję

Kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i dodaj kolor tła.

• Kolor tła: #111111

Rozstaw

Przejdź do zakładki projektowania sekcji i dodaj dolną wyściółkę. Ta dolna wyściółka zapewni nam wystarczająco dużo miejsca, aby stworzyć wrażenie przewijania.

• Dolna wyściółka: 120vh

Dodaj wiersz nr 1

Struktura kolumny

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

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza, przejdź do zakładki projekt i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2
• Szerokość: 100%
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Następnie dodaj responsywny górny margines.

• Górny margines:
  • Komputer stacjonarny: 10vh
  • Tablet i telefon: 5vh

Indeks Z

Aby upewnić się, że ten wiersz pozostanie poniżej drugiego wiersza, który dodamy do tej sekcji, później użyjemy indeksu az 10 na karcie zaawansowane.

• Indeks Z: 10

Wszystkie ustawienia kolumn

Po zakończeniu ogólnych ustawień wiersza otwórz każdą z kolumn osobno.

Główny element CSS

W każdej z kolumn zastosuj następujące wiersze kodu CSS do głównego elementu na telefonie:

Tylko telefon:

width: 50% !important;
margin: 0 !important;

Ustawienia kolumny 2

Następnie otwórz ustawienia kolumny 2.

Indeks Z

I zwiększ indeks Z do 12. Spowoduje to umieszczenie tej kolumny nad trzecią kolumną.

• Indeks Z: 12

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Czas dodać moduły, zaczynając od modułu obrazu w kolumnie 1. Prześlij wybrany obraz.

Rozstaw

Przejdź do zakładki projektu modułu i zmień ustawienia odstępów w następujący sposób:

• Margines dolny:
  • Tablet i telefon: 10 pikseli
• Prawy margines:
  • Tablet i telefon: 2%

Klonuj moduł obrazu trzy razy i umieść duplikaty w pozostałych kolumnach

Po zakończeniu ustawień modułu możesz trzykrotnie sklonować cały moduł i umieścić duplikaty w pozostałych kolumnach wiersza.

Zmień obrazy

Upewnij się, że zmieniłeś obraz w każdym zduplikowanym module.

Zmień odstępy między modułami obrazu 2 i 4

Następnie otwórz ustawienia modułów obrazu w kolumnach 2 i 4 i zastosuj do nich następujące wartości odstępów:

• Margines dolny:
  • Tablet i telefon: 10 pikseli
• Lewy margines:
  • Tablet i telefon: 2%
• Prawy margines: /

Dodaj wiersz nr 2

Struktura kolumny

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

Tło gradientowe

Otwórz ustawienia wiersza i zastosuj następujące tło gradientowe:

• Kolor 1: #111111
• Kolor 2: rgba (255,255,255,0)

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru.

• Szerokość: 100%
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Następnie zastosuj górną i dolną wyściółkę.

• Górna wyściółka: 20vh
• Dolna wyściółka: 20vh

Pozycja

Aby umieścić ten wiersz na górze siatki obrazu, użyjemy odpowiednio ustawień pozycji:

• Pozycja: bezwzględna
• Lokalizacja: górne centrum
• Indeks Z: 12

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H1

Dodaj pierwszy moduł tekstowy do tego wiersza, używając wybranej przez siebie treści H1.

Ustawienia tekstu H1

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu H1:

• Czcionka nagłówka: Kumbh Sans
• Grubość czcionki nagłówka: pogrubiona
• Styl czcionki nagłówka: wielkie litery
• Wyrównanie tekstu nagłówka: do środka
• Kolor tekstu nagłówka: #ffdbaa
• Rozmiar tekstu nagłówka:
  • Pulpit: 120px
  • Tablet: 60px
  • Telefon: 40px
• Odstępy między literami nagłówka
  • Pulpit: -3px
  • Tablet i telefon: 0px
• Cień tekstu nagłówka:
  • Wybierz: Trzecia opcja
  • Kolor cienia tekstu nagłówka: rgba (0,0,0,0.4)

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru.

• Maksymalna szerokość: 900px
• Wyrównanie modułu: Środek

Dodaj moduł przycisku do kolumny

Dodaj kopię

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

Wyrównanie przycisków

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

• Wyrównanie przycisków: środek

Ustawienia przycisków

Następnie nadaj styl przyciskowi.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku:
  • Pulpit: 20px
  • Tablet: 16px
  • Telefon: 14px
• Rozmiar tekstu przycisku: #111111
• Kolor tła przycisku: #ffffff
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 100px

• Czcionka przycisku: Kumbh Sans
• Waga czcionki przycisku: pogrubiona

Rozstaw

I użyj kilku responsywnych wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka:
  • Komputer stacjonarny i tablet: 20 pikseli
  • Telefon: 15px
• Dolna wyściółka:
  • Komputer stacjonarny i tablet: 20 pikseli
  • Telefon: 15px
• Lewa wyściółka:
  • Komputer stacjonarny i tablet: 50 pikseli
  • Telefon: 40px
• Prawa wyściółka:
  • Komputer stacjonarny i tablet: 50 pikseli
  • Telefon: 40px

2. Zastosuj lepkie ustawienia

Obróć rząd nr 1 przyklejony

Teraz, gdy mamy już wszystkie elementy, możemy skupić się na lepkich ustawieniach. Otwórz ustawienia pierwszego wiersza i zastosuj następujące przyklejone ustawienia:

• Lepka pozycja: trzymaj się u góry
• Dolny limit lepkości: sekcja
• Przesunięcie od otaczających lepkich elementów: Tak
• Domyślne i trwałe style przejścia: Tak

Lepkie krycie

Następnie zmień krycie w ustawieniach filtrów.

• Domyślnie: 20%
• Lepkie: 100%

Moduł obrazu #1 Ustawienia przyklejenia

Rozstaw

Następnie otwórz ustawienia modułu obrazu w kolumnie 1. Przejdź do karty projektu i dodaj trochę lepkiego górnego i prawego marginesu.

• Lepki górny margines: -20%
• Lepki prawy margines: -20%

Przemiana

Zwiększ również czas trwania przejścia.

• Czas trwania przejścia: 700ms

Moduł obrazu #2 Lepkie odstępy

Rozstaw

Przejdź do modułu obrazu w kolumnie 2 i użyj następujących lepkich ustawień odstępów:

• Lepki górny margines: 20%
• Lepki lewy margines: -30%

Przemiana

Tutaj też zwiększ czas przejścia.

• Czas trwania przejścia: 1000 ms

Moduł obrazu #3 Lepkie odstępy

Rozstaw

Następnie mamy moduł obrazu w kolumnie 3. Użyj następujących lepkich wartości odstępów:

• Lepki górny margines: -10%
• Lepki lewy margines: -25%
• Lepki prawy margines: -25%

Przemiana

Zmień odpowiednio czas trwania przejścia:

• Czas trwania przejścia: 700ms

Moduł obrazu #4 Lepkie odstępy

Rozstaw

I na koniec otwórz moduł obrazu w kolumnie 4. Zastosuj następujące lepkie wartości odstępów:

• Lepki górny margines: -20%
• Lepki lewy margines: -30%

Przemiana

Uzupełnij ustawienia modułu i ten samouczek, zwiększając czas trwania przejścia. Otóż ​​to! Zapisz i wyjdź ze strony, aby zobaczyć wynik.

• Czas trwania przejścia: 1000 ms

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 wykazać się kreatywnością w sekcji bohaterów w Divi. Mówiąc dokładniej, pokazaliśmy, jak wyświetlić siatkę obrazu podczas przewijania za pomocą lepkich sekcji Divi. Udało Ci się również pobrać plik JSON za darmo. 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 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.