TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage en topplideshow i et gratis Weebly -nettsted?

0

Slideshow i topptekst er en fantastisk funksjon som gir et profesjonelt utseende til nettstedet ditt. Dette er en pro-funksjon i Weebly og bare tilgjengelig for temaer som ikke reagerer. Gratisbrukere kan også bruke alternative metoder for å endre HTML/CSS og oppnå dette. I denne artikkelen forklarer vi hvordan du legger til Nivo header lysbildefremvisning i ditt gratis Weebly -nettsted.

Nivo er en populær jQuery -glidebryter, og vi har en gratis widget for å legge til lysbildefremvisning i innholdsområdet. Her vil vi bruke den samme Nivo -glidebryter -widgeten med mindre modifikasjoner for å legge den til i overskriftsområdet for responsive Weebly -temaer. Du kan se de fire forskjellige stiler av demo ved å klikke på knappene nedenfor:

I dette eksemplet har vi brukt fire bilder. Det andre bildet (up.jpg) er koblet til en webside og har en enkel teksttekst. Det fjerde bildet (nemo.jpg) har teksttekst med en hyperkobling.

Trinn 1 – Klar med bildene dine

Demoene ovenfor bruker det responsive "Ace Soccer – Birdseye" Weebly -temaet, og bildene brukes med størrelsen 618 x 246 px. Vi anbefaler å bruke bilder med høyere oppløsning med lignende bredde- og høydeforhold for bedre kvalitet.

Trinn 2 – Last ned og last opp skyvefiler

Last ned alle de nødvendige skyvefilene. Logg deg på Weebly -nettstedet og naviger til delen "Tema> Rediger HTML / CSS> eiendeler". Lag en ny mappe som heter “nivå".

Hvordan lage en topplideshow i et gratis Weebly -nettsted?

Opprette ny mappe i Weebly Code Editor

Last opp alle skyvefilene til "nivå" -mappen. Husk at det er fire demobilder som er en del av arkivfilen. Du kan alltid erstatte bildene med dine egne bilder.

Hvordan lage en topplideshow i et gratis Weebly -nettsted?

Laster opp filer i Weebly

Klikk på + -knappen mot "Header Type" -fanen og opprett en ny overskriftstype kalt "Nivo-Bar". Vi ønsker å legge til lysbildefremvisning for Nivo -topptekst med bar -tema i denne overskriftstypen.

Hvordan lage en topplideshow i et gratis Weebly -nettsted?

Oppretter ny overskriftstype

Kopier alt innholdet fra "no-header.html" og lim inn i "Nivo-Bar.html" header type.

Hvordan lage en topplideshow i et gratis Weebly -nettsted?

Ny overskriftstype for lysbildefremvisning

Det er tre deler som skal legges til i “Nivo-Bar.html” -oppsettet-CSS, skript og HTML. Sett inn CSS -en nedenfor i hodeseksjonen i oppsettet.

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

Det skal se ut som nedenfor i redaktøren:

Hvordan lage en topplideshow i et gratis Weebly -nettsted?

Sette inn CSS i overskriftstype

Sett inn skriptene nedenfor rett før nedleggelsen av brødteksten.

<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 skal se ut som nedenfor i redaktøren:

Hvordan lage en topplideshow i et gratis Weebly -nettsted?

Sette inn skript i overskriftstype

Den siste delen er å sette inn HTML-koden nedenfor like over “main-wrap” -delen. Sørg for å erstatte bilde- og hyperkoblingsadressene med dine egne.

<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 skal se ut som nedenfor i redaktøren:

Hvordan lage en topplideshow i et gratis Weebly -nettsted?

Sette inn HTML i overskriftstype

Den endelige koden for “Nivo-Bar.html” -hodetype skal være som nedenfor. Husk at dette er på et gratis Weebly -nettsted, og temaet vi har brukt er "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>

Lagre endringene og publiser nettstedet ditt.

Når du vil ha toppbildefremvisningen på en side, velger du "Nivo-Bar" overskriftstype under "Sider" -fanen for den spesifikke siden.

Hvordan lage en topplideshow i et gratis Weebly -nettsted?

Velge overskriftstype for bestemt side

Lysbildeserien tilbys med 4 forskjellige temaer og 12 bildeovergangseffekter. Temaet kan endres ved å endre CSS -klassen i HTML -koden. I eksemplet ovenfor har vi brukerlinjetema med CSS-klassen “theme-bar”, du kan alternativt bruke “theme-default”, “theme-dark” eller “theme-light”. Du kan også opprette fire forskjellige overskriftstyper og velge ønsket temastil for forskjellige sider.

Som standard vil tilfeldig overgangseffekt bli brukt på hvert bilde. Du kan nevne den spesifikke overgangstypen for hvert bilde ved hjelp av "dataovergang" -funksjonen i HTML. Nedenfor er en eksempel HTML -kode som bruker forskjellige overgangseffekter for hvert bilde 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 lese de komplette tilpasningsmulighetene for å endre overgangseffekt, tema, animasjonshastighet, navigasjonskontroller og legge til miniatyrbilder.

Leter du etter glidebryter for trekkspillstil som vist nedenfor? Lær hvordan du legger til trekkspillglider til ditt Weebly -nettsted.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon