TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag ett bildspel i rubriken på en gratis Weebly -webbplats?

1

Bildspel i rubriken är en underbar funktion som ger din webbplats ett professionellt utseende. Detta är en proffsfunktion i Weebly och endast tillgänglig för teman som inte svarar. Gratis användare kan också använda alternativa metoder för att ändra HTML/CSS och uppnå detta. I den här artikeln förklarar vi hur du lägger till bildspelet Nivo header i din gratis Weebly -webbplats.

Nivo är ett populärt jQuery -reglage och vi har en gratis widget för att lägga till bildspel i innehållsområdet. Här kommer vi att använda samma Nivo -reglage -widget med mindre ändringar för att lägga till den i rubrikområdet för responsiva Weebly -teman. Du kan se de fyra olika stilarna av demo genom att klicka på knapparna nedan:

I det här exemplet har vi använt fyra bilder. Den andra bilden (up.jpg) är länkad till en webbsida och har en enkel texttext. Den fjärde bilden (nemo.jpg) har textning med en hyperlänk.

Steg 1 – Redo med dina bilder

Ovanstående demos använder det lyhörda "Ace Soccer – Birdseye" Weebly -temat och bilderna används med storleken 618 x 246 px. Vi rekommenderar att du använder bilder med högre upplösning med liknande bredd- och höjdförhållande för bättre kvalitet.

Steg 2 – Ladda ner och ladda upp reglagefiler

Ladda ner alla reglagefiler som krävs. Logga in på din Weebly -webbplats och navigera till avsnittet "Tema> Redigera HTML / CSS> Tillgångar". Skapa en ny mapp som heter “nivå".

Hur skapar jag ett bildspel i rubriken på en gratis Weebly -webbplats?

Skapa ny mapp i Weebly Code Editor

Ladda upp alla reglagefiler till mappen “nivå”. Kom ihåg att det finns fyra demobilder som ingår i arkivfilen, du kan alltid ersätta bilderna med dina egna bilder.

Hur skapar jag ett bildspel i rubriken på en gratis Weebly -webbplats?

Ladda upp filer i Weebly

Klicka på + -knappen mot fliken "Rubrikstyp" och skapa en ny rubrikstyp som heter "Nivo-Bar". Vi vill lägga till bildspelet Nivo header med Bar -tema i denna rubriktyp.

Hur skapar jag ett bildspel i rubriken på en gratis Weebly -webbplats?

Skapa ny rubrikstyp

Kopiera allt innehåll från "no-header.html" och klistra in i rubriken "Nivo-Bar.html".

Hur skapar jag ett bildspel i rubriken på en gratis Weebly -webbplats?

Ny rubrikstyp för bildspel

Det finns tre delar som ska läggas till i layouten “Nivo-Bar.html”-CSS, script och HTML. Sätt in nedanstående CSS inuti huvuddelen av layouten.

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

Det ska se ut nedan i redigeraren:

Hur skapar jag ett bildspel i rubriken på en gratis Weebly -webbplats?

Infoga CSS i huvudtyp

Sätt in nedanstående skript precis innan kroppstaggen stängs.

<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>

Det ska se ut nedan i redigeraren:

Hur skapar jag ett bildspel i rubriken på en gratis Weebly -webbplats?

Infoga skript i huvudtyp

Den sista delen är att infoga nedanstående HTML-kod strax ovanför avsnittet "main-wrap". Se till att ersätta bild- och hyperlänkadresserna med dina egna.

<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>

Det ska se ut nedan i redigeraren:

Hur skapar jag ett bildspel i rubriken på en gratis Weebly -webbplats?

Infoga HTML i huvudtyp

Den slutliga koden för rubriken “Nivo-Bar.html” ska vara som nedan. Kom ihåg att detta finns på en gratis Weebly -webbplats och temat vi har använt är "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>

Spara ändringarna och publicera din webbplats.

När du vill ha bildspel på rubriken på en sida väljer du rubriken "Nivo-Bar" under fliken "Sidor" för den specifika sidan.

Hur skapar jag ett bildspel i rubriken på en gratis Weebly -webbplats?

Välja rubriktyp för specifik sida

Bildspelet erbjuds med 4 olika teman och 12 bildövergångseffekter. Temat kan ändras genom att ändra CSS -klassen i HTML -koden. I exemplet ovan har vi användarfältstemat med CSS-klassen "temarad", du kan alternativt använda "tema-standard", "temamörk" eller "temaljus". Du kan också skapa fyra olika sidhuvudtyper och välja önskad temastil för olika sidor.

Som standard tillämpas slumpmässig övergångseffekt på varje bild. Du kan nämna den specifika övergångstypen för varje bild med funktionen "dataövergång" i HTML. Nedan finns en exempel HTML -kod som använder olika övergångseffekter för varje bild med standardtema.

<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>

Du kan läsa de fullständiga anpassningsalternativen för att ändra övergångseffekt, tema, animationshastighet, navigeringskontroller och lägga till miniatyrbilder.

Letar du efter dragspel i reglaget enligt nedan? Lär dig hur du lägger till dragspelreglaget till din Weebly -webbplats.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer