Vill du skapa ett rutnät med Divi vara flytande när du svävar?
Om du älskar att bygga webbplatser med användarinteraktion i åtanke, kommer du att älska den här handledningen.
Idag ska vi visa dig hur du skapar ett genomskinligt rutnät vars bakgrundsbild avslöjas så snart någon svävar över ett av elementen. Designen är initialt enkel och ren. Detta resulterar i en trevlig svävande upplevelse.
I den här handledningen går vi igenom skapelseprocessen steg för steg.
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
Låt oss börja skapa processen i Divi
Lägg till ett nytt avsnitt
Bakgrundsfärg
Lägg till ett nytt avsnitt på sidan du arbetar på.
Öppna först avsnittsinställningarna och använd en vit bakgrundsfärg.
- Bakgrund: #ffffff
Lägg till rad #1
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna linjeinställningarna, gå till fliken Designa, dra ned alternativet Storlek och ändra storleksparametrarna enligt följande:
- Använd anpassad rännbredd: JA
- Ränna med: 1
- Bredd: 100 %
- Max bredd: 100 %
avstånd
Dra sedan ner alternativet Förband och ändra följande inställningar:
- Utfyllnad (topp och botten): 0px
gräns
I alternativet Kant gör du även följande ändringar:
- Kantstilar (överst och neder): 1px
- Kantfärg (överst och neder): #d3d3d3
Inställningar för kolumn 1
Hover bakgrund
Låt oss sedan anpassa inställningarna för kolumn 1. Använd en övertoningsfyllning på hovringen.
- Färg 1: rgba(255,255,255,0)
- Färg 2: #000000
- Gradienttyp: Linjär
- Positionsfärg 1: 30 %
- Placera gradient ovanför gradientbild: JA
Bakgrundsbild på hovring
Ladda också upp en bakgrundsbild som visas när du svävar.
- Bakgrundsbildstorlek : Omslag
- Bakgrundsbild Position: Mitten
CSS klass
Och slutför kolumninställningarna genom att tilldela följande CSS-klass på fliken Advanced Open water :
- CSS-klass: svävkolumn
Lägg till text #1-modul till kolumn 1
Lägg till text i storlek H3 (Rubrik 3)
Det är dags att lägga till moduler, börja med en första textmodul i kolumn 1. Infoga en text som du väljer.
H3 textinställningar
Byt sedan till fliken Designa i modulen och ändra H3-textparametrarna enligt följande:
- Typsnitt: Oswald
- Fontvikt Fontvikt: ultralätt
- Rubrik 3 Teckensnittsstil: TT
- Textfärg: #0a0a0a
- Rubrik 3 Textstorlek:
- Desktop: 3vw
- Surfplatta: 7vw
- Telefon: 14vw
- Rubrik 3 Bokstavsavstånd: -2px
dimensionering
Ändra bredden på olika skärmstorlekar i storleksinställningarna.
- Bredd :
- Desktop: 44 %
- Tabletter: 48 %
- Telefon: 50 %
avstånd
Låt oss också ändra följande parametrar i alternativet Förband.
- Marginal (botten): 25vh
- Vaddering (topp och botten): 5 %
- Vaddering (vänster och höger): 4%
gräns
Därefter lägger vi till kanter till höger och nedan.
- Kantbredd (höger och botten): 1px
- Kantfärg (höger och botten): #d3d3d3
CSS klass
Och vi kommer också att slutföra modulinställningarna genom att tilldela följande CSS-klass till textmodulen:
- CSS-klass: hover-titel
Lägg till text #2-modul till kolumn 1
Lägg till innehåll
Lägg till ytterligare en textmodul precis under den föregående med innehåll beskrivning av ditt val.
Textinställningar
Byt till flik Designa i modulen och ändra textparametrarna i enlighet med detta:
- Texttypsnitt : Karla
- Textfärg: #ffffff
- Storlek:
- Desktop: 0,8 vw
- Surfplatta: 2vw
- Telefon: 3.6vw
- Linjehöjd: 2,2 em
avstånd
Använd även anpassade marginalvärden.
- Vaddering (botten): 10 %
- Vaddering (vänster och höger): 9%
CSS klass
Och slutför modulparametrarna med följande CSS-klass för modulen:
- CSS-klass: hover-text
Lägg till en "Button"-modul i kolumn 1
Lägg till en beskrivning
Nästa och sista modul vi behöver är en modul Knappen. Ange en beskrivning av ditt val.
Knappinställningar
Ändra modulparametrarna enligt följande:
- Använd anpassade stilar för knapp: JA
- Knapptextstorlek:
- Desktop: 1vw
- Surfplatta: 2,5 vw
- Telefon: 4vw
- Knappkantsbredd: 0px
- Kantradie: 0px
- Knapptypsnitt: Karla
- Visa knappikon: JA
- Knappikon Placering: Höger
- Visa endast ikon på över för knapp: NEJ
avstånd
Lägg också till anpassade avståndsvärden.
- Marginal (botten): 8 %
- Marginal (vänster och höger): 9 %
- Vaddering (botten): 5 %
- Vaddering (höger): 20 %
box skugga
Applicera sedan en boxskugga.
- Box Shadow horisontell position: 0px
- Box Shadow Vertikal Position: 2px
- Skuggfärg: #000000
CSS klass
Och slutför modulinställningarna genom att tilldela följande CSS-klass till knappen:
- CSS-klass: svävknapp
Återanvänd kolumn 1
Ta bort kolumn 2, 3 och 4
Nu när vi har konstruerat den första kolumnen kan vi återanvända den. Det första vi ska göra är att ta bort de tomma kolumnerna från vår rad.
Klona kolumn 1 tre gånger
Vi kommer att återanvända kolumn 1 genom att klona den tre gånger.
Ändra bakgrundsbilder när du håller muspekaren över dubbletter av kolumner
Ändra sedan bakgrundsbilderna för dubblettkolumnen i varje dubblettkolumn.
Redigera duplicerat innehåll
Ändra också innehåll av modulen i varje dubblettkolumn.
Unika kolumnkanter
Kolumn 1
Vi kommer att behöva tillämpa unika gränsinställningar på varje kolumn, med början i kolumn 1.
- Kantbredd (höger):
- Desktop: 1px
- Surfplatta: 1px
- Telefon: 0px
- Färg (höger): #d3d3d3
- Kantbredd (botten):
- Desktop: 0px
- Surfplatta: 1px
- Telefon: 1px
- Kantfärg (botten): #d3d3d3
Kolumn 2
Därefter har vi kolumn 2.
Kantbredd (höger):
- Desktop: 1px
- Surfplatta: 1px
- Telefon: 0px
Färg (höger): #d3d3d3Border Width (nedre):
- Desktop: 0px
- Surfplatta: 1px
- Telefon: 1px
Kantfärg (botten): #d3d3d3
Kolumn 3
Och vi kommer att använda följande kantinställningar för kolumn 3:
- Kantbredd (höger):
- Desktop: 1px
- Surfplatta: 1px
- Telefon: 0px
- Färg (höger): #d3d3d3
- Kantbredd (botten):
- Desktop: 0px
- Surfplatta: 1px
- Telefon: 1px
- Kantfärg (botten): #d3d3d3
Lägg till anpassad CSS till sidinställningar
Öppna sidinställningar
Nu när hela designen är på plats återstår bara att lägga till lite anpassad CSS-kod för att hjälpa till att utlösa hovringseffekter på modulerna. För att göra detta, öppna sidinställningarna.
Läs också vår guide om: Divi: Hur man skapar en klibbig sidfot med "Reveal"-effekt
Lägg till CSS-kod
Och kopiera och klistra in följande rader med CSS-kod:
.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ö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
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln visade vi dig hur du skapar en vacker svävande design.
Specifikt har vi skapat ett kolumnrutnät som börjar enkelt och rent. Så snart som besökare Håll muspekaren över ett visst rutnätsobjekt, bakgrundsbilden avslöjas och modulstilar ändras.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
