TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä 3D CSS -painikkeita Weeblyyn?

5

Edellisessä artikkelissamme näimme kuinka lisätä ja muokata oletusarvoista Weebly -painikeelementtiä. Vaikka painikkeita on mahdollista muokata, nykyisten painikkeiden muokkaaminen on monimutkainen tehtävä, eikä useinkaan toimi odotetulla tavalla. Yksinkertainen ratkaisu on upottaa oma mukautettu CSS/HTML käyttämällä Weebly -upotuskoodi -elementtiä. Et saa mukautusvaihtoehtoja upotettaessa, mutta voit helposti luoda houkuttelevia painikkeita CSS -tehosteilla. Tässä kerromme, kuinka lisätä 3D CSS -painikkeita Weebly -sivustoon.

3D CSS -painikkeet

Alla on, miltä 3D -painikkeet näyttävät.

Kuinka lisätä 3D CSS -painikkeita Weeblyyn?

Painikkeilla on seuraavat ominaisuudet:

  • Kuvia ei vaadita, mikä parantaa sivuston latausnopeutta ja ponnistelujasi kuvien luomiseen.
  • Värit ja tyylit ovat helposti muokattavissa minkä tahansa teeman ja asettelun mukaan.
  • Voit hallita HTML -painikkeiden määrää upotuskoodin avulla. Tämä tarkoittaa, että voit sijoittaa eri määrän painikkeita eri sivuille pitäen lähde -CSS: n samana.
  • Jokainen painike voidaan linkittää yhteen tai kaikkiin sivustosi sivuihin.

Kuinka lisätä 3D CSS -painikkeita Weeblyyn?

Selitämme täällä kuinka lisätä viisi painiketta yllä olevalla 3D -tyylillä. Voit poistaa tai lisätä CSS: n ja vastaavan HTML -koodin lisätäksesi tai poistaaksesi painikkeita ja muuttaaksesi väriä ja tyylejä.

Vaihe 1 – Painike CSS: n lisääminen

Ensimmäinen askel on päättää, haluatko lisätä painikkeet vain muutamille sivuille vai monille sivustosi sivuille. Jos haluat lisätä muutaman sivun, lisää CSS -koodi vain näille sivuille kohdassa "Sivut> Valitse sivu> SEO -asetukset> Otsikkokoodi" alla kuvatulla tavalla:

Kuinka lisätä 3D CSS -painikkeita Weeblyyn?

Lisää otsikkokoodi sivulle

Jos haluat lisätä painikkeita useille sivuille, on suositeltavaa lisätä CSS -tyylit ulkoiseen tyylitaulukkoon ja linkittää sivulle. Weeblyllä on oletuksena vain yksi ulkoinen tyylitaulukko sivustoa kohden. Siirry kohtaan "Teema> Muokkaa HTML / CSS> Tyylit> main.less". Etsi tiedosto ja lisää koodi muiden olemassa olevien koodien alareunaan. Tallenna muutokset ja sulje koodieditori.

Kuinka lisätä 3D CSS -painikkeita Weeblyyn?

CSS -päätiedoston muokkaaminen Weeblyssä

Kun käytät koodieditoria, sinun on tallennettava teema mukautetulla nimellä. Jos et halua muokata teemaa, siirry kohtaan Asetukset> SEO> Otsikkokoodi. Täällä voit lisätä CSS -koodin, jota käytetään kaikilla sivustosi sivuilla (samanlainen kuin main.less -tiedoston muokkaaminen).

Kuinka lisätä 3D CSS -painikkeita Weeblyyn?

Lisää otsikkokoodi Weebly -sivustotasolla

Tässä on 3D -painikkeiden CSS -koodi:

<style type="text/CSS"> a.css3dbutton { background: #c1e75c; color: black; text-decoration: none; font: bold 18px Arial; position: relative; display: inline-block; margin-right: 15px; padding: 15px; border-radius: 85px; width: 85px; height: 85px; outline: none; box-shadow: 0 8px 0 #8dab3b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.css3dbutton span.outer{ text-align: center; width: 100%; display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } a.css3dbutton span.outer span.top{ display: block; padding-bottom: 4px; } a.css3dbutton span.outer span.bottom{ border-top: 1px solid black; padding-top: 4px; display: block; text-transform: uppercase; line-height: 12px; font-size: 60%; } a.css3dbutton:hover { background: #9cc62b; box-shadow: none; -ms-transform: translateY(8px); -webkit-transform: translate3D(0, 8px, 0); -moz-transform: translateY(8px); transform: translate3D(0, 8px, 0); } a.css3dbutton.blue{ background: #a6e9f7; box-shadow: 0 8px 0 #529dad, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.blue:hover { background: #66cbe1; box-shadow: none; } a.css3dbutton.pink{ background: #fbbaba; box-shadow: 0 8px 0 #d74848, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.pink:hover { background: #ea6161; box-shadow: none; } a.css3dbutton.yellow{ background: #f3fa86; box-shadow: 0 8px 0 #dbcd2f, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.yellow:hover { background: #ecd347; box-shadow: none; } a.css3dbutton.brown{ background: #e0c87e; box-shadow: 0 8px 0 #b3805b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.brown:hover { background: #b3805b; box-shadow: none; } </style>

Lue lisää lähteen CSS / HTML -muokkaamisesta Weeblyssä.

Vaihe 2 – HTML -koodin lisääminen

Vedä ja pudota upotuskoodin elementti sivulle, jolle haluat lisätä painikkeet, ja liitä alla oleva koodi sisään. Muista korvata # omilla linkilläsi.

<div> <a href="#" class="css3dbutton"> <span class="outer"> <span class="top">Register </span> <span class="bottom">Register here free</span> </span> </a> <a href="#" class="css3dbutton blue"> <span class="outer"> <span class="top">Login</span> <span class="bottom">Login to access</span> </span> </a> <a href="#" class="css3dbutton pink"> <span class="outer"> <span class="top">Sign Up</span> <span class="bottom">Sign up for free</span> </span> </a> <a href="#" class="css3dbutton yellow"> <span class="outer"> <span class="top">Blog</span> <span class="bottom">Subscribe to blog</span> </span> </a> <a href="#" class="css3dbutton brown"> <span class="outer"> <span class="top">Forum</span> <span class="bottom">Read forum posts</span> </span> </a> </div>

Vaihe 3 – Painikkeiden mukauttaminen

On loputtomia mahdollisuuksia muokata painikkeita tarpeen mukaan. Tässä on joitain yleisiä skenaarioita, joita saatat etsiä.

Painikkeiden lisääminen tai poistaminen

Oletetaan, että tarvitset vain 3 painiketta 5 sijasta, kuten esimerkissä. Tässä tapauksessa voit poistaa 4. ja 5. painikkeen koodin sekä CSS: stä että HTML: stä. Suosittelemme kuitenkin lisäämään enimmäismäärän tyylejä CSS: ään ja hallitsemaan sitten HTML -painikkeiden määrää. Tässä skenaariossa, jossa tarvitset vain kolme painiketta, jätä CSS -koodi sellaiseksi kuin se on, jossa on 5 erilaista tyyliä ja lisää HTML -koodi vain kolmelle painikkeelle.

Tällä tavalla voit lisätä 3 painiketta yhdelle sivulle, 5 painiketta toiselle sivulle ja niin edelleen.

Värien ja koon mukauttaminen

  • Voit muuttaa tekstin väriä ja painikkeen ominaisuuksien, kuten taustan ja varjon, väriä.
  • Muuta leveys- ja korkeusmääritteitä muuttaaksesi pyöreän painikkeen soikeaksi tai mihin tahansa muuhun mittasuhteeseen.

Muista, että voit käyttää välilevyä lisäämään riittävästi tilaa painikkeiden ylä- ja alapuolelle. Samoin voit asettaa painikkeen minkä tahansa muun elementin oikealle tai vasemmalle puolelle käyttämällä välikappaletta.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja