Kuinka luoda otsikkoesitys ilmaiselle Weebly -sivustolle?
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".
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.
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.
Uuden otsikkotyypin luominen
Kopioi kaikki sisältö no-header.html-tiedostosta ja liitä Nivo-Bar.html-otsikkotyyppiin.
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:
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:
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:
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.
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.