Hoe u uw cursor in een knop verandert wanneer u met Divi over een element beweegt

Wanneer u bestemmingsitems op uw pagina weergeeft, is het belangrijk ervoor te zorgen dat mensen weten dat ze een item kunnen kiezen en erop kunnen klikken. Een van de meest voor de hand liggende manieren om dit te doen, is door een knop toe te voegen, maar als u op zoek bent naar een extra interactieve manier om klikken op uw pagina aan te moedigen, zult u deze tutorial waarderen. Vandaag laten we u zien hoe u uw cursor in een knop kunt veranderen wanneer u de muisaanwijzer op een bepaald klikbaar element plaatst, zoals een afbeelding. Dit zal extra motivatie toevoegen aan uw bezoekers en zal resulteren in een leuke pagina-interactie. U kunt het JSON-bestand ook gratis downloaden!

Laten we gaan.

overzicht

Laten we, voordat we in de tutorial duiken, het resultaat snel bekijken op verschillende schermformaten.

Bureau

Mobile

Download de lay-out GRATIS

Om de gratis lay-out te bemachtigen, moet je deze eerst downloaden via de onderstaande knop. Om toegang te krijgen tot de download moet u zich abonneren op onze Divi Daily-mailinglijst met behulp van de formulier onderstaand. Als nieuwe abonnee ontvang je elke maandag nog meer Divi-goodness en een gratis Divi Layout-pakket! Als je al op de lijst staat, vul dan hieronder je e-mailadres in en klik op downloaden. U wordt niet "opnieuw ingeschreven" of ontvangt geen extra e-mails.

1. Maak een elementenstructuur

Voeg een nieuw gedeelte toe

Achtergrond kleur

We beginnen deze tutorial door de structuur van de elementen op een Divi-pagina te bouwen. Voeg een nieuwe sectie toe en gebruik hiervoor een witte achtergrondkleur.

• Achtergrondkleur: #ffffff

tussenruimte

Ga naar het tabblad Sectieontwerp en verander de afstandsinstellingen als volgt:

• Bovenste vulling: 80 px
• Vulling onderkant: 0px

Voeg een nieuwe regel toe

Structuur van de kolom

Blijf een nieuwe rij toevoegen met behulp van de volgende kolomstructuur:

sizing

Open de rij-instellingen zonder nog modules toe te voegen en verander de maximale breedte in de formaatinstellingen.

tussenruimte

Verwijder vervolgens alle standaard boven- en ondervulling.

• Bovenste vulling: 0 px
• Vulling onderkant: 0px

Voeg een afbeeldingsmodule toe aan kolom 1

Download afbeelding

Laten we modules beginnen, te beginnen met een afbeeldingsmodule in kolom 1. Upload een afbeelding naar keuze.

Voeg een link toe

Voeg vervolgens een link toe naar de afbeeldingsmodule.

Flyover schaal

Ga vervolgens naar het tabblad Ontwerpen en verander de schaalinstellingen van de module.

CSS-klasse

Voltooi de moduleparameters door de volgende CSS-klasse toe te passen op het tabblad Geavanceerd:

Voeg tekstmodule # 1 toe aan kolom 1

Voeg H3-inhoud toe

Laten we verder gaan met de volgende module, een tekstmodule met daarin inhoud H3 naar keuze.

H3 tekstinstellingen

Schakel over naar het tabblad moduleontwerp en wijzig de H3-tekstinstellingen dienovereenkomstig:

• Titel 3 Politie: acteur
• Titel 3 Tekstkleur: # 000000
• Kop 3 Tekstgrootte:
  • Bureaublad: 35 px
  • Tablet: 28 px
  • Telefoon: 22px
• Titel 3 Lijnhoogte: 1,4em

tussenruimte

Voeg vervolgens een ondermarge toe.

Voeg tekstmodule # 2 toe aan kolom 1

Voeg inhoud toe

Voeg vervolgens nog een tekstmodule toe net onder de vorige met a inhoud beschrijving van uw keuze.

Tekst instellingen

Wijzig de tekstinstellingen van de module als volgt:

• Tekstlettertype: acteur
• Tekstkleur: # 75baff
• Tekstgrootte:
  • Bureaublad: 22 px
  • Tablet: 18 px
  • Telefoon: 15px
• Tussenruimte tekstletter: 0.5 px
• Letterregelhoogte: 2e

Voeg een knopmodule toe aan de 1-kolom

Voeg een kopie toe

De volgende en laatste module die we nodig hebben in deze kolom is een knopmodule. Voeg een kopie naar keuze toe.

Knop instellingen

Schakel over naar het tabblad Moduleontwerp en verander de knopinstellingen dienovereenkomstig:

• Gebruik aangepaste stijlen voor de knop: Ja
• Tekstkleur knop: # 000000
• Breedte van de knoprand: 0px
• Straal van de rand van de knop: 1px

• Knoplettertype: acteur
• Knoppictogram weergeven: Ja
• Knoppictogram Locatie: Links
• Alleen het pictogram weergeven bij zweven voor de knop: Nee

tussenruimte

Voeg ook aangepaste afstandswaarden toe.

• Ondermarge: 80px
• Vulling onderkant: 20px
• Vulling rechts: 30 px

Schaduw doos

En voltooi de module-instellingen door de volgende boxschaduwinstellingen toe te passen:

• Horizontale positie van de doosschaduw: 0px
• Verticale box schaduwpositie: 2px
• Schaduwkleur: # 000000

Verwijder kolom 2

Zodra u de eerste kolom en alle modules erin heeft voltooid, verwijdert u de tweede lege kolom uit de rij.

Kloon kolom 1

En hergebruik de eerste kolom door deze een keer te klonen.

Kloon de hele rij

Ga verder door de hele rij één keer te klonen.

Bewerk alle dubbele inhoud, afbeeldingen en links

Zorg er dan voor dat u alle inhoud, afbeeldingen en links in elk van de dubbele kolommen.

2. Voeg een cursor toe

Voeg een nieuwe regel toe aan de sectie

Structuur van de kolom

Nu we de elementstructuur hebben, is het tijd om het ontwerp van de schuifregelaar te maken. Om dit te doen, voegen we een nieuwe rij toe aan onze sectie met behulp van de volgende kolomstructuur:

tussenruimte

Open de rij-instellingen en verwijder alle standaard boven- en ondervulling.

• Bovenste vulling: 0 px
• Vulling onderkant: 0px

Voeg cursortekstmodule toe aan een nieuwe rij kolom

Voeg inhoud toe

Voeg vervolgens een tekstmodule toe aan de nieuwe regel. Deze tekstmodule is gewijd aan het maken van het ontwerp van de cursorknop. Voeg een kopie naar keuze toe in het inhoudsgebied.

Achtergrond kleur

Voeg vervolgens een achtergrondkleur toe.

• Achtergrondkleur: # 47669b

Tekst instellingen

Schakel over naar het tabblad Ontwerpen en geef de tekst een passende stijl:

• Tekstlettertype: acteur
• Dikte lettertype: vetgedrukt
• Tekstlettertype: hoofdletters
• Tekstkleur: #ffffff
• Tussenruimte tekstletter: 2px
• Uitlijning van de tekst: midden

sizing

Voeg vervolgens een waarde voor breedte en hoogte toe aan de maatparameters.

• Breedte: 150px
• Hoogte: 150px

grens

We maken van deze module een cirkel door de randinstellingen te wijzigen.

Schaduw doos

We zullen ook een subtiele doosschaduw toevoegen.

• Box schaduw vervaging sterkte: 0px
• Voortplantingskracht boxschaduw: 20px
• Schaduwkleur: rgba (7,213,255,0.14)

CSS-klasse

Vervolgens geven we onze module een CSS-klasse.

CSS hoofdelement

We voegen ook regels CSS-code toe aan het hoofdelement van de module.

transition: all .1s linear;
pointer-events: none;

display: flex;
justify-content: center;
align-items: center;

Positie

En we zullen de parameters van de module voltooien door de positie op het geavanceerde tabblad te wijzigen:

• Positie: vast
• Locatie: linksboven
• Z-index: 2

Voeg een codemodule toe onder de tekstmodule

Nu we onze schuifregelaar hebben ontworpen, is het tijd om de functie te laten werken. Om dit te doen, voegen we een nieuwe codemodule toe net onder de cursortekstmodule.

Voeg stijl- en scripttags toe

Voeg stijl- en scripttags toe aan uw codemodule.

Voeg CSS-code toe

Voeg de volgende regels CSS-code in tussen de stijltags:

.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;
}

Voeg JQuery-code toe

En gebruik de volgende regels JQuery-code tussen de scripttags:

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');

});

});

overzicht

Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.

Bureau

Mobile

Final gedachten

In deze zelfstudie hebben we u laten zien hoe u meer interactie kunt toevoegen aan klikbare elementen op uw pagina. In het bijzonder hebben we u laten zien hoe u een cursorknop activeert wanneer iemand over een item naar keuze zweeft. Dit voegt extra interactie toe aan uw pagina-ontwerp en kan de klikfrequenties helpen verhogen! Je kon het JSON-bestand ook gratis downloaden. Als u vragen of suggesties heeft, kunt u een reactie achterlaten in de opmerkingen hieronder.

Als je meer wilt weten over Divi en meer Divi-weggeefacties wilt ontvangen, moet je dat zeker doen Abonneer u op onze nieuwsbrief et YouTube-kanaal U zult dus altijd een van de eersten zijn die deze gratis inhoud kent en ervan geniet.