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

Kuinka lisätä ja muokata painikkeita Weebly -sivustossa?

10

Weebly -sivuston painikkeet ovat yksi tärkeistä elementeistä, joita käytetään toimintakehotuksessa. Voit esimerkiksi lisätä painikkeen, joka pyytää käyttäjiä lataamaan PDF -asiakirjan. Koska Weeblyllä on hyvin vähän teemoja, on yleinen ongelma, että saatat pitää koko teemasta, mutta teeman painikkeella voi olla tunkeileva tyyli. Tällaisessa tilanteessa on helppo korvata Weebly -painikkeen elementtityyli omalla mukautetulla CSS: llä tai muun teeman painikkeella. Tässä artikkelissa kerrotaan mahdollisuuksista mukauttaa Weebly -oletuspainike -elementtiä.

Oletuspainikeelementin lisääminen

Weebly tarjoaa oletuksena vedä ja pudota -painike -elementin, joka voidaan mukauttaa neljään eri tyyppiin. Painikeelementti on ryhmitelty elementtien rakenteeseen. Oletuksena käyttäjät voivat lisätä kaksi pientä painiketta ja kaksi suurta painiketta.

Kuinka lisätä ja muokata painikkeita Weebly -sivustossa?

Weeblyn oletuspainikkeiden tyylit

Kaikissa ei-reagoivissa teemoissa Weebly luo kuvia painikkeen luomiseksi ja kaikissa reagoivissa teemoissa painikkeiden tyyliä hallitaan "main.less" -tiedostossa. Vedä ja pudota, napsauta sisältöalueen painiketta nähdäksesi seuraavat mukautusvaihtoehdot:

  • Painiketeksti – painikkeessa näytettävä teksti.
  • Painikkeiden tyyli – valitse yksi neljästä käytettävissä olevasta tyylistä.
  • Asento – painikkeen keskikohta, oikea tai vasen suuntaus.
  • Linkki – lisää linkkejä painikkeen tekstiin.
  • Väli – säädä ylä- ja alareunat.

Kuinka lisätä ja muokata painikkeita Weebly -sivustossa?

Weebly Button Element -vaihtoehdot

Vedä ja pudota -painike -elementin lisäksi Weebly tarjoaa myös toimintakehotuspainikkeen aloitussivun malleissa.

Korvaa tai muokkaa "main.less" -kohdan painikkeiden tyylejä muokataksesi Weebly -sivustosi painikkeita reagoivilla teemoilla.

Responsiivinen vs ei-reagoiva

Ennen kuin yrität muuttaa painikkeiden tyyliä, tarkista, millaista teemaa käytät. Weebly -teemoissa käytetään kolmen tyyppisiä painikkeita:

  • Responsiivisten teemojen CSS -painikkeet – esimerkkiteema Slick, Cento.
  • CSS-painikkeet ei-reagoivissa teemoissa-esimerkkiteema Cleancut.
  • Kuvapainikkeet ei-reagoivissa teemoissa-esimerkkiteema Kaupunki.

Ei-reagoivat teemat kuvapainikkeilla- tässä painike-elementti käyttää kuvaa ja CSS kutsuu tätä kuvaa vain taustaksi, esimerkkiteema on kaupunki.

Ei-reagoivat teemat CSS-painikkeilla- kuten Cleancut, käyttää täydellisiä CSS-painikkeita ilman kuvia, vaikka se on ei-reagoiva teema.

Responsiiviset teemat – kaikki uusimmat teemat, kuten Slick, Cento, Paper jne., Ovat täysin reagoivia ja painike -elementti luodaan CSS -koodista.

Keskustelemme painikkeen tyylin muuttamisesta sekä reagoivissa että ei-reagoivissa teemoissa.

Tapaus 1-Mukautettujen painikkeiden kuvien lisääminen ei-reagoiviin teemoihin

Weebly -painike -elementin tärkeä ominaisuus on sen kyky sopeutua tekstin pituuteen. Painike säädetään automaattisesti syötetyn tekstin pituuden mukaan. Tämä saavutetaan jakamalla painike kahteen kuvaan. Ennen kuin jatkat, seuraa alla olevia ohjeita ymmärtääksesi, missä Weebly -sivustoon tallennetut painikekuvat ovat.

  • Kirjaudu Weebly -tiliisi ja valitse muokattava sivusto.
  • Siirry "Teema" -välilehdelle ja napsauta "Muokkaa HTML / CSS" -painiketta.
  • Resurssit -osiossa näet erilaisia ​​painikekuvia alla esitetyllä tavalla:

Kuinka lisätä ja muokata painikkeita Weebly -sivustossa?

Nappikuvat Weebly-reagoimattomissa teemoissa

Huomasimme, että kaikissa ei-reagoivissa teemoissa, joissa käytetään kuvia painikkeille, on yhdeksän kuvasarjaa (yhteensä 18) pienemmille ja suuremmille painikkeille, mutta painikkeen taustana käytetään kahta tiettyä kuvaa CSS: ssä. Tarkista “main_style.css" ja selvitä, mitä kuvia käytetään painikkeisiin. Alla oleva esimerkki kaupungin teemasta osoittaa, että "button-highlight.png" ja "button-highlight-large.png" käytetään vastaavasti pienemmille ja suuremmille painikkeille.

Kuinka lisätä ja muokata painikkeita Weebly -sivustossa?

Kuvat, joita käytetään ei-reagoivien teemojen painikkeisiin

Jos et pidä näistä painikkeista, vaihda kuva yhdeksi käytettävissä olevasta kuvasta yhdeksästä sarjasta. Vaihdat "button-highlight.png" muotoon "button-purple.png". Jos et pidä mistään olemassa olevista painikekuvista, luo omia mukautettuja kuvia, joissa on saman kokoiset ja jaetut tyylit, ja lataa se "Omaisuus" -osiossa. Varmista, että käytät "name" -kuvan nimeä "main_style.css" -kohdassa "background" -ominaisuudelle.

Tapaus 2-CSS-painikkeiden mukauttaminen ei-reagoiviin teemoihin

Jos et löydä painikekuvia ei-reagoivan teemasi "Omaisuus" -osiosta, tarkista "main_style.css" nähdäksesi "Painikkeet" -osan. Alla on Cleancut -teeman CSS -koodi, joka voidaan räätälöidä tausta, värit, hover -tehoste jne. Tarpeen mukaan.

/* Buttons --------------------------------------------------------------------------------*/ /* Small structure & regular style */ .wsite-button { background: red; background: -moz-linear-gradient(top,#444 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#333)); background: -webkit-linear-gradient(top,#444 0,#333 100%); background: -o-linear-gradient(top,#444 0,#333 100%); background: -ms-linear-gradient(top,#444 0,#333 100%); background: linear-gradient(top,#444 0,#333 100%); border: 1px solid #000; box-shadow:inset 0 0 15px rgba(0,0,0,0.25); -moz-border-radius: 3px; border-radius: 3px; color: white !important; font-size: 13px; font-weight: 700; padding: 3px 25px; text-align: center; text-decoration: none !important; text-shadow: 0px -1px 1px rgba(0,0,0,0.7); } .wsite-button:hover { background-position:0 0; box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button:active { background-position:0 0; } .wsite-button-inner { color: #fff !important; padding:0; background: none; } .wsite-button:hover .wsite-button-inner { background:none; } .wsite-button:active { padding:4px 25px 2px; } /* Large structure & regular style */ .wsite-button-large .wsite-button-inner { font-size:14px; padding:0; } .wsite-button-large .wsite-button-inner { background: none; } /* Highlighted styles */ .wsite-button-highlight, .wsite-button-large.wsite-button-highlight { background: #0370EA; background: -moz-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0370EA),color-stop(100%,#0370EA)); background: -webkit-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -o-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -ms-linear-gradient(top,#0370EA 0,#0370EA 100%); background: linear-gradient(top,#0370EA 0,#0370EA 100%); border: 1px solid #0052ad; box-shadow:inset 0 0 18px rgba(0,0,0,0.02); } .wsite-button-highlight:hover, .wsite-button-large.wsite-button-highlight:hover { box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button-highlight .wsite-button-inner { background-image: none; } .wsite-button-large.wsite-button-highlight .wsite-button-inner { background-image: none; }

Palaa nyt editoriin ja vedä painike -elementti sisältöalueelle. Näet, että painikkeessa on uusi tyyli, kuten olet määrittänyt kohdassa "main.less".

Tapaus 3 – Weebly -painikkeiden mukauttaminen reagoiviin teemoihin

Kaikki uusimmat Weebly -teemat ovat responsiivisia ja käyttävät painikkeiden luomiseen vain CSS -koodeja. Kuten edellä on selitetty, asiaankuuluvat CSS -painikkeiden tyylit määritellään "main.less" -tiedoston " / Buttons /" -osiossa. Jos teemasi käyttää @import -toimintoa CSS: ssä, tarkista CSS: n vastaava painiketiedosto. Tässä sinun on korvattava nämä koodit omalla mukautetulla CSS -painikekoodillasi muuttaaksesi oletuspainikkeiden tyyliä.

Alla on Weebly -painikkeen CSS -tyylimääritelmät:

  • .site-painike-Pieni painike
  • .site-painike: hover-Pienen painikkeen leijuva vaikutus
  • .site-painike: aktiivinen-Vaikutus, kun napsautat pientä painiketta
  • .wsite-button-internal-Määritä sisäisten elementtien tyyli, kuten kirjasinkoko ja väri

Samoin suuremmilla painikkeilla käytetään .wiste-button-large CSS -luokkaa.

Huomautus: Jos sivustollesi on lisätty blogisivu, jotkin teemat voivat lisätä CSS-luokan .blog-painikkeen blogiviestien painikkeisiin.

Voit muokata näitä CSS -koodeja itse tai käyttää mitä tahansa online -CSS -painikkeiden luontityökalua saadaksesi vaaditun CSS: n. Esimerkiksi pieniä painikkeita voidaan muuttaa kaltevuudella korvaamalla pienet oletuspainikkeiden koodit alla olevalla CSS -koodilla:

.wsite-button { border-top: 1px solid #96d1f8; background: #6594d6; background: -webkit-gradient(linear, left top, left bottom, from(#7a3e9c), to(#6594d6)); background: -webkit-linear-gradient(top, #7a3e9c, #6594d6); background: -moz-linear-gradient(top, #7a3e9c, #6594d6); background: -ms-linear-gradient(top, #7a3e9c, #6594d6); background: -o-linear-gradient(top, #7a3e9c, #6594d6); padding: 14.5px 29px; -webkit-border-radius: 39px; -moz-border-radius: 39px; border-radius: 39px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 24px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .wsite-button:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .wsite-button:active { border-top-color: #1b435e; background: #1b435e; }

Painikeelementin vaihto vanhoilla ja uusilla CSS -koodeilla esitetään esimerkkiteemassa seuraavasti:

Kuinka lisätä ja muokata painikkeita Weebly -sivustossa?

Uusi CSS -painike Weeblyssä

Huomautus: Voit muuttaa suuria painikkeita samalla tavalla. Muuta CSS -koodeja sekä pienille että suurille painostyyleille, jotta painikkeet eivät rikkoudu julkaistulla sivustolla.

Jotta tehtävä olisi yksinkertainen Weebly -käyttäjille, meillä on kolme Weebly CSS -luokkia käyttävien painikkeiden tyyliä. Voit korvata painikkeiden tyylin CSS: n " main.less" -kohdan " / Buttons /" -osiossa jollakin alla olevasta koodista.

Tyyli1:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 8px 12px; background: #333333; color: #ffffff; border: 2px solid #333333; border-radius: 1px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Quattrocento Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: normal; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { padding: 12px 16px; font-family: 'Quattrocento Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #ffffff; color: #333333; border: 2px solid #333333; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: #b9b9b9; color: #ffffff; border: 2px solid #b9b9b9; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #a1a1a1; border: 2px solid #a1a1a1; }

Tyyli2:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 10px 16px; background: #35A89A; color: white; border-radius: 0; text-transform: uppercase; letter-spacing: .07em; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; line-height: normal; -webkit-transition: all 350ms ease-in; -moz-transition: all 350ms ease-in; -ms-transition: all 350ms ease-in; -o-transition: all 350ms ease-in; transition: all 350ms ease-in; } .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner { padding: 12px 20px; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #177267; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: white; color: #35A89A; border: 2px solid #35A89A; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #35A89A; color: white; }

Tyyli3:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { display: inline-block; height: auto; padding: 0; background: none; } .wsite-button:focus, .wsite-editor .wsite-button:focus { outline: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { display: inline-block; height: auto; padding: 8px 16px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { display: inline-block; height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { display: inline-block; height: auto; padding: 12px 24px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button:hover .wsite-button-inner, .wsite-button-large:hover .wsite-button-inner { background: transparent; color: #a1a1a1 !important; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: transparent; color: #808080 !important; border: 2px solid #808080; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #808080; color: white !important; }

Mukautettujen CSS -painikkeiden lisääminen upotuskoodin elementin avulla

Olemassa olevan elementin mukauttaminen on vaikea tehtävä, koska Weebly muuttaa usein koodia ja painikkeen laajuus rajoittuu olemassa olevaan tyyliin ilman suurta vetovoimaa. Helpoin ja yksinkertaisin tapa on lisätä omia mukautettuja CSS -painikkeita olemassa olevien koodien muokkaamisen sijaan. Tämä tarjoaa loputtomat mahdollisuudet lisätä eri tyyppisiä 2D- ja 3D -CSS -painikkeita Weebly -sivustoosi. Mutta ongelma on, että sinun on lisättävä joka kerta käyttämällä "Upota koodi" -elementtiä ennalta määritetyllä tyylillä "Button" -elementin käyttämisen sijaan.

Voit esimerkiksi lisätä kaltevuuspainikkeita eri tyyleillä alla kuvatulla tavalla lisäämällä ladatun HTML-koodin " Upota koodi " -elementtiin ja CSS: n päätaulukon alle ("main_style.css" ei-reagoiville teemoille ja "main.less" reagoiville. teemoja).

Lataa tämän Weebly -gradienttipainikkeiden widgetin CSS / HTML -koodi.

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