[Ad_1]
La oss gå.
undersøkelsen
Før vi dykker ned i opplæringen, la oss ta en rask titt på resultatet på forskjellige skjermstørrelser.
kontor
Mobil
Last ned oppsettet GRATIS
For å få tak i den gratis layouten, må du først laste den ned ved å bruke knappen nedenfor. For å få tilgang til nedlastingen må du abonnere på vår Divi Daily e-postliste ved å bruke skjema under. Som ny abonnent vil du motta enda mer Divi-godhet og en gratis Divi Layout-pakke hver mandag! Hvis du allerede er på listen, skriv inn e-postadressen din nedenfor og klikk på last ned. Du vil ikke bli "registrert på nytt" eller motta flere e-poster.
1. Lag en elementstruktur
Legg til en ny seksjon
Bakgrunnsfarge
Vi starter denne veiledningen med å bygge strukturen til elementene på en Divi-side. Legg til en ny seksjon og bruk en hvit bakgrunnsfarge for den.
- Bakgrunnsfarge: #ffffff
avstanden
Gå til kategorien Seksjonsdesign og endre avstandsinnstillingene som følger:
- Øvre polstring: 80px
- Bunnpolstring: 0px
Legg til en ny linje
Struktur av kolonnen
Fortsett å legge til en ny rad ved å bruke følgende kolonnestruktur:
dimensjonering
Uten å legge til noen moduler ennå, åpner du radinnstillingene og endrer maksimal bredde i størrelsesinnstillingene.
avstanden
Fjern deretter all standard topp og bunn polstring.
- Øvre polstring: 0px
- Bunnpolstring: 0px
Legg til en bildemodul i kolonne 1
Last ned bilde
La oss moduler, startende med en bildemodul i kolonne 1. Last opp et bilde du ønsker.
Legg til en kobling
Legg deretter til en lenke til bildemodulen.
Flyover skala
Gå deretter til kategorien Design og endre innstillingene for modulen.
CSS klasse
Fullfør modulparametrene ved å bruke følgende CSS-klasse i den avanserte kategorien:
Legg til tekstmodul 1 i kolonne 1
Legg til H3-innhold
La oss gå videre til neste modul, som er en tekstmodul som inneholder innhold H3 etter eget valg.
H3 tekstinnstillinger
Bytt til moduldesignfanen og endre H3-tekstinnstillingene deretter:
- Tittel 3 Police: Actor
- Tittel 3 Tekstfarge: # 000000
- Overskrift 3 Tekststørrelse:
- Desktop: 35px
- Nettbrett: 28px
- Telefon: 22px
- Tittel 3 Linjehøyde: 1,4em
avstanden
Deretter legger du til en bunnmargin.
Legg til tekstmodul 2 i kolonne 1
Legg til innhold
Legg deretter til en annen tekstmodul rett under den forrige med en innhold beskrivelse av ditt valg.
Tekstinnstillinger
Endre modulens tekstinnstillinger som følger:
- Tekst skrift: skuespiller
- Tekstfarge: # 75baff
- Tekststørrelse:
- Desktop: 22px
- Nettbrett: 18px
- Telefon: 15px
- Avstand mellom tekstbokstaver: 0.5 px
- Bokstavlinjehøyde: 2.
Legg til en knappmodul i 1-kolonnen
Legg til en kopi
Den neste og siste modulen vi trenger i denne kolonnen er en knappmodul. Legg til en kopi av ditt valg.
Knappinnstillinger
Bytt til moduldesignfanen og endre knappinnstillingene deretter:
- Bruk egendefinerte stiler for knappen: Ja
- Tekstfarge på knapp: # 000000
- Bredde på knappens kantlinje: 0px
- Radius av grensen til knappen: 1px
- Knappeskrift: skuespiller
- Vis knappikon: Ja
- Knappikon Plassering: Venstre
- Vis bare ikonet som holder markøren for knappen: Nei
avstanden
Legg også til egendefinerte avstandsverdier.
- Bunnmargin: 80px
- Bunnpolstring: 20px
- Høyre polstring: 30px
Skyggekasse
Og fullfør modulinnstillingene ved å bruke følgende skyggeinnstillinger:
- Horisontal posisjon for bokseskygge: 0px
- Vertikal boks skyggeposisjon: 2px
- Skyggefarge: # 000000
Slett kolonne 2
Når du har fullført den første kolonnen og alle modulene i den, fjerner du den andre tomme kolonnen fra raden.
Klon kolonne 1
Og bruk den første kolonnen på nytt ved å klone den en gang.
Klon hele raden
Fortsett med å klone hele raden en gang.
Rediger alt duplisert innhold, bilder og lenker
Sørg deretter for å redigere alle innhold, bilder og lenker i hver av de dupliserte kolonnene.
2. Legg til en markør
Legg til en ny linje i seksjonen
Struktur av kolonnen
Nå som vi har elementstrukturen på plass, er det på tide å lage skyvedesignet. For å gjøre dette legger vi til en ny rad i seksjonen vår ved hjelp av følgende kolonnestruktur:
avstanden
Åpne radinnstillingene og fjern all standard topp og bunn polstring.
- Øvre polstring: 0px
- Bunnpolstring: 0px
Legg markørtekstmodulen til den nye radkolonnen
Legg til innhold
Deretter legger du til en tekstmodul til den nye linjen. Denne tekstmodulen vil være dedikert til å lage design av markørknapper. Legg til en kopi av ditt valg i innholdsområdet.
Bakgrunnsfarge
Deretter legger du til en bakgrunnsfarge.
- Bakgrunnsfarge: # 47669b
Tekstinnstillinger
Bytt til Design-fanen og stil teksten deretter:
- Tekst skrift: skuespiller
- Tykkelse på tekst skrift: Fet
- Tekst font stil: store bokstaver
- Tekstfarge: #ffffff
- Avstand mellom tekstbokstaver: 2 px
- Justering av teksten: senter
dimensjonering
Deretter legger du til en bredde- og høydeverdi i størrelsesparametrene.
- Bredde: 150px
- Høyde: 150px
grensen
Vi gjør denne modulen til en sirkel ved å endre grenseinnstillingene.
Skyggekasse
Vi vil også legge til en subtil bokseskygge.
- Uskarphet for uskarphet i boksen: 0 px
- Bokseskyggeutbredelseskraft: 20px
- Skyggefarge: rgba (7,213,255,0.14)
CSS klasse
Deretter vil vi gi modulen vår en CSS-klasse.
CSS hovedelement
Vi legger også til linjer med CSS-kode til hovedelementet i modulen.
transition: all .1s linear; pointer-events: none; display: flex; justify-content: center; align-items: center;
Posisjon
Og vi vil fullføre parametrene til modulen ved å endre posisjonen i den avanserte fanen:
- Posisjon: fast
- Sted: øverst til venstre
- Z-indeks: 2
Legg til en kodemodul under tekstmodulen
Nå som vi har designet glidebryteren vår, er det på tide å få funksjonen til å fungere. For å gjøre dette legger vi til en ny kodemodul rett under markørtekstmodulen.
Legg til stil- og skriptekoder
Legg til stil- og skriptekoder i kodemodulen din.
Legg til CSS-kode
Sett inn følgende linjer med CSS-kode mellom stilkoder:
.hide-cursor {
cursor: none;
}
.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
visibility: hidden;
opacity: 0;
}
.show-cursor {
visibility: visible !important;
opacity: 1;
}
Legg til JQuery-kode
Og bruk følgende linjer med JQuery-kode mellom skripttaggene:
jQuery(document).ready(function($){
var cursor = $('.cursor');
$('.image-cursor').mousemove(function(e){
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');
});
$('.image-cursor').mouseleave(function() {
cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');
});
});
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.
kontor
Mobil
avslutt~~POS=TRUNC tanker
I denne opplæringen har vi vist deg hvordan du legger til mer interaksjon til klikkbare elementer på siden din. Spesielt viste vi deg hvordan du utløser en markørknapp når noen svever over et element du ønsker. Dette gir ekstra interaksjon til sideutformingen din og kan bidra til å øke klikkfrekvensen! Du var også i stand til å laste ned JSON-filen gratis. Hvis du har spørsmål eller forslag, kan du gjerne legge igjen en kommentar i kommentarfeltet nedenfor.
Hvis du vil lære mer om Divi og få flere Divi Giveaways, må du sørge for det Abonner på vårt nyhetsbrev et Youtube Channel Så du vil alltid være en av de første som kjenner og liker dette gratis innholdet.
[Ad_2]
