Kunne du tænke dig at lave et gitter med Divi at være flydende på svæven?

Hvis du elsker at bygge websteder med brugerinteraktion i tankerne, vil du elske denne tutorial. 

I dag skal vi vise dig, hvordan du opretter et gennemsigtigt gitter, hvis baggrundsbillede afsløres, så snart nogen svæver over et af elementerne. Designet er i starten enkelt og rent. Dette resulterer i en dejlig svævende oplevelse. 

I denne vejledning fører vi dig gennem oprettelsesprocessen trin for trin.

Lad os gå.

undersøgelse

Før vi dykker ned i selvstudiet, lad os tage et hurtigt kig på resultatet på forskellige skærmstørrelser.

kontor

Mobil

Lad os starte skabelsesprocessen i Divi

Tilføj et nyt afsnit

Baggrundsfarve

Tilføj et nyt afsnit til den side, du arbejder på. 

Se også: Divi: Sådan opretter du en brugerdefineret sidefod

Åbn først sektionsindstillingerne og anvend en hvid baggrundsfarve.

  • Baggrund: #ffffff

Tilføj linje #1

Struktur af søjlen

Fortsæt ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:

dimensionering

Uden at tilføje nogen moduler endnu, åbn linjeindstillingerne, gå til fanen Design, træk indstillingen ned dimensionering og ændre størrelsesparametrene som følger:

  • Brug tilpasset tagrendebredde: JA
  • Tagrende med: 1
  • Bredde: 100 %
  • Maks. bredde: 100 %

afstand

Træk derefter indstillingen ned Mellemrum og ændre følgende indstillinger:

  • Polstring (top og bund): 0px

grænse

Foretag også følgende ændringer i indstillingen Border:

  • Border Styles (top og bund): 1px
  • Kantfarve (øverst og nederst): #d3d3d3

Indstillinger for kolonne 1

Hover baggrund

Lad os derefter tilpasse indstillingerne for kolonne 1. Anvend en gradientbaggrund til svævefeltet.

  • Farve 1: rgba(255,255,255,0)
  • Farve 2: #000000
  • Gradienttype: Lineær
  • Positionsfarve 1: 30 %
  • Placer gradient over gradientbillede: JA

Baggrundsbillede på hover

Upload også et baggrundsbillede, der vises, når du svæver.

  • Baggrundsbillede Størrelse: Cover
  • Baggrundsbillede Position: Center

CSS klasse

Og fuldfør kolonneindstillingen ved at tildele følgende CSS-klasse på fanen Avanceret :

  • CSS-klasse: hover-kolonne

Tilføj tekst #1-modul til kolonne 1

Tilføj tekst i H3-størrelse (overskrift 3)

Det er tid til at tilføje moduler, begyndende med et første tekstmodul i kolonne 1. Indsæt en tekst efter eget valg.

H3 tekstindstillinger

Skift derefter til fanen Design af modulet og modificere H3-tekstparametrene som følger:

  • Skrifttype: Oswald
  • Skriftvægt Skriftvægt: ultra let
  • Overskrift 3 Skrifttype: TT
  • Tekstfarve: #0a0a0a
  • Overskrift 3 Tekststørrelse:
    • Desktop: 3vw
    • Tablet: 7vw
    • Telefon: 14vw
  • Overskrift 3 Bogstavafstand: -2px

dimensionering

Skift bredden på forskellige skærmstørrelser i størrelsesindstillingerne.

  • bredde:
    • Desktop: 44 %
    • Tabletter: 48 %
    • Telefon: 50 %

afstand

Lad os også ændre følgende parametre i indstillingen Mellemrum.

  • Margin (bund): 25vh
  • Polstring (top og bund): 5 %
  • Polstring (venstre og højre): 4 %

grænse

Dernæst tilføjer vi grænser til højre og nedenfor.

  • Kantbredde (højre og nederst): 1px
  • Kantfarve (højre og nederst): #d3d3d3

CSS klasse

Og vi vil også fuldføre modulindstillingerne ved at tildele følgende CSS-klasse til tekstmodulet:

  • CSS-klasse: hover-titel

Tilføj tekst #2-modul til kolonne 1

Tilføj indhold

Tilføj endnu et tekstmodul lige under det forrige med indhold beskrivelse af dit valg.

Tekstindstillinger

Skift til fanen Design af modulet og modificere tekstparametrene i overensstemmelse hermed:

  • Tekstskrifttype: Karla
  • Tekstfarve: #ffffff
  • Størrelse:
    • Desktop: 0,8 vw
    • Tablet: 2vw
    • Telefon: 3.6vw
  • Linjehøjde: 2,2 em

afstand

Anvend også tilpassede margenværdier.

  • Polstring (bund): 10 %
  • Polstring (venstre og højre): 9 %

CSS klasse

Og fuldfør modulparametrene ved at bruge følgende CSS-klasse for modulet:

  • CSS-klasse: hover-tekst

Tilføj et "Knap"-modul til kolonne 1

Tilføj en beskrivelse

Det næste og sidste modul, vi skal bruge, er et modul Button. Indtast en beskrivelse af dit valg.

Knapindstillinger

Rediger modulparametrene som følger:

  • Brug brugerdefinerede stilarter til knap: JA
  • Knaptekststørrelse:
    • Desktop: 1vw
    • Tablet: 2,5 vw
    • Telefon: 4vw
  • Knapkantbredde: 0px
  • Kantradius: 0px
  • Knapskrifttype: Karla
  • Vis knapikon : JA
  • Knapikonplacering: Højre
  • Vis kun ikon til Over for knap: NEJ

afstand

Tilføj også brugerdefinerede afstandsværdier.

  • Margin (bund): 8 %
  • Margin (venstre og højre): 9 %
  • Polstring (bund): 5 %
  • Polstring (højre): 20 %

kasse skygge

Påfør derefter en kasseskygge.

  • Box Shadow Horisontal Position: 0px
  • Box Shadow Lodret position: 2px
  • Skyggefarve: #000000

CSS klasse

Og fuldfør modulindstillingerne ved at tildele følgende CSS-klasse til knappen:

  • CSS-klasse: hover-knap

Genbrug kolonne 1

Slet kolonne 2, 3 og 4

Nu hvor vi har konstrueret den første kolonne, kan vi genbruge den. Den første ting, vi skal gøre, er at fjerne de tomme kolonner fra vores række.

Klon kolonne 1 tre gange

Vi genbruger kolonne 1 ved at klone den tre gange.

Skift baggrundsbilleder, når du svæver over dublerede kolonner

Skift derefter de dublerede kolonnebaggrundsbilleder i hver dubletkolonne.

Rediger dubletindhold

Skift også indhold af modulet i hver dubletkolonne.

Unikke kolonnekanter

Kolonne 1

Vi bliver nødt til at anvende unikke kantindstillinger til hver kolonne, begyndende med kolonne 1.

  • Kantbredde (højre):
    • Desktop: 1px
    • Tablet: 1px
    • Telefon: 0px
  • Farve (højre): #d3d3d3
  • Kantbredde (bund):
    • Desktop: 0px
    • Tablet: 1px
    • Telefon: 1px
  • Kantfarve (bund): #d3d3d3

Kolonne 2

Dernæst har vi kolonne 2.

Kantbredde (højre):

  • Desktop: 1px
  • Tablet: 1px
  • Telefon: 0px

Farve (højre): #d3d3d3Border Width (Bund):

  • Desktop: 0px
  • Tablet: 1px
  • Telefon: 1px

Kantfarve (bund): #d3d3d3

Kolonne 3

Og vi vil bruge følgende kantindstillinger for kolonne 3:

  • Kantbredde (højre):
    • Desktop: 1px
    • Tablet: 1px
    • Telefon: 0px
  • Farve (højre): #d3d3d3
  • Kantbredde (bund):
    • Desktop: 0px
    • Tablet: 1px
    • Telefon: 1px
  • Kantfarve (bund): #d3d3d3

Tilføj tilpasset CSS til sideindstillinger

Åbn sideindstillinger

Nu hvor hele designet er på plads, er der kun tilbage at tilføje noget tilpasset CSS-kode for at hjælpe med at udløse hover-effekter på modulerne. For at gøre dette skal du åbne sideindstillingerne.

Læs også vores vejledning om: Divi: Sådan opretter du en klæbrig sidefod med "Reveal"-effekt

Tilføj CSS-kode

Og copy-paste følgende linjer med CSS-kode:

.hover-column:hover .hover-title {
background-color: #000000;
}
 
.hover-column:hover .hover-title h3 {
color: white !important;
}
 
.hover-button {
color: black;
}
 
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
 
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
 
.hover-column:hover::before {
opacity: 0;
}

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.

kontor

Gitter med flydende Divi på svæv

Mobil

Gitter med flydende Divi på svæv

Download DIVI nu!!!

Konklusion

I denne artikel viste vi dig, hvordan du skaber et smukt svævedesign. 

Specifikt har vi skabt et kolonnegitter, der starter enkelt og rent. Så snart besøgende Hold markøren over et bestemt gitterelement, baggrundsbilledet afsløres, og modulstile ændres.

Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved 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.

...