Hover-efektin lisääminen divi builderiin

Wordpress

On olemassa monia tapoja tehdä verkkosivusta houkuttelevamman näköinen. Yksi niistä on se, että voit lisätä sivun tiettyyn elementtiin hover-efektin. Jos sinulla on WordPress-pohjainen verkkosivusto, joka on rakennettu Divi Builderilla , voit vaivattomasti lisätä hover-efektin johonkin sivun elementtiin. Mikä muuten on Divi Builder?

Siltä varalta, ettet ole tiennyt Divi Builderista. Se on sivunrakentaja-lisäosa WordPressille aivan kuten Elementor (Elementor on suosituin WordPressin sivunrakentaja). Siinä on myös visuaalinen editori, joka helpottaa sivun luomista. Divi Builderissa on joitain sisäänrakennettuja ominaisuuksia animaatioefektien lisäämiseksi, mukaan lukien sellaiset, joita voit lisätä, kun kävijä leijuu tietyn elementin päällä sivulla. Katso alla olevaa screencastia.

Yllä olevat hover-efektit on luotu Divi Builderilla. Divi Builder itse käyttää hover-efektiominaisuudessa CSS-muunnosta. Joten teknisesti, kun lisäät hover-efektin tiettyyn elementtiin Divi Builderissa, toteutat CSS-muunnoksen sivullesi.

Divi Builderissa suunnitteluelementti jakautuu kolmeen tyyppiin: jakso, rivi ja moduuli. Voit lisätä hover-efektin näihin kolmeen elementtityyppiin. Tässä esimerkissä näytämme, miten lisäät hover-efektin kuvamoduuliin (kuten näet yllä olevassa screencastissa).

How to add a hover effect in Divi Builder

Ensin sinun täytyy valmistella osio sekä rivi Divi Builderin canvas-alueelle. Voit tehdä sen napsauttamalla sinistä plus-painiketta lisätäksesi uuden osion (voit lisätä tavallisen osion tätä esimerkkiä varten). Lisää rivi ja valitse sarakerakenne tarpeesi mukaan. Tässä esimerkissä valitsemme kolmen sarakkeen rakenteen.

Kun rivi on lisätty, napsauta harmaata plus-kuvaketta yhdellä sarakkeista lisätäksesi moduulin. Koska haluamme lisätä kuvaan hover-efektin, valitse Image lisätäksesi Image-moduulin.

Image-moduulin asetuspaneeli tulee näkyviin heti Image-moduulin lisäämisen jälkeen. Voit lisätä kuvan napsauttamalla Content -välilehden Content lohkon Image kuvapidikettä.

Kun kuva on lisätty, siirry Design -välilehdelle ja avaa Transform -lohko. Napsauta Transform -lohkossa kursorikuvaketta ja napsauta sitten hover-välilehteä (jota edustaa myös kursorikuvake).

Valitse lisättävä transformaatiotyyppi napsauttamalla yhtä käytettävissä olevista välilehdistä ja aseta arvo hiirellä. Tai voit myös asettaa muunnosarvon manuaalisesti kirjoittamalla haluamasi arvon.

Se on siinä. Voit ottaa muutokset käyttöön napsauttamalla asetuspaneelin oikeassa alakulmassa olevaa vihreää tarkistuslistakuvaketta.

Tehdäksesi sivustasi houkuttelevamman voit myös näyttää erilaisen kuvan leijailemisen yhteydessä. Voit tietää lisää tästä artikkelista .

Voit mennä samaa reittiä lisätä hover-efektin osioon ja riviin. Avaa ensin asetuspaneeli ja siirry sitten Suunnittelu -välilehdelle. Suunnittelu -välilehdellä voit avata Transform -lohkon. Voit asettaa hover-efektin tälle lohkolle, kuten olemme juuri käsitelleet edellä.

YouTube video: Hover-efektin lisääminen Divi Builderiin


Rate article