Vil du vide, hvordan du sætter et Blurb-modul fra Divi fremhævet, mens du slører andre?
Uanset hvilken type Websted du bygger, er chancerne for, at du på et tidspunkt ønsker at se en liste over forskellige tjenester, stadier og mere.
En af de nemmeste måder at nærme sig oprettelsen af en sådan liste på en attraktiv måde er at bruge Blurb-modulet fra Divi. Blurb-moduler giver dig mulighed for smukt at strukturere indhold fra listen og samtidig give dig uendelige designmuligheder.
I denne vejledning tager vi det et skridt videre og viser dig, hvordan du fremhæver et Blurb-modul, når du svæver og slører de andre, du har vist. Det er en fantastisk måde at fremhæve ét Blurb-modul ad gangen uden at lade andre Blurb-moduler distrahere læseren.
Lad os gå.
undersøgelse
Før vi dykker ned i denne tutorial, lad os tage et hurtigt kig på resultatet på forskellige skærmstørrelser.
Stationær computer
Mobil version
Lad os begynde at designe med Divi
Tilføj en ny sektion
Baggrundsfarve
Start med at tilføje en almindelig sektion til en ny side eller den, du arbejder på.
Du kan også konsultere: Divi: Sådan opretter du en sektion for teammedlemmer som en karrusel
Åbn sektionsindstillinger og skift baggrundsfarven.
- Baggrund: #eaeaea
Mellemrum
Tilføj også mellemrumsværdier.
- Margin (top, bund, venstre og højre): 2vw
- Polstring (top og bund): 0px
Border
Fuldfør sektionsindstillingerne ved at tilføje en kantradius.
- Afrundede hjørner: 20px
Tilføj en ny linje
Struktur af søjlen
Fortsæt med at tilføje en ny række til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje nogen moduler endnu, skal du åbne linjeindstillingerne og ændre størrelsesindstillingerne.
- Udlign kolonnehøjder: JA
- Bredde: 90 %
- Maks. bredde: 1px
- Min højde: 500px (desktop), automatisk (tablet og telefon)
Tilpasset CSS (hovedelement)
Juster indhold af kolonnen ved at tilføje en enkelt linje med CSS-kode til rækkens hovedelement.
align-items: center;
Føj Blurb-modulet til 1-kolonnen
Tilføj indhold
Det eneste modul, vi bruger gennem denne tutorial, er et Blurb-modul.
Du kan dog erstatte dette modul med et hvilket som helst modul efter eget valg, så længe du tilføjer CSS-klassen, som vi deler i de næste trin.
Tilføj det første Blurb-modul til kolonne 1 og indsæt indhold de votre choix.
Vælg ikonet
Vælg derefter et ikon.
- Brug ikon: JA
- Ikon: Se skærmbillede
Baggrundsgradient (hover)
Brug derefter kun en baggrundsgradient, når du svæver.
- Gradient stopper
- 20 %: #ffffff
- 80 %: #0f1bff
- Gradienttype: Lineær
Ikonindstillinger (skrivebord)
Skift til fanen Design af modulet og ændre ikonindstillingerne som følger:
- Ikonfarve: #ffffff
- Billede/ikon afrundede hjørner: 50px
- Billed-/ikonkantbredde: 5px
- Kantfarve: #ffffff
- Billede/ikonplacering: Øverst
- Billede/ikonjustering: Venstre
Indstillinger for svæveikoner
Skift de forskellige ikonfarver, når du svæver.
- Ikonfarve (Hover): #0f1bff
- Billede/ikon Baggrundsfarve (Hover): #f7f7f7
Titeltekstindstillinger
Fortsæt ved at ændre titeltekstindstillingerne.
- Titelskrifttype: Source Sans Pro
- Skrifttypevægt: Fed
- Titelskrifttype: TT (store bogstaver)
Hold musen over titeltekstindstillinger
Skift titeltekstfarven, når du svæver.
- Titel Tekstfarve: #ffffff
Beskrivelse Tekstindstillinger (skrivebord)
Dernæst er brødtekstindstillingerne.
- Body Font: Open Sans
- Kropslinjehøjde: 2 em
Indstillinger for beskrivelsestekst
Brug en tekstfarve, når du svæver.
- Brødtekstfarve (Hover): #ffffff
Mellemrum
Gå derefter til afstandsindstillinger og tilføj tilpassede udfyldningsværdier.
- Polstring (top, bund, venstre og højre): 50px
Box Shadow (skrivebord)
Vi bruger også en kasseskygge.
- Box Shadow Blur Styrke: 80px
- Box Shadow Spread Styrke: -20px
- Skyggefarve: rgba(255,255,255,0.18)
Box Shadow (Hover)
Skift farven på svæveskyggen.
- Skyggefarve: rgba(0,0,0,0.18)
CSS klasse
Og for at sløringseffekten skal ske, bliver vi nødt til at tildele en CSS-klasse til vores Blurb-modul. Senere i artiklen vil vi bruge denne CSS-klasse i JQuery-kode.
- CSS-klasse: blurb-item
Klon Blurb-modulet to gange, og placer dubletterne i de resterende kolonner
Når du har fuldført Blurb-modulet i kolonne 1, kan du klone det to gange og placere dubletterne i de resterende kolonner i rækken.
Klon hele rækken
Du kan klone rækken så mange gange du vil, afhængigt af hvor mange Blurb-moduler du vil have vist på din side.
Tilpas Blurb-moduler individuelt
Selvfølgelig skal du ændre det individuelle indhold af hvert Blurb-modul.
Tilføj en ny linje
Struktur af søjlen
Tilføj en anden række til sektionen ved hjælp af følgende kolonnestruktur:
Mellemrum
Åbn linjeindstillinger og fjern al top- og bundpolstring som standard. Dette vil hjælpe med at reducere den plads, der optages af denne række.
- Polstring (top og bund): 0px
Tilføj kodemodul til kolonne
Indsæt JQuery og CSS-kode
Tilføj et kodemodul til rækkekolonnen, og indsæt noget JQuery- og CSS-kode for at få effekten til at ske.
Glem ikke at sætte JQuery-koden mellem script-tags og CSS-koden mellem style-tags, som du kan se på printskærmen 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');
});
});Læs også: Divi: Sådan opretter du en Testimonials-sektion i form af et gitter
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.
Stationær computer
Mobil version
Download DIVI nu!!!
Konklusion
I denne artikel har vi vist dig, hvordan du bliver kreativ med de Blurb-moduler, du deler på din Websted.
Specifikt har vi vist dig, hvordan du fremhæver et Blurb-modul, når du svæver ved at sløre de andre, du har vist.
Vi håber, at denne vejledning vil inspirere dig til dine næste projekter. Divi. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
