Panoramica dei Siti Web
Video YouTube: Sites Overview
HITLEAD — 98.5K iscritti
Pronto a creare il tuo sito HITLEAD? In questo articolo ti guidiamo attraverso il Site Builder, le Impostazioni e molto altro ancora.
INDICE DEI CONTENUTI
- Cosa sono i Siti?
- Devo usare Funnel o Siti Web?
- Iniziare con i Template del Sito
- Iniziare con il Funnel AI
- Panoramica del Site Builder
- Aggiungere un Nuovo Elemento
- Padding e Margin
- Spostare un Elemento
- Riordinare le Colonne (Passi Rapidi))
- Clonare un Elemento
- Impostazioni Pop Up
- SEO Meta Data
- Anteprima del Codice Personalizzato
- Modalità 2 Colonne vs Modalità Auto
- Annulla/Ripristina
- Versioni, Anteprima, Salva e Pubblica
- Modificare la Vista Mobile del tuo Sito
- Modalità Mobile
- Modificare la Visibilità degli Oggetti per Mobile/Desktop
- Impostazioni di Responsività Mobile
- Impostazioni Sito e Pubblicazione
- Collegare un Prodotto alla Pagina del Sito (Order Form))
- Statistiche del Sito
- Vendite del Sito
- Impostazioni del Sito
- Impostazioni di Pubblicazione/Pagina
- Domande Frequenti
Cosa sono i Siti?
I Siti ti permettono di creare siti web rivolti ai clienti all'interno di HITLEAD. Crea la homepage perfetta per la tua attività, realizza landing page per acquisire più lead. Le possibilità sono infinite.
In HITLEAD abbiamo due tipi di Site Builder; pur essendo simili, hanno funzionalità diverse. Vediamo insieme ciascun tipo di Sito.
- Funnel: In generale, i Funnel seguono una sequenza di pagine molto diretta, ed è per questo che offriamo lo split testing solo sui Funnel. Un Funnel è una serie di pagine web step-by-step, generalmente usata per uno scopo specifico come acquisire lead o prenotare appuntamenti.
- Siti Web: Uno spazio per creare pagine web per qualsiasi utilizzo, come la homepage della tua attività. Di norma non c'è un percorso di progressione attraverso cui vengono guidati i Contatti, motivo per cui non offriamo lo split testing sui siti web.
Sebbene i siti web possano essere usati per molte delle stesse finalità dei Funnel, presentano alcune piccole differenze.
Devo usare Funnel o Siti Web?
Salvo poche eccezioni, Funnel e Siti Web sono equivalenti. Entrambi ospitano un gruppo di pagine web e possono essere usati per vari scopi. Ciò che conta è se vuoi usare la funzione di Split Testing su una pagina web e come appare l'interfaccia delle visualizzazioni di pagina.
Le principali differenze:
- Split Testing nei Funnel - Puoi effettuare lo split test solo sui Funnel. Consiste nel creare una variante di una pagina per vedere quale funziona meglio.
- eCommerce (Online Store) - Solo i Siti Web possono creare e utilizzare la funzionalità eCommerce (Online Store).
- Interfaccia Visualizzazione Pagina - L'interfaccia è diversa a seconda che tu stia usando la vista Funnel o Siti Web.
Iniziare con i Template del Sito
Quando crei un nuovo sito, puoi scegliere tra centinaia di template. Dopo aver selezionato un template, puoi modificarne qualsiasi parte. Ti invitiamo a esplorarli tutti!
Dopo aver selezionato il template, accedi a una delle pagine cliccando "Edit" per aprire il site builder e modificare la pagina specifica.
Iniziare con il Funnel AI
Quando crei un nuovo Funnel, puoi usare la funzionalità di creazione tramite AI. Dopo aver selezionato Funnel AI, scegli il dominio/settore più adatto alle tue esigenze.
Nota: Dopo 5 generazioni gratuite, verrà addebitato $0.99.
Dopo aver proceduto, seleziona le tue preferenze di design e di contenuto. Lascia all'AI qualche momento e il tuo template sarà pronto!
Panoramica del Site Builder
La stessa funzionalità e gerarchia di elementi è presente sia nel Funnel che nel Site Builder.
Barra di Navigazione del Site Builder
Si trova nella parte superiore del builder e ti permette di spostarti tra le varie funzionalità. Esamineremo ciascuna scheda di seguito.
Aggiungere un Nuovo Elemento
Righe e colonne sono i mattoni fondamentali del tuo sito. Per aggiungere un elemento come un'immagine, hai bisogno di almeno una sezione, una riga e una colonna.
Nota: Gli elementi del Page Builder ora usano uno stile predefinito aggiornato (tipografia, immagini segnaposto e colori rinnovati) così le nuove pagine appaiono più moderne di default. Puoi sovrascrivere gli stili usando le impostazioni nella barra laterale destra, il Color Picker o il tuo Brand Board.
In alto a destra nell'editor del sito, seleziona "Add Element" per vedere cosa puoi aggiungere.
Per trovare gli elementi più velocemente, usa la Quick Add Search. Puoi cercare con parole chiave comuni anche se non conosci il nome esatto dell'elemento. Per esempio: "headline" o "title" per trovare Heading, "booking" o "schedule" per trovare Calendar, oppure "slider" per trovare Image Slider.
Dopo aver trovato l'elemento desiderato, clicca e trascinalo nell'area che preferisci.
Quando scegli immagini o file durante la modifica di Funnel o Siti, il media picker si apre in una finestra modale e supporta il caricamento al volo tramite drag-and-drop.
Comprendere la Gerarchia degli Elementi
Ogni elemento su una pagina web richiede una sezione, che deve contenere almeno una riga, che deve contenere almeno una colonna. Solo allora puoi aggiungere un elemento dalla barra + Add Element.
Dalla più grande alla più piccola: Sezioni (Verde) > Righe (Blu) > Colonne (Rosa) > Elementi (Arancione)
Nota: La gerarchia esiste ancora (Sezioni → Righe → Colonne → Elementi), ma con Enhanced Drag & Drop il builder può creare automaticamente la struttura quando trascini elementi sul canvas.
- Non puoi aggiungere una sezione dentro una sezione, né una riga dentro una riga, né una colonna dentro una colonna, né un elemento dentro un elemento.
- Puoi aggiungere più righe in una sezione, più colonne in una riga, più elementi in una colonna.
- Devi avere almeno una sezione, una riga e una colonna per poter aggiungere un elemento.
Impostazioni Elemento
Per modificare una sezione, riga, colonna o elemento, passa il cursore sull'elemento e clicca sull'icona a ingranaggio che appare. Cliccando su qualsiasi parte dell'elemento si aprirà automaticamente il menu delle impostazioni sulla destra.
All'interno di queste impostazioni puoi aggiungere padding, margin, cambiare la visibilità e molto altro. Nota anche le schede "General" e "Advanced" che offrono ulteriori impostazioni.
Padding e Margin
Quando vuoi creare spazio tra elementi, regola il Padding o il Margin nelle impostazioni dell'oggetto.
Padding - Aggiunge spazio ALL'INTERNO di una sezione, riga, colonna o elemento, dall'esterno verso l'interno.
Margin - Aggiunge distanza ALL'ESTERNO di una sezione, riga, colonna o elemento. Crea spazio tra gli altri oggetti.
Spostare un Elemento
Puoi spostare un oggetto usando le frecce su o giù che appaiono passando il cursore sull'oggetto. Puoi anche cliccare e tenere premuta l'icona di spostamento per trascinarlo in una nuova posizione.
- Opzione 1: Frecce Su/Giù spostano l'oggetto verso l'alto o verso il basso in base agli elementi vicini.
- Opzione 2: Drag-and-drop: afferra l'oggetto da qualsiasi punto e trascinalo in una nuova posizione, poi rilascia.
Quando Enhanced Drag & Drop è abilitato in Agency View → Labs, puoi spostare gli elementi trascinandoli da qualsiasi punto.
Riordinare le Colonne (Passi Rapidi)
1. Passa il cursore sulla riga per mostrare i bordi delle colonne e le zone di rilascio. 2. Trascina la colonna a sinistra o a destra all'interno della stessa riga. 3. Rilascia quando l'indicatore di posizionamento mostra la nuova posizione. 4. Controlla le viste tablet/mobile per verificare che l'ordine responsive sia ancora corretto. Nota: Il riordinamento è attualmente limitato alla stessa riga. (Da confermare: se sono supportati gli spostamenti tra righe diverse.)
Clonare un Elemento
Passando il cursore su qualsiasi oggetto puoi clonarlo insieme a tutto ciò che contiene. Tutte le impostazioni e gli oggetti verranno duplicati e aggiunti sotto.
Eliminare un Elemento
Passa il cursore sull'oggetto e seleziona l'icona del cestino. Puoi usare Annulla/Ripristina per ripristinarlo se necessario.
Layer
I Layer ti aiutano a visualizzare tutti gli oggetti e come sono annidati nella gerarchia del Sito Web. Utile quando hai spostato un oggetto nel posto sbagliato o lo hai nascosto sia dalla vista mobile che da quella desktop.
Pagine
Visualizza e naviga verso altre pagine web all'interno del tuo Funnel o Sito Web dalla scheda delle pagine. Puoi accedere a questa scheda sia dalla barra di navigazione destra che da quella centrale del site builder.
Tracking Code
Se vuoi aggiungere un tracking code nell'intestazione o nel footer della tua pagina web, puoi farlo dalla pagina Tracking Code.
Custom CSS
Puoi aggiungere CSS personalizzato al tuo sito web dalla scheda Custom CSS. Consulta uno sviluppatore per creare un codice adatto alle tue esigenze specifiche.
Typography
Puoi modificare il font predefinito per i titoli e i contenuti della tua pagina web, nonché i colori del testo e dei link dalla sezione typography.
Background
Per cambiare l'immagine o il colore di sfondo predefinito della tua pagina web seleziona la scheda Background. Questo aggiungerà uno sfondo dietro le tue sezioni.
Vuoi impostare uno sfondo video per una Sezione? Scopri come qui: Video Background
Impostazioni Pop Up
La maggior parte degli utenti non ama i pop-up, ma la triste realtà è che convertono ancora molto bene. Quando vuoi aggiungere un popup, puoi farlo dalla sezione Pop Up. Dopo averlo selezionato, usa il menu delle impostazioni sulla destra per modificarne le proprietà.
Puoi mostrare un popup aggiungendo un pulsante e impostando la sua azione per attivare il popup. Puoi anche usare le impostazioni del popup per "Show Popup on" all'uscita dalla pagina o con ritardi temporali — seleziona il popup e visualizza le impostazioni sul lato destro.
SEO Meta Data
Qui puoi modificare i metadati SEO, che appariranno nei risultati dei motori di ricerca, nelle impostazioni della scheda del browser e quando condividi il link del tuo sito. Configurare le impostazioni SEO aiuta i motori di ricerca a trovare il tuo sito e aiuta gli utenti a fidarsi del link.
Anteprima del Codice Personalizzato
Se hai del codice personalizzato sul tuo sito e questo è stato installato correttamente, questo pulsante lo carica in modo da poterlo vedere all'interno del builder. Se il codice personalizzato non funziona come previsto, consulta uno sviluppatore.
Modalità 2 Colonne vs Modalità Auto
Quando usi il builder puoi scegliere di avere il pannello a comparsa sulla destra sovrapposto alla pagina web, oppure impostarlo in modalità a due colonne: la prima colonna è la pagina web, la seconda è il pannello delle impostazioni.
Annulla/Ripristina
Puoi annullare o ripristinare le tue azioni in alto a destra nella barra di navigazione del site builder.
- Annulla/Ripristina ora cattura le modifiche effettuate non solo sulla pagina principale, ma anche all'interno dei popup e delle impostazioni globali come tipografia e tracking code.
- Quando si annullano o ripristinano modifiche che riguardano un popup, il builder apre automaticamente il popup pertinente.
- Per gli elementi di testo, le modifiche vengono raggruppate in modo intelligente, evitando passaggi di annullamento inutili per ogni pressione di tasto.
Nota: Annulla/Ripristina è basato sulla sessione. Se ricarichi la pagina o lasci il builder, potresti non poter annullare le modifiche precedenti. Le Versioni sono ottime per ripristinare versioni precedenti del sito.
Versioni, Anteprima, Salva e Pubblica
In alto a destra nel site builder trovi i pulsanti versioni, anteprima e salva.
- Versions - accedi alle versioni precedentemente salvate del tuo sito. Utile per visualizzare o ripristinare versioni precedenti.
- Preview - crea una versione di anteprima della pagina per vederla come se fosse live. Ottimo per testare le modifiche recenti.
- Save - salva una versione non pubblicata del tuo sito. Questa versione viene sovrascritta ad ogni salvataggio ed è diversa dalla versione live pubblicata. I visitatori non vedranno le modifiche finché non vengono pubblicate.
- Publish - attiva la versione corrente salvata rendendola live su internet. I visitatori vedranno la versione pubblicata più recente.
Modificare la Vista Mobile del tuo Sito
Ogni site builder ha sia una vista mobile che una desktop. A meno che tu non modifichi un oggetto, le due viste saranno identiche. Poiché le schermate mobile e desktop hanno dimensioni diverse, dovrai adattare la vista mobile per offrire la migliore esperienza ai visitatori da smartphone.
Modalità Mobile
In cima all'editor trovi un pulsante per la Desktop Mode e uno chiamato Mobile Mode. Selezionando "Mobile Mode" passerai all'editor della vista mobile del tuo sito.
Tutti gli oggetti sono visibili sia su mobile che su desktop per impostazione predefinita. Puoi tuttavia modificare questa impostazione.
Modificare la Visibilità degli Oggetti per Mobile/Desktop
Puoi modificare la visibilità dei tuoi elementi con l'impostazione di visibilità. Seleziona qualsiasi oggetto, vai alle impostazioni, poi nelle impostazioni avanzate.
Dopo aver modificato la visibilità, vedrai gli elementi solo in base a come li hai impostati. Se hai rimosso Desktop, vedrai l'elemento solo nell'editor mobile e nella vista mobile live del sito.
Impostazioni di Responsività Mobile
All'interno delle impostazioni dell'oggetto troverai i toggle di responsività mobile che ti permettono di modificare le impostazioni di un oggetto in modo unico per mobile o desktop. Puoi cambiare l'aspetto nella vista desktop, poi passare alla vista mobile e modificare le impostazioni mobile in modo indipendente.
Troverai impostazioni di responsività mobile in diverse impostazioni degli oggetti. Stiamo continuamente lavorando per aggiungerne altre.
Consigli Pro per la Modifica in Modalità Mobile
Completa prima la Desktop Mode: Nella maggior parte dei casi, completare la versione desktop rende più semplice la modifica della vista mobile.
Menu di Navigazione Mobile: Se hai un menu di navigazione, crea una Sezione Globale con visibilità solo Mobile da aggiungere alla versione mobile di ciascuna pagina. Lo stesso vale per il menu Desktop.
Duplica un Oggetto e Cambia la Visibilità: Se non riesci a far sembrare una sezione buona su mobile senza rovinare il desktop, crea una sezione specifica per mobile usando la funzione "duplica". Poi cambia la visibilità di una su solo desktop e dell'altra su solo mobile.
Lo sapevi? Puoi vedere la vista mobile del tuo sito dal tuo computer! Scopri come qui.
Impostazioni Sito e Pubblicazione
Ora che il tuo sito è costruito, esaminiamo le impostazioni backend.
Pagine/Passi del Sito
Qui si trovano tutte le pagine o i passi del tuo sito. Puoi modificare o visualizzare in anteprima una pagina da qui. È qui che atterri prima di entrare nel Site Builder e quando ne esci.
Collegare un Prodotto alla Pagina del Sito (Order Form)
Per usare i moduli d'ordine sul tuo sito, devi collegare un prodotto creato in HITLEAD alla tua pagina specifica. I prodotti devono essere aggiunti alla pagina che il visitatore utilizzerà per il checkout.
Nei Siti Web, clicca sui tre puntini in alto a destra della pagina, poi seleziona "products". Per i Funnel, seleziona il passo, poi seleziona "products" nella scheda in alto a destra.
Dopo essere arrivato alla scheda Products per una pagina, aggiungi il Prodotto HITLEAD. Se non ne è già stato creato uno nel tuo Sub-Account, dovrai crearne uno. Puoi saperne di più sulle nostre funzionalità Pagamenti qui.
Statistiche del Sito
Le statistiche ti forniscono informazioni sul numero di visualizzazioni di pagina, opt-in, vendite e guadagni. Scopri di più sulle statistiche qui: Understanding Stats.
Vendite del Sito
Mostra ogni transazione avvenuta sui tuoi siti. Per i siti Versione 2, questa sezione è stata spostata nella scheda Pagamenti > seleziona poi le schede Ordini e Transazioni.
Impostazioni del Sito
Le impostazioni del sito ti permettono di collegare il tuo dominio, aggiornare il percorso predefinito, aggiungere una favicon e altro ancora.
Name - il nome che dai al tuo sito. Non appare ai clienti, è solo per uso interno.
Domain - il dominio che assegni al tuo sito web. Senza un dominio, le persone non potranno visitare il tuo sito.
Path - il percorso predefinito o l'estensione del tuo sito. Per esempio: HITLEAD.com/about → il "/about" è il percorso. Ogni pagina avrà il suo percorso e non possono esserci due pagine con lo stesso percorso.
Favicon - la piccola icona che appare in cima alle schede del browser. Devi aggiungere un URL immagine condivisibile; caricherà la favicon per tutte le pagine del sito. Scopri come caricare e copiare il link condivisibile in HITLEAD qui (LINK ALLE FAQ).
Head tracking code - installa un tracking code a livello di sito nell'intestazione.
Body tracking code - installa un tracking code a livello di sito nel corpo.
Payment mode - se hai prodotti collegati al sito, puoi passare la modalità di pagamento a test o live. La modalità test ti permette di usare le carte di test Stripe per eseguire un test. Tuttavia, avvicinandosi al lancio, è consigliato effettuare un acquisto live.
Image Optimization - adatta automaticamente le immagini per caricarsi più velocemente. È attiva per impostazione predefinita e non è consigliato disabilitarla.
Optimise Javascript - abilita questa opzione per migliorare il caricamento della pagina. Il Javascript esterno verrà lazy hydrated per migliori prestazioni.
GDPR Complaint Fonts - rimuove tutti i font per aiutare il sito a diventare più conforme alle normative. Consulta sempre un avvocato per assicurarti di essere pienamente conforme.
Chat Widget - il tuo Chat Widget può essere personalizzato in Sites > Chat Widget. Abilitandolo, verrà distribuito su tutti i tuoi siti web. Per distribuirlo su pagine specifiche, tienilo disabilitato e copia il codice nelle pagine che vuoi. Scopri di più qui: HITLEAD Chat Widget: Come Aggiungerlo alle Tue Pagine in Pochi Minuti
Impostazioni di Pubblicazione/Pagina
Per cambiare il nome di un passo o di un sito e il percorso: nel site builder clicca sui tre puntini e seleziona impostazioni. Nei Funnel, seleziona il passo poi seleziona la scheda "Publishing".
Da qui puoi modificare il nome e il percorso. Se il percorso esiste già sul tuo dominio, verranno aggiunti dei numeri in quanto non possono esserci percorsi ripetuti.
Domande Frequenti
D: Cosa sono le Sezioni Globali?
Le sezioni globali sono sezioni salvate che puoi usare su più pagine. Qualsiasi modifica apportata a una sezione globale, dopo il salvataggio, si aggiornerà automaticamente su tutte le pagine in cui è utilizzata. Un ottimo esempio è l'Intestazione/Footer del tuo sito web.
Per crearla: passa il cursore su una sezione, clicca sull'icona Salva, dai un nome, seleziona "Global Section", poi clicca Save.
Per aggiungere una Sezione Globale: clicca sull'icona "+Add Element" in alto a destra nel builder, poi seleziona > Global Section > seleziona la tua sezione globale.
D: Cosa sono le Sezioni Template?
Simile a una Sezione Globale, una Sezione Template può essere salvata e aggiunta successivamente nella stessa pagina web o in un'altra. Le modifiche apportate non aggiorneranno i template o gli altri punti in cui il template è stato aggiunto.
D: Cosa sono i Funnel?
Il termine Funnel nel marketing indica una serie di siti web usati per acquisire lead. I Funnel hanno degli "steps" che ti permettono di visualizzare una serie di siti web che un potenziale cliente visiterà. Per esempio, in un Funnel di prenotazione:
- Landing Page – dove offri qualcosa che i Contatti possono scaricare in cambio delle loro informazioni di contatto.
- Pagina di Prenotazione – dopo che un Contatto compila un Form, lo ringrazi e fissi una chiamata con lui.
- Pagina di Ringraziamento per la Prenotazione – dopo che il cliente ha prenotato la chiamata, gli mostri i prossimi passi.
I Funnel servono di solito a uno scopo specifico, come offrire un lead magnet o prenotare un appuntamento.
D: Come vedere la Vista Mobile di un Sito Web sul Desktop?
Puoi vedere la vista mobile di qualsiasi sito web dal tuo desktop. Fai clic con il tasto destro sulla pagina web, clicca su "inspect", poi passa dalla vista desktop a quella mobile. Guarda la freccia rossa e le immagini qui sotto.
D: Come caricare e ottenere un link immagine condivisibile in HITLEAD?
All'interno di un Sub-Account vai in Impostazioni > poi Media. Poi seleziona "Upload File" nell'angolo in alto a destra della libreria media.
Dopo aver caricato l'immagine, fai clic con il tasto destro per copiare il link. Usa questo link quando è richiesto un URL media condivisibile. Per esempio, nelle Impostazioni del Sito, la Favicon richiede un URL media condivisibile.
Questo articolo è stato utile?