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

Come aggiungere il cursore dell’immagine della fisarmonica nel sito Weebly?

27

Weebly offre un elemento di presentazione di immagini tradizionale per aggiungere slider al tuo sito. Sfortunatamente, questo non è affatto più vicino alle moderne presentazioni offerte da fornitori o plug-in di terze parti. Puoi creare splendidi cursori personalizzati in stile fisarmonica realizzati esclusivamente con CSS. In questo articolo, spiegheremo come creare un cursore di immagine a fisarmonica CSS nel sito Weebly

Slider immagine fisarmonica Weebly

Di seguito è riportato come apparirà l’elegante slider sul tuo sito Weebly.

Come aggiungere il cursore dell'immagine della fisarmonica nel sito Weebly?

CSS Fisarmonica Slider

Come aggiungere il cursore dell’immagine della fisarmonica in Weebly?

Ora che hai visto lo slider e se ti sembra buono, ecco un’istruzione passo passo su come aggiungere lo slider al tuo sito. Il processo consiste in tre semplici passaggi:

  • Caricamento immagini per slider
  • Aggiunta di codice CSS a una pagina oa livello di sito
  • Aggiunta di codice HTML utilizzando l’elemento del codice di incorporamento

Passaggio 1 – Caricamento di immagini per Accordion Slider

Prepara tutte le tue immagini con la dimensione richiesta. In questo esempio abbiamo usato immagini con larghezza = 640 px. Carica tutte le immagini sul tuo sito in "Tema > Modifica HTML/CSS > Risorse > Carica file/i…".

Come aggiungere il cursore dell'immagine della fisarmonica nel sito Weebly?

Carica immagini nell’editor di codice Weebly

Devi conservare gli URL delle immagini caricate che devono essere utilizzate nel passaggio 3. L’URL di un’immagine caricata sarà come:

https://your-site-name.com/files/theme/image-name.jpg

In alternativa, puoi fare clic con il pulsante destro del mouse sull’immagine e ottenere l’URL che dovrebbe apparire come di seguito:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/926370416842107469/files/image-name.png

Come aggiungere il cursore dell'immagine della fisarmonica nel sito Weebly?

Ottieni l’URL dell’immagine caricata

Dopo aver caricato tutte le tue immagini, fai clic sul pulsante "Salva" e fornisci un nome personalizzato per il tuo tema.

Passaggio 2: aggiunta del codice CSS

Se desideri aggiungere il dispositivo di scorrimento solo su pagine particolari, aggiungi il codice CSS sottostante nella sezione "Pagine > Scegli la pagina > Impostazioni SEO > Codice intestazione" delle pagine richieste.

Come aggiungere il cursore dell'immagine della fisarmonica nel sito Weebly?

Aggiungi codice intestazione nella pagina

Nel caso in cui desideri aggiungere il dispositivo di scorrimento su più pagine, ti consigliamo di aggiungerlo nel CSS principale in "Tema > Modifica HTML / CSS > Stile > main.less". Puoi anche aggiungere il codice nella sezione "Impostazioni > SEO > Codice intestazione".

Come aggiungere il cursore dell'immagine della fisarmonica nel sito Weebly?

Aggiungi codice intestazione a livello di sito Weebly

<style type="text/css"> .accordion_slider { width: 805px; height: 320px; overflow: hidden; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordion_slider ul { width: 2000px; } .accordion_slider li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordion_slider ul:hover li {width: 40px;} .accordion_slider ul li:hover {width: 640px;} .accordion_slider li img { display: block; max-width: 640px !important; } .image_box { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_box a { display: block; color: #fff !important; text-decoration: none; text-align: left; padding: 20px; font-size: 16px; } </style>

Puoi personalizzare uno qualsiasi degli stili secondo le tue necessità.

Passaggio 3 – Aggiunta del codice HTML

L’ultimo passaggio consiste nell’aggiungere il codice HTML sottostante del dispositivo di scorrimento trascinando e rilasciando un elemento del codice di incorporamento nell’area del contenuto di una pagina richiesta. Non dimenticare di sostituire i collegamenti dell’immagine con i tuoi collegamenti dal passaggio 1.

<div class="accordion_slider"> <ul> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a> </div> <img src="https://img.webnots.com/2015/07/Image-1.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-2.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a> </div> <img src="https://img.webnots.com/2015/07/Image-3.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a> </div> <img src="https://img.webnots.com/2015/07/Image-4.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-5.jpg"/> </li> </ul> </div>

Nota: dopo aver aggiunto il codice HTML, potresti vedere le immagini elencate una sotto l’altra all’interno dell’editor Weebly. Questo va bene perché gli effetti CSS non vengono applicati all’interno della pagina, pubblica la pagina per vedere il cursore effettivo.

Fonte di registrazione: www.webnots.com
Lascia una risposta

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