Uzyskaj natychmiastowy hosting z elementem ELEMENTORem i ELEMENTOR PRO

Z CDN, SSL i kopią zapasami.

Zacznij dzisiaj

Jak zrobić lepki moduł referencji w Divi

Rifat Divi Tutorials Apr 21, 2022

Jednym z najbardziej intrygujących aspektów projektowania układów za pomocą Divi jest różnorodność podejść, które możemy przyjąć. Doskonałym przykładem są moduły z treścią. Możemy wykorzystać ich opcje zawartości bezpośrednio lub połączyć je z innymi modułami, aby stworzyć naprawdę wyjątkowe projekty. Na przykład kombinacje modułów umożliwiają nam tworzenie lepkich elementów. W tym samouczku przyjrzymy się, jak sprawić, by moduł opinii Divi był lepki, jednocześnie umożliwiając normalne przewijanie informacji z referencji w tym samouczku.

Podgląd projektu

Oto zapowiedź tego, co stworzymy. Ponieważ mobilna wersja tego projektu nie będzie lepka, do celów podglądu przedstawiam tylko wersję komputerową.

Szablon

Jako punkt wyjścia użyję strony docelowej z bezpłatnego pakietu układu usług elektrycznych Divi . Możesz zobaczyć referencje na tej stronie, ale są one w zupełnie innym stylu. Aby dopasować się do nowego stylu, zaktualizuję referencje o nowe. Ale zmienię jego nazwę, aby można było wyświetlić ustawienia.

W tym samouczku do skonstruowania referencji zostaną użyte dwa moduły. Obraz, imię i nazwisko, stanowisko i firma zostaną pokazane za pomocą modułu referencji. Wykorzystam moduł tekstowy do treści referencji. Moduł tekstowy będzie się normalnie przewijał. Dopóki użytkownik nie skończy czytać referencji, moduł referencji pozostanie na swoim miejscu. Następnie moduł referencji będzie mógł przewijać się wraz z resztą tekstu.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Zaprojektuj lepką sekcję referencji

Pierwszym krokiem jest dodanie wiersza z jedną kolumną do nowej sekcji. Tytuł zostanie wyśrodkowany w tym rzędzie.

Tekst tytułu

Teraz dodaj moduł tekstu tytułu do tego nowego wiersza.

Otwórz ustawienia i dokonaj następujących zmian.

  • Tekst: Nagłówek 3
  • Treść: Zadowoleni klienci

Ustawienia projektowe

Na karcie Projekt zmień następujące elementy.

  • Wyrównanie tekstu: wyśrodkowane
  • Czcionka: Chakra Petch
  • Waga: pogrubienie
  • Kolor: #000000

Aby to wszystko zaokrąglić, wybierz rozmiar czcionki 50 pikseli na komputerach stacjonarnych i tabletach oraz 20 pikseli na urządzeniach mobilnych na telefonie. Zapisz zmiany i wyjdź z konfiguracji modułu.

  • Rozmiar: komputer stacjonarny 50 pikseli, tablet 28 pikseli, telefon 20 pikseli

Pierwszy rząd świadectw

Następnie umieść wiersz 2/3, 1/3 pod tytułem. Ten wiersz będzie zawierał wstępne zeznanie.

Ustawienia wiersza

Wybierz kartę projektu i zaznacz pole wyboru Wyrównaj wysokości kolumn.

  • Wyrównaj wysokości kolumn: Tak

Ustawienia kolumny

Otwórz ustawienia pierwszej kolumny w połączeniu z ustawieniami wiersza. Wybierz styl górnej granicy z menu rozwijanego Style obramowania. Szerokość powinna wynosić 2 piks, a kolor #ffd600. Zamknij konfigurację wiersza. To doda żółtą linię nad referencją, podobną do tej, którą wymieniliśmy wcześniej.

  • Style obramowania: góra
  • Kolor górnej krawędzi: #ffd600
  • Szerokość: 2px

Tekst referencji

Następnie dodamy moduł tekstowy, który będzie zawierał treść referencji. W lewej kolumnie, pod żółtą linią, dodaj moduł tekstowy.

Ustawienia tekstu referencji

Następnie dodamy moduł tekstowy, który będzie zawierał treść referencji. W lewej kolumnie, pod żółtą linią, dodaj moduł tekstowy.

Wprowadź treść referencji do edytora treści.

Następnie przejdź do zakładki projekt. Wybierz Chakra Petch jako styl czcionki. Wybierz Bold jako wagę i Czarny jako kolor. Wybierz 30px dla pulpitu i 14px dla tabletu dla rozmiaru tekstu. Konfiguracja telefonu zostanie automatycznie zsynchronizowana z tabletem, więc nie będziemy musieli niczego aktualizować. Właściwość Wysokość linii tekstu powinna być ustawiona na 2em. Skutkuje to kolosalną drukowaną opinią, która przyciągnie uwagę.

  • Czcionka: Chakra Petch
  • Waga: pogrubienie
  • Kolor czarny
  • Rozmiar: komputer stacjonarny 30 pikseli, tablet 14 pikseli
  • Wysokość linii: 2em

Wybierz opcję Wyśrodkowany z menu rozwijanego Wyrównanie tekstu. Zamknij konfigurację modułu tekstowego.

  • Wyrównanie: wyśrodkowane

Ustawienia modułu referencji

Następnie w prawej kolumnie dodaj moduł Testimonial. Będzie on przyklejony i będzie zawierał imię i nazwisko osoby, nazwę firmy, stanowisko i zdjęcie.

Ustawienia zawartości

Wpisz treść referencji w ustawieniach modułu. Pozostaw sekcję Body pustą. Udało się to osiągnąć dzięki wykorzystaniu modułu tekstowego.

  • Autor
  • Stanowisko
  • Spółka
  • Obraz

Ustaw białe tło, przewijając w dół.

  • Tło: #ffffff

Następnie kliknij ikonę Przypnij. To jest lepka wersja tła. Gdy moduł stanie się lepki, tło zmieni kolor. Kolor tła powinien być czarny.

  • Lepki kolor tła: #000000

Cytat ikona

Następnie przejdź do zakładki projekt. Wybierz #ffd600 jako kolor ikony cytatu.

  • Cytat Kolor ikony: #ffd600

Obraz

Zmniejsz szerokość i wysokość obrazu do 150 pikseli, przewijając w dół. Zaokrąglone rogi powinny być ustawione na 0px.

  • Szerokość obrazu: 150px
  • Zaokrąglone rogi: 0px

Tekst

Wybierz opcję Wyśrodkowany z menu rozwijanego Wyrównanie tekstu. Spowoduje to umieszczenie nazwiska autora, stanowiska i nazwy firmy w środku tekstu.

  • Wyrównanie tekstu: wyśrodkowane

Tekst autora

Wybierz Chakra Petch jako czcionkę i pogrubienie jako grubość i wyśrodkowane jako wyrównanie pod tekstem autora. Wybierz czarny jako kolor domyślny. Wybierz ikonę Pin i zmień kolor lepkiego na #ffd600. Rozmiar pulpitu powinien być ustawiony na 20 pikseli, a rozmiar tabletu na 14 pikseli.

  • Czcionka: Chakra Petch
  • Zwykły kolor tekstu: czarny
  • Przypięty kolor tekstu: #ffd600
  • Rozmiar: pulpit 20 pikseli, tablet 14 pikseli

Tekst pozycji

Następnie przewiń w dół do pozycji Tekst. Wybierz Exo jako czcionkę. Wybierz czarny jako domyślny kolor tekstu. Aby ustawić przypięty kolor na biały, kliknij ikonę Przypnij.

  • Czcionka: Exo
  • Zwykły kolor tekstu: #000000
  • Przypięty kolor tekstu: #ffffff

Tekst firmowy

Przewiń w dół do sekcji zatytułowanej „Tekst firmy”. Wybierz Exo jako czcionkę. Wybierz czarny jako domyślny kolor tekstu. Aby ustawić przypięty kolor na biały, kliknij ikonę Przypnij.

  • Czcionka: Exo
  • Zwykły kolor tekstu: #000000
  • Przypięty kolor tekstu: #ffffff

Cień Pudełka

Przejdź do sekcji pudełkowej i wybierz pierwszą opcję.

  • Box Shadow: pierwsza opcja cienia

Efekt przewijania

Na koniec przejdź do Efekty przewijania w zakładce Zaawansowane. Wybierz Desktop jako Sticky Position i Stick to Top jako Sticky Position. Przesuń Sticky Top o 50px. Kolumnuj dolny przyklejony element. To instruuje moduł, jak i gdzie stosować.

  • Lepka pozycja: trzymaj się u góry
  • Przyklejony górny offset: 50px
  • Dolny lepki element: kolumna

Wybierz opcję Nie przyklejaj z symbolu tabletu dla pozycji przyklejonej. Zapobiega to przyleganiu modułu do tabletów i smartfonów. Zamknij konfigurację modułu.

  • Lepka pozycja: nie przyklejać

Teraz, gdy poruszasz się w dół ekranu, moduł referencji pozostaje na górze i zmienia kolor.

Gdy moduł jest wyrównany z dnem kolumny, przewija się w lockstep z kolumną.

Zduplikuj wiersz

Następnie utworzymy drugi wiersz, kopiując i edytując pierwszy wiersz. Aby zduplikować wiersz, najedź na niego kursorem i kliknij ikonę duplikatu.

Wreszcie, uzyskaj dostęp do każdego tekstu i modułu referencji indywidualnie i zastąp istniejącą treść referencji nowymi informacjami z referencji. Po dokonaniu niezbędnych zmian zamknij moduły i zapisz stronę. Powtórz proces duplikacji, aby dodać inne referencje. Masz teraz wciągającą sekcję z przyklejonymi referencjami, która zawiera dwie referencje, które wyróżniają się i wyglądają fantastycznie.

Ostateczny projekt

Po całym zamieszaniu nasz projekt w końcu wygląda tak.

Końcowe przemyślenia

To kończy nasze badanie, jak sprawić, by Twój element referencji Divi był lepki. Ustawienia Divi pozwalają na przyklejenie dowolnego elementu. Po połączeniu modułów, takich jak moduły tekstowe dla treści i moduły testimonial dla materiałów pomocniczych, można stworzyć fascynujące projekty. Załączone tutaj referencje to tylko jeden sposób na połączenie modułów Divi z lepkimi ustawieniami.