Compatibilità:

WebSite X5 Evo e Pro

Quando si crea una pagina web si è sempre alla ricerca di modi alternativi per attirare l'attenzione degli utenti su informazioni di particolare rilevanza e, magari, aggiungere un tocco di dinamicità così da rendere il tutto più interessante e interattivo. 


Un modo molto efficace per farlo è creare dei box animati che mettano in evidenza il testo inserendolo in riquadri e sfruttando effetti associati al passaggio del mouse. Questo tipo di elemento grafico è estremamente versatile: per esempio, puoi usarlo per presentare le tue competenze in una bio, per riportare le recensioni degli utenti oppure per elencare i benefici garantiti dal tuo prodotto/servizio. 


Con l'Oggetto Opzionale Animated Box creare box animati è molto semplice: guarda alcuni esempi di ciò che puoi realizzare nella pagina di Anteprima e poi lascia correre la tua fantasia.    



Come si presenta un box animato

I box animati che puoi realizzare con l'Oggetto Animated box prevedono una struttura fissa che gioca sui seguenti elementi:

  • sfondo: è il contenitore che definisce la forma del box e che racchiude tutti i contenuti;
  • cerchio 1: è un elemento grafico arrotondato, visibile subito all'apertura dell'Oggetto;
  • cerchio 2: è un secondo elemento grafico arrotondato visibile solo su passaggio del mouse.


All'interno del box possono trovare posto: un'immagine, un titolo, un breve testo di descrizione e un pulsante completo di link. A questi, ovviamente, si aggiungono gli elementi arrotondati che creano l'animazione: in pratica, su passaggio del mouse, il cerchio 1 si espande fino a sostituire lo sfondo; nel frattempo, il cerchio 2 entra e va a prendere il posto del cerchio 1. L'effetto è evidente soprattutto se si impiegano colori diversi per lo sfondo e per i due elementi a forma di cerchio. 


Come inserire i contenuti del box animato

Ora che ti è chiaro come funziona l'Oggetto Animated Box, vediamo come si crea un box animato. Partiamo dall'inserimento dei contenuti:

  • Fai doppio click sull’Oggetto Animated Box inserito per accedere alla finestra con tutte le opzioni.
  • Rimani nella sezione Contenuto e utilizza il menu a tendina per selezionare l'elemento su cui vuoi lavorare. Gli elementi disponibili, con le relative opzioni di personalizzazione, sono:
    • Immagine: se presente viene visualizzata nella parte superiore del box. Dopo aver importato il File Immagine da utilizzare, puoi impostare le Dimensioni, l'Allineamento (a sinistra, al centro o a destra) e il Margine esterno (ovvero lo spazio tra l'immagine e il bordo del box). 
    • Titolo: digita il testo e poi procedi alla formattazione consueta. Anche in questo caso puoi definire l'Allineamento orizzontale e il Margine esterno; in più, puoi definire il colore che il titolo deve avere e quello che deve assumere su passaggio del mouse.   
    • Descrizione: per questo testo hai le stesse opzioni di personalizzazione già viste per il titolo, ad eccezione di quelle relative al tipo e alle dimensioni del carattere. La formattazione della descrizione, infatti, viene automaticamente impostata in base a quella del titolo. 
    • Pulsante: inizia con il digitare il Testo dell'etichetta (la CTA o Call To Action) e con il cliccare sul pulsante in modo da richiamare la finestra per impostare il Collegamento. Fatto questo puoi occuparti dell'aspetto del pulsante definendo formattazioni, Allineamento orizzontale, Margini esterni e interni, Smusso degli angoli, Colori del testo  e dello sfondo sia per lo stato rilasciato che per lo stato su passaggio del mouse.    


#tip - Se vuoi che nel tuo box animato non sia presente uno o più degli elementi disponibili è sufficiente che tu non ne definisca il contenuto. Per esempio se non inserisci un testo per il Pulsante, nel box non ci sarà alcun pulsante né collegamento attivo. 

   

Come definire lo stile del box animato

Oltre all'aspetto dei singoli contenuti puoi agire sullo stile del box in modo da adattarlo al layout complessivo del tuo sito:

  • Apri la sezione Stile e inizia con il definire il Colore dello sfondo, del cerchio 1 e del cerchio 2: come detto l'animazione prevede che vengano usati tre colori diversi ma continua a funzionare altrettanto bene anche se "elimini" un cerchio rendendolo trasparente. 
  • Definisci ora la Posizione dei cerchi: innanzi tutto puoi posizionare il cerchio 1 che può stare in alto o in basso, a sinistra, al centro o a destra. Il cerchio 2 eredita dal cerchio 1 la posizione in alto o in basso ma tu ne puoi definire la posizione a sinistra, al centro o destra sia per la partenza che per l'arrivo.
  • Imposta il Bordo del box: puoi definire il suo spessore, il colore anche su passaggio del mouse e il fattore di smusso per gli angoli.
  • Infine, decidi se applicare o meno un'ombra a tutto il box.


#tip - Come vedi, "accendendo" o "spegnendo" gli elementi e lavorando su colori e posizioni, le varianti ottenibili sono veramente tante. Sperimentando troverai una soluzione originale e perfetta per ogni occasione. 


Impaziente di usarlo nelle pagine del tuo sito? Installa subito l’Oggetto Animated Box


Non hai Crediti a sufficienza per acquistare questo Oggetto? Vedi tutti i pacchetti di Crediti