Jak wyróżnić moduł zawisłego rozmycia, zamazując pozostałe za pomocą Divi

Niezależnie od rodzaju witryny, którą budujesz, są duże szanse, że w pewnym momencie będziesz chciał wyświetlić listę różnych usług, kroków i nie tylko. Jednym z najprostszych sposobów atrakcyjnego podejścia do tworzenia takiej listy jest użycie modułu Blurb Divi. Moduły Blurb pozwalają na piękną strukturę zawartości listy, zapewniając jednocześnie nieskończone możliwości projektowania.

W dzisiejszym samouczku zrobimy krok dalej i pokażemy, jak wyróżnić uniesiony moduł Blurb, zamazując pozostałe, które wyświetliłeś. Jest to świetny sposób na skupienie się na jednym module prezentacji na raz, bez rozpraszania uwagi czytelnika przez inne moduły. Gdy tylko gość przejdzie do innego Modułu Blurb, ten staje się zamiast tego podświetlonym. 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 modułu Hovered Blurb ZA DARMO

Aby położyć swoje ręce na układzie modułu z darmowymi notatkami po najechaniu kursorem, 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 zwykłej sekcji do nowej strony lub tej, nad którą pracujesz. Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #eaeaea

Rozstaw

Dodaj również niestandardowe wartości marginesów i dopełnienia.

• Górny margines: 2vw
• Dolny margines: 2vw
• Lewy margines: 2vw
• Prawy margines: 2vw
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Granica

Uzupełnij ustawienia przekroju, dodając trochę promienia obramowania.

• Wszystkie rogi: 20px

Dodaj nowy wiersz

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 zmień ustawienia rozmiaru. Włączenie opcji „Wyrównaj wysokość kolumn” pomoże w następnym kroku, który wyrównuje zawartość kolumny.

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

Główny element

Wyrównaj zawartość kolumny, dodając jeden wiersz kodu CSS do głównego elementu wiersza.

align-items: center;

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Jedynym modułem, którego używamy w tym samouczku, jest moduł Blurb, ale możesz go zastąpić dowolnym wybranym modułem, o ile dodasz klasę CSS, którą udostępnimy w kolejnych krokach. Dodaj pierwszy moduł Blurb do kolumny 1 i wstaw wybrane przez siebie treści.

Wybierz ikonę

Następnie wybierz ikonę.

Unosić tło gradientowe

Następnie użyj tła gradientowego tylko po najechaniu kursorem.

• Kolor 1: #ffffff
• Kolor 2: #0f1bff
• Typ gradientu: liniowy
• Pozycja startowa: 20%
• Pozycja końcowa: 20%

Domyślne ustawienia ikon

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

• Kolor ikony: #ffffff
• Ikona koła: Tak
• Kolor koła: #ffffff
• Umieszczenie obrazu/ikony: góra
• Wyrównanie obrazu/ikony: do lewej

Ustawienia ikony najechania kursorem

Zmień różne kolory ikon po najechaniu myszą.

• Kolor ikony: #0f1bff
• Kolor koła: #f7f7f7

Domyślne ustawienia tekstu tytułu

Kontynuuj, modyfikując ustawienia tekstu tytułu.

• Czcionka tytułu: Source Sans Pro
• Grubość czcionki tytułu: pogrubiona
• Styl czcionki tytułu: wielkie litery

Ustawienia tekstu w tytule najechania kursorem

Zmień kolor tekstu tytułu po najechaniu myszą.

• Kolor tekstu tytułu: #ffffff

Domyślne ustawienia tekstu podstawowego

Dalej są ustawienia tekstu podstawowego.

• Czcionka ciała: Open Sans
• Wysokość linii ciała: 2em

Ustawienia tekstu w nawinięciu

Użyj białego koloru tekstu po najechaniu kursorem.

• Kolor tekstu ciała: #ffffff

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj kilka niestandardowych wartości dopełnienia.

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

Domyślny cień pudełka

Używamy też cienia pudełkowego.

• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -20px
• Kolor cienia: rgba (255,255,255,0.18)

Wskaż cień pola

Zmień kolor cienia po najechaniu myszą.

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

Klasa CSS

Aby uzyskać efekt rozmycia, musimy przypisać klasę CSS do naszego modułu Blurb. W dalszej części postu użyjemy tej klasy CSS w pewnym kodzie JQuery.

• Klasa CSS: notka-element

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

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

Klonuj cały rząd

Możesz sklonować wiersz tyle razy, ile chcesz, w zależności od tego, ile modułów Blurb chcesz wyświetlić na swojej stronie.

Indywidualnie dostosuj moduły Blurb

Oczywiście będziesz musiał zmodyfikować indywidualną zawartość każdego modułu Blurb.

Dodaj nowy wiersz

Struktura kolumny

Dodaj kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozstaw

Otwórz ustawienia wiersza i usuń wszystkie domyślne górne i dolne wyściółki. Pomoże to zmniejszyć przestrzeń zajmowaną przez ten rząd.

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

Dodaj moduł kodu do kolumny

Wstaw kod JQuery i CSS

Dodaj moduł kodu do kolumny wiersza i wstaw trochę kodu JQuery i CSS, aby uzyskać efekt. Nie zapomnij umieścić kodu JQuery między tagami skryptu i kodu CSS między tagami stylu, jak widać na poniższym zrzucie ekranu.

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);

$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');

});
});

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

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 wykazać się kreatywnością dzięki modułom Blurb, które udostępniasz w swojej witrynie. Mówiąc dokładniej, pokazaliśmy, jak wyróżnić najechany moduł Blurb, zamazując pozostałe, które wyświetliłeś. Udało Ci się również pobrać plik JSON za darmo! 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.