Tworzenie interaktywnej siatki kart z pytaniami na następną stronę z informacjami w Divi

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy Ci, jak stworzyć interaktywną siatkę kart z pytaniami na następną stronę o Divi. Będziemy używać strony z informacjami z pakietu układów dostawcy usług internetowych, ale możesz zastosować tę metodę na dowolnej stronie, nad którą pracujesz. Zapewnia odwiedzającym inne wrażenia użytkownika i umożliwia interakcję z nimi w zakresie udostępnianych informacji. Gdy już uzyskasz podejście, możesz tworzyć alternatywne projekty siatki z pytaniami do wyboru, bawiąc się wbudowanymi opcjami Divi.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na siatkę kart pytań, którą będziemy odtwarzać od zera.

Pulpit

mobilny

Zacznijmy tworzyć!

Utwórz nową stronę za pomocą strony Informacje z pakietu ISP Layout Pack

Aby stworzyć projekt, który pokazaliśmy powyżej, użyjemy strony z informacjami z pakietu układów dostawcy usług internetowych, więc śmiało utwórz nową stronę przy użyciu tego układu. Jak zwykle możesz go znaleźć w swoich gotowych układach.

Usuń wszystkie sekcje między sekcją bohatera i stopką

Zastąpimy całą obecną zawartość kartą z siatką pytań. Aby to zrobić, musimy najpierw usunąć wszystkie sekcje pomiędzy sekcją bohatera a stopką.

Dodaj nową sekcję pomiędzy

Siatka kart pytań, którą będziemy tworzyć, może zawierać dowolne pytania firmowe, na które chcesz odpowiedzieć. Możesz także użyć siatki do zaprezentowania często zadawanych pytań. Kontynuuj, dodając nową zwykłą sekcję między sekcją bohatera a stopką strony.

Dodaj nowy wiersz

Struktura kolumny

Bez wprowadzania zmian w ustawieniach sekcji dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Usuniemy wszystkie domyślne odstępy między kolumnami. Otwórz ustawienia wiersza i wprowadź zmiany w ustawieniach rozmiaru.

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

Rozstaw

Nadal będziemy potrzebować trochę przestrzeni między kolumnami, aby uzyskać ładną konstrukcję. Przejdź do ustawień odstępów i dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 10px
• Dolna wyściółka: 10px
• Dopełnienie kolumny 1 po lewej stronie: 10px (komputer), 5px (tablet i telefon)
• Kolumna 1 prawa dopełnienie: 5px
• Dopełnienie kolumny 2 po lewej stronie: 5px
• Kolumna 2 prawa dopełnienie: 5px
• Kolumna 3 po lewej stronie: 5px
• Kolumna 3 po prawej stronie: 10px (komputer), 5px (tablet i telefon)

Dodaj nowy moduł Blurb do kolumny 1

Dodaj zawartość

Aby stworzyć efekt najechania, jedynym modułem, którego będziemy potrzebować, jest moduł Blurb. Zaczniemy od utworzenia jednego, a następnie sklonowania go, aby stworzyć cały wynik. Dodaj moduł Blurb do kolumny pierwszej. Dodaj pytanie, na które chcesz odpowiedzieć, do pola tytułu, a odpowiedź do pola treści.

Wybierz ikonę

Następnie wybierz odpowiednią ikonę w ustawieniach obrazu i ikony. Ta ikona pomoże odwiedzającym zrozumieć, że muszą najechać kursorem na kartę pytania, aby zobaczyć odpowiedź.

Domyślne ustawienia ikon

Kontynuuj, zmieniając ustawienia ikony na karcie projektu.

• Kolor ikony: #aaaaa
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 40px

Ustawienia ikony kursora

I zmień kolor ikony po najechaniu myszą. Używamy całkowicie przezroczystego koloru po najechaniu, aby ikona znikała po najechaniu.

• Kolor ikony: rgba (255,255,255,0)

Ustawienia tekstu

Następnie zmień orientację tekstu w ustawieniach tekstu.

• Orientacja tekstu: Środek

Domyślne ustawienia tekstu tytułu

Wprowadź również pewne zmiany w ustawieniach tekstu tytułu.

• Czcionka tytułu: Poppins
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #333333
• Rozmiar tekstu tytułu: 40px
• Odstępy między literami tytułu: -3px

Ustawienia tekstu w tytule najechania kursorem

I zmień kolor tekstu tytułu po najechaniu myszą. Ponownie używamy całkowicie przezroczystego koloru, aby upewnić się, że pytanie nie pojawi się, gdy ktoś najedzie na moduł Blurb.

• Kolor tekstu tytułu: rgba (255,255,255,0)

Domyślne ustawienia tekstu podstawowego

Kontynuuj, zmieniając ustawienia tekstu podstawowego.

• Czcionka ciała: Otwórz Sans
• Waga czcionki ciała: lekka
• Kolor tekstu treści: rgba (255,255,255,0)
• Rozmiar tekstu ciała: 25px
• Odstępy między literami: -2px
• Wysokość linii ciała: 1,6 em

Ustawienia tekstu w nawinięciu

I zmień kolor tekstu treści po najechaniu myszą.

• Kolor tekstu ciała: #000000

Rozstaw

Aby ukształtować nasz moduł w kwadrat, dodamy kilka niestandardowych wartości wypełnienia.

• Górna wyściółka: 9vw
• Dolna wyściółka: 9vw
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Domyślne zaokrąglone rogi

Dajemy również nasz moduł '30px' zaokrąglonych rogów.

Unieś zaokrąglone rogi

Po najechaniu myszą usuwamy te zaokrąglone rogi.

Domyślna ramka

I dodamy dolną granicę.

• Szerokość dolnej krawędzi: 0px
• Kolor dolnej krawędzi: #0fffeb

Wskaż granicę

Zmień szerokość dolnego obramowania po najechaniu kursorem, aby się pojawił.

• Szerokość dolnego obramowania: 10px

Cień Pudełka

Aby dodać głębi, użyjemy również cienia pudełkowego.

• Kolor cienia: rgba (0,0,0,0,05)

Przejścia

Na koniec skrócimy czas przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 250ms

Clone Blurb Module dwa razy i umieść w pozostałych kolumnach

Teraz, gdy Twój pierwszy moduł Blurb jest gotowy, możesz zaoszczędzić czas, klonując go i umieszczając duplikaty w dwóch pozostałych kolumnach.

Zmień zawartość

Upewnij się, że zmieniłeś zawartość każdego z duplikatów.

Zmień kolory dolnej krawędzi

Wraz z dolnym kolorem obramowania.

Klonuj cały rząd dwa razy

Możesz utworzyć siatkę kart z pytaniami, klonując wiersz tyle razy, ile chcesz.

Zmień zawartość i kolory dolne dla każdego przedmiotu osobno

Ale nie zapomnij zmienić treści i kolorów dolnych, aby każda z kart z pytaniami była wyjątkowa!

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak utworzyć interaktywną siatkę kart z pytaniami za pomocą pakietu układów dostawcy usług internetowych Divi. Chociaż upewniliśmy się, że projekt pasuje do stylu pakietu układów, możesz użyć tej metody, aby przekształcić dowolną stronę z informacjami w stronę interaktywną. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!