Chcesz wiedzieć, jak umieścić moduł Blurb z Divi wyróżnione podczas zamazywania innych?
Bez względu na rodzaj Witryna internetowa budujesz, są szanse, że w pewnym momencie będziesz chciał zobaczyć listę różnych usług, etapów i nie tylko.
Jednym z najprostszych sposobów na atrakcyjne podejście do tworzenia takiej listy jest skorzystanie z modułu Blurb z Divi. Moduły Blurb umożliwiają piękną strukturę treść z listy, dając jednocześnie nieograniczone możliwości projektowania.
W tym samouczku pójdziemy o krok dalej i pokażemy, jak podświetlić moduł Blurb po najechaniu kursorem i zamazać inne, które wyświetliłeś. To świetny sposób na podkreślenie jednego modułu Blurb na raz, bez rozpraszania uwagi czytelnika przez inne moduły Blurb.
Chodźmy.
badanie
Zanim zagłębimy się w ten samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.
Komputer stacjonarny
Wersja mobilna
Zacznijmy projektować z Divi
Dodaj nową sekcję
Kolor tła
Zacznij od dodania zwykłej sekcji do nowej strony lub tej, nad którą pracujesz.
Możesz również skonsultować się z: Divi: Jak utworzyć sekcję członków zespołu jako karuzelę
Otwórz ustawienia sekcji i zmień kolor tła.
- Tło: #eaeaea
Rozstaw
Dodaj również wartości odstępów.
- Margines (górny, dolny, lewy i prawy): 2vw
- Dopełnienie (góra i dół): 0px
Granica
Uzupełnij parametry przekroju, dodając promień obramowania.
- Zaokrąglone rogi: 20px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:
Dobór
Nie dodając jeszcze żadnych modułów, otwórz ustawienia linii i zmień ustawienia rozmiaru.
- Wyrównaj wysokości kolumn: TAK
- Szerokość: 90%
- Maksymalna szerokość: 1 pikseli
- Minimalna wysokość: 500px (komputer stacjonarny), auto (tablet i telefon)
Niestandardowy CSS (główny element)
Wyrównaj treść kolumny poprzez dodanie pojedynczej linii kodu CSS do głównego elementu wiersza.
align-items: center;
Dodaj moduł Blurb do kolumny 1
Dodaj treść
Jedynym modułem, którego używamy w tym samouczku, jest moduł Blurb.
Możesz jednak zastąpić ten moduł dowolnym wybranym przez siebie modułem, o ile dodasz klasę CSS, którą udostępnimy w kolejnych krokach.
Dodaj pierwszy moduł Blurb do kolumny 1 i wstaw plik treść do wyboru.
Wybierz ikonę
Następnie wybierz ikonę.
- Użyj ikony: TAK
- Ikona: Zobacz zrzut ekranu
Gradient tła (najechanie kursorem)
Następnie użyj gradientu tła tylko po najechaniu kursorem.
- Gradient zatrzymuje się
- 20%: #ffffff
- 80%: #0f1bff
- Typ gradientu: liniowy
Ustawienia ikon (komputer)
Przełącz na kartę Wnętrze modułu i zmień ustawienia ikony w następujący sposób:
- Kolor ikony: #ffffff
- Obraz/ikona zaokrąglone rogi: 50px
- Szerokość obramowania obrazu/ikony: 5px
- Kolor obramowania: #ffffff
- Umieszczenie obrazu/ikony: góra
- Wyrównanie obrazu/ikony: do lewej
Ustawienia ikony po najechaniu kursorem
Zmień różne kolory ikon po najechaniu myszą.
- Kolor ikony (najechanie): #0f1bff
- Kolor tła obrazu/ikony (najechanie kursorem): #f7f7f7
Ustawienia tekstu tytułowego
Kontynuuj, zmieniając ustawienia tekstu tytułu.
- Czcionka tytułu: Source Sans Pro
- Waga czcionki: pogrubiona
- Styl czcionki tytułu: TT (wielkie litery)
Umieszczaj ustawienia tekstu tytułu
Zmień kolor tekstu tytułu po najechaniu myszą.
- Kolor tekstu tytułu: #ffffff
Ustawienia tekstu opisu (komputer stacjonarny)
Dalej są ustawienia tekstu podstawowego.
- Czcionka ciała: Open Sans
- Wysokość linii ciała: 2 em
Po najechaniu na ustawienia tekstu opisu
Użyj koloru tekstu po najechaniu myszą.
- Kolor tekstu (najechanie kursorem): #ffffff
Rozstaw
Następnie przejdź do ustawień odstępów i dodaj niestandardowe wartości dopełnienia.
- Dopełnienie (góra, dół, lewo i prawo): 50px
Cień pudełka (komputer stacjonarny)
Używamy również 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)
Cień pudełka (najechanie)
Zmień kolor cienia po najechaniu.
- Kolor cienia: rgba(0,0,0,0.18)
Klasa CSS
Aby efekt rozmycia wystąpił, będziemy musieli przypisać klasę CSS do naszego modułu Blurb. W dalszej części artykułu użyjemy tej klasy CSS w kodzie JQuery.
- Klasa CSS: notka-element
Dwukrotnie sklonuj moduł Blurb i umieść duplikaty w pozostałych kolumnach
Po ukończeniu modułu Blurb w kolumnie 1 możesz go sklonować dwukrotnie i umieścić duplikaty w pozostałych kolumnach wiersza.
Sklonuj 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.
Dostosuj indywidualnie moduły Blurb
Oczywiście będziesz musiał zmodyfikować indywidualną zawartość każdego modułu Blurb.
Dodaj nową linię
Struktura kolumny
Dodaj kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:
Rozstaw
Otwórz ustawienia linii i domyślnie usuń całą górną i dolną wyściółkę. Pomoże to zmniejszyć przestrzeń zajmowaną przez ten rząd.
- Dopełnienie (góra i dół): 0px
Dodaj moduł kodu do kolumny
Wstaw kod JQuery i CSS
Dodaj moduł Code 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');
});
});Czytaj także: Divi: Jak stworzyć sekcję Referencje w formie siatki
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Komputer stacjonarny
Wersja mobilna
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak wykazać się kreatywnością dzięki modułom Blurb, które udostępniasz na swoim Witryna internetowa.
W szczególności pokazaliśmy, jak wyróżnić moduł Blurb po najechaniu kursorem, zamazując inne, które wyświetliłeś.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów. Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
