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

Kuinka luoda otsikkoesitys ilmaiselle Weebly -sivustolle?

4

Otsikkoesitys on loistava ominaisuus, joka antaa sivustollesi ammattimaisen ilmeen. Tämä on ammattilainen ominaisuus on Weebly ja vain eivät reagoi teemoja. Ilmaiset käyttäjät voivat myös käyttää vaihtoehtoisia menetelmiä HTML/CSS: n muokkaamiseen ja tämän saavuttamiseksi. Tässä artikkelissa kerromme, kuinka voit lisätä Nivo -otsikkoesityksen ilmaiseen Weebly -sivustoosi.

Nivo on suosittu jQuery -liukusäädin, ja meillä on ilmainen widget diaesityksen lisäämiseksi sisältöalueelle. Täällä käytämme samaa Nivo -liukusäädin -widgettiä pienin muutoksin lisätäksemme sen reagoivien Weebly -teemojen otsikkoalueelle. Voit tarkastella neljää eri demotyyliä napsauttamalla alla olevia painikkeita:

Tässä esimerkissä olemme käyttäneet neljää kuvaa. Toinen kuva (up.jpg) on ​​linkitetty verkkosivulle ja siinä on yksinkertainen tekstitys. Neljännen kuvan (nemo.jpg) tekstissä on hyperlinkki.

Vaihe 1 – Valmiina kuvien kanssa

Yllä olevat demot käyttävät responsiivista "Ace Soccer – Birdseye" Weebly -teemaa ja kuvia käytetään koossa 618 x 246 px. Suosittelemme käyttämään korkeamman resoluution kuvia, joilla on sama leveys- ja korkeussuhde laadun parantamiseksi.

Vaihe 2 – Lataa ja lähetä liukusäätimet

Lataa kaikki tarvittavat liukusäätimet. Kirjaudu sisään Weebly -sivustoosi ja siirry kohtaan "Teema> Muokkaa HTML / CSS> Resurssit". Luo uusi kansio nimeltä “nivo".

Kuinka luoda otsikkoesitys ilmaiselle Weebly -sivustolle?

Uuden kansion luominen Weebly Code Editorissa

Lataa kaikki liukusäätimen tiedostot nivo -kansioon. Muista, että arkistotiedostossa on neljä esittelykuvaa, voit aina korvata kuvat omilla kuvillasi.

Kuinka luoda otsikkoesitys ilmaiselle Weebly -sivustolle?

Tiedostojen lataaminen Weeblyssä

Napsauta + -painiketta "Otsikkotyyppi" -välilehteä vasten ja luo uusi otsikkotyyppi nimeltä "Nivo-palkki". Haluamme lisätä tähän otsikkotyyppiin Nivo -otsikkoesityksen, jossa on Bar -teema.

Kuinka luoda otsikkoesitys ilmaiselle Weebly -sivustolle?

Uuden otsikkotyypin luominen

Kopioi kaikki sisältö no-header.html-tiedostosta ja liitä Nivo-Bar.html-otsikkotyyppiin.

Kuinka luoda otsikkoesitys ilmaiselle Weebly -sivustolle?

Uusi otsikkotyyppi diaesitystä varten

Nivo-Bar.html-ulkoasuun on lisättävä kolme osaa-CSS, komentosarjat ja HTML. Aseta alla oleva CSS asettelun pääosan sisään.

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

Sen pitäisi näyttää alla olevassa editorissa:

Kuinka luoda otsikkoesitys ilmaiselle Weebly -sivustolle?

CSS: n lisääminen otsikkotyyppiin

Lisää alla olevat komentosarjat juuri ennen body -tagin sulkemista.

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Sen pitäisi näyttää alla olevassa editorissa:

Kuinka luoda otsikkoesitys ilmaiselle Weebly -sivustolle?

Skriptien lisääminen otsikkotyyppiin

Viimeisenä osana on lisätä alla oleva HTML-koodi juuri pääkäärintäosion yläpuolelle. Muista korvata kuva- ja hyperlinkin URL -osoitteet omilla.

<div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Sen pitäisi näyttää alla olevassa editorissa:

Kuinka luoda otsikkoesitys ilmaiselle Weebly -sivustolle?

HTML: n lisääminen otsikkotyyppiin

Nivo-Bar.html-otsikkotyypin lopullisen koodin tulisi olla alla oleva. Muista, että tämä on ilmaisella Weebly -sivustolla ja käyttämämme teema on “Ace Soccer – Birdseye”.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> </head> <body class='no-header-page page-has-banner wsite-theme-dark'> <div class="wrapper"> <div class="birdseye-header"> <div class="nav-wrap"> <div class="container"> <div class="logo">{logo}</div> <div class="nav desktop-nav">{menu}</div> <label class="hamburger"><span></span></label> </div> </div> </div> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <div class="main-wrap"> {{#sections}} <div class="container">{content}</div> {{/sections}} </div> <div class="footer-wrap"> <div class="container"> <div class="footer">{footer}</div> </div><!-- end container --> </div><!-- end footer-wrap --> </div><!-- /.wrapper --> <div id="navMobile" class="nav mobile-nav"> <label class="hamburger"><span></span></label> {menu} </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script> <script type="text/javascript" src="/files/theme/plugins.js"></script> <script type="text/javascript" src="/files/theme/custom.js"></script> </body> </html>

Tallenna muutokset ja julkaise sivustosi.

Jos haluat otsikon diaesityksen sivulle, valitse kyseisen sivun "Sivut" -välilehdestä "Nivo-Bar" -otsikkotyyppi.

Kuinka luoda otsikkoesitys ilmaiselle Weebly -sivustolle?

Otsikkotyypin valitseminen tietylle sivulle

Diaesitystä tarjotaan neljällä eri teemalla ja 12 kuvansiirtotehosteella. Teemaa voidaan muuttaa muuttamalla HTML -koodin CSS -luokkaa. Yllä olevassa esimerkissä meillä on käyttäjäpalkin teema CSS-luokan "teemapalkki" kanssa, voit vaihtoehtoisesti käyttää "teema-oletus", "teema-tumma" tai "teemavalo". Voit myös luoda neljä erilaista otsikkotyyppiä ja valita haluamasi teeman tyylin eri sivuille.

Oletuksena satunnainen siirtymätehoste sovelletaan jokaiseen kuvaan. Voit mainita kunkin kuvan tietyn siirtymän tyypin käyttämällä HTML-tiedoston "data-siirtymä" -toimintoa. Alla on esimerkki HTML -koodista, joka käyttää eri siirtymätehosteita jokaiselle kuvalle, jolla on oletusteema.

<div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Voit lukea täydelliset mukautusvaihtoehdot siirtymistehosteen, teeman, animaationopeuden, navigointisäätimien ja pikkukuvien lisäämiseksi.

Etsitkö harmonikkatyyppistä liukusäädintä alla olevan kuvan mukaisesti? Opi lisäämään harmonikan liukusäädin Weebly -sivustoosi.

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