Kuinka lisätä 3D CSS -painikkeita Weeblyyn?
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.
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:
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.
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).
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.