Czy chcesz utworzyć siatkę za pomocą Divi być płynnym po najechaniu kursorem?
Jeśli lubisz tworzyć strony internetowe z myślą o interakcji z użytkownikiem, pokochasz ten samouczek.
Dzisiaj pokażemy, jak stworzyć przezroczystą siatkę, której obraz tła jest widoczny, gdy tylko ktoś najedzie na jeden z elementów. Projekt jest początkowo prosty i czysty. Skutkuje to przyjemnym unoszeniem się.
W tym samouczku przeprowadzimy Cię krok po kroku przez proces tworzenia.
Chodźmy.
badanie
Zanim zagłębimy się w samouczek, rzućmy okiem na wynik na różnych rozmiarach ekranu.
Biuro
Aplikacje mobilne
Zacznijmy proces tworzenia w Divi
Dodaj nową sekcję
Kolor tła
Dodaj nową sekcję do strony, nad którą pracujesz.
Zobacz także: Divi: Jak stworzyć niestandardową stopkę
Najpierw otwórz ustawienia sekcji i zastosuj biały kolor tła.
- Tło: #ffffff
Dodaj wiersz #1
Struktura kolumny
Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia linii, przejdź do zakładki Wnętrze, rozwiń opcję Dobór i zmodyfikuj parametry doboru w następujący sposób:
- Użyj niestandardowej szerokości rynny: TAK
- Rynna z : 1
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Następnie rozwiń opcję Rozstaw i zmień następujące ustawienia:
- Dopełnienie (góra i dół): 0px
Granica
W opcji Border wprowadź również następujące zmiany:
- Style obramowania (góra i dół): 1px
- Kolor obramowania (góra i dół): #d3d3d3
Ustawienia kolumny 1
Umieść tło
Następnie dostosujmy ustawienia dla kolumny 1. Zastosuj wypełnienie gradientowe do wskaźnika myszy.
- Kolor 1: rgba (255,255,255,0)
- Kolor 2: #000000
- Typ gradientu: liniowy
- Kolor pozycji 1: 30%
- Umieść gradient nad obrazem gradientu: TAK
Obraz tła po najechaniu myszą
Prześlij także obraz tła, który pojawi się po najechaniu myszą.
- Rozmiar obrazu tła: okładka
- Pozycja obrazu tła: środek
Klasa CSS
I uzupełnij ustawienia kolumn, przypisując następującą klasę CSS w zakładce Zaawansowane :
- Klasa CSS: hover-column
Dodaj moduł Tekst #1 do kolumny 1
Dodaj tekst w rozmiarze H3 (nagłówek 3)
Czas dodać moduły, zaczynając od pierwszego modułu Tekst w kolumnie 1. Wstaw wybrany przez siebie tekst.
Ustawienia tekstu H3
Następnie przejdź do zakładki Wnętrze modułu i zmodyfikuj parametry tekstu H3 w następujący sposób:
- Czcionka: Oswald
- Waga czcionki Waga czcionki: ultralekka
- Styl czcionki nagłówka 3: TT
- Kolor tekstu: #0a0a0a
- Rozmiar tekstu nagłówka 3:
- Komputer stacjonarny: 3vw
- Tablet: 7vw
- Telefon: 14vw
- Nagłówek 3 Odstępy między literami: -2px
zaklejania
Zmień szerokość na różnych rozmiarach ekranu w ustawieniach rozmiaru.
- Szerokość:
- Komputer stacjonarny: 44%
- Tabletki: 48%
- Telefon: 50%
rozstaw
Zmieńmy również następujące parametry w opcji Rozstaw.
- Marża (dolna): 25vh
- Wyściółka (góra i dół): 5%
- Wyściółka (lewa i prawa): 4%
Granica
Następnie dodamy obramowania po prawej i poniżej.
- Szerokość obramowania (prawa i dolna): 1px
- Kolor obramowania (prawy i dolny): #d3d3d3
Klasa CSS
Dokończymy również ustawienia modułu, przypisując następującą klasę CSS do modułu Text:
- Klasa CSS: hover-title
Dodaj moduł Tekst #2 do kolumny 1
Dodaj treść
Dodaj kolejny moduł tekstowy tuż pod poprzednim za pomocą treść wybrany przez Ciebie opis.
Ustawienia tekstu
Przełącz na kartę Wnętrze modułu i odpowiednio zmodyfikuj parametry tekstowe:
- Czcionka tekstu: Karla
- Kolor tekstu: #ffffff
- Rozmiar:
- Komputer stacjonarny: 0,8 vw
- Tablet: 2vw
- Telefon: 3.6vw
- Wysokość linii: 2,2 em
rozstaw
Zastosuj również niestandardowe wartości marginesów.
- Wyściółka (dół): 10%
- Wyściółka (lewa i prawa): 9%
Klasa CSS
I uzupełnij parametry modułu za pomocą następującej klasy CSS dla modułu:
- Klasa CSS: najechanie-tekst
Dodaj moduł „Przycisk” do kolumny 1
Dodaj opis
Następnym i ostatnim modułem, którego potrzebujemy, jest moduł Przycisk. Wpisz wybrany przez siebie opis.
Ustawienia przycisków
Zmodyfikuj parametry modułu w następujący sposób:
- Użyj niestandardowych stylów dla przycisku: TAK
- Rozmiar tekstu przycisku:
- Komputer stacjonarny: 1vw
- Tablet: 2,5 vw
- Telefon: 4vw
- Szerokość obramowania przycisku: 0px
- Promień graniczny: 0px
- Czcionka przycisku: Karla
- Pokaż ikonę przycisku: TAK
- Umieszczenie ikony przycisku: w prawo
- Pokaż tylko ikonę nad przyciskiem: NIE
rozstaw
Dodaj także niestandardowe wartości odstępów.
- Marża (dolna): 8%
- Margines (lewy i prawy): 9%
- Wyściółka (dół): 5%
- Wyściółka (prawa): 20%
cień pudełka
Następnie nałóż cień pudełkowy.
- Pozycja pozioma cienia pudełka: 0px
- Pozycja pionowa cienia pudełka: 2px
- Kolor cienia: #000000
Klasa CSS
I uzupełnij ustawienia modułu, przypisując do przycisku następującą klasę CSS:
- Klasa CSS: przycisk myszy
Ponowne użycie kolumny 1
Usuń kolumny 2, 3 i 4
Teraz, gdy stworzyliśmy pierwszą kolumnę, możemy ją ponownie wykorzystać. Pierwszą rzeczą, którą zrobimy, jest usunięcie pustych kolumn z naszego wiersza.
Klonuj kolumnę 1 trzy razy
Użyjemy ponownie kolumny 1, klonując ją trzy razy.
Zmień obrazy tła po najechaniu na zduplikowane kolumny
Następnie zmień zduplikowane obrazy tła kolumn w każdej zduplikowanej kolumnie.
Edytuj zduplikowaną treść
Zmień także treść modułu w każdej zduplikowanej kolumnie.
Unikalne granice kolumn
Kolumna 1
Będziemy musieli zastosować unikalne ustawienia obramowania do każdej kolumny, zaczynając od kolumny 1.
- Szerokość obramowania (prawa):
- Pulpit: 1px
- Tablet: 1px
- Telefon: 0px
- Kolor (prawy): #d3d3d3
- Szerokość obramowania (na dole):
- Pulpit: 0px
- Tablet: 1px
- Telefon: 1px
- Kolor obramowania (dół): #d3d3d3
Kolumna 2
Dalej mamy kolumnę 2.
Szerokość obramowania (prawa):
- Pulpit: 1px
- Tablet: 1px
- Telefon: 0px
Kolor (prawy): #d3d3d3Szerokość obramowania (dół):
- Pulpit: 0px
- Tablet: 1px
- Telefon: 1px
Kolor obramowania (dół): #d3d3d3
Kolumna 3
I użyjemy następujących ustawień obramowania dla kolumny 3:
- Szerokość obramowania (prawa):
- Pulpit: 1px
- Tablet: 1px
- Telefon: 0px
- Kolor (prawy): #d3d3d3
- Szerokość obramowania (na dole):
- Pulpit: 0px
- Tablet: 1px
- Telefon: 1px
- Kolor obramowania (dół): #d3d3d3
Dodaj niestandardowy CSS do ustawień strony
Otwórz ustawienia strony
Teraz, gdy cały projekt jest gotowy, pozostaje tylko dodać niestandardowy kod CSS, który pomoże wywołać efekty najechania na moduły. Aby to zrobić, otwórz ustawienia strony.
Przeczytaj także nasz przewodnik na temat: Divi: Jak stworzyć przyklejoną stopkę z efektem „Odsłoń”
Dodaj kod CSS
Skopiuj i wklej następujące wiersze kodu CSS:
.hover-column:hover .hover-title {
background-color: #000000;
}
.hover-column:hover .hover-title h3 {
color: white !important;
}
.hover-button {
color: black;
}
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
.hover-column:hover::before {
opacity: 0;
}
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Biuro
Aplikacje mobilne
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak stworzyć piękny projekt zawisu.
W szczególności stworzyliśmy siatkę słupów, która na początku jest prosta i przejrzysta. Tak szybko jak odwiedzający najedź kursorem na określony element siatki, pojawi się obraz tła i zmienią się style modułów.
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.
...
