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

Kuinka lisätä harmonikan kuvan liukusäädin Weebly -sivustoon?

7

Weebly tarjoaa perinteisen kuvaesityksen elementin liukusäätimien lisäämiseksi sivustoosi. Valitettavasti tämä ei ole lähempänä nykyaikaisia ​​diaesityksiä, joita kolmannen osapuolen tarjoajat tai laajennukset tarjoavat. Voit luoda kauniita, mukautettuja harmonikka -tyylisiä liukusäätimiä, jotka on tehty puhtaasti CSS: llä. Tässä artikkelissa kerromme, miten luodaan ja CSS -harmonikkakuvaliukusäädin Weebly -sivustossa

Weebly -harmonikan kuvan liukusäädin

Alla on, miltä tyylikäs liukusäädin näyttää Weebly -sivustollasi.

Kuinka lisätä harmonikan kuvan liukusäädin Weebly -sivustoon?

CSS -harmonikan liukusäädin

Kuinka lisätä harmonikan kuvan liukusäädin Weeblyyn?

Nyt kun olet nähnyt liukusäätimen ja jos se näyttää hyvältä, tässä on vaiheittaiset ohjeet liukusäätimen lisäämisestä sivustollesi. Prosessi koostuu kolmesta yksinkertaisesta vaiheesta:

  • Kuvien lataaminen liukusäädintä varten
  • CSS -koodin lisääminen sivun tai sivuston tasolle
  • HTML -koodin lisääminen upotuskoodin avulla

Vaihe 1 – Kuvien lataaminen harmonikan liukusäädintä varten

Valmista kaikki kuvat halutulla koolla. Tässä esimerkissä käytimme kuvia, joiden leveys = 640 px. Lataa kaikki sivustosi kuvat kohdasta "Teema> Muokkaa HTML / CSS > Resurssit> Lähetä tiedosto (t)…".

Kuinka lisätä harmonikan kuvan liukusäädin Weebly -sivustoon?

Lataa kuvat Weebly Code Editorissa

Sinun on säilytettävä ladattujen kuvien URL -osoitteet, joita on käytettävä vaiheessa 3. Lähetetyn kuvan URL -osoite on seuraava:

https://your-site-name.com/files/theme/image-name.jpg

Vaihtoehtoisesti voit napsauttaa kuvaa hiiren kakkospainikkeella ja saada alla olevan URL -osoitteen:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/926370416842107469/files/image-name.png

Kuinka lisätä harmonikan kuvan liukusäädin Weebly -sivustoon?

Hae ladatun kuvan URL -osoite

Kun olet ladannut kaikki kuvat, napsauta Tallenna -painiketta ja anna teemallesi oma nimi.

Vaihe 2 – CSS -koodin lisääminen

Jos haluat lisätä liukusäätimen vain tietyille sivuille, lisää alla oleva CSS -koodi vaadittujen sivujen kohtaan Sivut> Valitse sivu> SEO -asetukset> Otsikkokoodi.

Kuinka lisätä harmonikan kuvan liukusäädin Weebly -sivustoon?

Lisää otsikkokoodi sivulle

Jos haluat lisätä liukusäätimen useille sivuille, suosittelemme sen lisäämistä CSS: n pääosaan kohtaan "Teema> Muokkaa HTML / CSS> Tyyli> main.less". Voit myös lisätä koodin kohtaan Asetukset> SEO > Otsikkokoodi.

Kuinka lisätä harmonikan kuvan liukusäädin Weebly -sivustoon?

Lisää otsikkokoodi Weebly -sivustotasolla

<style type="text/css"> .accordion_slider { width: 805px; height: 320px; overflow: hidden; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordion_slider ul { width: 2000px; } .accordion_slider li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordion_slider ul:hover li {width: 40px;} .accordion_slider ul li:hover {width: 640px;} .accordion_slider li img { display: block; max-width: 640px !important; } .image_box { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_box a { display: block; color: #fff !important; text-decoration: none; text-align: left; padding: 20px; font-size: 16px; } </style>

Voit muokata mitä tahansa tyyliä tarpeidesi mukaan.

Vaihe 3 – HTML -koodin lisääminen

Viimeinen vaihe on lisätä liukusäätimen alla oleva HTML -koodi vetämällä ja pudottamalla upotuskoodielementti vaaditun sivun sisältöalueelle. Muista korvata kuvalinkit omilla linkilläsi vaiheesta 1.

<div class="accordion_slider"> <ul> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a> </div> <img src="https://img.webnots.com/2015/07/Image-1.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-2.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a> </div> <img src="https://img.webnots.com/2015/07/Image-3.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a> </div> <img src="https://img.webnots.com/2015/07/Image-4.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-5.jpg"/> </li> </ul> </div>

Huomautus: HTML -koodin lisäämisen jälkeen saatat nähdä, että kuvat näkyvät Weebly -editorissa toisen alla. Tämä on hyvä, koska CSS -tehosteita ei käytetä sivulla. Julkaise sivu nähdäksesi todellinen liukusäädin.

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