Czy chcesz użyć efektów cienia i najechania? Divi stworzyć treść interaktywne i wyróżnij się Witryna internetowa ?
Upewnij się, że Witryna internetowa wyróżnienie się na tle podobnych witryn może być trudne. Ale kiedy już tam dotrzesz, prawie zawsze jest to warte wysiłku i myśli, które w to włożono.
Pokażemy Ci jak tworzyć treść interaktywne podczas tworzenia stron internetowych za pomocą Divi.
Chodźmy!
badanie
Zanim zagłębimy się w ten samouczek, rzućmy okiem na wynik, którego możesz się spodziewać.
Komputer stacjonarny
Aplikacje mobilne
Zacznijmy realizację z Divi!
Zobacz też: Divi: Jak stworzyć menu z obracającym się kołem po najechaniu mysząl
Dodaj nową sekcję
Kolor tła
Utwórz nową stronę lub otwórz istniejącą i dodaj do niej zwykłą sekcję. Otwórz ustawienia sekcji i zmień kolor tła.
- Tło: #03006d
rozstaw
Następnie przejdź do ustawień odstępów między sekcjami i zmień w następujący sposób:
- Dopełnienie (góra i dół): 50px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn.
zaklejania
Następnie przejdź do ustawień rozmiaru i pozwól, aby linia wypełniła całą szerokość ekranu.
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Szerokość: 100%
rozstaw
Zmieńmy też następujące ustawienia odstępów:
- Wypełnienie (po prawej): 9vw (komputer), 5vw (tablet i telefon)
- Wypełnienie (po prawej): 5vw (tablet i telefon)
Dodaj moduł tekstowy do kolumny 1
Dodaj treść
Po zakończeniu edycji ustawień wiersza dodaj pierwszy moduł tekstowy do kolumny 1.
Dodaj pierwszy znak jako tekst akapitu. A później treść który chcesz wyświetlić jako tekst listy.
Ustawienia tekstu (komputer)
Następnie przejdź do zakładki Wnętrzei zmień domyślne ustawienia tekstu akapitowego. Upewnij się, że tekst i tło sekcji mają ten sam kolor.
- Grubość czcionki: Ultra Bold
- Kolor tekstu: #03006d
- Rozmiar tekstu: 27vw (komputer), 0vw (tablet i telefon)
- Wysokość linii: 1,1 em
- Cień tekstu: Zobacz przechwytywanie
- Siła rozmycia cienia: 0,01 em
- Kolor cienia: #ffffff
- Wyrównanie tekstu: do lewej
Umieszczaj ustawienia tekstu
Aby stworzyć ładny efekt najechania kursorem, będziemy musieli zmienić te ustawienia tekstu w akapicie najechania.
- Kolor tekstu (najechanie): #ffffff
- Kolor cienia (najechanie) : rgba (255,255,255,0)
Ustawienia listy (komputer)
Kontynuuj, przechodząc do ustawień aukcji.
- Waga czcionki: lekka
- Kolor tekstu listy: #ffffff
- Rozmiar tekstu listy: 0px (komputer), 18px (tablet i telefon)
- Pozycja stylu: Koło
- Pozycja stylu listy nieuporządkowanej: na zewnątrz
- Wcięcie nieuporządkowanego elementu listy: 0px
Wyświetlanie listy ustawień tekstu po najechaniu myszą (Najechanie)
Chcemy, aby tekst listy pojawiał się po najechaniu myszą. Dlatego po najechaniu myszą zmienimy rozmiar tekstu.
- Rozmiar tekstu listy nieuporządkowanej (najechanie): 18px
rozstaw
Kontynuuj, przechodząc do ustawień odstępów między modułami i tam również wprowadź pewne zmiany.
- Margines (dolny): 50px (tablet i telefon)
- Margines (po prawej): -4vw (komputer), 0vw (tablet i telefon)
Sklonuj moduł tekstowy 4 razy i umieść duplikaty w pozostałych kolumnach
Teraz, gdy skończyliśmy modyfikować pierwszy moduł w kolumnie 1, sklonuj moduł cztery razy. Następnie umieść każdy z duplikatów w pozostałych kolumnach. Zmodyfikujemy każdy z duplikatów, aby pasował do tego, czego chcemy.
Zmień moduł Tekst w kolumnie 2
Edytuj treść
Otwórz duplikat w kolumnie 2 i edytuj zawartość.
Zmień odstępy
Następnie przejdź do ustawień odstępów i zmień niestandardowe wartości marginesów.
- Margines (dolny): 50px (tablet i telefon)
- Margines (lewy i prawy): -2vw (komputer), 0vw (tablet i telefon)
- Prawy margines: -2vw (komputer), 0vw (tablet i telefon)
Zmień moduł Tekst w kolumnie 3
Edytuj treść
Zmień także zawartość duplikatu w kolumnie 3.
Zmień odstępy
Z ustawieniami odstępów w zakładce projekt.
- Marża (po lewej): 2,5 vw
- Marża (prawa): 1,5 vw
Zmodyfikuj moduł Tekst w kolumnie 4
Edytuj treść
Kontynuuj, otwierając ustawienia modułu Tekst w kolumnie 4 i edytuj tam również zawartość.
Zmień odstępy
Następnie przejdź do zakładki Projekt i zmodyfikuj niestandardowe wartości marginesów w ustawieniach odstępów.
- Margines (lewy): -6vw
- Margines (prawy): 2vw
Zmodyfikuj moduł Tekst w kolumnie 5
Treść
Zrób miejsce dla ostatniego duplikatu. Edytuj zawartość w obszarze zawartości.
Zmień odstępy
Z niestandardowymi ustawieniami odstępów.
- Margines (lewy): -7vw
- Margines (prawy): 3vw
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Czytaj także: Divi : Jak dostosować ikony koszyka i wyszukiwania modułu „Menu pełnej szerokości”.
Biuro
Aplikacje mobilne
Pobierz DIVI teraz !!!
Wnioski
Wiemy, jak ważne jest, aby mieć pewność, że Twoje Witryna internetowa wyróżnia się na tle innych serwisów. Dzięki wbudowanym opcjom Divi możesz być tak kreatywny, jak chcesz.
Ten artykuł jest przykładem tworzenia interaktywnych treści po najechaniu kursorem.
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.
...
