Vil du vite hvordan du setter en Blurb-modul fra Divi fremhevet mens du gjør andre uskarpe?
Uansett type nettstedet Web du bygger, er sjansen stor for at du på et tidspunkt vil se en liste over forskjellige tjenester, stadier og mer.
En av de enkleste måtene å nærme seg å lage en slik liste på en attraktiv måte er å bruke Blurb-modulen fra Divi. Blurb-moduler lar deg strukturere vakkert innhold fra listen samtidig som det gir deg uendelige designmuligheter.
I denne opplæringen tar vi det et skritt videre og viser deg hvordan du fremhever en Blurb-modul når du holder musepekeren og uskarp de andre du har vist. Det er en fin måte å fremheve én Blurb-modul om gangen, uten å la andre Blurb-moduler distrahere leseren.
La oss gå.
undersøkelsen
Før vi dykker inn i denne opplæringen, la oss ta en rask titt på resultatet på forskjellige skjermstørrelser.
Stasjonær datamaskin
Mobil versjon
La oss begynne å designe med Divi
Legg til en ny seksjon
Bakgrunnsfarge
Start med å legge til en vanlig del på en ny side eller den du jobber med.
Du kan også konsultere: Divi: Hvordan lage en gruppemedlemmer som en karusell
Åpne seksjonsinnstillinger og endre bakgrunnsfargen.
- Bakgrunn: #eaeaea
Mellomrom
Legg også til mellomromsverdier.
- Margin (øverst, bunn, venstre og høyre): 2vw
- Polstring (øverst og bunn): 0px
Border
Fullfør seksjonsparametrene ved å legge til en kantradius.
- Avrundede hjørner: 20px
Legg til en ny linje
Struktur av kolonnen
Fortsett med å legge til en ny rad i seksjonen ved hjelp av følgende kolonnestruktur:
Størrelse
Uten å legge til noen moduler ennå, åpne linjeinnstillingene og endre størrelsesinnstillingene.
- Utligne kolonnehøyder: JA
- Bredde: 90 %
- Maks bredde: 1px
- Min høyde: 500px (stasjonær datamaskin), automatisk (nettbrett og telefon)
Egendefinert CSS (hovedelement)
Juster innhold av kolonnen ved å legge til en enkelt linje med CSS-kode til hovedelementet i raden.
align-items: center;
Legg til Blurb-modulen i 1-kolonnen
Legg til innhold
Den eneste modulen vi bruker gjennom denne opplæringen er en Blurb-modul.
Du kan imidlertid erstatte denne modulen med hvilken som helst modul du ønsker så lenge du legger til CSS-klassen som vi deler i de neste trinnene.
Legg til den første Blurb-modulen i kolonne 1 og sett inn innhold de votre choix.
Velg ikonet
Velg deretter et ikon.
- Bruk ikon: JA
- Ikon: Se skjermbilde
Bakgrunnsgradient (hover)
Bruk deretter en bakgrunnsgradient bare ved sveving.
- Gradient stopper
- 20 %: #ffffff
- 80 %: #0f1bff
- Gradienttype: Lineær
Ikoninnstillinger (skrivebord)
Bytt til fane utforming av modulen og endre ikoninnstillingene som følger:
- Ikonfarge: #ffffff
- Bilde/ikon avrundede hjørner: 50 px
- Bilde-/ikonkantbredde: 5 px
- Kantfarge: #ffffff
- Bilde/ikonplassering: Øverst
- Bilde/ikonjustering: Venstre
Innstillinger for sveveikon
Endre de forskjellige ikonfargene på hover.
- Ikonfarge (Hover): #0f1bff
- Bilde/ikon Bakgrunnsfarge (Hover): #f7f7f7
Tekstinnstillinger for tittel
Fortsett ved å endre titteltekstinnstillingene.
- Tittel Font: Source Sans Pro
- Skriftvekt: Fet
- Tittelskriftstil: TT (store bokstaver)
Hold markøren over titteltekstinnstillinger
Endre fargen på tittelteksten når du holder musepekeren.
- Tittel Tekstfarge: #ffffff
Beskrivelse Tekstinnstillinger (skrivebord)
Neste er innstillingene for brødtekst.
- Body Font: Open Sans
- Kroppslinjehøyde: 2 em
Hold musepekeren for beskrivelsestekstinnstillinger
Bruk en tekstfarge når du peker.
- Brødtekstfarge (hover): #ffffff
Mellomrom
Deretter går du til avstandsinnstillinger og legger til egendefinerte utfyllingsverdier.
- Polstring (øverst, bunn, venstre og høyre): 50 px
Box Shadow (skrivebord)
Vi bruker også en boksskygge.
- Box Shadow Blur Styrke: 80px
- Box Shadow Spread Styrke: -20px
- Skyggefarge: rgba(255,255,255,0.18)
Box Shadow (Hover)
Endre fargen på sveveskyggen.
- Skyggefarge: rgba(0,0,0,0.18)
CSS klasse
Og for at uskarphet-effekten skal skje, må vi tilordne en CSS-klasse til Blurb-modulen vår. Senere i artikkelen vil vi bruke denne CSS-klassen i JQuery-kode.
- CSS-klasse: blurb-element
Klon Blurb-modulen to ganger og plasser duplikatene i de resterende kolonnene
Når du har fullført Blurb-modulen i kolonne 1, kan du klone den to ganger og plassere duplikatene i de resterende kolonnene i raden.
Klon hele raden
Du kan klone raden så mange ganger du vil, avhengig av hvor mange Blurb-moduler du vil vise på siden din.
Tilpass Blurb-moduler individuelt
Selvfølgelig må du endre det individuelle innholdet i hver Blurb-modul.
Legg til en ny linje
Struktur av kolonnen
Legg til en annen rad i seksjonen ved hjelp av følgende kolonnestruktur:
Mellomrom
Åpne linjeinnstillinger og fjern all topp- og bunnpolstring som standard. Dette vil bidra til å redusere plassen som okkuperes av denne raden.
- Polstring (øverst og bunn): 0px
Legg til kodemodul i kolonnen
Sett inn JQuery- og CSS-kode
Legg til en kodemodul i radkolonnen og sett inn litt JQuery- og CSS-kode for å få effekten til å skje.
Ikke glem å sette JQuery-koden mellom skripttaggene og CSS-koden mellom stiltaggene som du kan se på utskriftsskjermen nedenfor.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});Les også: Divi: Hvordan lage en Testimonials-seksjon i form av et rutenett
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
undersøkelsen
Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.
Stasjonær datamaskin
Mobil versjon
Last ned DIVI nå!!!
konklusjonen
I denne artikkelen har vi vist deg hvordan du kan bli kreativ med Blurb-modulene du deler på din nettstedet Web.
Spesifikt har vi vist deg hvordan du fremhever en Blurb-modul ved å sveve ved å uskarpe de andre du har vist.
Vi håper denne veiledningen vil inspirere deg til dine neste prosjekter. Divi. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
