Jak zastąpić logo klienta referencjami po najechaniu/kliknięciu za pomocą Divi

Szukasz sposobu na dodanie interakcji do logo klienta i pasujących referencji? Dzięki funkcji responsywnej zawartości Divi jest teraz łatwiej niż kiedykolwiek wyświetlać różne treści w domyślnym stanie modułu i po najechaniu kursorem. W dzisiejszym samouczku Divi zademonstrujemy to, pokazując, jak zastąpić logo klienta referencjami po najechaniu myszą (komputer) i kliknięciu (tablet i telefon). Wykorzystamy moduł Blurb, aby pomóc nam się tam dostać! Będziesz mógł również bezpłatnie pobrać plik JSON układu!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ logo klienta ZA DARMO

Aby położyć swoje ręce na darmowym układzie logo klienta, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Zacznijmy odtwarzać!

Dodaj nową sekcję

Kolor tła

Zacznij od dodania nowej sekcji do nowej lub istniejącej strony. Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #000000

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę.

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

Granica

Uzupełnij ustawienia sekcji, dodając białą ramkę.

• Szerokość granicy: 1vw
• Kolor obramowania: #ffffff

Dodaj wiersz nr 1

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zwiększ maksymalną szerokość wiersza.

• Maksymalna szerokość: 1500px

Dodaj moduł tekstowy do kolumny

Dodaj responsywną treść H2

Pierwszym modułem, którego potrzebujemy w tym wierszu, jest moduł tekstowy z responsywną zawartością H2.

• Pulpit: najedź na logo klienta, aby zobaczyć, co mają do powiedzenia!
• Tablet i telefon: Kliknij logo klienta, aby zobaczyć, co mają do powiedzenia!

Ustawienia tekstu H2

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2 w następujący sposób:

• Czcionka nagłówka 2: Work Sans
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2: 40px (komputer), 30px (tablet), 25px (telefon)

Dodaj moduł dzielnika do kolumny

Widoczność

Następnym i ostatnim modułem, którego potrzebujemy w tym rzędzie, jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Następnie zmień kolor linii modułu.

• Kolor linii: #ffffff

Rozmiary

Zmodyfikuj również ustawienia rozmiaru modułu.

• Waga dzielnika: 4px
• Szerokość: 10%
• Wyrównanie modułu: Środek

Rozstaw

Uzupełnij ustawienia modułu, dodając górny margines.

• Górny margines: 100px

Dodaj wiersz nr 2

Struktura kolumny

Dodaj kolejny wiersz tuż pod poprzednim i użyj dla niego następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru na różnych rozmiarach ekranu. Upewnij się, że wyrównałeś również wysokości kolumn, pomoże to w następnym kroku; centrowanie zawartości kolumny.

• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100% (komputer stacjonarny), 80% (tablet i telefon)
• Maksymalna szerokość: 1500px
• Minimalna wysokość: 500px (komputer stacjonarny), auto (tablet i telefon)

Główny element

Aby wyśrodkować zawartość kolumny w wierszu, musisz 1) włączyć opcję „Wyrównaj wysokość kolumn” (poprzedni krok) i 2) dodać następujący wiersz kodu CSS do głównego elementu wiersza:

align-items: center;

Dodaj moduł Blurb do kolumny

Pozostaw domyślną zawartość pustą

Teraz, aby zastąpić logo klienta po najechaniu myszą, użyjemy modułów Blurb. Zacznij od pierwszego w kolumnie 1. Upewnij się, że domyślny tytuł i treść pozostają puste, ale nadal włączaj opcję najechania na obu z nich.

Dodaj zawartość po najechaniu kursorem

Wstaw wybrane przez siebie treści w obu polach.

Obraz domyślny

Kontynuuj, przesyłając wybrane logo firmy w ustawieniach obrazu i ikony.

Usuń obraz po najechaniu kursorem

Zamienimy logo klienta po najechaniu myszą, usuwając je całkowicie po najechaniu myszą.

Wskaż kolor tła

Jak widać na podglądzie tego posta, zmieniamy również kolor tła modułu po najechaniu myszą. Nie używaj domyślnego koloru tła i dodaj następujący kod koloru po najechaniu myszą:

• Kolor tła: #191919

Ustawienia obrazu/ikony

Przejdź do karty projektu modułu i upewnij się, że zastosowano następujące wyrównanie obrazu/ikony:

• Wyrównanie obrazu/ikony: środek

Ustawienia tekstu

Ponieważ używamy czarnego koloru tła sekcji, zmienimy kolor tekstu modułu w ogólnych ustawieniach tekstu.

• Kolor tekstu: jasny

Ustawienia tekstu tytułu

Następnie zmodyfikuj odpowiednio ustawienia tekstu tytułu:

• Poziom nagłówka tytułu: H3
• Czcionka tytułu: Work Sans
• Rozmiar tekstu tytułu: 24px
• Wysokość wiersza tytułu: 1.4em

Ustawienia tekstu podstawowego

Wprowadź również pewne zmiany w ustawieniach tekstu podstawowego.

• Czcionka ciała: Open Sans
• Kolor tekstu ciała: #8c8c8c
• Wysokość linii ciała: 2,5 em

Domyślne odstępy

Następnie przejdź do ustawień odstępów i upewnij się, że w domyślnym stanie modułu nie ma niestandardowego dopełnienia.

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

Odstępy najechania

Jednak po najechaniu myszą tworzymy trochę wolnego miejsca na nasze referencje, używając następujących wartości:

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

Przemiana

Uzupełnij ustawienia modułu, usuwając domyślny czas trwania przejścia. Dzięki temu referencja pojawi się od razu po najechaniu/kliknięciu logo.

• Czas trwania przejścia: 0 ms

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

Po ukończeniu pierwszego modułu Blurb w kolumnie 1 możesz sklonować moduł dwukrotnie i umieścić duplikaty w pozostałych kolumnach wiersza.

Klonuj cały rząd

Możesz teraz sklonować ten wiersz tyle razy, ile chcesz, w zależności od tego, ile logo klienta chcesz wyświetlić.

Zmień zawartość Hover każdego duplikatu modułu Blurb

Upewnij się, że zmieniłeś logo klienta w każdym zduplikowanym module Blurb.

Zmień logo każdego duplikatu modułu Blurb

Zmień również zawartość najechania każdego zduplikowanego modułu i gotowe!

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak korzystać z funkcji responsywnych opcji Divi, aby zastąpić logo klienta referencjami po najechaniu/kliknięciem. To doskonały sposób na zaoszczędzenie miejsca na stronach i tworzenie interaktywnego projektu na różnych rozmiarach ekranu. Oprócz pokazania samouczka, udostępniliśmy również plik JSON za darmo na początku tego posta! Jeśli masz jakieś pytania, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.