La piattaforma SuperSite di Aruba Business consente la creazione e la personalizzazione di siti web attraverso un’interfaccia visuale progettata per semplificare la gestione dei contenuti. L’ambiente di lavoro è basato su una logica Drag and Drop, che permette di inserire e organizzare elementi grafici e funzionali direttamente all’interno della pagina senza intervenire sul codice.
Ogni pagina del sito può essere composta combinando diversi componenti preconfigurati, pensati per coprire le esigenze più comuni nella realizzazione di un progetto web: testi, immagini, pulsanti, moduli di contatto, elementi social e funzionalità avanzate come blog o e-commerce. La gestione corretta di questi elementi consente di costruire un layout coerente, migliorare la leggibilità dei contenuti e rendere la navigazione più intuitiva per i visitatori.
Inserimento di nuovi componenti
L’inserimento dei componenti avviene attraverso il pannello dedicato disponibile nell’editor di progettazione. Da questo pannello è possibile accedere alla libreria completa degli elementi disponibili e selezionare quelli più adatti alla struttura della pagina. L’aggiunta di nuovi elementi è il primo passo per dare forma ai contenuti del sito. La procedura è immediata e centralizzata in un unico pannello di controllo.
Per aggiungere un nuovo elemento Individuare e cliccare sull'icona dei componenti (generalmente rappresentata da un simbolo + o da un quadrato) situata nella barra degli strumenti in alto a sinistra. All’interno del pannello vengono visualizzate diverse categorie che raggruppano i componenti in base alla loro funzione.
- Testo
- Media
- Forme
- Menù
- Pulsanti
- Contatti
- Social
- E-commerce
- Blog
- Booking
- Multilingua
- Eventi
- Immobiliare
- Utility
Una volta selezionato il componente, utilizzare la funzione di Drag and Drop per trascinarlo fisicamente nell'area di lavoro, posizionandolo nel punto esatto della pagina in cui deve comparire.
Modifica delle dimensioni e del layout
La configurazione delle dimensioni dei componenti rappresenta uno degli aspetti principali nella costruzione dell’impaginazione di una pagina. SuperSite mette a disposizione diversi strumenti per adattare larghezza e altezza degli elementi in modo preciso.
Ridimensionamento manuale
Dopo aver selezionato un componente (ad esempio un’immagine) con il tasto sinistro del mouse, lungo i bordi dell’elemento vengono visualizzati alcuni punti di ancoraggio. Trascinando questi punti è possibile modificare le dimensioni dell’oggetto direttamente nell’area di lavoro.
L’azione sui lati permette di intervenire su larghezza o altezza singolarmente, mentre l’utilizzo dei vertici consente di modificare entrambe le dimensioni contemporaneamente. Durante il ridimensionamento, l’editor mostra in tempo reale i valori in pixel relativi alla nuova dimensione del componente.
Impostazioni precise
Nel caso in cui sia necessario impostare dimensioni specifiche, è possibile aprire il menu contestuale cliccando con il tasto destro sul componente e selezionando la voce Dimensioni. Questa opzione permette di inserire manualmente i valori numerici di larghezza e altezza, garantendo una configurazione più precisa.
Funzionalità Larghezza 100%: Ottimizzazione Responsive
La funzione Larghezza 100% consente al componente di adattarsi automaticamente alla larghezza disponibile all’interno della pagina. Quando attiva, l’elemento non mantiene una dimensione fissa ma si espande o si riduce in base alla dimensione dello schermo utilizzato dal visitatore.
Questa impostazione è particolarmente utile per realizzare layout responsive, ovvero in grado di adattarsi correttamente a monitor desktop, tablet e smartphone.
Animazione degli elementi testuali
L’editor di SuperSite consente di applicare effetti di animazione ai componenti di testo, introducendo elementi dinamici che contribuiscono a rendere la pagina più coinvolgente.
La configurazione dell’animazione avviene selezionando il componente di testo e aprendo la funzione Modifica testo, dalla quale è possibile accedere all’icona Animazione.
All’interno del pannello di configurazione sono disponibili diverse impostazioni che permettono di definire il comportamento dell’effetto. Agire sui seguenti parametri:
- Attivazione: Cliccare su Abilita animazioni testo.
- Unità di animazione: Scegliere se applicare l'effetto a ogni singola parola o a ogni carattere.
- Scelta dell’effetto: Selezionare l'animazione dal menù a tendina (es. zoom o rimbalzo).
- Parametri Temporali: Configurare la durata del movimento, l'intervallo tra i cicli e la partenza (ovvero il ritardo o il punto di innesco dell'effetto).
Gli effetti vengono visualizzati direttamente nell’editor, permettendo di verificare immediatamente il risultato. In qualsiasi momento l’animazione può essere disattivata rimuovendo l’opzione di abilitazione.
Duplicazione e spostamento dei componenti
Durante la progettazione di una pagina può risultare utile replicare elementi già configurati per mantenere uno stile grafico coerente. La funzione di copia consente di duplicare rapidamente un componente mantenendo tutte le impostazioni originali, incluse dimensioni, formattazione e contenuti.
La procedura prevede la selezione del componente tramite clic con il tasto destro del mouse e la scelta dell’opzione Copia componente. Successivamente è possibile spostarsi nel punto della pagina in cui si desidera inserire la copia e utilizzare il comando di incolla tramite il menu contestuale dell’area di lavoro.
Questa operazione può essere eseguita anche tra pagine differenti dello stesso sito, facilitando la riutilizzazione di elementi grafici o strutturali.
Rimozione di un componente
L’eliminazione di componenti non più necessari consente di mantenere la struttura della pagina ordinata e funzionale. L’editor mette a disposizione diversi metodi per rimuovere rapidamente un elemento.
Un primo metodo consiste nel selezionare il componente e utilizzare Icona Elimina, cliccare sul componente con il tasto sinistro per far apparire la barra degli strumenti dedicata, selezionare l'icona dell'eliminazione e cliccare su Conferma nel messaggio di verifica per prevenire cancellazioni accidentali.
In alternativa, dopo aver selezionato il componente, è possibile premere il tasto Canc (o Delete) sulla tastiera.
Un ulteriore metodo prevede l’utilizzo del menu contestuale, accessibile tramite clic con il tasto destro del mouse sull’elemento e selezione della voce Elimina.