Czy chciałbyś nadać swój nowy wymiar? strona internetowa z maską tła Divi Lepki?
Lepkie opcje Divi pozwalają stworzyć mnóstwo różnych projektów dla twoich stron internetowych. Dzisiejszy samouczek dodaje listę rzeczy, które możesz zrobić. Mam nadzieję, że pomoże to pobudzić twoją kreatywność.
Pokażemy Ci, jak stworzyć lepką maskę tła.
W tym samouczku połączono lepkie opcje programu Divi z trybami mieszania filtrów.
badanie
Zanim zagłębimy się w ten samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.
Biuro
Aplikacje mobilne
Utwórz projekt w Divi
Dodaj nową sekcję
Obraz tła
Zacznij od dodania nowej sekcji do strony, nad którą pracujesz.
- Prześlij wybrany obraz tła.
- Rozmiar obrazu tła: okładka
rozstaw
Przejdź do karty Projekt przekroju i usuń domyślne ustawienia odstępów poniżej:
- Dopełnienie (góra i dół): 0px
Przepełnienia
Następnie ukryj przepełnienia sekcji w zakładce Zaawansowane.
- Przepełnienie poziome: ukryte
- Przepełnienie pionowe: ukryte
Dodaj wiersz #1
Struktura kolumny
Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:
zaklejania
Bez dodawania żadnych modułów otwórz ustawienia linii i odpowiednio zmień ustawienia wymiarowania:
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Usuń także wszystkie marginesy domyślne.
- Dopełnienie (góra i dół): 0px
Filtry
Do tej linii dodajemy również tryb mieszania. Ten tryb mieszania pomoże nam stworzyć maskę w dalszej części samouczka.
- Tryb mieszania: ekran
Indeks Z
Aby upewnić się, że ten wiersz pozostaje poniżej drugiego wiersza, który dodamy do sekcji, zmieniamy indeks Z na karcie Zaawansowane.
- Indeks Z: 9
Parametry kolumny
Następnie otworzymy ustawienia kolumn.
Kolor tła
Używamy całkowicie białego koloru tła.
- Kolor tła: #ffffff
Główny element CSS
Dodajemy również wartość wysokości do głównego elementu w zakładce Zaawansowane.
height: 100vh;
Dodaj moduł „Tekst” do wiersza
Pozostaw pole zawartości puste
Gdy skończysz z ustawieniami wiersza, dodaj moduł Tekst do jego kolumny.
Opuścić obszar treść pusty. Zamiast tego używamy tego modułu do utworzenia kształtu odsłaniającego część obrazu tła sekcji.
Kolor tła
W tym module użyjemy ciemniejszego koloru tła.
- Kolor tła: #0b3835
zaklejania
Następnie uzyskamy dostęp do zakładki Wnętrze i zmodyfikuj parametry doboru w następujący sposób:
- Szerokość:
- Komputer stacjonarny: 20vw
- Tablet i telefon: 70 vw
- Wysokość :
- Komputer stacjonarny: 30vh
- Tablet i telefon: 10vh
rozstaw
Dodajemy również górny margines.
- Marża (górna): 3vh
Granica
I uwzględnimy zaokrąglone rogi.
- Zaokrąglone rogi: 15px
Dodaj wiersz 2
Struktura kolumny
Kontynuuj, dodając kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:
zaklejania
Otwórz ustawienia linii i dokonaj następujących zmian w opcjach Dobór następny:
- Szerokość: 100%
- Maksymalna szerokość: 100%
Indeks Z
Zwiększ także indeks Z wiersza. Pomoże to zapewnić, że treść linii pozostaje nad poprzednią linią.
- Indeks Z: 12
Dodaj moduł „Tekst” do wiersza
Dodaj zawartość H2
Czas dodać moduły, zaczynając od pierwszego modułu Tekst zawierającego treść H2 według własnego wyboru.
Ustawienia tekstu H2
Dostosuj ustawienia tekstu H2 w następujący sposób:
- Czcionka: Wyświetlacz Playfair
- Wyrównanie tekstu: wyśrodkowane
- Kolor tekstu: #0b3835
- Rozmiar:
- Pulpit: 150px
- Tablet i telefon: 45px
- Wysokość linii: 1,2 em
zaklejania
Następnie przejdź do ustawień rozmiaru i zastosuj następujące ustawienia:
- Maksymalna szerokość: 980px
- Moduł wyrównania: Środek
rozstaw
Uwzględnij również ujemny margines górny.
Dodaj moduł „Przycisk” do linii
Dodaj treść do przycisku
Następnym i ostatnim modułem, którego potrzebujemy w tym wierszu, jest moduł Button. Dodaj wybrane przez siebie treści.
Wyrównanie przycisków
Przełącz na kartę Wnętrze modułu i zmodyfikuj ustawienie przycisku.
- Wyrównanie przycisków: środek
Ustawienia przycisków
Następnie przejdź do ustawień przycisku i zastosuj następujące style:
- Użyj niestandardowych stylów dla przycisku: Tak
- Rozmiar tekstu przycisku: 15px
- Kolor tekstu przycisku: #ffffff
- Kolor tła przycisku: #000000
- Szerokość obramowania przycisku: 0 pikseli
- Promień obramowania przycisku: 100px
- Czcionka przycisku: Montserrat
- Grubość czcionki przycisku: pół pogrubiona
- Styl czcionki: TT
rozstaw
Do ustawień odstępów dodajemy również niestandardowe wartości marginesów i dopełnienia.
- Marża (dolna): 60vh
- Dopełnienie (góra i dół): 15px
- Dopełnienie (lewy i prawy): 40px
Zastosuj lepkie efekty
Linia otwarta #1
Teraz, gdy zbudowaliśmy podstawę naszego projektu, nadszedł czas na zastosowanie stylów lepkich. Otwórz ustawienia pierwszego wiersza.
Zastosuj lepkie opcje
Przejdź do zakładki Zaawansowane i zastosuj następujące trwałe ustawienia:
- Lepka pozycja: przyklej do góry
- Dolny limit lepkości: sekcja
- Odsunięcie od otaczających lepkich elementów: TAK
- Domyślne i trwałe style przejścia: TAK
Opcje przyklejenia modułu tekstowego
Teraz, gdy linia jest przyklejona, możemy zastosować style do modułu Text wewnątrz linii. Otwórz ustawienia modułu.
Przyklejony rozmiar
Następnie przejdź do ustawień rozmiaru i zastosuj następujące wartości rozmiaru:
- Szerokość (przyklejony): 80 vw
- Wysokość (przyklejony): 90vh
Czas przejścia
Na koniec przejdź do zakładki Zaawansowane i wydłuż czas trwania przejścia.
- Czas trwania przejścia: 500ms
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Biuro
Pobierz DIVI teraz !!!
Aplikacje mobilne
Pobierz DIVI teraz !!!
Wnioski
W tym artykule po raz kolejny pokazaliśmy, jak wykazać się kreatywnością dzięki lepkim opcjom Divi.
W szczególności pokazaliśmy, jak połączyć ustawienia filtrów Divi i lepkie opcje.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
