[Ad_1]
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.
office
Mobil
Ladda ner layouten GRATIS
För att få tag på den kostnadsfria layouten måste du först ladda ner den med knappen nedan. För att komma åt nedladdningen måste du prenumerera på vår Divi Daily e-postlista med hjälp av formen Nedan. Som ny prenumerant får du ännu mer Divi-godhet och ett gratis Divi Layout-paket varje måndag! Om du redan finns på listan anger du bara din e-postadress nedan och klickar på ladda ner. Du kommer inte att "prenumereras på nytt" eller få ytterligare e-postmeddelanden.
1. Skapa en elementstruktur
Lägg till en ny sektion
Bakgrundsfärg
Vi kommer att starta denna handledning genom att bygga strukturen för elementen på en Divi-sida. Lägg till ett nytt avsnitt och använd en vit bakgrundsfärg för det.
- Bakgrundsfärg: #ffffff
avstånd
Gå till fliken sektionsdesign och ändra avståndsinställningarna enligt följande:
- Övre stoppning: 80px
- Botten stoppning: 0px
Lägg till en ny rad
Strukturen av kolonnen
Fortsätt att lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna radinställningarna och ändra maximal bredd i storleksinställningarna.
avstånd
Ta sedan bort alla vanliga topp- och bottenplattor.
- Övre stoppning: 0px
- Botten stoppning: 0px
Lägg till en bildmodul i kolumn 1
Ladda ner bild
Låt oss moduler, börjar med en bildmodul i kolumn 1. Ladda upp en bild efter eget val.
Lägg till en länk
Lägg sedan till en länk till bildmodulen.
Flyover-skala
Gå sedan till fliken Design och ändra inställningarna för modulens svängningsskala.
CSS klass
Slutför modulinställningarna genom att använda följande CSS-klass på den avancerade fliken:
Lägg till textmodul # 1 i kolumn 1
Lägg till H3-innehåll
Låt oss gå vidare till nästa modul, som är en textmodul som innehåller innehåll H3 efter eget val.
H3 textinställningar
Byt till fliken moduldesign och ändra H3-textinställningarna i enlighet med detta:
- Avdelning 3 Polis: Skådespelare
- Avdelning 3 Textfärg: # 000000
- Rubrik 3 Textstorlek:
- Skrivbord: 35 pixlar
- Tablett: 28 pixlar
- Telefon: 22 pixlar
- Titel 3 Linjehöjd: 1,4em
avstånd
Lägg sedan till en nedre marginal.
Lägg till textmodul # 2 i kolumn 1
Lägg till innehåll
Lägg sedan till ytterligare en textmodul strax under den föregående med en innehåll beskrivning av ditt val.
Textinställningar
Ändra modulens textinställningar enligt följande:
- Text typsnitt: skådespelare
- Textfärg: # 75baff
- Textstorlek:
- Skrivbord: 22 pixlar
- Tablett: 18 pixlar
- Telefon: 15 pixlar
- Textbokstavsavstånd: 0.5 pixlar
- Letter line höjd: 2: a
Lägg till en knappmodul i 1-kolumnen
Lägg till en kopia
Nästa och sista modul vi behöver i den här kolumnen är en knappmodul. Lägg till en kopia efter eget val.
Knappinställningar
Byt till fliken moduldesign och ändra knappinställningarna i enlighet med detta:
- Använd anpassade stilar för knappen: Ja
- Knappens textfärg: # 000000
- Bredden på knappgränsen: 0px
- Radi av gränsen för knappen: 1px
- Knappteckensnitt: skådespelare
- Visa knappikon: Ja
- Knapp Ikon Plats: Vänster
- Visa bara ikonen på svävaren för knappen: Nej
avstånd
Lägg också till anpassade avståndsvärden.
- Nedre marginal: 80px
- Botten stoppning: 20px
- Höger stoppning: 30px
Skugga låda
Och slutför modulinställningarna genom att använda följande rutskugginställningar:
- Rutans skuggans horisontella läge: 0 pixlar
- Vertikal rutans skuggposition: 2 pixlar
- Skuggfärg: # 000000
Radera kolumn 2
När du har slutfört den första kolumnen och alla modulerna i den tar du bort den andra tomma kolumnen från raden.
Klon kolumn 1
Och återanvänd den första kolumnen genom att klona den en gång.
Klona hela raden
Fortsätt genom att klona hela raden en gång.
Redigera allt duplicerat innehåll, bilder och länkar
Se sedan till att redigera alla innehåll, bilder och länkar i var och en av dubblettkolumnerna.
2. Lägg till en markör
Lägg till en ny rad i avsnittet
Strukturen av kolonnen
Nu när vi har elementstrukturen på plats är det dags att skapa reglaget. För att göra detta lägger vi till en ny rad i vårt avsnitt med följande kolumnstruktur:
avstånd
Öppna radinställningarna och ta bort alla standardkuddar för topp och botten.
- Övre stoppning: 0px
- Botten stoppning: 0px
Lägg till markörtextmodul i den nya radkolumnen
Lägg till innehåll
Lägg sedan till en textmodul till den nya raden. Denna textmodul kommer att ägnas åt att skapa designen av markörknappen. Lägg till en kopia av ditt val i innehållsområdet.
Bakgrundsfärg
Lägg sedan till en bakgrundsfärg.
- Bakgrundsfärg: # 47669b
Textinställningar
Byt till fliken Design och utforma texten därefter:
- Text typsnitt: skådespelare
- Textens tjocklek: Fet
- Textstilsstil: versaler
- Textfärg: #ffffff
- Textbokstavsavstånd: 2 pixlar
- Justering av texten: centrum
dimensionering
Lägg sedan till ett bredd- och höjdvärde i storleksparametrarna.
- Bredd: 150px
- Höjd: 150px
gräns
Vi gör den här modulen till en cirkel genom att ändra gränsinställningarna.
Skugga låda
Vi lägger också till en subtil rutskugga.
- Suddighetsstyrka för lådans skugga: 0 pixlar
- Rutskuggans utbredningskraft: 20 pixlar
- Skuggfärg: rgba (7,213,255,0.14)
CSS klass
Därefter ger vi vår modul en CSS-klass.
CSS huvudelement
Vi lägger också till rader med CSS-kod till modulens huvudelement.
transition: all .1s linear; pointer-events: none; display: flex; justify-content: center; align-items: center;
Placera
Och vi kommer att slutföra modulens parametrar genom att ändra positionen på den avancerade fliken:
- Position: fast
- Plats: uppe till vänster
- Z-index: 2
Lägg till en kodmodul under textmodulen
Nu när vi har utformat vår skjutreglage är det dags att få funktionen att fungera. För att göra detta lägger vi till en ny kodmodul strax under markörtextmodulen.
Lägg till stil- och skripttaggar
Lägg till stil- och skripttaggar i din kodmodul.
Lägg till CSS-kod
Infoga följande rader med CSS-kod mellan stiltaggarna:
.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;
}
Lägg till JQuery-kod
Och använd följande rader med JQuery-kod mellan skripttaggarna:
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ökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.
office
Mobil
Avslutande tankar
I den här handledningen visade vi dig hur du lägger till mer interaktion till klickbara element på din sida. Specifikt har vi visat dig hur du utlöser en markörknapp när någon svävar över ett objekt efter eget val. Detta lägger till extra interaktion i din siddesign och kan hjälpa till att öka klickfrekvensen! Du kunde också ladda ner JSON-filen gratis. Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.
Om du vill lära dig mer om Divi och få fler Divi Giveaways, se till Prenumerera på vårt nyhetsbrev et Youtube-kanal Så du kommer alltid att vara en av de första som känner till och njuter av detta gratisinnehåll.
[Ad_2]
