Benvenuti alla Sezione 2 del Corso di Formazione per Principianti di Website World.
Al termine di questa sezione, sarai in grado di:
- Crea un banner animato
- Aggiungi testo in sovrapposizione a un banner animato
Creating an Animated Banner
Per creare un banner animato, è necessario innanzitutto avere almeno due banner statici. Questo può essere fatto da un grafico, oppure, ai fini di questo corso, è possibile crearne uno gratuitamente con Canva. Le dimensioni del banner varieranno a seconda del template del sito web scelto. Il sito di esempio che stiamo realizzando per questo corso utilizza il template Decor Theme, che ha una dimensione di 1200x480 pixel.
Ecco i banner che abbiamo utilizzato, che anche voi potete scaricare e usare se lo desiderate (cliccate con il tasto destro del mouse e selezionate "Salva con nome" su ciascun link):
Secondo banner per la maglietta
Seleziona il pulsante Progettazione, quindi scegli l'opzione Immagine banner/Presentazione. Noterai che sono già presenti quattro banner predefiniti: un banner principale e tre banner animati. Tutti e quattro sono attualmente visualizzati con uno schema di scorrimento, che mostra ciascun banner per un numero predefinito di sezioni prima di passare al successivo.
Per questa sezione del corso, avremo solo tre banner, quindi possiamo rimuovere uno dei banner sotto il titolo animato cliccando sulla casella con l'icona rossa, dopodiché possiamo salvare il lavoro svolto finora cliccando sul pulsante Pubblica.
Ora puoi sostituire i tre banner predefiniti rimanenti con tre banner personalizzati. Per farlo, clicca sull'icona dell'immagine sotto ogni banner. Si aprirà la procedura guidata per le immagini, dove potrai nuovamente selezionare e caricare l'immagine dal tuo dispositivo. Ripeti l'operazione per tutti e tre i banner.
Scorri ulteriormente la pagina e troverai una casella in cui puoi modificare gli effetti predefiniti del banner animato. Qui puoi scegliere lo stile e la velocità dell'animazione, la velocità di transizione tra le diapositive, la posizione di visualizzazione del banner e la posizione di eventuali didascalie. Per questo corso, selezioneremo l'opzione "Visualizzazione didascalia al centro", lasciando le altre opzioni predefinite.
Aggiungere didascalie ai banner animati
Scorri di nuovo la pagina verso l'alto per visualizzare tutti e tre i banner. Accanto a ciascun banner troverai tre caselle: URL del link, Didascalia e Invito all'azione. È qui che devi inserire il testo da visualizzare su ogni singolo banner.
L'URL del link che utilizzeremo rimarrà lo stesso per ogni banner. Puoi trovare il link corretto cliccando sul quadrato blu con tre puntini. Si aprirà la procedura guidata per gli URL, dove potrai trovare una pagina sul tuo sito di prova oppure copiare e incollare un URL nella casella in basso. Per questo esempio, cliccheremo sull'opzione "Collega a una pagina di questo sito" e sceglieremo la pagina "Shop".
L'URL del link verrà quindi visualizzato nella casella accanto al banner. Ripeti questo passaggio per i restanti due banner.
Successivamente aggiungeremo una didascalia e una call to action per tutti e tre i banner. Una didascalia è una breve e accattivante informazione su un elemento del tuo sito web o della tua attività. Una call to action indica al visitatore del tuo sito web cosa fare in seguito. Ecco cosa abbiamo aggiunto:
Notate che nell'anteprima desktop, potete vedere il testo sovrapposto nel riquadro grigio chiaro e la call to action in un riquadro grigio scuro più piccolo al suo interno. Ora si tratta di un link cliccabile per i visitatori del vostro sito web.
Hai completato la Sezione 2 del Corso per Principianti. Ottimo lavoro! È ora di passare alla sezione successiva: la Sezione 3 per Principianti.
