TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare una presentazione di intestazione nel sito Weebly gratuito?

39

La presentazione dell’intestazione è una funzionalità meravigliosa che conferisce un aspetto professionale al tuo sito. Questa è una funzionalità professionale in Weebly ed è disponibile solo per i temi non responsive. Gli utenti gratuiti possono anche utilizzare metodi alternativi per modificare HTML/CSS e raggiungere questo obiettivo. In questo articolo spieghiamo come aggiungere una presentazione di intestazione Nivo nel tuo sito Weebly gratuito.

Nivo è un popolare slider jQuery e abbiamo un widget gratuito per aggiungere una presentazione nell’area del contenuto. Qui utilizzeremo lo stesso widget di scorrimento Nivo con piccole modifiche per aggiungerlo nell’area dell’intestazione dei temi Weebly reattivi. Puoi visualizzare i quattro diversi stili di demo facendo clic sui pulsanti seguenti:

In questo esempio, abbiamo usato quattro immagini. La seconda immagine (up.jpg) è collegata a una pagina web e ha una semplice didascalia. La quarta immagine (nemo.jpg) ha una didascalia di testo con un collegamento ipertestuale.

Passaggio 1 – Pronto con le tue immagini

Le demo di cui sopra utilizzano il tema Weebly "Ace Soccer – Birdseye" e le immagini vengono utilizzate con la dimensione 618 x 246 px. Si consiglia di utilizzare immagini a risoluzione più elevata con un rapporto larghezza e altezza simile per una migliore qualità.

Passaggio 2: scarica e carica i file di scorrimento

Scarica tutti i file di scorrimento richiesti. Accedi al tuo sito Weebly e vai alla sezione "Tema > Modifica HTML / CSS > Risorse". Crea una nuova cartella chiamata "nivo".

Come creare una presentazione di intestazione nel sito Weebly gratuito?

Creazione di una nuova cartella nell’editor di codice Weebly

Carica tutti i file di scorrimento nella cartella "nivo". Ricorda che ci sono quattro immagini demo che fanno parte del file di archivio, puoi sempre sostituire le immagini con le tue immagini.

Come creare una presentazione di intestazione nel sito Weebly gratuito?

Caricamento di file in Weebly

Fare clic sul pulsante + nella scheda "Tipo di intestazione" e creare un nuovo tipo di intestazione chiamato "Nivo-Bar". Vogliamo aggiungere la presentazione dell’intestazione Nivo con il tema della barra in questo tipo di intestazione.

Come creare una presentazione di intestazione nel sito Weebly gratuito?

Creazione di un nuovo tipo di intestazione

Copia tutto il contenuto da "no-header.html" e incollalo all’interno del tipo di intestazione "Nivo-Bar.html".

Come creare una presentazione di intestazione nel sito Weebly gratuito?

Nuovo tipo di intestazione per la presentazione

Ci sono tre parti da aggiungere nel layout "Nivo-Bar.html": CSS, Script e HTML. Inserisci il CSS sottostante all’interno della sezione head del layout.

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

Dovrebbe apparire come sotto nell’editor:

Come creare una presentazione di intestazione nel sito Weebly gratuito?

Inserimento di CSS nel tipo di intestazione

Inserisci gli script sottostanti appena prima della chiusura del tag body.

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

Dovrebbe apparire come sotto nell’editor:

Come creare una presentazione di intestazione nel sito Weebly gratuito?

Inserimento di script nel tipo di intestazione

La parte finale consiste nell’inserire il codice HTML sottostante appena sopra la sezione "main-wrap". Assicurati di sostituire l’immagine e gli URL del collegamento ipertestuale con i tuoi.

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

Dovrebbe apparire come sotto nell’editor:

Come creare una presentazione di intestazione nel sito Weebly gratuito?

Inserimento di HTML nel tipo di intestazione

Il codice finale del tipo di intestazione "Nivo-Bar.html" dovrebbe essere come di seguito. Ricorda che questo è su un sito Weebly gratuito e il tema che abbiamo usato è "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>

Salva le modifiche e pubblica il tuo sito.

Quando desideri la presentazione dell’intestazione su una pagina, scegli il tipo di intestazione "Nivo-Bar" nella scheda "Pagine" per quella pagina specifica.

Come creare una presentazione di intestazione nel sito Weebly gratuito?

Scelta del tipo di intestazione per una pagina specifica

La presentazione è offerta con 4 temi diversi e 12 effetti di transizione dell’immagine. Il tema può essere cambiato cambiando la classe CSS nel codice HTML. Nell’esempio sopra, abbiamo il tema della barra utente con la classe CSS "theme-bar", puoi in alternativa usare "theme-default", "theme-dark" o "theme-light". Puoi anche creare quattro diversi tipi di intestazione e scegliere lo stile del tema richiesto per le diverse pagine.

Per impostazione predefinita, l’effetto di transizione casuale verrà applicato a ciascuna immagine. Puoi menzionare il tipo di transizione specifico per ogni immagine utilizzando la funzione "transizione dati" nell’HTML. Di seguito è riportato un esempio di codice HTML che utilizza effetti di transizione diversi per ogni immagine con tema predefinito.

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

Puoi leggere le opzioni di personalizzazione complete per modificare l’effetto di transizione, il tema, la velocità dell’animazione, i controlli di navigazione e l’aggiunta di miniature.

Cerchi un dispositivo di scorrimento in stile fisarmonica come mostrato di seguito? Scopri come aggiungere un dispositivo di scorrimento a fisarmonica al tuo sito Weebly.

Fonte di registrazione: www.webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More