Kun opit tuntemaan suunnittelumenetelmät, jotka WordPress on ottanut käyttöön Divin kanssa, huomaat, että sivustollesi on mahdollista lisätä animoitu kaltevuustausta.
Tämä kuuluisa WordPress -malli toimii osioiden tai moduulien kautta pystyy jakamaan sivun sisällön ja lisäämään kuviosivun.
Tätä taitoa käyttämällä voit löytää tavan välttää yksiväristen verkkosivujen taustojen tai verkosta ladattujen kuvien yksitoikkoisuus.
Vaikka Divi antaa sinulle mahdollisuuden suunnitella omat sivusi, voit halutessasi ladata valmiit mallit.
Siksi selitämme, kuinka luoda tämä erikoinen muotoilu WordPress -malliin parantaaksesi sivusi näyttöä.
Mitä osioita Divissä on ja miten voit lisätä ne sivullesi?
Nämä ovat vain vaakasuorat lohkot, joita pidetään Divi -rakenteen suurimpina osina.
Niillä on ominaisuus pinota luokitellakseen verkkosivuston suunnitteluun lisättävän sisällön, joten sitä voidaan pitää ”kääre”.
Näiden lohkojen sisältämien asetusten joukossa on mahdollista lisätä manuaalisesti kalteva tausta ”Asetteluvaihtoehdot”.
Vaiheet lohkon luomiseksi ja sen asetusten käyttämiseksi
Kun olet varmistanut, että olet aktivoinut Divi -visuaalisen konstruktorin, sinun on napsautettava allekirjoituspainiketta ”+Väri ”lisätäksesi osion. Sitten se näyttää sinulle ikkunan, jonka avulla voit lisätä kolmenlaisia vaihtoehtoja: ”Vakio”,”Täysi leveys”Y”Erikoinen”.
Kun olet valinnut jonkin näistä, voit valita sarakkeen rakenteen osassa oleville riveille.
Lopuksi voit lisätä moduuleja ja ”Osion asetukset”Missä näet luettelon muutoksista”Sisällys”,”Design”Y”Pitkälle kehittynyt”.
Kuinka lisätä animoitu kaltevuus tausta Divin kanssa? Askel askeleelta
Käytettävä menetelmä on luoda haluamasi kaltevuustausta säätämällä Divi -konstruktorin ja CSS -katkelmien sisältävää taustaa. Aloita siis luomalla uusi sivu WordPress -alustalle ja valitse Divi -rakennustyökalulla vaihtoehto ”Rakenna tyhjästä”.
Ennen kuin sinulla on tyhjä kangas. Täällä voit lisätä yhden sarakerivin yllä kuvatulla tavalla.
Osion kokoonpanossa sinun on määritettävä ”Pehmuste”kohdalle 12vw yläosa ja lisää ”Korkeus: 40vw”Harmaassa laatikossa, joka näkyy alla”Tärkeimmät CSS -elementit”.
Tästä lähtien aloitat kaltevuuden taustan määrittämisen, josta pääset vaihtoehtoon ”Tausta tai tausta”Paina”Alennettu”.
Tämän alla voit valita kaltevuuksien värit, haluamasi kaltevuustyypin ja suunnan.
Näin voit muuttaa lohkon kokoa 100% leveyteen ja korkeuteen ja aloittaa haluamasi animaation luomisen.
Tämä tehdään muokatun CSS -muokkauksen avulla, joten sinun on lisättävä luokka, joka on muokkaamasi osion erityinen; siksi sinun on syötettävä ”Pitkälle kehittynyt”Ja sijoitat animaation nimen kohtaan”CSS -luokka”.
Koodi lisätä animoitu tausta Diviin
Kun tämä luokka on lisätty, voit lisätä koodimoduulin ja sijoittaa seuraavan ”Koodi”
-tunnisteiden sisällä.
. cheer up-gradient {
Taustakoko: 400% 400%;
Animaatio: kaltevuus 5s helpottaa ääretöntä;
}
@keyframes gradient {
0% {
Tausta-asema: 0% 50%;
}
viisikymmentä% {
Tausta-asema: 100% 50%;
}
100% {
Tausta-asema: 0% 50%;
}
}
Tällä tavalla olet onnistunut asettamaan kaltevuutesi taustalle 400%: n amplitudin suhteessa alkuperäiseen kokoon, ja sen animaatio on liike molemmille puolille.
Divin tarjoamien suunnitteluetujen lisäksi sillä on myös monia työkaluja, joiden avulla voit tehdä sivustasi suosikin Internetin käyttäjien keskuudessa, kuten käyttää BreadCrumbsia sivun hakukoneoptimoinnin parantamiseen tai lisätä avattavan valikon sen käyttöä varten ja käsittely on helpompaa.