Chcete vědět, jak umístit modul Blurb z divi zvýrazněné při rozmazání ostatních?
Bez ohledu na typ Webové stránky stavíte, je pravděpodobné, že v určitém okamžiku budete chtít vidět seznam různých služeb, fází a dalších.
Jedním z nejjednodušších způsobů, jak vytvořit takový seznam atraktivním způsobem, je použít modul Blurb from divi. Moduly Blurb vám umožní krásně strukturovat obsah ze seznamu a zároveň vám poskytuje nekonečné možnosti designu.
V tomto tutoriálu to uděláme o krok dále a ukážeme vám, jak zvýraznit modul Blurb při najetí myší a rozmazat ostatní, které jste zobrazili. Je to skvělý způsob, jak zdůraznit jeden modul Blurb najednou, aniž byste nechali ostatní moduly Blurb rozptylovat čtenáře.
Pojďme.
přehled
Než se ponoříme do tohoto tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.
Stolní počítač
Mobilní verze
Začněme navrhovat s Divi
Přidejte novou sekci
Barva pozadí
Začněte přidáním běžné sekce na novou stránku nebo na stránku, na které právě pracujete.
Můžete se také poradit: Divi: Jak vytvořit sekci členů týmu jako kolotoč
Otevřete nastavení sekce a změňte barvu pozadí.
- Pozadí: #eaeaea
Vzdálenost
Přidejte také hodnoty mezer.
- Okraj (nahoře, dole, vlevo a vpravo): 2vw
- Výplň (nahoře a dole): 0px
Hranice
Doplňte parametry řezu přidáním poloměru ohraničení.
- Zaoblené rohy: 20px
Přidat nový řádek
Struktura kolony
Pokračujte přidáním nového řádku do sekce pomocí následující struktury sloupců:
Rozměry
Bez přidání jakýchkoli modulů otevřete nastavení linky a změňte nastavení velikosti.
- Vyrovnat výšky sloupců: ANO
- Šířka: 90 %
- Maximální šířka: 1 pixelů
- Minimální výška: 500 pixelů (počítač), automaticky (tablet a telefon)
Vlastní CSS (hlavní prvek)
Zarovnejte obsah sloupce přidáním jednoho řádku kódu CSS do hlavního prvku řádku.
align-items: center;
Přidejte modul Blurb do sloupce 1
Přidat obsah
Jediný modul, který v tomto tutoriálu používáme, je modul Blurb.
Tento modul však můžete nahradit libovolným modulem dle vašeho výběru, pokud přidáte třídu CSS, kterou budeme sdílet v dalších krocích.
Přidejte první modul Blurb do sloupce 1 a vložte jej obsah De votre choix.
Vyberte ikonu
Poté vyberte ikonu.
- Použít ikonu: ANO
- Ikona: Viz snímek obrazovky
Přechod na pozadí (přejetí myší)
Poté použijte přechod pozadí pouze při najetí myší.
- Přechodové zastávky
- 20 %: #ffffff
- 80 %: #0f1bff
- Typ gradientu: Lineární
Nastavení ikon (počítač)
Přepnout na kartu Design modulu a změňte nastavení ikon následovně:
- Barva ikony: #ffffff
- Obrázek/ikona Zaoblené rohy: 50px
- Šířka okraje obrázku/ikony: 5 pixelů
- Barva ohraničení: #ffffff
- Umístění obrázku/ikony: Nahoře
- Zarovnání obrázku/ikony: vlevo
Nastavení ikony ukazatele myši
Při najetí myší změňte různé barvy ikon.
- Barva ikony (umístění myši): #0f1bff
- Barva pozadí obrázku/ikony (umístění myši): #f7f7f7
Nastavení textu nadpisu
Pokračujte změnou nastavení textu nadpisu.
- Název Písmo: Source Sans Pro
- Tloušťka písma: Tučné
- Styl písma nadpisu: TT (velká písmena)
Nastavení textu nadpisu po najetí myší
Při najetí myší změňte barvu textu nadpisu.
- Barva textu nadpisu: #ffffff
Nastavení textu popisu (počítač)
Dále jsou nastavení hlavního textu.
- Body Font: Open Sans
- Výška linie těla: 2 m
Nastavení textu popisu po najetí myší
Při umístění kurzoru použijte barvu textu.
- Barva textu těla (umístění myši): #ffffff
Vzdálenost
Dále přejděte na nastavení mezer a přidejte vlastní hodnoty odsazení.
- Výplň (nahoře, dole, vlevo a vpravo): 50 pixelů
Box Shadow (počítač)
Používáme i krabicový stín.
- Síla rozostření rámečku: 80px
- Síla rozprostření stínu rámečku: -20px
- Barva stínu: rgba (255,255,255,0.18)
Box Shadow (Hover)
Změňte barvu stínu vznášení.
- Barva stínu: rgba (0,0,0,0.18)
CSS třídy
A aby došlo k efektu rozostření, budeme muset našemu modulu Blurb přiřadit třídu CSS. Později v článku použijeme tuto třídu CSS v kódu JQuery.
- CSS Třída: blurb-item
Dvakrát naklonujte modul Blurb a umístěte duplikáty do zbývajících sloupců
Jakmile dokončíte modul Blurb ve sloupci 1, můžete jej dvakrát naklonovat a umístit duplikáty do zbývajících sloupců řádku.
Naklonujte celou řadu
Řádek můžete klonovat tolikrát, kolikrát chcete, v závislosti na tom, kolik modulů Blurb chcete na stránce zobrazit.
Přizpůsobte moduly Blurb jednotlivě
Samozřejmě budete muset upravit individuální obsah každého modulu Blurb.
Přidat nový řádek
Struktura kolony
Přidejte další řádek do sekce pomocí následující struktury sloupců:
Vzdálenost
Otevřete nastavení čar a ve výchozím nastavení odstraňte všechna horní a spodní výplň. To pomůže snížit prostor obsazený tímto řádkem.
- Výplň (nahoře a dole): 0px
Přidejte modul kódu do sloupce
Vložte kód JQuery a CSS
Přidejte modul Code do sloupce řádku a vložte nějaký kód JQuery a CSS, aby se efekt projevil.
Nezapomeňte vložit kód JQuery mezi značky skriptu a kód CSS mezi značky stylu, jak můžete vidět na tiskové obrazovce níže.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});Čtěte také: Divi: Jak vytvořit sekci Reference ve formě mřížky
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Stolní počítač
Mobilní verze
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak být kreativní s moduly Blurb, které sdílíte na svém Webové stránky.
Konkrétně jsme vám ukázali, jak zvýraznit modul Blurb při umístění kurzoru rozmazáním ostatních, které jste zobrazili.
Doufáme, že vás tento tutoriál inspiruje pro vaše další projekty. divi. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.
Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
