Usare la Nuova Sidebar Rinnovata nei Builder di Funnel e Siti Web
Questo articolo presenta la sidebar destra rinnovata di HITLEAD nel Funnel & Website Builder, mostrando come i suoi tre tab contestuali — General, Styles e Animations — organizzano i controlli degli elementi per un'esperienza di editing più rapida e intuitiva. Scoprirai cosa offre ogni tab, come funzionano i pannelli collassabili e gli stati persistenti, e troverai consigli per sfruttare al meglio l'interfaccia aggiornata.
Cos'è la Sidebar Rinnovata?
La sidebar rinnovata è un importante aggiornamento dell'interfaccia del pannello destro nel Funnel & Website Builder di HITLEAD. Riorganizza i controlli in tre tab principali — General, Styles e Animations — e raggruppa le impostazioni correlate in pannelli collassabili. Insieme, queste modifiche riducono il rumore visivo, ti aiutano a trovare i controlli giusti più rapidamente e mantengono le tue preferenze di layout mentre passi tra elementi e sessioni.
Vantaggi Principali della Sidebar Rinnovata
Questo redesign migliora l'esperienza di editing e le prestazioni generali del builder, rendendo più intuitive le modifiche a stili e layout.
- Accesso più rapido ai controlli: Trova subito le impostazioni di contenuto, stile e animazione tramite tab chiari e dedicati.
- Area di lavoro più pulita: I pannelli collassabili raggruppano le impostazioni correlate, così vedi solo ciò che ti serve.
- Esperienza coerente: La sidebar "ricorda" l'ultimo tab usato e gli stati dei pannelli durante la sessione.
- UI moderna e minimale: Spaziatura, tipografia e icone aggiornate creano un'interfaccia più leggera e meno sovraccarica.
- Usabilità migliorata: Che tu sia alle prime armi o un utente esperto, l'organizzazione intuitiva velocizza il tuo Workflow.
Navigare nei Nuovi Tab della Sidebar Rinnovata
Con la nuova sidebar destra, tutti i controlli degli elementi sono ora organizzati in tre tab chiari e contestuali: General, Styles e Animations. Passare tra questi tab ti permette di accedere rapidamente alle impostazioni di contenuto, alle opzioni di layout e stile, o ai controlli di animazione senza dover scorrere tra pannelli non pertinenti.
1. Tab General
Nel tab General trovi tutto ciò che ti serve per modificare il contenuto principale e il comportamento di un elemento. In cima si trova il campo Element Name, che puoi usare per rinominare i layer (ad esempio, cambiando "Headline" in "Hero Title" per una migliore organizzazione). Subito sotto ci sono le Element Options, che variano in base al tipo di elemento e includono campi di testo per i titoli, input URL per pulsanti e link, alt-text per le immagini ed etichette per i campi dei form. Trovi anche le Element Actions, dove assegni interazioni come On click, Navigate to URL, Submit form o Open lightbox. Più in basso, il tab espone le impostazioni Typography — scegli la famiglia di font, regola dimensione e peso, imposta l'opacità — insieme ai controlli per Line Height, Letter Spacing, trasformazioni del testo (maiuscolo/minuscolo) e persino rotazione o inclinazione. Infine, una serie di Color Controls ti permette di scegliere colori di sfondo, colori del testo, tonalità dei link e tinte delle icone tramite un color picker o un valore hex personalizzato.
2. Tab Styles
Il tab Styles è dove rifinisci il layout e l'aspetto visivo di un elemento su tutti i breakpoint dei dispositivi. A colpo d'occhio puoi regolare Margin (spaziatura esterna) e Padding (spaziatura interna) per controllare come l'elemento si posiziona rispetto agli elementi vicini, e configurare un Border impostando larghezza, stile (solid/dashed/dotted), raggio degli angoli e colore. Le opzioni Align ti permettono di scegliere l'allineamento del testo (left/center/right/justify) o l'allineamento degli oggetti per immagini e altri blocchi. Il pannello Visibility ti consente di mostrare o nascondere l'elemento indipendentemente su desktop, tablet o mobile. Per gli elementi di testo, apri il pannello Text Shadow per aggiungere un'ombra specificando offset orizzontale/verticale, raggio di sfocatura e colore dell'ombra. In fondo, usa il campo Custom Class e il CSS Selector per taggare l'elemento per qualsiasi stile personalizzato o scripting che potresti aggiungere in seguito.
3. Tab Animations
Quando sei pronto a dare vita agli elementi, passa al tab Animations. Il selettore Entrance Animation offre effetti come Fade, Slide (Su/Giù/Sinistra/Destra), Bounce e Zoom per animare gli elementi mentre scorrono nella visualizzazione. Sotto ogni effetto trovi i controlli per impostare la Direction (es. slide da sinistra) e i preset di Speed (light, medium, heavy). Se preferisci aggiungere un movimento continuo, la sezione Infinite Loop ti permette di applicare effetti sottili o di richiamo dell'attenzione come Glow, Rocking o Bounce continuo. E in qualsiasi momento, il pulsante Clear reimposta tutte le animazioni su "None", dandoti una tabula rasa.
IMPORTANTE: Queste panoramiche coprono i controlli più comuni, ma non tutti i parametri sono mostrati. Ogni tipo di elemento porta i propri pannelli e impostazioni specifici (ad esempio, le immagini hanno opzioni di ritaglio/proporzioni, i pulsanti hanno controlli per lo stato hover, i form mostrano le regole di validazione e così via), quindi le opzioni esatte che vedi varieranno in base all'elemento selezionato.
Capire i Pannelli Collassabili
Per migliorare la concentrazione e ridurre le distrazioni, le impostazioni all'interno di ogni tab sono ora raggruppate in pannelli collassabili.
- Puoi aprire o chiudere i singoli pannelli secondo le tue necessità.
- I pannelli mantengono il loro stato durante l'intera sessione di editing.
- Le impostazioni avanzate o meno utilizzate possono restare collassate per una visualizzazione più pulita.
Questo offre un'area di lavoro più organizzata, soprattutto durante build complesse.
Comportamento Persistente di Pannelli e Tab
La sidebar aggiornata migliora l'efficienza con una memoria intelligente basata sulla sessione per tab e pannelli.
- Memoria del tab: L'ultimo tab attivo rimane selezionato quando passi tra elementi.
- Memoria del pannello: Gli stati collassato/espanso persistono mentre navighi tra gli elementi.
- Comportamento con i nuovi elementi: Quando aggiungi un nuovo elemento, tutti i pannelli si aprono di default per un accesso rapido.
Questi miglioramenti eliminano la necessità di riaprire ripetutamente pannelli o tab, risparmiando tempo durante le iterazioni di design.
Miglioramenti UI e Aggiornamenti di Stile
Questo rinnovamento introduce un'estetica minimale e moderna in linea con i più ampi miglioramenti dell'interfaccia di HITLEAD.
- Riduzione del rumore visivo con spaziatura e layout migliorati.
- Stile e spaziatura uniformi tra i controlli.
- Tipografia più pulita e icone semplificate.
- Pattern di design coerenti in tutto il builder.
Tutte queste modifiche mirano a ridurre l'affaticamento mentale e ad aiutare gli utenti a mantenere la concentrazione durante la progettazione di Funnel e pagine web.
Domande Frequenti
D: Questo aggiornamento influirà sui miei Funnel o stili di sito web esistenti?
No. I tuoi design live rimangono invariati. Questo aggiornamento migliora solo l'interfaccia di design.
D: Le mie impostazioni precedenti saranno influenzate?
No. Cambia solo il layout dell'interfaccia della sidebar; le impostazioni degli elementi rimangono intatte.
D: La nuova sidebar influisce sulle prestazioni?
Sì, positivamente. Il layout è ottimizzato per una navigazione più fluida e regolazioni più rapide.
D: Ci sono nuovi controlli di design in questo aggiornamento?
No. Questa versione iniziale si concentra sui miglioramenti UI/UX; nuovi controlli sono previsti in seguito.
Prossimi Passi
- Inizia a modificare gli elementi usando la nuova struttura a tab per familiarizzare con il flusso.
- Collassa i pannelli che usi meno frequentemente per creare un'area di lavoro più pulita.
- Sfrutta gli stati persistenti per velocizzare le tue sessioni di design.
Articoli Correlati
Questo articolo è stato utile?