Sitonline ti da la possibilità di scegliere tra i nuovi Template Responsive, modelli grafici personalizzabili che si adattano automaticamente alle dimensioni del supporto utilizzato (desktop, tablet, smartphone). Con i nuovi template Responsive, infatti, gli elementi che compongono ogni pagina (logo, testi, immagini…) si spostano a seconda della risoluzione, in modo tale da essere sempre correttamente visibili, senza bisogno di modificare le impostazioni del tuo sito. Per verificare la responsività del sito basterà ridimensionare la finestra del browser utilizzato.

Trovi tutti i template Responsive entrando nella sezione Design del Pannello Sito e cliccando sul pulsante Responsive, ma anche all’inizio dell’elenco dei template Personalizzabili, che puoi visualizzare cliccando sul pulsante Personalizzabili. Come i template Personalizzabili, anche i Responsive hanno l’angolo in basso a destra arancione, ma si distinguono da questi grazie alla fascetta verde in alto a sinistra, con su scritto DESIGN RESPONSIVE.

Una volta selezionato il template Responsive che preferisci, potrai cominciare a personalizzarlo entrando nelle diverse sezioni (Template, Struttura, Font, Sfondo, Colori, Logo, Testata) che compongono l’editor grafico, nella barra laterale del pannello sito. Come i template Personalizzabili, anche i template Responsive ti consentono di personalizzare ogni parte del sito modificando, ad esempio, lo sfondo, il font e i colori, in più ti permettono di scegliere tra modelli diversi di Struttura per le Pagine e per la Home e tra molti nuovi Tipi di transizione per personalizzare la Testata del tuo sito.

A differenza dei template Personalizzabili e dei Modelli grafici 1024 pixel, i Template responsive sono privi della sidebar, per questa ragione nella sezione Impostazione Generali, non è presente la sezione dedicata all’attivazione degli Strumenti social virali quali Facebook, Twitter e Flickr, integrabili all’interno dei redbox, ma è presente solo il Tool di condivisione.

  Per avere tutti i dettagli sui Template Personalizzabili leggi questo articolo

Dopo aver selezionato il template Personalizzabili che più ti piace come base di partenza, puoi iniziare a personalizzalo grazie al nuovo editor visuale. L’editor dei modelli grafici professionali compare nella barra laterale del pannello, quando ti trovi nella sezione Design e hai attivo uno di questi template.

Basta poco per inserire uno sfondo a tutto schermo, modificare la posizione degli elementi e del menù di navigazione, spostare il logo, cambiare i colori, il carattere di tutti i testi del sito e molto altro ancora.

Tutte le funzioni dei nuovi template Personalizzabili sono:

• Struttura: consente di scegliere come posizionare tutti gli elementi che compongono la struttura del sito, in home page e in tutte le altre pagine, come la posizione della colonna laterale e del menù di navigazione. Per l’home page è possibile scegliere delle configurazioni avanzate, per ottenere un effetto home splash o una modalità presentazione.
• Font: per modificare i colori e caratteri di ogni elemento testuale presente nel sito. Permette di cambiare la formattazione di tutti i testi con un solo click, scegliendo tra un set di caratteri pensati da web designer professionisti, oppure di agire su ogni singolo elemento. Grazie alle Opzioni avanzate, puoi modificare anche la dimensione dei caratteri: ti basta cliccare sulla piccola freccia a sinistra del tipo di carattere che intendi cambiare.
• Sfondo: puoi cambiare lo sfondo del modello grafico scegliendo tra i background della nostra galleria oppure caricando la tua immagine o un pattern personale. Consente di scegliere lo sfondo per la home page e quello per tutte le altre pagine, oltre che applicare vari effetti e modificare le opzioni di posizionamento.
• Colori: con questa opzione hai la possibilità di scegliere i colori di tutto il template accedendo a set già pronti, oppure, sempre cliccando su Opzioni avanzate, di cambiare i colori di ogni singolo elemento grafico.
• Logo: per inserire un logo personale o selezionarne uno dalla nostra galleria. Puoi anche scegliere se ridimensionarlo automaticamente per adattarlo al meglio al modello grafico o nasconderlo del tutto.
• Testata: consente di caricare e selezionare le immagini della testata grafica del sito, alla quale possono essere applicati diversi effetti grafici animati e varie opzioni, come la possibilità di nasconderla o di attivarla solo in home page.

Personalizzare il design del tuo sito non è mai stato così semplice e divertente.

Per avere informazioni sui Modelli Grafici tradizionali leggi questo articolo

Se hai selezionato un template Responsive o un template Personalizzabile , grazie a quest’opzione puoi scegliere come posizionare tutti gli elementi che compongono la struttura del sito. Per farlo puoi selezionare uno dei modelli predefiniti (5 per i template Responsive e 6 per i template Personalizzabili), oppure cambiare manualmente le varie opzioni disponibili:

• centrare il logo nel sito
• spostare la posizione della colonna laterale a destra o a sinistra (solo per template Personalizzabili)
• nascondere il titolo del sito
• nascondere la descrizione del sito
• nascondere il campo di ricerca

Tramite Struttura puoi modificare la configurazione di tutte le pagine del sito o anche della sola home page, per ottenere un effetto home splash o una modalità presentazione. Per maggiori dettagli su come fare leggi l’articolo Home page Speciali.

Cosa fondamentale per usare quest’opzione è che nel sito sia attivo un template Responsive o Personalizzabile, che come tutti gli altri template offerti da Sitonline è gratuito e incluso in tutti i pacchetti.
Se non l’hai attivato, entra nella sezione Design del tuo Pannello Sito e scegli un Modello Grafico che abbia la fascetta verde in alto a destra e/o l’angolo in basso a destra arancione, oppure clicca sul pulsante Responsive o sul pulsante Personalizzabile, per visionare i rispettivi elenchi completi tra cui scegliere il tuo template.

Tutte le opzioni di modifica dell’home page speciale si trovano all’interno di Design.

Primo passo per modificare l’home page è cambiare la struttura della pagina, selezionando l’apposita voce dalla sezione Design.
Nella finestra Struttura sono presenti due categorie: Pagine Sito, per modificare la configurazione di tutte le pagine, Home per cambiare quella della sola pagina iniziale. Clicca quindi su Home per scegliere una delle 8 configurazioni disponibili per la struttura della home page. La prima configurazione non attiverà una Home Speciale, in quanto si tratta della disposizione standard.

Se hai attivato un template Responsive o un template Personalizzabile, oltre a modificare la struttura, potrai anche inserire un nuovo Sfondo in home page, mettendo ad esempio un’immagine o una texture che sia diversa da quella utilizzata in tutte le altre pagine.

Puoi selezionare uno sfondo in home page, solo se hai attivato una struttura speciale per la home page e non se è attiva quella standard (la prima nella finestra Home)

Per farlo devi sempre entrare in Design, premere Sfondo e selezionare la finestra Home. Scegli il background che più ti piace dalla nostra gallery, oppure caricane uno nuovo e applica all’immagine tutte le opzioni che preferisci.

Home Splash nei vecchi template

Se nel sito hai attivo un vecchio template (con dimensione 1024 pixel), e non un template Personalizzabile, puoi comunque personalizzare la prima pagina, grazie all’opzione Home Splash.
La home splash ti consente di creare una homepage in modalità presentazione.
Selezionando quest’opzione, nella prima pagina del tuo sito verrà visualizzato unicamente l’header grafico e il menù principale di navigazione.

Tutti i red box e le App vengono nascosti e la pagina risulta più compatta.

Per attivare l’home splash devi accedere al Pannello Sito ed in seguito Home Splash, che compare in alto a sinistra nella pagina.

Per ottimizzare la visualizzazione della pagina in modalità presentazione, è consigliato scegliere una testata big, per farlo basta cliccare su MODIFICA TESTATA  e sulla destra appariranno le due opzioni testata big e testata slim.

La home splash, oltre a rendere chiara e ordinata la prima pagina del sito, può essere molto utile, per esempio, per indicare che il sito è ancora in costruzione.

Qualora decidessi di tornare alla visualizzazione classica della homepage, è sufficiente accedere al pannello sito, premere modifica sito ed in seguito Home Full.

Cliccando su Font puoi scegliere di cambiare la formattazione di tutti i testi del sito con un solo click, scegliendo tra set di caratteri e colori predefiniti pensati da web designer professionisti.
Se invece desideri apportare delle modifiche mirate a determinati elementi del sito (come ad esempio i testi dei red box o le voci del menù), puoi farlo premendo il bottone Opzioni avanzate. Grazie alle opzioni avanzate, puoi modificare anche la dimensione, lo stile e il colore dei caratteri: ti basta cliccare sulla piccola freccia a sinistra della voce che intendi cambiare.

Per avere tutti i dettagli sui Template Responsive leggi questo articolo

Per avere tutti i dettagli sui Template Personalizzabili leggi questo articolo.

E’ possibile inserire un’immagine differente per l’home page e per tutte le altre pagine.
Puoi cambiare lo sfondo del modello grafico scegliendo tra i background della nostra galleria oppure caricando la tua immagine o un pattern personale, cliccando il bottone Carica sfondo oppure Altri sfondi.
Una volta scelte le immagini il sistema permette di applicare vari effetti allo sfondo:

• nascondere l’immagine di sfondo
• applicare alla foto un filtro semitrasparente
• visualizzare lo sfondo con un effetto sfocato
• espandere l’immagine a schermo intero
• mantenere le dimensioni originali dell’immagine e ripererla più volte nello sfondo
• scegliere il posizionamento dell’immagine nello sfondo
• bloccare la foto ed avere uno sfondo fisso

Per avere tutti i dettagli sui Template Responsive leggi questo articolo

Per avere tutti i dettagli sui Template Personalizzabili leggi questo articolo.

Con questa opzione hai la possibilità di scegliere i colori di tutto il template, accedendo a set già pronti, oppure decidendo tu stesso i colori di ogni singolo elemento grafico (sfondi, titoli, bordi, link, testi, ecc…), premendo il link Opzioni avanzate (1). Puoi scegliere il colore tramite l’apposito selettore, o inserire direttamente il codice colore (es. #FFFFFF).

Per avere tutti i dettagli sui Template Personalizzabili leggi questo articolo.

Non stai usando un Template Responsive o Personalizzabile?

Se hai intenzione di cambiare il colore del tuo sito, mantenendo invariato il vecchio modello grafico impostato, clicca il pulsante modifica la testata, bottone presente nella sola home page.

Sulla destra della finestra trovi l’opzione per cambiare colore, di fianco all’icona che raffigura un pennello e, inoltre, potrai scegliere se utilizzare la testata (l’header grafico della tua pagina) in versione Slim (sottile, alta 120 pixel) oppure Big (alta 240 pixel).

Se decidi di cambiare il colore del sito o modificare l’altezza dell’header, in automatico verranno impostati i font (caratteri) del titolo e l’immagine di testata predefiniti per quella declinazione di colore. Queste impostazioni sono facilmente modificabili accedendo sempre all’interfaccia di modifica la testata.

Il cambio di colore effettuato dalla sezione MODIFICA LA TESTATA DEL TUO SITO, non farà azzerare le modifiche effettuate al codice html del sito.

In questo modo si viene portati alla sezione Logo di Design, dalla quale puoi gestire tutte le funzioni di questa opzione o, viceversa,  cliccando su Design e poi su Logo.

Per inserire un nuovo logo clicca il bottone Carica il tuo logo, mentre per selezionarne uno già esistente dalle tue immagini personali o dalla nostra galleria, premi Altri loghi.

Tramite questa sezione puoi anche scegliere se far ridimensionare automaticamente l’immagine dal sistema, perché si adatti al meglio al modello grafico, grazie alla funzione Ridimensiona logo, oppure toglierlo del tutto attivando con l’opzione Nascondi logo.

Per avere tutti i dettagli sui Design TOP leggi questo articolo.

Non stai usando un Template Responsive o Personalizzabile?

Se nel sito non hai attivo un Template Responsive o un Template Personalizzabile, per cambiare il logo devi cliccare il bottone modifica la testata, presente nella sola home page di gestione contenuti.

Fra le opzioni visualizzate sulla destra della finestra è presente il riquadro inserisci un logo (cambia logo se ne hai già uno attivo) e cliccando questa opzione verrai portato alla pagina successiva nella quale potrai proseguire nella scelta dell’immagine.

Se vuoi utilizzare come logo un’immagine personale, clicca su i tuoi loghi. Scegli fra le tue immagini personali già caricate oppure carica una nuova immagine cliccando sfoglia.

Dopo aver selezionato un logo puoi decidere se far ridimensionare il logo alla piattaforma stessa (scelta consigliata, in quanto il sistema adatta l’immagine automaticamente, al massimo in 120 x 84 px), oppure se mantenere le dimensioni originali (opzione consigliata a utenti esperti).
I formati supportati sono jpeg, gif (anche animate) e png.

Nel caso in cui tu non abbia intenzione di utilizzare un logo personale, puoi scegliere uno tra gli oltre 250 presenti nella gallery messa a disposizione dalla piattaforma.
Poi trovare il logo ideale ricercandolo per categoria (geometrici, persone, astratti, ecc…) oppure direttamente per colore, premendo il link gamma colori.

Se non vuoi che la tua pagina sia dotata di un logo, ti basterà accedere al pannello modifica la testata e premere la X rossa posta a fianco della voce cambia logo.

Questa funzione consente di caricare e selezionare le immagini della testata grafica, premendo il bottone Personalizza testata.
La prima cosa da fare è selezionare l’immagine da te desiderata, cliccando sulla voce cambia immagine.

Puoi scegliere se selezionare una tra le oltre 500 immagini presenti nella nostra gallery (suddivisa per categorie) oppure caricarne una personale, scegliendola dal tuo computer. I formati accettati sono i seguenti: .jpg (jpeg), .png oppure .gif.

Una volta caricate le immagini puoi decidere se applicarvi diversi effetti grafici, scegliendo quello che desideri dal menù a tendina e impostando anche il tempo d’attesa tra una foto e l’altra.

Sempre dalla sezione Testata, presente nel menù Design, puoi scegliere se nascondere la testata o attivare l’opzione per far si che si veda solo nella home page del tuo sito.

Per avere tutti i dettagli sui Template Responsive leggi questo articolo

Per avere tutti i dettagli sui Template Personalizzabili leggi questo articolo.

Non stai usando un Template Responsive o Personalizzabile?

Se stai usando un vecchio template, per cambiare l’immagine o la tipologia di header premi il bottone Modifica la testata, presente nella sola home page del tuo sito.

Trovi un‘anteprima dell’header, con sotto tre voci che variano a seconda del tipo di testata attualmente caricata.

Se il tuo sito ha una testata slide il menu sarà composto dalle seguenti opzioni:

• cambia immagini
• tipo rotazione
• testata singola

Mentre se il tuo sito ha una testata singola il menu sarà composto dalle seguenti opzioni:

• cambia immagine
• scegli animazione
• testata slide

Cliccando sulla voce cambia immagine puoi modificare la foto, caricandone una personale presente sul tuo pc, o scegliendone una presente nella nostra galleria immagini che ti mettiamo a disposizione. In questo caso ti diamo la possibilità di scegliere tra testata Slim (sottile, alta 120 pixel) oppure Big (alta 240 pixel).

Per poter applicare un’animazione all’immagine è necessario che questa abbia una delle seguenti dimensioni: 740 x 120 px per le Slim, oppure 740 x 240 px le Big.
Immagini di dimensioni differenti verranno automaticamente adattate.

Una volta selezionata la testata hai la possibilità di scegliere l’animazione più adatta, al fine di rendere più gradevoli le pagine del tuo sito.

Se vuoi invece dotare il tuo sito di una testata con immagini multiple, clicca testata slide.
Con quest’opzione potrai inserire fino a tre immagini per la testata del sito e scegliere l’animazione che più preferisci (dissolvenza, slide, zoom, ecc…). La testata con immagini multiple è disponibile solo per l’Home Page, mentre nelle altre pagine avrai, come immagine fissa, la prima delle tre immagini che avrai selezionato.

Se non vuoi che la tua pagina sia dotata di un header, ti basterà premere la X rossa rimuovi testata. Le immagini personali verranno comunque mantenute tra i file caricati.

Ti ricordiamo che se in futuro deciderai di cambiare modello grafico o modificare l’altezza dell’header, in automatico varranno azzerate le impostazioni del titolo e della testata.

Per ogni categoria presente nel menu a tendina, ti vengono proposti diversi modelli grafici (o template), disponibili  in tre diverse colorazioni.

Una volta completata la creazione del sito, puoi decidere di cambiare il modello grafico in qualsiasi momento, scegliendone uno tra gli oltre 400 disponibili nella sezione Design del Pannello Sito, organizzata per categorie d’appartenenza, scale cromatiche, template Responsive, template Personalizzabili, Preferiti e Ultimi:

• Ultimi: contiene i modelli più recenti;
• Responsive: è l’elenco completo e non filtrato dei template Responsive;
• Personalizzabili: è l’elenco completo e non filtrato dei template Personalizzabili;
• Colore: filtra i modelli in base al colore predominante;
• Categoria: propone una lista di modelli affini alla categoria merceologica di appartenenza.
• Preferiti: mostra tutti i template che hai indicato come tuoi favoriti

Per sostituire il template è sufficiente cliccare sull’anteprima di quello desiderato e il sistema provvede automaticamente alla sostituzione.

Per inserire un modello grafico nell’elenco dei tuoi Preferiti, devi cliccare la stella che compare in alto a destra nell’anteprima del template, quando gli posizioni sopra il puntatore del mouse. Per rimuoverlo dall’elenco invece devi deselezionare la stella.

I modelli grafici, oltre che nel loro aspetto generale e nello stile, differiscono tra loro anche per la disposizione del menù di navigazione (che può essere a destra, a sinistra o in alto), per dimensione e per disposizione dei blocchi principali (contenuto testuale principale e colonne di navigazione).

Ogni volta che cambi il modello grafico tutte le modifiche html e css apportate al sito (tranne quelle effettuate nei red box) verranno perse.

Cambiando invece il colore del template dalla finestra modifica la testata (presente in home page) non verranno perse le modifiche apportate al codice html e css.

Per avere informazioni sui Template Responsive leggi invece questo articolo

Per avere informazioni sui Template Personalizzabili leggi invece questo articolo