Używanie cieni tekstowych do tworzenia interaktywnej zawartości za pomocą Divi

Wyróżnienie Twojej witryny na tle podobnych witryn może być trudne, ale gdy już to zrobisz, prawie zawsze jest to warte wysiłku i przemyśleń, które w to włożono. Aby pomóc Ci zainspirować się, pokażemy Ci, jak tworzyć interaktywne treści podczas tworzenia stron internetowych za pomocą Divi.

Przykład, który odtworzymy w tym samouczku, będzie działał szczególnie dobrze dla każdej strony, nad którą pracujesz. Będziesz mógł udostępniać fakty lub informacje o firmie po najechaniu kursorem, korzystając z wbudowanych opcji cienia tekstu Divi. Dbamy również o to, aby te efekty najechania kursorem nie były stosowane na mniejszych ekranach, aby informacje i wrażenia z urządzeń mobilnych nie zostały utracone.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wynik, którego możesz się spodziewać.

Pulpit

mobilny

Upewniamy się, że wszystkie te interakcje najechania kursorem nie mają zastosowania na mniejszych ekranach. Korzystając z tej samej sekcji i modułów, zamiast tego otrzymamy następujący prosty wynik:

Zbliżać się

• Przykład, który odtworzymy, jest świetny dla stron, ale możesz sprawić, że będzie działał z dowolnym 5-znakowym lub 6-znakowym słowem (dopasuj je do struktury kolumn)
• Każdy ze znaków będzie dedykowany do indywidualnego Modułu Tekstowego
• Używamy wiersza z wystarczającą liczbą kolumn, aby połączyć różne znaki słowa i sprawić, by wyglądały tak, jakby zostały utworzone w tym samym module
• Domyślnie ustawimy kolor tekstu w module tekstowym na kolor tła sekcji
• Aby postać była czytelna, nałożymy na nią również biały cień tekstu
• Po najechaniu na postać cień tekstu zniknie, a kolor tekstu zmieni się, co daje wrażenie, że tekst się zapełnia
• Po najechaniu na postać pojawią się również dodatkowe informacje
• Na mniejszych ekranach fakty i/lub informacje o firmie będą dostępne od samego początku

Zacznijmy odtwarzać!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Kolor tła

Otwórz nową lub istniejącą stronę i dodaj do niej zwykłą sekcję. Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #03006d

Rozstaw

Następnie przejdź do ustawień odstępów sekcji i dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 50px
• Dolna wyściółka: 50px

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Następnie przejdź do ustawień rozmiaru i pozwól wierszowi zająć całą szerokość ekranu. To ważny krok, ponieważ pozwoli nam ręcznie określić odległość za pomocą jednostek rzutni.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

W poprzednim kroku pozbyliśmy się wszystkich domyślnych ustawień rozmiaru, które pojawiają się w nowym wierszu. Musimy jednak ręcznie dodać dopełnienie. Tutaj używamy jednostek rzutni, aby upewnić się, że wynik pozostaje taki sam we wszystkich rozmiarach ekranu komputera stacjonarnego.

• Lewa wyściółka: 9vw (komputer stacjonarny), 5vw (tablet i telefon)
• Prawa wyściółka: 5vw (tablet i telefon)

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Gdy skończysz modyfikować ustawienia wierszy, możesz dodać pierwszy moduł tekstowy do kolumny 1. Dodaj pierwszy znak jako tekst akapitowy i zawartość, którą chcesz wyświetlić jako tekst listy.

Domyślne ustawienia tekstu

Następnie przejdź do zakładki projektowania i zmodyfikuj domyślne ustawienia tekstu akapitowego. Upewnij się, że używasz tego samego koloru dla tekstu i tła sekcji.

• Grubość czcionki tekstu: Ultra Bold
• Kolor tekstu: #03006d
• Rozmiar tekstu: 27vw (komputer), 0vw (tablet i telefon)
• Wysokość linii tekstu: 1,1 em
• Siła rozmycia cienia tekstu: 0,01 em
• Kolor cienia tekstu: #ffffff
• Orientacja tekstu: w lewo

Ustawienia tekstu najechania kursorem

Aby stworzyć ładny efekt najechania kursorem, musimy zmodyfikować te ustawienia tekstu akapitowego po najechaniu myszą. Zwróć uwagę, że teraz używamy całkowicie przezroczystego koloru cienia tekstu, aby zniknął.

• Kolor tekstu: #ffffff
• Kolor cienia tekstu: rgba (255,255,255,0)

Domyślne ustawienia tekstu listy

Kontynuuj, przechodząc do ustawień tekstu listy. Ważną częścią tych ustawień jest upewnienie się, że rozmiar tekstu na pulpicie to „0px”, ale dodanie „18px” jako rozmiaru tekstu dla mniejszych rozmiarów ekranu. Dzięki temu tekst listy będzie wyświetlany na mniejszych ekranach, ale nie na pulpicie bez najechania na niego.

• Nieuporządkowana grubość czcionki listy: lekka
• Kolor tekstu nieuporządkowanej listy: #ffffff
• Nieuporządkowany rozmiar tekstu listy: 0px (komputer), 18px (tablet i telefon)
• Kolor cienia nieuporządkowanego tekstu listy: rgba (255,255,255,0)
• Typ nieuporządkowanego stylu listy: Koło
• Pozycja stylu listy nieuporządkowanej: na zewnątrz
• Wcięcie nieuporządkowanego elementu listy: 0px

Ustawienia tekstu listy podręcznej

Chcemy, aby tekst listy pojawiał się po najechaniu myszą. Dlatego po najechaniu myszą zmienimy rozmiar tekstu. Upewnij się, że rozmiar tekstu, którego używasz po najechaniu kursorem, jest taki sam, jak rozmiar tekstu, którego używasz na mniejszych rozmiarach ekranu. Pomoże to zapewnić brak efektu najechania kursorem na mniejszych rozmiarach ekranu.

• Rozmiar tekstu listy nieuporządkowanej: 18px

Rozstaw

Kontynuuj, przechodząc do ustawień odstępów modułu i tam również wprowadź pewne zmiany.

• Margines dolny: 50px (tablet i telefon)
• Prawy margines: -4vw (komputer stacjonarny), 0vw (tablet i telefon)

Klonuj moduł tekstowy 4 razy i umieść duplikaty w pozostałych kolumnach

Teraz, gdy skończyliśmy modyfikować pierwszy moduł w kolumnie 1, możemy sklonować moduł cztery razy i umieścić każdy z duplikatów w pozostałych kolumnach. W kolejnych krokach zmodyfikujemy każdy z duplikatów, aby pasował do nowej postaci.

Zmień moduł tekstowy w kolumnie 2

Zmień zawartość

Otwórz duplikat w kolumnie 2 i zmień 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)
• Lewy margines: -2vw (komputer), 0vw (tablet i telefon)
• Prawy margines: -2vw (komputer), 0vw (tablet i telefon)

Zmień moduł tekstowy w kolumnie 3

Zmień zawartość

Zmień również zawartość duplikatu w kolumnie 3.

Zmień odstępy

Wraz z ustawieniami odstępów w zakładce projekt.

• Margines dolny: 50px (tablet i telefon)
• Lewy margines: -5.5vw (komputer), 0vw (tablet i telefon)
• Prawy margines: 1,5vw (komputer stacjonarny), 0vw (tablet i telefon)

Zmień moduł tekstowy w kolumnie 4

Zmień zawartość

Kontynuuj, otwierając moduł tekstowy w kolumnie 4 i tutaj również zmień zawartość.

Zmień odstępy

Następnie przejdź do zakładki projekt i zmień niestandardowe wartości marginesów w ustawieniach odstępów.

• Margines dolny: 50px
• Lewy margines: -6vw (komputer), 0vw (tablet i telefon)
• Prawy margines: 2vw (komputer stacjonarny), 0vw (tablet i telefon)

Zmień moduł tekstowy w kolumnie 5

Zmień zawartość

Do ostatniego duplikatu. Zmień zawartość w polu treści.

Zmień odstępy

Wraz z niestandardowymi ustawieniami odstępów.

• Margines dolny: 50px
• Lewy margines: -7vw (komputer), 0vw (tablet i telefon)
• Prawy margines: 3vw (komputer stacjonarny), 0vw (tablet i telefon)

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

Wiemy, jak ważne jest, aby Twoja witryna wyróżniała się na tle innych witryn. Dzięki wbudowanym opcjom Divi możesz być tak kreatywny, jak chcesz. Ten post jest przykładem tego, jak możesz tworzyć interaktywne treści po najechaniu kursorem, jednocześnie upewniając się, że wszystko pozostaje proste na mniejszych ekranach. Możesz użyć odtworzonego przez nas przykładu dla dowolnej strony, nad którą aktualnie pracujesz. To świetny sposób na podzielenie się pewnymi faktami i dodatkowymi informacjami o Twojej firmie podczas interakcji z odwiedzającymi. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!