Chcete vedieť, ako umiestniť modul Blurb z divi zvýraznené pri rozmazaní ostatných?
Bez ohľadu na typ webové stránky budujete, je pravdepodobné, že v určitom okamihu budete chcieť vidieť zoznam rôznych služieb, fáz a podobne.
Jedným z najjednoduchších spôsobov, ako pristúpiť k vytvoreniu takéhoto zoznamu atraktívnym spôsobom, je použiť modul Blurb from divi. Moduly Blurb vám umožňujú nádherne štruktúrovať obsah zo zoznamu a zároveň vám ponúka nekonečné možnosti dizajnu.
V tomto návode to urobíme o krok ďalej a ukážeme vám, ako zvýrazniť modul Blurb pri umiestnení kurzora myši a rozmazať ostatné, ktoré ste zobrazili. Je to skvelý spôsob, ako zdôrazniť jeden modul Blurb naraz, bez toho, aby ostatné moduly Blurb rozptyľovali čitateľa.
Poďme.
prehľad
Pred ponorením sa do tohto tutoriálu sa pozrime na výsledok na rôznych veľkostiach obrazovky.
Stolný počítač
Verzia pre mobilné zariadenia
Začnime navrhovať s Divi
Pridajte novú sekciu
Farba pozadia
Začnite pridaním bežnej sekcie na novú stránku alebo stránku, na ktorej práve pracujete.
Môžete sa tiež poradiť: Divi: Ako vytvoriť sekciu členov tímu ako kolotoč
Otvorte nastavenia sekcie a zmeňte farbu pozadia.
- Pozadie: #eaeaea
riadkovanie
Pridajte aj hodnoty medzier.
- Okraj (hore, dole, vľavo a vpravo): 2vw
- Výplň (horná a dolná časť): 0 pixelov
Hranice
Doplňte parametre sekcie pridaním polomeru okraja.
- Zaoblené rohy: 20px
Pridať nový riadok
Štruktúra stĺpca
Pokračujte pridaním nového riadka do sekcie pomocou nasledujúcej štruktúry stĺpcov:
Dimenzovanie
Zatiaľ bez pridania modulov otvorte nastavenia linky a zmeňte nastavenia veľkosti.
- Vyrovnať výšky stĺpcov: ÁNO
- Šírka: 90 %
- Maximálna šírka: 1 pixelov
- Minimálna výška: 500 pixelov (stolný počítač), automaticky (tablet a telefón)
Vlastný CSS (hlavný prvok)
Zarovnajte obsah stĺpca pridaním jedného riadka kódu CSS do hlavného prvku riadka.
align-items: center;
Pridajte modul Blurb do stĺpca 1
Pridajte obsah
Jediný modul, ktorý používame v tomto návode, je modul Blurb.
Tento modul však môžete nahradiť ľubovoľným modulom podľa vášho výberu, pokiaľ pridáte triedu CSS, ktorú budeme zdieľať v ďalších krokoch.
Pridajte prvý modul Blurb do stĺpca 1 a vložte ho obsah de votre choix.
Vyberte ikonu
Potom vyberte ikonu.
- Použite ikonu: ÁNO
- Ikona: Pozrite si snímku obrazovky
Prechod pozadia (umiestnenie kurzora myši)
Potom použite prechod pozadia iba pri umiestnení kurzora myši.
- Prechodové zarážky
- 20 %: #ffffff
- 80 %: #0f1bff
- Typ gradientu: Lineárny
Nastavenia ikon (počítač)
Prepnúť na kartu dizajn modulu a zmeňte nastavenia ikon nasledovne:
- Farba ikony: #ffffff
- Obrázok/ikona zaoblené rohy: 50 pixelov
- Šírka okraja obrázka/ikony: 5 pixelov
- Farba orámovania: #ffffff
- Umiestnenie obrázka/ikony: Hore
- Zarovnanie obrázka/ikony: Doľava
Nastavenia ikony kurzora myši
Zmeňte farby rôznych ikon pri umiestnení kurzora myši.
- Farba ikony (umiestnenie myši): #0f1bff
- Farba pozadia obrázka/ikony (umiestnenie kurzora myši): #f7f7f7
Nastavenia názvu nadpisu
Pokračujte zmenou nastavení textu nadpisu.
- Názov Font: Source Sans Pro
- Hrúbka písma: tučné
- Štýl písma nadpisu: TT (veľké písmená)
Nastavenia textu nadpisu umiestnením kurzora myši
Zmeňte farbu textu nadpisu pri umiestnení kurzora myši.
- Farba textu nadpisu: #ffffff
Nastavenia textu popisu (počítač)
Ďalej sú nastavenia textu tela.
- Písmo tela: Open Sans
- Výška línie tela: 2 m
Nastavenia textu popisu umiestnením kurzora myši
Pri umiestnení kurzora myši použite farbu textu.
- Farba textu tela (umiestnenie kurzora myši): #ffffff
riadkovanie
Ďalej prejdite na nastavenia medzier a pridajte vlastné hodnoty výplne.
- Výplň (hore, dole, vľavo a vpravo): 50 pixelov
Box Shadow (počítač)
Používame aj krabicový tieň.
- Sila rozmazania rámčeka: 80px
- Sila rozpätia tieňa rámčeka: -20px
- Farba tieňa: rgba (255,255,255,0.18)
Box Shadow (umiestnenie kurzora myši)
Zmeňte farbu vznášajúceho sa tieňa.
- Farba tieňa: rgba (0,0,0,0.18)
Triedu CSS
A aby došlo k efektu rozmazania, budeme musieť nášmu modulu Blurb priradiť triedu CSS. Ďalej v článku použijeme túto triedu CSS v kóde JQuery.
- CSS Trieda: blorb-item
Dvakrát naklonujte modul Blurb a umiestnite duplikáty do zostávajúcich stĺpcov
Po dokončení modulu Blurb v stĺpci 1 ho môžete dvakrát naklonovať a umiestniť duplikáty do zostávajúcich stĺpcov riadku.
Naklonujte celý riadok
Riadok môžete klonovať toľkokrát, koľkokrát chcete, v závislosti od toho, koľko modulov Blurb chcete na svojej stránke zobraziť.
Prispôsobte moduly Blurb jednotlivo
Samozrejme, budete musieť upraviť individuálny obsah každého modulu Blurb.
Pridať nový riadok
Štruktúra stĺpca
Pridajte do sekcie ďalší riadok pomocou nasledujúcej štruktúry stĺpcov:
riadkovanie
Otvorte nastavenia linky a predvolene odstráňte všetky horné a spodné vypchávky. Pomôže to znížiť priestor, ktorý zaberá tento riadok.
- Výplň (horná a dolná časť): 0 pixelov
Pridajte modul kódu do stĺpca
Vložte kód JQuery a CSS
Pridajte modul Code do stĺpca riadku a vložte nejaký kód JQuery a CSS, aby sa efekt prejavil.
Nezabudnite vložiť kód JQuery medzi značky skriptu a kód CSS medzi značky štýlu, ako môžete vidieť na obrazovke tlače nižšie.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});Prečítajte si tiež: Divi: Ako vytvoriť sekciu Referencie vo forme mriežky
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
prehľad
Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.
Stolný počítač
Verzia pre mobilné zariadenia
Stiahnite si DIVI teraz!!!
záver
V tomto článku sme vám ukázali, ako byť kreatívny s modulmi Blurb, ktoré zdieľate na svojom webové stránky.
Konkrétne sme vám ukázali, ako zvýrazniť modul Blurb pri umiestnení kurzora myši rozmazaním ostatných, ktoré ste zobrazili.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie projekty. divi. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
