Vill du använda skugg- och sväveffekter i Divi att skapa innehåll interaktiva och sticka ut din webbplats ?
Se till att din webbplats att sticka ut från liknande webbplatser kan vara svårt. Men när man väl kommer dit är det nästan alltid värt mödan och tanken som gick in i det.
Vi visar dig hur du skapar innehåll interaktiva när du skapar webbplatser med Divi.
Låt oss gå!
undersökningen
Innan vi dyker in i den här handledningen, låt oss ta en snabb titt på resultatet du kan förvänta dig.
Stationär dator
Mobil
Låt oss börja insikten med Divi!
Se även: Divi: Hur man skapar en meny med snurrande hjul när du svävarl
Lägg till en ny sektion
Bakgrundsfärg
Skapa en ny sida eller öppna en befintlig och lägg till en vanlig sektion till den. Öppna avsnittsinställningar och ändra bakgrundsfärgen.
- Bakgrund: #03006d
avstånd
Gå sedan till avsnittsavståndsinställningar och ändra enligt följande:
- Utfyllnad (topp och botten): 50px
Lägg till en ny rad
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad i avsnittet med hjälp av följande kolumnstruktur.
dimensionering
Gå sedan till storleksinställningarna och låt linjen fylla hela skärmens bredd.
- Använd anpassad rännbredd: JA
- Rännans bredd: 1
- Bredd: 100 %
avstånd
Låt oss också ändra följande avståndsinställningar:
- Stoppning (höger): 9vw (dator), 5vw (surfplatta och telefon)
- Stoppning (höger): 5vw (surfplatta och telefon)
Lägg till en textmodul i kolumn 1
Lägg till innehåll
När du är klar med att redigera radinställningar, lägg till den första textmodulen i kolumn 1.
Lägg till det första tecknet som stycketext. Sedan innehåll som du vill ska visas som listtext.
Textinställningar (skrivbord)
Gå sedan till fliken Designaoch ändra standardinställningarna för stycketext. Se till att använda samma färg för avsnittstext och bakgrund.
- Teckensnittsvikt: Ultra fet
- Textfärg: #03006d
- Textstorlek: 27vw (dator), 0vw (surfplatta och telefon)
- Linjehöjd: 1,1 em
- Text Shadow: Se fånga
- Skuggoskärpa styrka: 0,01 em
- Skuggfärg: #ffffff
- Textjustering: Vänster
Håll muspekaren för textinställningar
För att skapa den trevliga svävningseffekten måste vi ändra dessa inställningar för svävande stycketext.
- Textfärg (hovra): #ffffff
- Skuggfärg(Hover): rgba(255,255,255,0)
Listinställningar (skrivbord)
Fortsätt genom att gå till listinställningarna.
- Teckensnittsvikt: Lätt
- Listtextfärg: #ffffff
- Listtextstorlek: 0px (dator), 18px (surfplatta och telefon)
- Stil Position: Cirkel
- Oordnad liststil Position: Utanför
- Oordnad listobjekt Indrag: 0px
Lista textinställningar när du håller muspekaren (hovra)
Vi vill att listtexten ska visas när du håller muspekaren. Det är därför vi kommer att ändra storleken på texten när vi svävar.
- Oordnad listtextstorlek (svävare): 18px
avstånd
Fortsätt genom att gå till modulavståndsinställningarna och gör några ändringar även där.
- Marginal (botten): 50px (surfplatta och telefon)
- Marginal (höger): -4vw (dator), 0vw (surfplatta och telefon)
Klona textmodul 4 gånger och placera dubbletter i återstående kolumner
Nu när vi är klara med att modifiera den första modulen i kolumn 1, klona modulen fyra gånger. Placera sedan var och en av dubbletterna i de återstående kolumnerna. Vi kommer att modifiera var och en av dubbletterna för att matcha vad vi vill ha.
Ändra textmodulen i kolumn 2
Redigera innehåll
Öppna dubbletten i kolumn 2 och redigera innehållet.
Ändra avstånd
Gå sedan till avståndsinställningar och ändra anpassade marginalvärden.
- Marginal (botten): 50px (surfplatta och telefon)
- Marginal (vänster och höger): -2vw (dator), 0vw (surfplatta och telefon)
- Höger marginal: -2vw (dator), 0vw (surfplatta och telefon)
Ändra textmodulen i kolumn 3
Redigera innehåll
Ändra även innehållet i dubbletten i kolumn 3.
Ändra avstånd
Med avståndsinställningar i designfliken.
- Marginal (vänster): 2,5 vw
- Marginal (höger): 1,5 vw
Ändra textmodulen i kolumn 4
Redigera innehåll
Fortsätt genom att öppna textmodulens inställningar i kolumn 4 och redigera innehållet där också.
Ändra avstånd
Gå sedan till fliken Design och ändra de anpassade marginalvärdena i inställningarna för mellanrum.
- Marginal (Vänster): -6vw
- Marginal (höger): 2vw
Ändra textmodulen i kolumn 5
Innehåll
Gör plats för den sista dubbletten. Redigera innehållet i innehållsområdet.
Ändra avstånd
Med anpassade avståndsinställningar.
- Marginal (Vänster): -7vw
- Marginal (höger): 3vw
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.
Läs också: Divi : Hur man anpassar kundvagnen och sökikonerna i modulen "Fullwidth Menu".
office
Mobil
Ladda ner DIVI nu!!!
Slutsats
Vi vet hur viktigt det är att se till att din webbplats sticker ut från andra webbplatser. Med Divis inbyggda alternativ kan du vara hur kreativ du vill.
Den här artikeln är ett exempel på hur du kan skapa interaktivt hover-innehåll.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
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.
.
