Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
Sergio, Bibliovillapizzone
Un carosello ti permette di:
Cosa promuovere
Per creare le immagini che scorreranno nel carosello, bisogna:
Per usare immagini non coperte da diritti d'autore, si possono utilizzare questi siti:
www.unsplash.com
www.pixabay.com
https://digitalcollections.nypl.org/
1
Per modificare le immagini puoi utilizzare questi due strumenti, tra i più semplici e gratuiti:
Oppure, se puoi continuare ad utilizzare gli strumenti che conosci già per modificare le immagini. L'importante è che siano tutte delle stesse dimensioni in pixel.
2
Seleziona le dimensioni personalizzate e imposta i pixel più adatti per il tuo progetto. (Es. 852X210 px= 12 spazi di widget)
Posizionati nella sezione caricamenti, carica la tua immagine e inseriscila, trascinandola a destra
Ingrandisci o riduci l'immagine, trascinando i bordi
Inserisci una casella di testo, se ti serve, e modifica carattere, colore ecc..
Dopo aver aperto con gimp l'immagine che vuoi utilizzare, copiala
e incollala
come un nuovo livello
nel banner che stai creando
3
Per maggiori indicazioni e strade alternative, consulta la guida di gimp.
Carica le immagini su DNG, utilizzando la procedura consueta
Per ritrovare più rapidamente le immagini, ti consiglio di creare una sottocartella "Banner"
I passaggi per far funzionare un carosello di immagini sono:
1
2
Ritrova il tuo banner
Copia il suo indirizzo url
Clicca con il tasto destro del mouse sull'immagine che ti interessa e copia l'indirizzo
Trova l'immagine banner che hai caricato nella sottocartella "Banner" dalla sezione "File&immagini" oppure "simulando" di caricare un'immagine dalla sezione testo della pagina, come in questa immagine
Inserisci i link delle immagini nell'hmtl dov'è indicato
Per ogni <img src="..."> inserisci il link di una sola immagine
3
1) inserisci i link della pagina che vuoi associare ad ogni immagine nello spazio indicato da <a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------"> oppure elimina l'intera riga
2) inserisci l'eventuale testo alternativo nello spazio indicat dopo l'attributo alt="..."
3) elimina tutte le sezioni che non ti interessano. Per sezione si intende questo:
<div class="item">
<a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------">
<img src="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'IMMAGINE--------" alt="---INSERISCI QUI IL TESTO ALTERNATIVO----"></img>
</a>
</div>
4
La prima volta salva la pagina bozza che hai creato e visualizza le bozze per capire se funziona tutto
Se funziona tutto, allora crea un widget html nella pagina che ti interessa, copia il codice html della bozza e salva e pubblica.
In caso contrario, vediamo insieme gli errori più comuni:
Questo problema è dovuto alla mancanza del tag <div class="item active">, probabilmente sostituito nella prima immagine da <div class="item">
Se il carosello, ti appare così:
allora quasi sicuramente, manca un tag </div>, tra due sezioni di immagini:
Qui manca un tag </div>
<div class="item">
<a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------">
<img src="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'IMMAGINE--------" alt="---INSERISCI QUI IL TESTO ALTERNATIVO----"></img>
</a>
<div class="item">
<a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------">
<img src="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'IMMAGINE--------" alt="---INSERISCI QUI IL TESTO ALTERNATIVO----"></img>
</a>
</div>
Se vedi le immagini tutte sovrapposte, probabilmente manca il tag <div class="carousel-inner"> , che dovrebber essere all'inizio dell'html del carosello, prima della sezione della prima immagine:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------">
<img src="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'IMMAGINE--------" alt="---INSERISCI QUI IL TESTO ALTERNATIVO-----"></img>
</a>
</div>
L'errore è dovuto alla cancellazione del tag </div>, dopo la sezione dell'ultima immagine.
La conclusione corretta deve essere questa con 2 </div>
<div class="item">
<a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------">
<img src="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'IMMAGINE--------" alt="---INSERISCI QUI IL TESTO ALTERNATIVO----"></img>
</a>
</div>
</div>