Vil du tilføje en vippeeffekt med Divi på ethvert element på din side?
Tilføjelse af hover-tilt-effekter til din Websted er en af de sjove og engagerende måder at bringe din Websted Divi. Normalt kræver denne type design et plugin eller mere avanceret kode. Men denne proces er meget nemmere ved at bruge Tilt.js (en lille hover-tilt-effekt for jQuery). Med Tilt.js kan du nemt anvende hover-tilt-effekter på alt på få minutter.
I denne tutorial viser vi dig, hvordan du tilføjer svævevippeeffekter til ethvert element af Divi. Ved at bruge en kombination af jQuery tilt.js-uddrag og Divi-builderen viser vi dig, hvordan du tilføjer fantastiske hover-tilt-effekter til et billede, modulkolonne, række osv.
Vi vil endda vise dig, hvordan du tilføjer fantastiske 3D-parallakseeffekter.
Lad os starte!
undersøgelse
Her er et hurtigt overblik over det resultat, vi får i denne tutorial.
Se også: Divi: Sådan afslører du indhold, når du svæver over sektionsopdelingen
Hvad du behøver for at komme i gang
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Tilføj tilt-effekter ved svævning af ethvert element i Divi
Tilføj en Tilt Hover-effekt til Divi-modulerne
Lad os starte med at tilføje en række med tre kolonner til standardafsnittet.
Tilføj et billedmodul
Tilføj et billedmodul i den første kolonne.
Bemærk: Du kan bruge et hvilket som helst modul efter eget valg. Det behøver slet ikke at være et billedmodul.
Upload et billede efter eget valg.
Tilføj en billedmodulklasse
Under fanen Avanceret, tilføj følgende CSS-klasse:
- CSS-klasse: et-js-tilt
Denne klasse vil blive brugt som en vælger for vores vippefunktion senere.
Kopiér og indsæt forrige billedmodul
Kopier derefter billedmodulet og indsæt en i hver af de to resterende kolonner.
Du kan erstatte duplikerede billeder med nye, hvis du ønsker det. Bare sørg for, at hvert billedmodul tilhører CSS-klassen "et-js-tilt".
Tilføj JQuery-biblioteket "tilt.js"
For at tilføje biblioteket tilt.js og det nødvendige kodestykke for at skævvride vores billeder, bruger vi et kodemodul.
Tilføj først en ny række én kolonne under den eksisterende række.
Tilføj derefter et kodemodul til den nye række.
Så skal vi have adgang til tilt.js bibliotek ved at tilføje et script, der importerer tilt.js fra deres CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Indsæt følgende script i kodeboksen.
Brug følgende src-kode i et script-tag til at importere biblioteket:
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"Det skal se sådan ud:
Det er vigtigt at importere tilt.js før du tilføjer koden, der skal bruge den. Så efter scriptet peger på tilt.js, tilføj de nødvendige script-tags for at indpakke den JQuery, vi skal tilføje. Indsæt derefter følgende JQuery mellem script-tags.
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
Bemærk, at tilt()-funktionen er inde i en if-sætning, der kører, når browserens bredde er større end 980px. Dette vil sikre, at effekten kun opstår på en stationær computer.
Her er resultatet.
Tilføjet tilt hover-effekt til linjen
Som vi nævnte før, kan du tilføje denne hover-tilt-effekt til ethvert Divi-element. Dette inkluderer en hel linje.
Derudover kan du tilføje en vippeeffekt til en række, mens du bibeholder vippeeffekterne for hvert af modulerne i rækken.
Sådan gør du.
Dupliker linje og tilføj unik CSS-klasse til linje
Dupliker den eksisterende række af billeder, og åbn derefter indstillingerne for dublerede rækker. Under fanen Avanceret, giv linjen en unik CSS-klasse som følger:
- CSS-klasse: et-row-js-tilt
Tilføj jQuery
Tilføj derefter følgende jQuery under den forrige skævhedsfunktion for at anvende en separat skævvridningsfunktion på linjen.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Bemærk, at for denne tilt-effekt har vi reduceret skalaen til 1 og øget perspektivværdien, så hældningen er mere subtil.
Her er resultatet.
Læg mærke til, hvordan rækken har en tilt-funktion, der aktiveres, når du svæver over rækken, og hvert af billedmodulerne har også den samme tilt-effekt, som vi tilføjede tidligere. Sådan kan du anvende indlejrede tilt-effektforekomster.
Tilføj en Tilt Hover-effekt til en kolonne med flere Divi-moduler
I nogle tilfælde er det nyttigt at tilføje en skæv effekt til en kolonne af moduler. Dette giver dig mulighed for at designe flere moduler i en kolonne med Divi og derefter have alle disse elementer vinklet som en enkelt enhed.
For at give dig et eksempel på, hvordan du gør dette, vil vi tilføje en tilt-ved-hover-effekt til en kolonne, der indeholder et billedmodul, et tekstmodul og et knapmodul.
Tilføj en ny linje
For at starte skal du oprette en ny række med følgende kolonnestruktur:
Tilføj et billedmodul
Inden i kolonne 2 (den midterste kolonne) skal du tilføje et nyt billedmodul.
Upload et billede til modulet.
Indstil justeringen af billedet til midten.
Tilføj et tekstmodul
Tilføj et tekstmodul med følgende H2-header under billedmodulet:
<h2>Local Organic</h2>
Opdater derefter H2-overskriftsstilene som følger:
- Skrifttype: Berkshire Swash
- Tekstjustering: Centreret
- Tekstfarve: #000000
- Størrelse: 60px
- Linjehøjde: 1,2 em
Tilføj knapmodul
Tilføj et knapmodul under tekstmodulet.
Opdater knapteksten for at læse "Få flere oplysninger..."
Opdater tilpasningsindstillingerne som følger:
- Knapjustering: Center
- Brug brugerdefinerede stilarter til knap
- Knaptekststørrelse: 18px
- Tekstfarve: #fff
- Knapbaggrund: #000
- Knapkantbredde: 0 pixels
- Kantradius: 100px
- Knapskrifttype: Kviksand
- Skrifttypevægt: Fed
- Polstring (top og bund): 16px
- Polstring (venstre og højre): 30px
- Box Shadow: se skærmbillede
Kolonneparametre
Når alle tre moduler er færdige, skal du åbne indstillingerne for den overordnede kolonne for disse moduler (kolonne 2) og opdatere følgende:
- Baggrund: #f5cee6
- Polstring (top og bund): 50px
- Polstring (venstre og højre): 20px
Tilføjelse af CSS-klasse til kolonne
Tilføj følgende CSS-klasse under fanen avanceret:
- CSS-klasse: et-column-js-tilt
Tilføjet jQuery for at anvende tilt-effekt på kolonne
For at tilføje skæveffekten til kolonnen kan vi tilføje et andet lignende jQuery-uddrag, der er målrettet mod CSS-klassekolonnen.
Indsæt følgende kodestykke under det forrige kodestykke, der er målrettet mod linjen.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Her er det endelige resultat.
Tilføjet 3D-parallakseeffekt til interne elementer
For en mere avanceret hover-tilt-effekt kan vi tilføje en 3D-parallakseeffekt til de interne kolonnemoduler.
Ved at bruge en kombination af perspektiv og transform:translateZ() , kan vi få hver af kolonnens moduler til at vises i 3D-rum, når tilt-on-hover-effekten er aktiv.
Sådan gør du.
Dupliker forrige linje
Dupliker først den forrige række med skævvridningen tilføjet til den midterste kolonne.
Tilføj en enkelt kolonneklasse
Opdater derefter den midterste kolonne (kolonne 2) med en unik CSS-klasse som følger:
- CSS-klasse: et-column-js-tilt-3d
Tilpasset CSS
For at sikre, at de interne moduler bevarer 3D-effekten, skal du tilføje følgende tilpassede CSS til hovedkolonneelementet:
transform-style: preserve-3d;
Tilføj jQuery og CSS
Tilføj dernæst nogle flere jQuery-uddrag under det forrige skæve funktionsuddrag, der er målrettet mod kolonnen som følger:
const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
scale: 1.1,
perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
$(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
$(e.target).removeClass("tilt-active");
});Denne jQuery tilføjer en anden grundlæggende vippefunktion til kolonnen, ligesom det forrige eksempel.
.et-column-js-tilt-3d.tilt-active .et_pb_image {
transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
transform: translateZ(50px);
}
Se nu slutresultatet. Læg mærke til, hvordan de tre moduler vises i 3D-rum, når de roterer under tilt-effekten.
Læs også: Divi: Sådan afslører du indhold, når du svæver over sektionsopdelingen
Endelige resultater
Her er endnu et kig på slutresultaterne for vores eksempler.
Download DIVI nu!!!
Konklusion
Hover tilt-effekterne, der tilbydes af Tilt.js er virkelig sjove at eksperimentere med.
Selvom vi har brugt et par grundlæggende eksempler i denne tutorial, kan du nemt have en markdag ved at anvende disse hover-tilt-effekter på et af vores præ-lavede layouts eller på dit eget websted.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. 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 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.
...
